GET A FREE CONSULTATION
Posted by Jilesh varma
April 16, 2016
No wonder, there has been a buzz on responsive layouts, mobile-friendly sites, and a myriad of digital tactics on the web to stay assured that your website flows smoothly on various devices. However, for many users, reading on the mobile web is a slow and clunky experience. In order to access the content everywhere and providing instantly loading mobile-optimized content to the users, there arose a need to develop beautifully streamlined web pages that would enhance the page loading speed.
Before moving ahead, Let’s take a quick look at what will be the key points you’re going to learn from this post:
– An Introduction to revolutionary Accelerated Mobile Web Pages (AMP)
– How does AMP work?
– The mystery behind its high speed
– Integrating AMP in your sites
– How can You profit with AMP?
– Enabling Analytics
Voilà! You’re ready to view the flawless, robust, and brisk mobile web pages on Google Search.
In the constantly growing mobile web, Google is ever-ready to experiment with new ways to gear up the performance and speed up content delivery across all the devices. A few months back, Google announced a revolutionary plan for mobile news consumption with an open-source web-based solution called Accelerated Mobile Pages (AMP). Yes, this is a Google project that aims to allow websites to build lightweight pages that render fast.
AMP is an easily accessible framework to create fast-loading mobile web pages. It is an open-source initiative designed especially for publishers to enhance the user experience for their mobile reading by improving the page load speed, thusly safeguarding any ad revenue they may rely upon.
Although experienced web developers can achieve similar outcomes through critical performance optimizations, publishers often neglect this due to a lack of resources. And, AMP allows to easily achieve these optimizations without modifying the primary mobile web experience.
The key point of the Accelerated Mobile Pages project is that Publishers, Platforms, and Developers all stand behind and work together
Some of the big web technology companies and Google are encouraging its use by integrating it into their respective platforms, this will be an added benefit of its future usage.
Basically, AMP consists of three parts:
1. AMP HTML
It is basically an extended HTML with some custom AMP properties to provide high performance and some extensions to build rich content beyond basic HTML for this simple and elegant solution.
Although most of the tags are the same HTML tags, some have been replaced by AMP-specific tags. These are the custom AMP HTML elements that make common patterns that are easy to implement. For example, <img> tag has been replaced with <amp-img> .
2. AMP JS
AMP JS library overall ensures the fast rendering of a page. It manages resource loading and implements the best performance practices.
It offers many performance techniques like sandboxing all the iframes, pre-allocation of the layout of each element on the page before resources are loaded, and disables slow CSS selectors.
This is one of the biggest optimizations where everything comes from external resources asynchronous, so nothing on the page can block anything from rendering.
3. Google AMP Cache
Google AMP Cache is a proxy-based content delivery network that delivers all the valid AMP documents. It comes with a built-in validation system to confirm that each page will be working and is not dependent on external resources. This validation system helps in keeping a log of the errors directly to the browser’s console at the time of page rendering and allows you to track how some complex changes in code might impact the performance and user experience.
The whole idea behind designing the AMP project is pure speed and pure readability. And, this is accomplished by the optimization in HTML, CSS and javascript. Let’s discover:
– Use of certain HTML tags is just eliminated and elements like forms are not to be used in AMPs. This is the reason why some folks consider it as Diet HTML.
– You will have to use a streamlined version of CSS and some parts of CSS that are best practiced are restricted.
– Basically, Javascripts are not allowed at all, still, you can use an off-shelf js library that provides stuff such as Lazy Loading and the images on the page don’t load until they’re scrolled into view.
– These pages are heavily cached so that Google can host these pages and fetch the content actually right there.
For the beginners, it is advised to maintain two versions of your article page: The original one that will be seen by the users and the AMP version of that page. Moreover, let’s lookout for what to include and what not in a listed form below:
1. AMP does not allow to use of elements such as forms and third-party javascript, so you will not be able to have lead forms, on-page comments and some other elements that you generally use in your standard implementation.
2. AMP allows a streamlined version of CSS. In order to control the fast-loading, CSS in AMP must be less than 50kb and should be inline. Also, custom fonts must be loaded by using a special extension <amp-font> to control the loading intensiveness. As a result, you may need to rewrite the site template to lodge these AMP restrictions.
3. To handle the multimedia in a better way, images in your website should explicitly include height and width attributes, they need to use the custom <amp-img> element and utilize a separate extended component <amp-anim> for the animated GIFs.
4. To embed a locally hosted video via HTML, there is a custom AMP tag, <amp-video>. However, for embedding Youtube videos there is a separate component <amp-youtube>
5. For stuff such as slideshows, <amp-carousel> can be utilized, and <amp-image-lightbox> for image lightboxes. There are special extended components for embedding various social media channels.
Finally, in order to get detected your AMP version of pages by Google, you need to include the following tag in the original article page:
<link rel =”amphtml” href=”http://www.example.com/blog-post/amp”>
– Canonical tags should be essentially included on AMP pages.
– Additionally, some platforms that support AMP require to specify the content type of the page through Schema.org metadata, so ensure the correct use of your schema.
A tremendous hike in ad blockers has made it tough for publishers to monetize their websites. Nowadays, many people use ad blockers to aid in improving their browser speed and loading time. AMP is a perfect solution to this issue.
AMP project ensures effective ad monetization on the mobile web pages while considering on a user-centric approach. This objective leads to provide support to a comprehensive range of ad formats, ad networks, and technologies in AMPs.
As a result, some of the most popular ad networks like Amazon A9, Adreactor, Google AdSense, Adform, Taboola, Smart AdServer, DotAndAds, and many more have started using <amp-ad> component.
AMP comprises of a very smart analytics tactic of measuring the analytics once and reporting it to many, to prevent multiple analytics tracking from decelerating the speed of your site. There are two ways to enable analytics functionality with AMP for your site:
1. The <amp-pixel> element :
It is a simple tag used to count page views as an ideal tracking pixel would perform using GET request. Also, you can pass a number of variables such as Title and document_referrer.
2. The <amp-analytics> extended element :
This is more advanced than amp-pixel, used to implement analytics on your site which allows the huge level of configuration for analytics interactions. If you don’t wish to get Google analytics work, go for amp-analytics. Just add the <head> required js library in the section and configure it with some JSON markup in <body> the section of your web page.
However, if you wish to use Google Analytics in AMP, you need to check out Google’s AMP Analytics section on their developer page which gives several examples of implementation.
Aren’t you curious to see how will your AMP page look like in the SERP. You can check out the live demo provided by Google for this AMP feature on http://g.co/ampdemo or on YouTube AMP demo. You can also try it by searching something on your mobile phone or by emulating on the Chrome developer tools.
What will you discover? You’ll see a carousel towards the top with AMP articles. Click on the one you wish to read, you can also swipe right or left to read other articles. You’ll definitely embrace this experience.
You can find out demo versions of some of the major publishers such as The Guardian (example AMP page) and The Washington Post (example AMP page) here.
AMP pages let you experience the newly designed beautifully streamlined, wicket-fast content web pages. Therefore, it is a relatively easy way to improve the speed of mobile web pages for publishers. In response to the Google’s momentum, even Facebook has recently announced Instant Articles to all the publishers.
If you’re a publisher, kick-start to plan about Accelerate Mobile Pages, adopt the latest technologies and stay ahead in the mobile run.
