Fast sites with AMP

Fast sites with AMP

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

6c3841b9afcb4477898d4396a74024c1?s=128

Kristen Symonds

October 05, 2019
Tweet

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