Get AMP’d: An Introduction To Accelerated Mobile Pages

• 

  Calvin French-Owen
  

On June 30th, 2016, Heavybit member company CircleCI held their monthly office hours in our San Francisco Clubhouse. Calvin French-Owen, co-founder of Segment, gave a talk on Google’s Accelerated Mobile Pages. You’ll find a video of the talk below, as well as further thoughts from Calvin.

There are plenty of examples of Google’s efforts to speed up the internet: everything from SPDY to Chrome to Google Fiber. Google has invested heavily in making the internet a better, faster place for billions of people across the world.

Data shows that people abandon websites after just three seconds if the content doesn’t load quickly. It’s simply not enough to shave milliseconds off server times when it takes a mobile device 10-20 seconds to load a website with complicated stylesheets, ads, and analytics tracking. As it turns out, it’s often the “last mile” of the network and page rendering that ends up slowing mobile pages down, to the point where they are sluggish and laggy.

That’s why Google created Accelerated Mobile Pages (AMP), an open source initiative to dramatically improve the performance of the mobile web. AMP provides a set of lightweight CSS and JS rules so that your pages are able to load nearly instantly.

AMP uses a few clever tricks to do this efficiently:

• Static and inlined CSS
• iframes for all third-party scripts
• Static sizing for all images, frames, and embedded content

Of course limiting JS and third-party scripts is a good way to speed up any site. But Google takes it a step farther by caching pages and serving them directly from their own global CDN. This bypasses the RTT to the origin server altogether. And now that Segment supports AMP, there are over 120 analytics and advertising solutions available to AMP sites.

As if a stellar user experience and lightning-quick page loads weren’t enough to get your attention, AMP-optimized news stories now appear at the top of Google’s mobile search results.

For a deeper understanding of what AMP pages look like, and how AMP makes this all work–check out my talk below!

Sign up here to attend the next CircleCI Office Hours and check out the Heavybit Events calendar, it’s full of developer-focused events.