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 full-size slide

  2. KRISTARELLA.blog

    View full-size 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 full-size slide

  4. KRISTARELLA.blog
    16.6 MILLION

    View full-size slide

  5. 53 PERCENT
    3 SECONDS
    KRISTARELLA.blog

    View full-size slide

  6. KRISTARELLA.blog
    12 SECONDS

    View full-size slide

  7. KRISTARELLA.blog
    40 PERCENT

    View full-size slide

  8. AMP
    ACCELERATED MOBILE PAGES
    KRISTARELLA.blog

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

  32. KRISTARELLA.blog

    View full-size slide

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

    View full-size slide

  34. KRISTARELLA.blog
    STORIES & A WALK
    THROUGH

    View full-size slide

  35. AMP.DEV
    LEARN MORE
    KRISTARELLA.blog

    View full-size slide