Fast sites with AMP

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

Transcript

1. AMP ❤ WP
   FAST SITES WITH AMP
   KRISTARELLA.blog
   

   View Slide

2. KRISTARELLA.blog
   

   View Slide

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
   

   View Slide

4. KRISTARELLA.blog
   16.6 MILLION
   

   View Slide

5. 53 PERCENT
   3 SECONDS
   KRISTARELLA.blog
   

   View Slide

6. KRISTARELLA.blog
   12 SECONDS
   

   View Slide

7. KRISTARELLA.blog
   40 PERCENT
   

   View Slide

8. AMP
   ACCELERATED MOBILE PAGES
   KRISTARELLA.blog
   

   View Slide

9. KRISTARELLA.blog
   VISION
   A STRONG, USER-FIRST OPEN WEB FOREVER.
   

   View Slide

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.
    

    View Slide

11. KRISTARELLA.blog
    TEXT
    WHAT IS AMP?
    - “amp”, like “amplifier”
    - JS component library
    - amp-specific components via HTML tags
    - Websites, Stories, Ads, Email!
    

    View Slide

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
    

    View Slide

13. KRISTARELLA.blog
    TEXT
    HOW TO USE AMP COMPONENTS
    - Regular HTML document with
    - Load AMP JS
    - Load JS for additional components
    - See the Getting Started guide on amp.dev
    - And the Components Directory
    

    View Slide

14. KRISTARELLA.blog
    TEXT
    HOW TO USE AMP COMPONENTS
    - Regular HTML document with
    - Load AMP JS
    - Load JS for additional components
    - See the Getting Started guide on amp.dev
    - And the Components Directory
    
    

    View Slide

15. KRISTARELLA.blog
    TEXT
    HOW TO USE AMP COMPONENTS
    - Regular HTML document with
    - Load AMP JS
    - Load JS for additional components
    - See the Getting Started guide on amp.dev
    - And the Components Directory
    
    

    View Slide

16. KRISTARELLA.blog
    TEXT
    HOW TO USE AMP COMPONENTS
    - Regular HTML document with
    - Load AMP JS
    - Load JS for additional components
    - See the Getting Started guide on amp.dev
    - And the Components Directory
    

    View Slide

17. KRISTARELLA.blog
    TEXT
    FANCY COMPONENTS
    - Sidebar
    - Accordion
    - Flying Carpet
    - User consent
    

    View Slide

18. KRISTARELLA.blog
    TEXT
    FANCY COMPONENTS
    - Sidebar
    - Accordion
    - Flying Carpet
    - User consent
    

    View Slide

19. KRISTARELLA.blog
    TEXT
    FANCY COMPONENTS
    - Sidebar
    - Accordion
    - Flying Carpet
    - User consent
    

    View Slide

20. KRISTARELLA.blog
    TEXT
    FANCY COMPONENTS
    - Sidebar
    - Accordion
    - Flying Carpet
    - User consent
    

    View Slide

21. KRISTARELLA.blog
    TEXT
    FANCY COMPONENTS
    - Sidebar
    - Accordion
    - Flying Carpet
    - User consent
    

    View Slide

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
    

    View Slide

23. KRISTARELLA.blog
    TEXT
    JS TO REPLACE
    - Twitter widgets
    - Facebook Widgets
    - Sharing buttons
    - Slideshows
    - Lightbox
    

    View Slide

24. KRISTARELLA.blog
    TEXT
    JS TO REPLACE
    - Twitter widgets
    - Facebook Widgets
    - Sharing buttons
    - Slideshows
    - Lightbox
    height="300"
    layout="responsive"
    data-timeline-source-type="profile"
    data-timeline-screen-name="kristarella"
    data-tweet-limit="3">
    
    

    View Slide

25. KRISTARELLA.blog
    TEXT
    JS TO REPLACE
    - Twitter widgets
    - Facebook Widgets
    - Sharing buttons
    - Slideshows
    - Lightbox
    height="300"
    layout="responsive"
    data-href="https://www.facebook.com/
    wordcampsyd/"
    data-tabs="timeline">
    
    

    View Slide

26. KRISTARELLA.blog
    TEXT
    JS TO REPLACE
    - Twitter widgets
    - Facebook Widgets
    - Sharing buttons
    - Slideshows
    - Lightbox
    social-share>
    social-share>
    

    View Slide

27. KRISTARELLA.blog
    TEXT
    JS TO REPLACE
    - Twitter widgets
    - Facebook Widgets
    - Sharing buttons
    - Slideshows
    - Lightbox
    height="300">
    width="450"
    height="300">
    width="450"
    height="300">
    
    

    View Slide

28. KRISTARELLA.blog
    TEXT
    JS TO REPLACE
    - Twitter widgets
    - Facebook Widgets
    - Sharing buttons
    - Slideshows
    - Lightbox
    layout="nodisplay">
    role="button"
    tabindex="0"
    src="image1.jpg"
    width="200" height=“100">
    

    View Slide

29. KRISTARELLA.blog
    TEXT
    JS TO REPLACE
    - Twitter widgets
    - Facebook Widgets
    - Sharing buttons
    - Slideshows
    - Lightbox
    height="300">
    width="450"
    height="300">
    width="450"
    height="300">
    
    

    View Slide

30. KRISTARELLA.blog
    TEXT
    JS TO REPLACE
    - Twitter widgets
    - Facebook Widgets
    - Sharing buttons
    - Slideshows
    - Lightbox
    

    View Slide

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
    

    View Slide

32. KRISTARELLA.blog
    

    View Slide

33. KRISTARELLA.blog
    NO AMP AMP
    Desktop, No Throttling
    Mobile, Slow 4G
    

    View Slide

34. KRISTARELLA.blog
    STORIES & A WALK
    THROUGH
    

    View Slide

35. AMP.DEV
    LEARN MORE
    KRISTARELLA.blog
    

    View Slide