- \n
- Firstly, AMP improves the loading time of your WordPress website on mobile devices. And everyone (including Google) loves faster websites.<\/li>\n\n\n\n
- Google\u2019s latest DoubleClick<\/a> study shows that 53% of <\/strong>user bounce from websites that take longer than 3 seconds to load. That means more than half of the audience never sees your content if your site takes more than 3 seconds to load. AMP (Accelerated Mobile Pages) aims to fix this by loading web pages instantly.<\/li>\n\n\n\n
- AMP Open Source JavaScript Library is highly cashable. Which ensures the snappy fast performance of your AMP pages.<\/li>\n\n\n\n
- Having AMP on your site will reduce the load on your hosting servers, which will help improve website performance.<\/li>\n\n\n\n
- Although Google AMP enables you to achieve lightning-fast loading times, this can come at the expense of branding elements. AMP will remove particularly high-definition graphics, elaborate animations, and other flashy elements that use CSS and JavaScript.<\/li>\n\n\n\n
- Google AMP\u2019s high speeds can be partially attributed to the fact that it enables Google to display cached versions of your web pages. For this reason, your users may not always have access to the latest version of your content.<\/li>\n<\/ol>\n\n\n\n
Who Should Implement AMP?<\/h2>\n\n\n\n
The straight answer is everyone who wants snappy fast web pages on mobile. If you are still not sure whether you should set up AMP or you should not. See the next points and make up your mind.<\/p>\n\n\n\n
- \n
- If most of your site\u2019s content is static (like a news site or a blog may be), then you should.<\/li>\n\n\n\n
- As AMP does not support user-authored JavaScript. Therefore, sites with necessary dynamic content (like payment gateway for online payments) may hold back the implementation of AMP. Rather webmasters of such sites can explore AMP as Progressive Web App (PWA) or can embed AMP inside PWA.<\/li>\n<\/ul>\n\n\n\n
How Does AMP Work?<\/h2>\n\n\n\n
In order to load a webpage instantly on mobile, the AMP ecosystem manages HTML, rendering of resources, caching, and optimization of the webpage.<\/p>\n\n\n\n
AMP filters all that large HTML, uses inline & size-bound CSS, and loads the resources asynchronously. <\/p>\n\n\n\n
And at the same time, it retains the all-important content of the webpage. This is how\u00a0AMP helps to render mobile-optimized content<\/strong>\u00a0which loads instantly.<\/p>\n\n\n\n
AMP is an ecosystem that creates and delivers mobile-optimized web pages called AMP Pages in general. These 3 key components of the AMP pages:<\/p>\n\n\n\n
AMP HTML:<\/strong> A markup language like HTML but with custom AMP properties and some limitations for optimum performance. In other words, it is a subset of HTML. That is why, the one who knows HTML can easily adapt AMP HTML.<\/p>\n\n\n\n
AMP JavaScript:<\/strong> AMP JS library is an environment for AMP pages. It helps fast rendering of AMP HTML pages. AMP JS library follows best performance practices like loading all JavaScripts asynchronously, sandboxing iframes, and pre-calculation of layout for all elements of the page before page resources are loaded.<\/p>\n\n\n\n
AMP Cache:<\/strong> AMP Cache is a proxy-based Content Delivery Network that caches AMP pages, optimizes them and delivers them when it is required.<\/p>\n\n\n\n
How to Enable Accelerated Mobile Pages in WordPress?<\/h2>\n\n\n\n
Accelerated Mobile Pages or AMP can be enabled by adding an amp<\/em><\/strong> link meta tag in the HTML tag<\/strong> <html> of your webpage. Search engines recognize amp<\/em><\/strong> meta tags and serve such webpages in AMP format. For example<\/p>\n\n\n\n
<html amp>\n <body>\n Hello\n <\/body> \n<\/html><\/pre>\n\n\n\n
Because it is not an easy task to manually add an amp tag on all the pages of our website. Therefore, it\u2019s a good idea to use readily available WordPress plugins to set up Accelerated Mobile Pages in WordPress.<\/p>\n\n\n\n
How to Setup AMP on WordPress \u2013 A Step-By-Step Guide<\/h2>\n\n\n\n
The procedure described below will make your WordPress posts AMP Friendly but not the pages or homepage.<\/p>\n\n\n\n
Step 1: Install the AMP Plugin<\/strong><\/h3>\n\n\n\n
Automattic<\/em> (that\u2019s the company behind WordPress) has released a plugin for adding AMP support to WordPress websites. Although it is still in its early stages, it can successfully and easily add AMP support to your WordPress posts.<\/p>\n\n\n\n
Install and Activate the AMP plugin by following this link<\/a><\/p>\n\n\n\n
Step 2: <\/strong>Customization<\/h3>\n\n\n\n
You can go to Appearance \u2192 Customize \u2192 AMP \u2192 Design <\/em>to alter the appearance of the AMP version of your posts. Because the AMP spec requires a minimal page design, you\u2019ll see options to change the Header Text Color, Header Background, Link Color, and background color scheme.<\/p>\n\n\n\n
![\"screen-shot-2016-10-06-at-2-33-25-pm\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/screen-shot-2016-10-06-at-2-33-25-pm-1200x917.png\")
<\/figure>\n\n\n\nWorking with AMP :<\/h2>\n\n\n\n
To use the AMP plugin<\/a> after installing and activating it, click on AMP <\/strong>in your dashboard.<\/p>\n\n\n\n
Settings<\/h3>\n\n\n\n
In the AMP Settings, you will see three template modes:<\/p>\n\n\n\n
![\"Screenshot-2023-03-24-125303\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2023-03-24-125303-1200x553.png\")
<\/figure>\n\n\n\nStandard: <\/strong>In this mode, the plugin enables sites to have AMP as the only version of the content for both desktop and mobile. The entire site will be served as valid AMP pages (referred to as AMP-first).<\/p>\n\n\n\n
In this mode there is no ? amp query added to any URLs.<\/p>\n\n\n\n
Transitional:<\/strong> If available in your theme, AMP will rely on a theme\u2019s template and styles when showing both AMP and non-AMP content. This means that your AMP and non-AMP content will have a similar look and feel.<\/p>\n\n\n\n
In this mode the? amp query is added to URLs for AMP content.<\/p>\n\n\n\n
In this case AMP, pages will usually only be seen on mobile from certain sources, such as Google searches and Twitter, or by manually adding the? amp query.<\/p>\n\n\n\n
Reader: <\/strong>AMP content will be served in basic templates (with that blue bar at the top) which are separate from the templates in your active theme. Reader mode is less likely to interfere with functionality provided by a third-party theme or plugin.<\/p>\n\n\n\n
In this mode, the URLs for AMP posts normally end in \/amp\/ whereas for pages they end in? amp.<\/p>\n\n\n\n
Step 3: Add support for Analytics<\/strong><\/p>\n\n\n\n
To access AMP Analytics, you must have Google Analytics set up with your website. Please see how to set up Google Analytics here<\/a>.<\/p>\n\n\n\n
- \n
- In your Google Analytics account, click Admin \u2192 Property Settings and obtain the Property ID, which would look like UA-XXXXX-Y<\/em>.<\/li>\n\n\n\n
- Amend the following script, replacing the UA-XXXXX-Y<\/em> with your property ID.<\/li>\n<\/ol>\n\n\n\n
{\n \"vars\": {\n \"account\": \"UA-XXXXX-Y\"\n },\n \"triggers\": {\n \"trackPageview\": {\n \"on\": \"visible\",\n \"request\": \"pageview\"\n }\n }\n}<\/pre>\n\n\n\n3. Copy the script and in your site go to AMP \u2192 Analytics. In the type field, enter googleanalytics<\/em>. Paste the code into the JSON Configuration field.<\/p>\n\n\n\n
![\"amp-google-analytics-new-entry-1\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/amp-google-analytics-new-entry-1-1200x576.png\")
<\/figure>\n\n\n\n4. Click Save.<\/p>\n\n\n\n
Step 4: Check your AMP implementation<\/strong><\/p>\n\n\n\n
There are a number of checks to make to ensure that your AMP pages look good but also comply with AMP guidelines. This is important because if there are errors in your implementation, Google will not take them into account.<\/p>\n\n\n\n
1St<\/sup> Check -><\/strong> Open a new browser window and navigate to one of your posts. Edit the URL and append \/AMP<\/strong> at the end. For example, if this is your normal URL:<\/p>\n\n\n\n
{domain}\/<\/mark><\/p>\n\n\n\n
It will become:<\/p>\n\n\n\n
{domain}\/amp<\/mark><\/p>\n\n\n\n
This is how your AMP pages look like, of course, don\u2019t forget that AMP pages are for MOBILE ONLY so to get an accurate picture of how they look, you need to repeat the same test on MOBILE.<\/p>\n\n\n\n
2nd<\/sup> Check \u2013 ><\/strong> Install the AMP Validator Chrome Extension<\/a> and then navigate to a page that has AMP support. Click the small AMP icon to see if you have any errors. If everything is ok, you will notice that the icon
![\"amp-validator-icon\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/amp-validator-icon.png\")
will become green.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n
You work hard to create useful and informational content. And you definitely want your content to be seen by a large number of people. Also, you work on your site\u2019s SEO to make sure that your content reaches a larger audience. Consequently a result of hard work, your site starts showing up higher in SERPs (Search Engine Result Pages).<\/p>\n\n\n\n
But all of your efforts go in vain if the user jumps off your site because it took too long to load. This scenario is true for mobile and desktop users. And there a are lot of things that you can do to fix this. As it enables you to load your site instantly on mobile devices. Hence Accelerated Mobile Pages make the user experience better. Which is awesome for your audience as well as your site ranking.<\/p>\n\n\n\n
Because of all these reasons, you must consider enabling Accelerated Mobile Pages on the WordPress website.<\/p>\n\n\n\n
I hope this guide helps you to Enable Accelerated Mobile Pages in WordPress.<\/p>\n\n\n\n
Support<\/h2>\n\n\n\n
For any technical assistance, please raise a ticket<\/a> or reach us by mail at support@webkul.com<\/strong><\/p>\n\n\n\n
You may also browse other WooCommerce Addons<\/a> pages to see our addons and can also explore our WooCommerce Development Services.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
- Amend the following script, replacing the UA-XXXXX-Y<\/em> with your property ID.<\/li>\n<\/ol>\n\n\n\n
- In your Google Analytics account, click Admin \u2192 Property Settings and obtain the Property ID, which would look like UA-XXXXX-Y<\/em>.<\/li>\n\n\n\n