Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fast sites with AMP

Kristen Symonds
October 05, 2019
Technology
0
170

Fast sites with AMP

An introduction to the AMP components framework and how to use it with WordPress.

Kristen Symonds

October 05, 2019
Tweet

More Decks by Kristen Symonds

See All by Kristen Symonds
WordPress Themes & Child Themes
kristarella
0
110
I <3 WP CLI
kristarella
0
100
Build a site in 20 minutes
kristarella
1
210
(Not) Just Another WP REST API Talk
kristarella
0
110
When to put your clients on WordPress.com
kristarella
0
110
Fix a broken WordPress site
kristarella
0
170
Getting Started With WordPress
kristarella
0
190
WordPress Hosting
kristarella
0
110
Lessons learned from a year of customer support
kristarella
0
390

Other Decks in Technology

See All in Technology
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
830
Amazon Kendra GenAI Index 登場でどう変わる？ 評価から学ぶ最適なRAG構成
naoki_0531
0
100
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
160
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
360
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
500
ガバメントクラウドのセキュリティ対策事例について
fujisawaryohei
0
520
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
110
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
250
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
C++26 エラー性動作
faithandbrave
2
650
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
520

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Speed Design
sergeychernyshev
25
670
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Unsuck your backbone
ammeep
669
57k
Building Your Own Lightsaber
phodgson
103
6.1k
A Tale of Four Properties
chriscoyier
157
23k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
KATA
mclloyd
29
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k

Transcript

  1. AMP ❤ WP FAST SITES WITH AMP KRISTARELLA.blog

  2. KRISTARELLA.blog

  3. KRISTARELLA.blog INTERNET DEVICES USED AT HOME TABLET PHONE COMPUTER 0

    25 50 75 100 2014-15 2016-17 *ABS Household Use of Information Technology 2017

  4. KRISTARELLA.blog 16.6 MILLION

  5. 53 PERCENT 3 SECONDS KRISTARELLA.blog

  6. KRISTARELLA.blog 12 SECONDS

  7. KRISTARELLA.blog 40 PERCENT

  8. AMP ACCELERATED MOBILE PAGES KRISTARELLA.blog

  9. KRISTARELLA.blog VISION A STRONG, USER-FIRST OPEN WEB FOREVER.

  10. MISSION Provide a user-first format for web content, supporting the

    long- term success of every web publisher, merchant, and advertiser. KRISTARELLA.blog VISION A STRONG, USER-FIRST OPEN WEB FOREVER.

  11. KRISTARELLA.blog TEXT WHAT IS AMP? - “amp”, like “amplifier” -

    JS component library - amp-specific components via HTML tags - Websites, Stories, Ads, Email!

  12. KRISTARELLA.blog TEXT WHY IS IT USER-FOCUSED AND FAST? - no

    pop ups, or intrusive ads - content doesn't jump around - content isn't loaded until it's needed - minimal additional JS - 50kb CSS limit - AMP caches

  13. KRISTARELLA.blog TEXT HOW TO USE AMP COMPONENTS - Regular HTML

    document with <html ⚡> - Load AMP JS - Load JS for additional components - See the Getting Started guide on amp.dev - And the Components Directory

  14. KRISTARELLA.blog TEXT HOW TO USE AMP COMPONENTS - Regular HTML

    document with <html ⚡> - Load AMP JS - Load JS for additional components - See the Getting Started guide on amp.dev - And the Components Directory <script async src="https:// cdn.ampproject.org/v0.js"></script>

  15. KRISTARELLA.blog TEXT HOW TO USE AMP COMPONENTS - Regular HTML

    document with <html ⚡> - Load AMP JS - Load JS for additional components - See the Getting Started guide on amp.dev - And the Components Directory <script async custom-element="amp-social- share" src="https://cdn.ampproject.org/ v0/amp-social-share-0.1.js"></script>

  16. KRISTARELLA.blog TEXT HOW TO USE AMP COMPONENTS - Regular HTML

    document with <html ⚡> - Load AMP JS - Load JS for additional components - See the Getting Started guide on amp.dev - And the Components Directory

  17. KRISTARELLA.blog TEXT FANCY COMPONENTS - Sidebar - Accordion - Flying

    Carpet - User consent

  18. KRISTARELLA.blog TEXT FANCY COMPONENTS - Sidebar - Accordion - Flying

    Carpet - User consent

  19. KRISTARELLA.blog TEXT FANCY COMPONENTS - Sidebar - Accordion - Flying

    Carpet - User consent

  20. KRISTARELLA.blog TEXT FANCY COMPONENTS - Sidebar - Accordion - Flying

    Carpet - User consent

  21. KRISTARELLA.blog TEXT FANCY COMPONENTS - Sidebar - Accordion - Flying

    Carpet - User consent

  22. KRISTARELLA.blog THERE’S A PLUGIN FOR THAT HOW TO USE ON

    WP - Plugin started by Automattic, now with the AMP team - 3 modes: Standard, Transitional, Reader - Replaces HTML tags - Treeshake - Removes JS - Validation - Caching

  23. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox

  24. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox <amp-twitter width="200" height="300" layout="responsive" data-timeline-source-type="profile" data-timeline-screen-name="kristarella" data-tweet-limit="3"> </amp-twitter>

  25. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox <amp-facebook-page width="200" height="300" layout="responsive" data-href="https://www.facebook.com/ wordcampsyd/" data-tabs="timeline"> </amp-facebook-page>

  26. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox <amp-social-share type="twitter"></amp- social-share> <amp-social-share type="facebook"></amp- social-share>

  27. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox <amp-carousel width="450" height="300"> <amp-img src="images/image1.jpg" width="450" height="300"></amp-img> <amp-img src="images/image2.jpg" width="450" height="300"></amp-img> </amp-carousel>

  28. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox <amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox> <amp-img on="tap:lightbox1" role="button" tabindex="0" src="image1.jpg" width="200" height=“100"></amp-img>

  29. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox <amp-carousel lightbox width="450" height="300"> <amp-img src="images/image1.jpg" width="450" height="300"></amp-img> <amp-img src="images/image2.jpg" width="450" height="300"></amp-img> </amp-carousel>

  30. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox

  31. KRISTARELLA.blog HTTPS://REACHAMPLITUDEHOME.WPCOMSTAGING.COM TEST ENVIRONMENT - WP 5.2.2 - Plugins: -

    Akismet - AMP - Set to Standard - CoBlocks - Full Site Editing - Gutenberg - Jetpack - Site Kit - WooCommerce - WooCommerce Admin - WooCommerce Services - WooCommerce Stripe Gateway - Chrome & Lighthouse

  32. KRISTARELLA.blog

  33. KRISTARELLA.blog NO AMP AMP Desktop, No Throttling Mobile, Slow 4G

  34. KRISTARELLA.blog STORIES & A WALK THROUGH

  35. AMP.DEV LEARN MORE KRISTARELLA.blog