Imagine a situation like this. You need to access some information urgently but your data balance is too low.
The dilemma of the situation is that you do not have any means to recharge your data balance and all you can do now is to use the data that’s left wisely.
After a quick Google search, you clicked on a link which led you to an unknown page. Bad luck strikes again when the page displays a pop-up draining all your data.
That Sucks big time doesn’t it?
But no need to worry as new innovations are gaining their foothold in the world of omnipresent internet.
Lately, Google has officially declared that more than 52% search requests that they get are from mobile devices. Added to that Kissmetrics (Behavioral analytics and engagement platform development company) analysis says that 40% of those users just bounce to other websites if the response time is more than 3 seconds. And moreover, SEO experts have confirmed that latest search updates of Google are giving prominence to mobile friendly websites.
These facts were enough to cement the desperate need for mobile friendly websites.
The arrival of AMP (Accelerated Mobile Pages) was at this crucial juncture of time and has proven to work wonders since then.
What is an AMP? How does it help?
AMP is an open source framework program by Google which helps publishers improve their website’s user experience.
AMP helps publishers develop a skimmed down version of their actual page so that the user will not have to wait for much longer for the access.
Advantage of an AMP powered page is that it there is a strong probability that the website might be showcased in Google Carousel thus increasing the traffic and a swift rise in the ranking.
Have a look at this official video of AMP to get a detailed idea,
How does AMP work?
AMP uses a subset of HTML pages for optimized page rendering. Another indispensable and astounding feature of AMP is that it has an exclusive Javascript.
There are three types of AMP,
- AMP HTML: A subset of HTML which has got custom tags and properties. However AMP HTML has got lot of restrictions to keep it minimalistic in terms of size. Those who are exposed to normal HTML language can easily adapt to AMP HTML.
- AMP JS: Third party Javascript is not allowed in AMP JS. AMP has their own Java frame work which manages resources as well as asynchronous handling.
- AMP CDN: This will help AMP pages get cached automatically in CDN through optimization.
How does AMP make a website accessible in lightning speed?
Focus on the website content: Mostly website takes time to load because of third party applications attached to the website. What AMP does is that it gives primary importance to the content of the website rather than anything else.
Next would be the JAVA part of the website. Instead of loading website’s JAVA elements, AMP loads its own version of it. By doing so obstruction by third party JS can be avoided and the page continues to load with or without the JS script.
However, such limitations can be tackled by iframes which allow third party JS.
Static Layout: AMP instantly loads the lay out first so that all the external images, apps or even iframes gets confined inside the layout of a website. By doing this AMP can pre-determine the exact size and shape of the website even before it’s loaded. In Short AMP does not require any other outside resources to load a website instead of that it requires only one HTML request to lay out the entire document.
Inline, Size-bound CSS: Even though everything works fine and is in the correct order, CSS tend to block the entire rendering page load and has high chance of getting bloated. AMP pages only allow single style sheet and that too inline. As a result a lot of HTTP requests will be removed from the rendering path.
One of the most astounding features of inline CSS is the size itself. The entire script will be of 50KB. Thus, making it easy to load. However, the process also depends on the written CSS quality of the author of the website.
Font Optimization: Font of websites tends to be super large hence optimization of fonts is necessary to decrease the load time. And mostly, AMP requires zero HTTP requests until the font starts downloading. This is only possible due to the synchronous nature of the java script and only inline style sheets are allowed.
Style and Lay out recalculation minimization: The browser has to recalculate and lay out the page upon script change or even an update. Since Amp mediates all render operations it minimizes effort. In short, one or two layout is required before a page is fully loaded.
GPU Accelerated Animations: AMP transfers a lot of image loading work to the GPU of a device rather than CPU. This makes the website run faster on your device.
How to Install AMP in a WordPress Website?
1. Install WordPress AMP plugin: At present there are 2 plugins are commonly used by developers. The most famous one is developed by Automattic and the latter developed by CDN. After installation, you can see the optimized version of your website if you add AMP to the end of the permalink.
For eg: www.ABCDEFG/blopost/amp/
Process
- Open the DashBoard
- Go to ‘Plugins’
- Click ‘Add New’
- Type ‘AMP-WP’ in the search box
- Chose the desired AMP plugin and click install
- After Installation click the ‘Activate Plugin‘ tab
- After installation go to ‘Settings’ and choose ‘Permalinks’
- Click the ‘Save Changes’ button
2. To Validate the AMP version
- Paste the AMP version of URL to the Omnibox, Add ‘#develeopment=1’ to the end of the url and press enter
- Press CNTRL+SHIFT+I
- Select ‘Console’
If everything works fine a message will appear which says that ‘AMP validation successful’
When a user does a search on a mobile device, Google at first searches for an end tag to find out which websites have the mobile version. So the priority always goes to that website which has AMP tag in their link.
<link rel=”amphtml” href=”http://ABCDEFG.com/2016/01/28/a-new-business-model-for-twitter/amp/” /></head>
3. Customize and configure Your AMP Page: After installing AMP to your WordPress website it will create a layout for your page. However, if you need any addition you can avail the help of plugins to edit the CSS as well as your AMP template of the website. For example, you can install analytics, SEO, Adsense etc. to AMP in accordance with your preference.
AMP since it’s open source also has the feature to edit so that any improvement from developers can be added to it.
4. Fixing the Errors: It is obvious and normal that error will pop up after the installation of AMP. If it happens do not panic as AMP is not at all a stand alone plugin which is meant to resolve any mobile optimization related issue of your website. What AMP does is it simplifies layout of your website in each and every scenario. So if there is any kind of error you need to fix it manually which can be easily traced in through WordPress.
AMP is made by Google and they give prominence to websites which have AMP support if there is a search. Fixing errors is a crucial process as it will ensure that your AMP page gets indexed on Google search and cached on AMP CDN (Content Delivery Network). CDN helps AMP websites when there is a search from third party website for eg. Twitter.
Errors of an AMP page can be found by navigating through,
Login to Google search console > Search Appearance > Accelerated Mobile Pages
Last but not least always check for errors after each and every update.
How does AMP influence on Digital Marketing?
Higher traffic: The purpose behind the birth of AMP was to make websites accessible for all users without any delay. Since AMP pages loads within seconds the bounce rate will be less and happy users are more likely to back again.
Higher Ranking: Google has denied that AMP is not at all a criterion for ranking. However, in Google Carousel results, only AMP pages are showcased. and those who are using AMP version of a website will beg to differ as they have seen ranking improvement considerably.
Increase in Paid Search Results: Users tend to hit back to their search after reading the content. Since, pages load within seconds users will have the tendency to access more pages thus increasing clicks on paid search results.
The flexibility of Open Source: The beauty of open source is that it can be improved in accordance with the need of a user. Analytics, as well as SEO extension can be added to the AMP pages so that insight about a website will be detailed and simple.
