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

Fast sites with AMP

Avatar for Kristen Symonds Kristen Symonds
October 05, 2019
Technology
0
190

Fast sites with AMP

An introduction to the AMP components framework and how to use it with WordPress.
Avatar for Kristen Symonds

Kristen Symonds

October 05, 2019
Tweet

More Decks by Kristen Symonds

See All by Kristen Symonds
WordPress Themes & Child Themes
Avatar for Kristen Symonds kristarella
0
140
I <3 WP CLI
Avatar for Kristen Symonds kristarella
0
120
Build a site in 20 minutes
Avatar for Kristen Symonds kristarella
1
230
(Not) Just Another WP REST API Talk
Avatar for Kristen Symonds kristarella
0
130
When to put your clients on WordPress.com
Avatar for Kristen Symonds kristarella
0
130
Fix a broken WordPress site
Avatar for Kristen Symonds kristarella
0
200
Getting Started With WordPress
Avatar for Kristen Symonds kristarella
0
220
WordPress Hosting
Avatar for Kristen Symonds kristarella
0
130
Lessons learned from a year of customer support
Avatar for Kristen Symonds kristarella
0
410

Other Decks in Technology

See All in Technology
スイッチのBMC、つかってますか？
Avatar for SONiC Users Group Japan sonic
0
370
正解のない未知(インボイス制度対応)をフルサイクル開発で乗り越える方法 / How to overcome the unknown invoice system with full cycle development
Avatar for CARTA Engineering carta_engineering
0
160
newmo の創業を支える Software Architecture と Platform Engineering
Avatar for Yuki Ito 110y
5
580
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
Avatar for kinocoboy kinocoboy2
1
560
kernelvm-brain-net
Avatar for らすぴー raspython3
0
650
猫でもわかるS3 Tables【Apache Iceberg編】
Avatar for Hiroo Katoh kentapapa
2
260
GPU 클라우드 환경에서의 회복탄력적 AI 운영 : 훈련 및 추론을 위한 견고한 아키텍처와 전략
Avatar for Jeongkyu Shin inureyes
PRO
0
110
Part1 GitHubってなんだろう？その２
Avatar for tomokusaba tomokusaba
2
830
SONiCで構築・運用する生成AI向けパブリッククラウドネットワーク
Avatar for SONiC Users Group Japan sonic
0
410
VitePress & MCPでアプリ仕様のオープン化に挑戦する
Avatar for Hal hal_spidernight
0
130
ユーザーコミュニティが海外スタートアップのDevRelを補完する瞬間
Avatar for M Yano nagauta
1
200
雑に疎通確認だけしたい...せや！CloudShell使ったろ！
Avatar for Ryotaro Harada alchemy1115
0
240

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.8k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
177
9.7k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
40
7.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
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