Let’s say you searched for “iphone cases” on Google on your mobile. You might see something like this
See how BGR’s visual and text are presented beautifully in an eminently clickable box? Isn’t this much nicer than your standard text-only Google result? This is an “AMP” enabled link. When you click it you are taken to an “AMP” Page.
Google has invested in an open-source project called AMP – Accelerated Mobile Pages.
AMP Pages are a ‘flavour’ of web pages in which the content is served with no frills attached. First the downside – let’s get that out of the way: you can’t have any ‘technical’ add-ons like forms, fancy styling or special functionality. But if you just need text and images, AMP pages are a perfect fit.
So what is the benefit for brand marketers?
According to Google research, 70% of conventional mobile pages take 7- 10 seconds for visual page content to load. By comparison, AMP pages load in less than 1 second, on average. Your content will be:
- quick loading – much, much faster than a regular page load
- easy to read on mobiles
- completely device independent (opens properly on anything)
- will show up beautifully on Google search with a visual and a small caption (like the BGR example)
- more SEO friendly due to higher page speed
Does this mean you need to redo all your existing pages? NO.
You just need to create an AMP version of them in addition to the existing page. And when there are two identical pages, one AMP and one conventional mobile page, the lightweight AMP version gets served automatically on slower connections. You’ll retain those customers who would have otherwise closed your website because their connections were too slow to load it in time.
Now while the concept is quite simple, there are several guidelines which need to be adhered to when doing AMP Pages. Feel free to skip the bullet points if these are too tedious or boring!
- Sizing all resources statically so that AMP can predetermine size and position before the page loads.
- Extension mechanisms shouldn't block rendering; so while things like lightboxes, instagram embeds and tweets are okay, custom scripts will need to be custom tagged to inform the AMP system that it needs to create the relevant iframe.
- All CSS must be inline and size-bound so as to not block page load and reduce HTTP requests on the critical rendering path, and all within 50KB, thus enforcing clean non-bloated CSS code.
- Minimizing style recalculations to avoid relayout of the entire page by the browser.
- Only running GPU-accelerated animations, such as opacity and transform so that the page layout isn't required.
- Prioritizing resource loading through early prefetch and lazy-loading using the preconnect API to ensure pages are loaded in an instant.
Don’t worry about all the technical mumbo-jumbo. Leave that to us.
To get your product, service and content marketing out there to millions of eyeballs in a fast and effective way, click here!