$30 off During Our Annual Pro Sale. View Details »

Fast sites with AMP

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

Other Decks in Technology

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