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. 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