Accelerated Mobile Pages for Mobile Optimized WordPressadmin
Surfing and browsing on the internet should be fast and easy. And webmasters are constantly trying to optimize website performance and improve speed in any possible way.
Websites were primarily designed for the larger screen. But smaller screens are increasing in number and even overtaking the laptops and personal computers. Mobiles now represent 65% of digital media time. The hand held devices need pages to load as fast as they do on bigger screens, if not faster.
To meet this demand for fast loading content, apps designed for specific mobile platforms are available on Apple (News), Facebook (Instant Articles) and Snapchat (Discover). Early this year. Google introduced Accelerated Mobile Page (AMP) to speed up mobile content delivery and provide a better user experience.
AMP Project was announced by Google in October 2015, and rolled out early this year in February. It is an open source initiative that gives publishers the means to create mobile optimized content once and have it load everywhere on the mobile web instantly.
On Feb 24th, Google started to deploy AMP compliant content in a carousel on their mobile search results page. Users can swipe the carousel and tap on the item they want to read. Pinterest reported the pages to be 4 times faster, using 8 times less data than normal mobile optimized pages. This is possible because of the way the pages are formatted and delivered.
As of August 2016, Google Search has over 150 million AMP docs in its index and growing at the rate of 4 million a week. Early in August, Google also started a preview of Google search for amped content. It expects to implement it more broadly later this year.
You can catch a glimpse of the fast loading pages in the AMP enabled search here. Check it out using the link on your mobile phone (Won’t work on desktops).
Who Needs To Move To AMP
In February, the project was initiated for publishers. But adoption of AMP has spread far beyond the publishing industry to entertainment, travel, eCommerce and more.
Favorable reports are being received from early adopters. With an 88% improvement in load time for AMP docs, Washington Post reports an increase in number of returning users from mobile phones by 23%. eBay is one of the major eCommerce companies switching to AMP with close to 15 million AMP-based product browse pages. In a short while, these pages are expected to be ramped up to be discovered in a search.
What’s different in AMP
This content delivery system is based on the AMP HTML framework and is faster than the usual HTML because,
- The content is cached and stored in a common cloud, so time needed to query and fetch from the server is eliminated.
There are many more differences, but the mentioned here two should give you a broad understanding.
Why Publishers and Blogs Should Enable AMP
So long as reading slow loading pages on mobiles remains a discouraging experience for users, publishers are missing out on revenue from advertising on mobiles. AMP will help to bring and retain a visitor for longer periods on the website and has the potential for revenue generating clicks.
The AMP pages appear alongside a lightning bolt icon to mark them out from normal web pages. Viewers clicking on this option, will be taken directly to the AMP pages within the AMP viewer. Not only that, content will be instantly available on a Google search and accessible via social platforms like Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel and Pinterest.
Moreover, publishers will have access to Google Analytics to observe how their pages are performing. They can single out their best content and use it to optimize website performance and user experience.
AMP offers another advantage in that it takes care of high performance and user experience, so publisher resources can be focused on providing great content.
What Optimizations Are Required For AMP
AMP is actually a whole lot of optimizations to the website done in a uniform way as required by Google. The various optimizations that you need to carry out to make a web page AMP compliant are,
- Size all resources statically – AMP loads the page without waiting for resources like images and iframes to download. The size of these resources must be stated in HTTP, so the size and position of these resources is known before downloading starts.
- Don’t let extension mechanisms block rendering – if any extension is to be included in the page, the custom script must inform the system about it. So a space is created for the extension, even before AMP knows what it will include. Extensions for lightboxes, Instagram embeds and tweets are fine as they do not block page rendering, even though it requires additional HTTP requests.
- All CSS must by inline and size-bound – this helps to reduce the number of HTTP requests in the critical path.
- Font triggering must be efficient– the AMP system does not allow HTTP requests until fonts start downloading.
- Minimize size recalculations – recalculations delay rendering, so it must be kept to minimum.
- Only run GPU enabled animations – all animations must be able to run on GPU (Graphical Processing Unit).
- Prioritize resource loading – Only content that is needed is loaded first, with ads and images fetched as soon as possible, but loaded only when required. That way the demand on CPU is kept to the minimum.
- Load pages in an instant – pre-rendering uses up a lot of bandwidth and CPU. AMP pre-rendering loads only required content first, and downloads third party iframes and other resources only if required.
A standard range of ad formats, ad networks and technologies will be available. At the same time publishers can also choose their own formats, so long as it is not a drag on speed.
How To Create AMP with WordPress
Google has a tutorial that you can refer to for creating basic AMP HTML pages, staging them, validating them as being AMP compliant, publishing and distributing them. Validating AMP pages is important, because that way third parties like Twitter and Instagram are confident that the pages will display well on their platforms.
As far as websites hosted on WordPress.com are concerned, they are automatically supported for WordPress without having to do anything further. Self-hosted WordPress websites can enable AMP by installing plugins.
Once you download, install and activate the AMP plugin on WordPress website, your posts will automatically have a dynamically generated AMP version. You can access these pages by appending amp at the end of your URL. If pretty permalinks is not enabled, add ?amp=1. You’ll not notice any settings or options at all.
This plugin is the official plugin from the Automattic stable, and at present it does not support pages and archives, nor can you customize the pages. You can turn to documentation on Github for customizing.
Other Plugins that can help you with AMP on WordPress websites,
Should You Go The AMP Way ?
Though AMP is not mandatory for web pages to be discovered by Google, it is fairly obvious that Google will be aiming to implement the AMP project in a more broad based manner eventually. At present, being AMP compliant is not a separate factor for search ranking by Google.
If you keep in mind that page load speed is a factor in search engine ranking, you really do not have much of a choice if you want to be a part of the mobile internet. If search engine rankings are important to you, all second thoughts on going the AMP way may vanish.
But being a part of the project needs strict adherence to the formatting required by Google and that may not be everyone’s cup of tea. It restricts what you can put on your website, and can make all blogs appear somewhat uniform and lacking in individuality. Some animations are not allowed, and forms are not supported. And as far as landing pages go, AMP may not be a good idea at all. Moreover, there may be websites which stress aesthetics and branding over speed, for whom AMP may prove to be a dampener.
However, if you want to create a fast and engaging experience for your users and get them to stick around longer, you need to seriously consider AMP. If it is a spot on the AMP carousel on Google search pages that you want to corner, hop on to the AMP bandwagon.