Implementing AMP to Boost Your Page Loading Times

Most web administrators and developers are aware that the loading time of a site is crucial to the site’s overall success. A typical user will not wait a millisecond more than three seconds for a page to load. They will just click away, to the ruination of all your efforts to make your website attractive and your content organic and relevant. You need to get them to stay to see all your handiwork, so optimizing your pages is essential.

However, it is not as easy as it looks, especially for mobile. With an increasing number of people using mobile-only for their web browsing, this is an important consideration. Striking the balance between a great page and a fast page can be an exercise in futility. Fortunately, you now have Accelerated Mobile Pages or AMP to help you gain some traction with your mobile pages.

What is it?

accelerated mobile pages what you need to know

Google rolled out AMP in October 2015. An open-source framework, it enables mobile web pages to load quickly. It is intended to help web publishers quickly improve their loading speed even while running ads, which is a major source of revenue for many websites. Many publishers can actually do this on their own, but it requires some intensive optimizations that they may not be able to implement effectively. AMP simply makes it easier to achieve optimal results for everyone, including mobile users.

AMP is slated for future integration into the Google platform, as well as other web technology companies, so it would be good to put it in now. As an early adopter, you can wow your users before too many sites get onboard with AMP. By then, the higher speed is no longer awesome but simply standard.

How Does it Work?

amp html javascript cdn banner

There are three basic parts to AMP: the markup language, the resource handling, and the content delivery network (CDN). The AMP HTML is just like the standard HTML save for some restrictions, properties, and custom tags. The good thing about this is if you are already familiar with standard HTML, your learning curve is small. Here is how to create your AMP HTML page. The way it works is that AMP documents are designed to render the parts of the page above the fold and not resource intensive. The page loads many of the elements before the user has time to get impatient, and this gives your page time to load the rest of the elements, including ads.

The AMP JavaScript comes in handy when you have some interactive elements in your mobile web page such as polls or lightboxes. In general, however, the developers of AMP are trying to do away with JavaScript altogether by using web components and custom elements. It is a work in progress, however, so in the meantime, you may want to keep interactive elements to a minimum. You cannot use JavaScript from a third party, by the way, so that is not an option for you.

The AMP CDN is an option at this point. Currently, Google is providing the caching and optimizations of AMP pages using their CDN service. However, you can also make your own CDN, or use a web server.

What Should I Expect?

expect the unexpected amp

To achieve optimal mobile speed, you do have to change a few things in your work process. You will need to maintain two versions of all your pages. One is your desktop web page version, aka standard, and the AMP version. In the standard version, you can keep all the bells and whistles that require JavaScript, while the AMP version will do away with most of them. You can still keep some of the elements by using iframes, particularly lead capture forms.

You will also have to redo your site template because AMP requires all CSS style sheets to be less than 50KB and in-line. All custom fonts also have to be loaded using an amp-font extension. The same restrictions apply to regular images, which must be a specific width and height, and must use a runtime managed amp-img element; animated figs require an amp-anim extended component… HTML5 locally hosted videos will use amp-video, while embedded YouTube videos use amp-youtube. None of these changes are hard to implement, but you do have to plan your site design around them.

Most importantly, you need to flag your pages as AMP-enabled by using the tag <link rel="amphtml" href="http://www.example.com/blog-post/amp/">. This tells Google and other AMP project supporting technologies that you are onboard. You should also use Schema.org meta data to identify the type of content on the page i.e. article, recipe, review, to get you into the Google Search news carousel. Here are other ways to make your page discoverable.

How Can You Use it to Boost Your Page Ranking?

The main purpose of AMP is to make your pages load really fast. Initial testing of the protocol shows speed improvements of up to 85% on 3G connections. That means if your site’s page currently loads in three seconds (if you’re doing your job right that should be the minimum speed), then it will load in 0.45 seconds, which is practically instantly.

That is pretty impressive, and the developers are still trying to make it even faster. You can apply the same improvements for all your other pages, and it is simple enough to do, so why not? The main benefit of AMP HTML is you only need to send a small number of HTTP requests to load a page, and that means even with slow connections, you achieve a respectable speed.

The increased loading speed can help you snag users as well as improve your relevance for ad placers. AMP supports a wide range of ad formats, which is why many of the top ad networks are using the amp-ad extension component. If you are AMP-enabled, you are more likely to attract the attention of these ad networks, which means more money coming your way.

Conclusion

It makes perfect sense to AMP your mobile web pages. You not only improve the user experience, you make your site more visible on Google and other search engines, and more eligible for AMP-supported ad networks. With just a little elbow grease, you can boost your page ranking with AMP.

Comments