Website Designed 4U Logo

Call Now 0796 222 5705

HTML Header Code for AMP
Picture of Nick Green

Nick Green

Accelerated Mobile Pages

The Accelerated Mobile Pages (AMP) Project is an open source initiative that is being driven by publishers and technology companies to improve the entire mobile content infrastructure for everyone:  publishers, consumer platforms, creators, and users.

In an April 1st post on the ampproject.org website a comparison was drawn between the Very Large Mobile Page Accelerator and the Large Hadron Collider. It contained the a sentence “AMP was founded with the vision that publishers can create mobile-optimized content once and have it load instantly everywhere.” Now widely available, the AMP experience has been likened to magic (some have called it yesterday fast). Now I find that to be particularly true even though it was intended as a joke. Over recent time websites have become inflated with bloatware many self build packages include scripts on every page to be used with a google map even if there isn’t a map on the page. Images are over sized both in dimensions for on screen presentation and files size.

Much of this lax behaviour is due to today’s “professional” website designers who have grown up in the world of infinite bandwidth and super fast PCs. They have no concept of the efforts, those of us more long in the tooth, had to make to optimize the hell out of a site to get it to work over a dial-up connection (yes I said dial up!). So part of what the AMP project has set out to do is to restore the coding of pages back to what some of us have been doing as best practice for years. Added to that are tools that will validate, accelerate and on-line cache pages to speed up their delivery.

The AMP project is still in its relative infancy and the primary target is for News delivery channels and Google’s involvement and their plan to put AMP compliant pages first in rankings more or less guarantees the success of the project.

What does it mean for me?

If from the get go we build our sites with AMP in mind when the tools become available to make our sites AMP compliant half the work will be done. One of the easiest first steps to compliance is with on page images; AMP requires that the dimensions or images are always specified and that the image is in those dimensions (that’s just best practice).

What can we do?

In its simplest form not a great deal is required to make a page AMP compliant if you are working with the HTML coding it is going to be more difficult if you are using something like WordPress where you are “further away” from the code. Additionally with page building tools like Prostyler there will need to be some changes, however, I believe it is a bit early in the AMP project to go rushing to piece meal development.

AMP HTML

The initial change between an HTML Page and an AMP compliant HTML Page is the inclusion of some predefined elements before the header and then additional ones in the header of the page between theandtags.

AMP JS

The AMP JS library implements all of AMP’s best performance practices, manages resource loading and gives you the custom tags, all to ensure a fast rendering of your page. Among the biggest optimisations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.

Google AMP Cache

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.

New Tags

AMP has created some new HTML tags so on an AMP compliant page the image tag is replaced with an component, that like all externally fetched AMP resources, must be given an explicit size (as in width / height) in advance, so that the aspect ratio can be known without fetching the image. Actual layout behaviour is determined by the layout attribute.

Conclusion

My conclusion is that the AMP project will gain traction and momentum and its scope will expand the include more new amp compliant components but there is no need to panic. One of the key statement is “AMP is a way to build web pages for static content that render fast.” so not all sites will be able to comply. Many changes to an HTML website can potentially be achieve by a simple search and replace (if it has been built with AMP in mind and width and height attributes included as a matter of course). For those using WordPress I’m confident that some enterprising developer will be introducing an AMP conversion plugin that will enable the conversion of an existing site into and AMP compliant site.

WordPress development tools may begin to include AMP compliance as an option or just include a plugin as part of the package.

Share this post