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

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. 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
  2. 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.
  3. KRISTARELLA.blog TEXT WHAT IS AMP? - “amp”, like “amplifier” -

    JS component library - amp-specific components via HTML tags - Websites, Stories, Ads, Email!
  4. 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
  5. 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
  6. 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>
  7. 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>
  8. 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
  9. 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
  10. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox
  11. 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>
  12. 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>
  13. 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>
  14. 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>
  15. 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>
  16. 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>
  17. KRISTARELLA.blog TEXT JS TO REPLACE - Twitter widgets - Facebook

    Widgets - Sharing buttons - Slideshows - Lightbox
  18. 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