Accelerated Mobile Pages - WordCamp Kansas City

ACCELERATED MOBILE PAGESWORDCAMP KANSAS CITY 2016

JEREMY GREEN @GREENHORNET79

MORE SEARCHES ON MOBILE THAN DESKTOP

THE PROBLEM

‣Slow loading

‣Non-responsive

‣Content shifting

PUBLISHERS

40% OF PEOPLE ABANDON A WEBSITE THAT TAKES MORE THAN 3 SECONDS TO LOAD.

Kissmetrics

STATS

‣Conversion rates suffer

‣Sites become bogged down with ads

‣Need to generate revenue to stay in business

THE SOLUTION

GOOGLE AMP

‣Developed hand in hand with publishers, both large and small (including WordPress)

‣Open source project so anyone can contribute

‣Built for news related content (for now)

2 PRIMARY GOALS

SPEED!

4X FASTER

10X LESS DATA

USER EXPERIENCE

BEFORE

AFTER

‣Benefits the user because they get the content they want, fast

‣Benefits the publisher because readers churn through more content, increasing opportunity

‣Benefits Google because conversion rates increase

SERPS

‣The “Carousel”

‣ Includes thumbnail, title, and publish time

‣Swipe through results

125 MILLION INDEXED AMP

PAGES

WHAT IS AMP?

‣Open source initiative that aims to provide mobile optimized content

‣Subset of HTML5

‣3 parts: AMP HTML, AMP JS, Google AMP cache

AMP HTML

‣HTML with some restrictions for reliable performance

‣ Includes extensions for building rich content beyond basic HTML

‣<amp-img>: provides full srcset support even in browsers that don’t support it (responsive images)

<amp-social-share type=“twitter">

</amp-social-share>

AMP JS

‣Ensures fast rendering of AMP HTML pages

‣Manages resource loading

‣ Implements all of AMP’s best performance practices

‣All external scripts are async

‣Static resource sizing

‣CSS portion control

‣Resource Prioritization: Downloads ads with lower priority

GOOGLE AMP CACHE

‣Delivers the AMP HTML pages

‣Lives on Google’s CDN

‣Usually updates within seconds

GETTING STARTED

‣https://wordpress.org/plugins/amp/

‣ Install WordPress AMP plugin

‣Generates AMP versions for all posts

‣*Pages and archives not currently supported

VALIDATE

‣ In Chrome, go to URL and add #development=1 to the end

‣Open Chrome Dev Tools

‣Check console for validation errors or messages

STYLING

‣https://wordpress.org/plugins/glue-for-yoast-seo-amp/

SEARCH CONSOLE

IS AMP FOR ME?

‣ Is it news related content?

‣Do you publish regularly?

‣Are you on WordPress?

YES!

OTHER CONTENT?

RESOURCES

‣https://amphtml.wordpress.com/2016/05/16/amp-at-google-io/

‣https://www.ampproject.org/roadmap/

‣https://www.ampproject.org/roadmap/

‣https://deliciousbrains.com/amp-wordpress-google-accelerated-mobile-pages/

QUESTIONS?

JEREMY GREEN @GREENHORNET79