AMP-ing Reading Experience. “Money and internet speed — no matter… | by Sandip Baradiya

“Money and internet speed — no matter how much you have, it always feels less to you.”

It was during one of those random conversations, when Mohit Gupta (my colleague and a product manager at Coverfox) commented on this connection between money and internet speed.

About money, I can’t say much. About internet speed, I have a lot to talk about.

Smartphones and tablets have revolutionised the way we access information. We are the internet junkies and we are hogging a tremendous amount of information on our phones everyday.

Publishers and writers around the world use mobile web to reach out their readers. But the experience can often leave the readers in bad taste.

Because great internet content comes with a massive data load.

Internet speeds have increased manifold in past years; so has content size per webpage. Pages with simple articles and static content can also take a long time to load. Scripts, images, videos— that takes even longer. Advertisements come even later. And then the page adjusts itself to reflect the newly loaded content.

Not exactly a pleasant loading experience, right? And on mobile phone, we typically experience latency issues which makes the experience even bitter.

We at Coverfox.com strive hard to achieve great user experience, and to help users achieve the end goal (of buying insurance) without hurdles.

Other than facilitating insurance, we also educate our customers about the insurance industry.

A solid in-house content writing team does the job for us (Well, how else do you think this article would be so nicely phrased. :p). The content team regularly publishes great insurance-related articles on https://www.coverfox.com/articles/.

Like I said before, a large section of our readers read these articles on mobile phones regularly. We wanted to make sure that users get to read them without falling in the loop of slow loading of the webpage because of low bandwidth internet connectivity.

We were looking for some rock solid solution for mobile readers to access the articles in seconds (Literally, we wanted to make the page available to our users within a couple of seconds).

Around the same time, our SEO team suggested us to try Accelerated Mobile Pages (AMP), which were launched around this time last year by Google.

Accelerated Mobile Pages are just like any other HTML page, but with a limited set of allowed technical functionality that is defined and governed by the open source AMP spec. Just like all the web pages, Accelerated Mobile Pages will load in any modern browser or app Web View.

If you’re already familiar with AMP, you can skip to our implementation part.

AMP files take advantage of various technical and architectural approaches that prioritise speed so that users get a seamless experience. The goal is not to homogenise how content looks and feels. The goal is to build a common technical core between pages, which in turn speeds up loading times.

Besides this, AMP files can be cached in the cloud in order to reduce the time content takes to get to a user’s mobile device. By using the AMP format, we can make AMP files available to be cached by third parties. Under this type of framework, we can continue to control our content, but platforms can easily cache or mirror the content for optimal delivery speed to users.

Google has stated that it will provide a cache that can be used by anyone at no cost, and all AMPs will be cached by Google’s cache. Other companies like Twitter and other social platforms may build their own AMP cache as well.

In short, a combination of limited technical functionality with a distribution system built around caching, will lead to better performing pages, and increase audience development for publishers.

Why Should Anyone Use AMP?

• Performance-oriented: AMP emphasises on page speed and performance. Research shows that bounce rate for a web page can be as high as 58% if they take nearly ten seconds to load. Using AMP format makes it far more compelling for people to consume and engage with more content.
• Faster rendering = more page views + more content consumption: If bounce rate for a web page taking longer than 10 seconds can be as high as 58%, then things can be much worse of mobile phones. Speaking of page views, Google is making sure that AMP traffic can be quantified and analysed just like regular web pages. AMP has in-built native support for Google Analytics as well.
• Accelerated Mobile Pages get a boost in search rankings: With the advent of Google’s ‘Mobilegeddon’ algorithm last year, we know that mobile-friendliness is a factor in search rankings. Sites that pass Google’s Mobile-Friendly Test appear higher up the search results, and ‘unfriendly’ pages are banished to the bleak wastelands of the second and third results pages.

So it follows that Accelerated Mobile Pages — which are specifically designed to load quickly and provide a great user experience on mobile — would get a serious search ranking boost. We can also see from Google search results that AMP sites are highlighted with a little green lightning bolt, inviting users to experience these lightning-fast mobile pages!

AMP Technical Specs and Key Points

• An AMP file is nothing but a normal .html file which consists of special AMP markup instead of standard HTML markup.
• No external Style Sheets, JavaScript or any other file links are allowed in an AMP document (except a font include from a CDN, as of now only Google web fonts & fast.fonts.net font CDN APIs are allowed)
• All the styles must be written in internal style tags in head section and it must contain an amp-custom attribute in them. e.g <style amp-custom></style>
• The internal style sheet content must be in 50kb or lesser in size.
• No script tags are allowed, except a single <script type=“json/ld></script> tag, which contains content required schema meta data about the page.
• A page can be created in both HTML & AMP format, and each of them must link to another one for search engine discovery, like in the following example:

None AMP page
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">AMP page <link rel="canonical" href="https://www.example.com/url/to/full/document.html">

• AMP document does not support certain standard html tags like <img> , <video>. For such tags <amp-img> , <amp-video> must be used.(More on same explained further)
• All AMP pages needs to be validated by Google AMP validation standard and then only Google will cache those files and will show in search results.
• All media <amp-img> tags must contain it’s height and width attributes. It’s mandatory to define all media files. This helps Google to predetermine the media file size, hence while rendering the required space is left blank for the image to take up when it’s loaded. This way the content stays where it is and no content shifting is required after while loading the image.

Source: https://github.com/ampproject

If you’ve made it till here, Kudos to you. The interesting story just got more interesting.

Now let’s take a look at how we implemented AMP with tech.

We have an in-house built Content Management System (CMS), what we call the CF-Blog. We use CF-Blog to manage our products part and also to manage dynamic blogs part at Coverfox.com.

[Aaaaand the Blog Part is OpenSource (Because We ❤ OpenSource! )]

The process to create a new article using CF-Blog is simple. We have our HTML templates in code base. To create a new page, all we have to do is add the page URL and the template that we wish to use and save it in draft. Later on, we can access the created page on the provided URL and edit as we wish using Markdown.

However, with this simple process, the hard part was to integrate AMP specific templates for mobile and assuring the desktop part remains untouched.

Key aspects that we wanted maintain during this implementation:

• Rendering AMP Pages on mobile and normal layout pages on desktop.
• Keeping the same URL for both mobile and desktop pages.
• No extra efforts for content team to add and publish AMP pages content separately compared to the current process.
• And keeping in mind other aspects like Analytics, Mobile usability, Content + Design consistency on both desktop and mobile etc.

The easy solution was to create two templates: one for desktop pages and another for AMP template. And then publish articles twice, one for desktop and another for desktop layout, both with varying URLs. (And this solution didn’t meet any of our criteria)

After some days of brainstorming, we came up something easier and that also met all of our implementation criteria:

• Create a single template and switch the layout depending upon AMP criteria.
• Separating the URLs for AMP and desktop pages with a query parameter as simple as appending amp=1 as a query in the URL to redirect to the AMP page.

• Using this as base template, the content team needed to publish an article only once and rest was all taken care by Django as shown in the code snippet above above.
• The base template serves two different templates — one with AMP HTML and another with desktop templates based upon the criteria.
• This way same content/images/data published by content team were being shown on Desktop and AMP pages without any hurdle.

Using AMP, our page load on mobile improved significantly. Here’s a comparison average sum of page load time and amount of data load on mobile with and without AMP:

Right from page size to the number of HTTP requests per page to page load time — almost every aspect was great and we managed to achieve a difference of almost 10x to what it was prior to AMP.

Implementing AMP was a challenging task, but that’s what we love to do every single day at Coverfox. Taking on challenging tasks and solving them with tech to make insurance easy.