In today’s always-connected online environment, website owners need to provide the best possible experience for their users. Since more and more people are accessing websites from mobile devices, it’s especially important to ensure that sites load quickly and provide a good experience for these users. Doing so will not only make sure that all users are able to access a site, it will result in better search rankings, since mobile-friendliness has become an important ranking signal for Google’s search algorithms.
In order to provide a greater level of performance for mobile users, Google has introduced the Accelerated Mobile Pages (AMP) Project, a framework for building and distributing content pages in a manner that allows them to load as quickly as possible for end users. By building pages with a specific structure and caching and delivering them via Google and other third parties, content can be delivered to users nearly instantly. Additionally, the AMP architecture encourages robust usage of metadata that allows third parties to crawl and display AMP content effectively.
AMP pages are simply HTML pages with a handful of rules applied concerning how they are structured and what they contain. The biggest difference between AMP pages and normal web pages is the amount of code not present in AMP pages. For example, AMP pages allow limited support for CSS and JavaScript, and they do not allow HTML elements like object, embed, form, or input. Additionally, standard HTML media elements for images, video, and audio are all replaced with AMP-specific versions. The AMP Project JavaScript parses these custom elements to allow them to load more efficiently, and it also enables some extra features, such as the ability to swap out images based on the size of the user’s screen.
However, despite these limitations, pages can still have a block of CSS to allow for both responsive behaviors and a selection of custom fonts. Additionally, third-party content is supported via custom iframes, so Tweets, Instagram and Facebook posts, and YouTube videos can all be embedded in AMP pages. Third-party ads are also supported, so content served via AMP caches can still generate ad views. Importantly, the AMP framework configures all of these third-party content pieces to be loaded asynchronously and without causing the AMP page to redraw.
At a high level, the AMP framework improves page load times in a number of ways. The number of requests per page is drastically reduced by eliminating all external CSS and JavaScript calls that normally block page rendering until completed and “lazy loading” of prefetched media that is not visible when the page first loads. Rendering performance is improved by giving all resources such as images, iframes, and ads defined dimensions, so that the layout of the page can be calculated even before those resources load. When a cached AMP page is loaded, content delivery networks tuned for speed harness newer web technologies such a the preconnect API and HTTP2 to make the actual delivery of content as quick as possible.
Google’s AMP Project is ideal for large content publishers to get their content out in the world with as little friction as possible. However, the speed it offers can also help smaller organizations, or even individuals, by getting their articles and blog posts to users as quickly as possible to maximize engagement. If you’re interested in implementing AMP on your website or want to know more about how to improve your site from a search engine optimization (SEO) standpoint, please contact us, and we’ll work with you to ensure that you’re providing the best possible experience for your users, no matter what device they are using.
