Accelerated Mobile Pages Will Speed Up Your Website

When your pages load faster than anyone else’s, you’re the winner, especially on mobile devices. You get more viewer satisfaction, fewer people giving up the page, and better search engine ranking. Accelerated Mobile Pages can help you to accomplish this. AMP is a specific way of constructing pages for fast loading which works on any modern browser, desktop or mobile. The AMP project has Google’s backing, so you can be confident it will help with SEO.

AMP has very strict requirements. It’s not a small job to turn a regular page into an AMP page, and there are many things it doesn’t let you do. You can’t use third-party JavaScript or CSS. It doesn’t work well for highly dynamic content. You have to find the right situation to put it to good use.

Basic concepts of AMP

AMP pages are HTML pages with some strict rules designed to maximize load and display speed. These rules include:

    • All scripts have to be asynchronous. Scripts will never block page loading.
    • All reading of the DOM must happen before any writing. When a read follows a write, any affected styles have to be recalculated. This way, they only have to be calculated once.
    • No third-party JavaScript is allowed except the AMP JS library. No JQuery, no React.js. Third-party scripts are likely to violate the above rules.
    • All CSS must be defined in the header. No third-party CSS, except for custom fonts. No style tags in individual elements. The inline stylesheet is limited to 50 kilobytes. The amp.css library is the only exception.
    • Images and iframes have to be sized statically. This lets the AMP scripts determine each element’s position and dimensions before downloading the content.
    • Animations can use only the Transform and Opacity methods, so that a GPU will be able to perform the work.

There is an exception to many of these rules: You can break them in iframes, but not in the main page. The idea is that once the main page is loaded and laid out, it’s all right to have frames within the page that use slower and more complex functionality.

You can test your HTML for AMP compliance by pasting it into the validator page.

AMP tags, JavaScript and CSS

AMP disallows certain tags and provides its own custom elements as a substitute. For instance, the img tag isn’t permitted; you have to use the amp-img tag, which gives the AMP runtime control over image loading. Similarly, there are amp-audio and amp-video tags.

Other tags enable popular layout features, such as amp-carousel and amp-sidebar. A large number of tags are for specific domains; there’s amp-facebook, amp-twitter, amp-hulu, amp-reddit, and lots more.

You don’t normally use AMP JavaScript and CSS explicitly; you use them mostly through custom tags and their attributes.

Should you use AMP?

AMP isn’t a good choice in all cases. It’s explicitly intended for static content. Between the requirement for static sizing and the restrictions on JavaScript, it offers few opportunities for dynamic content.

It requires HTML5 and JavaScript support and breaks the principle of graceful degradation. A browser with JavaScript disabled will see a blank page, with no opportunity to say what’s wrong. It doesn’t allow third-party JavaScript, so many Web applications will have to be consigned to iframes. Its tag library favours big-name sites.

AMP pages will indeed load and display very fast. This is a major benefit for reaching impatient mobile users with slow connections. A site may have to find the right mix of AMP and non-AMP pages to get the best results. If the mobile audience is your primary target, you should give Accelerated Mobile Pages strong consideration.

With or without AMP, we can build the best website for your needs. Contact us to learn more.
[cta id=’4533′]