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

Fast sites with AMP

Kristen Symonds
October 05, 2019
Technology
0
150

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
84
Build a site in 20 minutes
kristarella
1
180
(Not) Just Another WP REST API Talk
kristarella
0
100
When to put your clients on WordPress.com
kristarella
0
98
Fix a broken WordPress site
kristarella
0
150
Getting Started With WordPress
kristarella
0
170
WordPress Hosting
kristarella
0
88
Lessons learned from a year of customer support
kristarella
0
340

Other Decks in Technology

See All in Technology
240622_WACATE2024夏_BPPセッション_虚実皮膜のWACATEハイ
mkwrd
PRO
1
180
Cloud Nativeを支える要素技術・プロダクト・プラクティスの歩み / infrastudy-returns-01-amsy810
masayaaoyama
0
260
鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック
tonkotsuboy_com
9
3.6k
ぶっちゃけて話すための場作り / Creating an Environment for Open and Honest Communication
piyonakajima
6
2.3k
PHPカンファレンス福岡2024 【超特急】SQLアンチパターン総おさらいLT
ytsuzaki
0
340
AI Risk Solution Study
tkhresk
0
110
iPaaS入門＆自社サービスで利用してみた
ippei2480
0
130
楽ありゃ苦もあるモノレポ化 / Goodness and Difficulties of Monorepo
henryofficial
0
270
「ナンモワカラン」から「チョットワカル」へ！Private CA Connector for SCEPについて話します
tokushun
0
220
負荷テスト on AWS のすすめ (AWS Summit Japan 2024 - Ministage session)
mabuchs
0
100
お手並み拝見にしないオンボーディング
zuckey_17
2
1.1k
Autify Company Deck
autifyhq
1
34k

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
58
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
359
22k
A designer walks into a library…
pauljervisheath
201
24k
Scaling GitHub
holman
457
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
28k
WebSockets: Embracing the real-time Web
robhawkes
59
7.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
15
8.5k
Fireside Chat
paigeccino
24
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
247
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
28
1.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
7.1k
Navigating Team Friction
lara
180
13k

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