Use AMP to Make Your WordPress Site Load Faster

It’s no secret that as a retailer, your mobile strategy has become more and more important to staying competitive. As much as 50% of eCommerce transactions come from mobile today. In the holiday season of 2017, mobile purchases (tablet + smartphone) set a new holiday record, generating 47% of visits and 33% of revenue.

Despite the quantity of mobile traffic, over 75% of sites take over 10 seconds to load on a 3G connection. A slow loading site results in content shifting around on the page as users are reading or interacting. Buttons are unresponsive resulting in seemingly broken pages and frustrated users. And worst of all, sometimes the page times out, leaving your customers in the no-man’s land of loading spinners.

It’s no wonder that 53% of mobile site visitors leave after 3 seconds. And this affects your bottom line – we’ve seen that just a 1 second delay in load time can lead to a 7% decrease in conversions. As a customer, it’s easy to complain about a slow site, but as a retailer, creating a fast and functional mobile site often takes a lot of effort and requires constant updating.

Just a 1 second delay in load time can lead to a 7% decrease in conversions

This is part of a series of posts highlighting talks from WooConf. You can watch the talk or read the summary below.

Introducing AMP

That’s why we started the AMP project: to enable the creation of fast, user-friendly web experiences that are straightforward to create and manage through an open-source framework. We kicked off the AMP project in late 2015 and started launching AMP-enabled experiences in 2016. Even if you’re unfamiliar with AMP, you’ve likely already used it.

AMP is the technology framework that powers the near instantaneous loading you are able to see. Many different platforms, including Twitter, Google, LinkedIn, and Pinterest all link to AMP content on the web.

And we’ve seen huge success for those who have built AMP pages. AMP pages have a median load time of less than 0.5 seconds from Google Search and users spend 2x more time on AMP pages. For eCommerce specifically, a Forrester study found that AMP improves conversion rates by 20%. Check out our case studies to see some of the success stories.

Anatomy of AMP

AMP has three core components:

AMP HTML is a modified version of HTML which ensures speed. AMP JS implements best in class performance practices (such as loading the elements in the viewport first) and manages resource loading to ensure pages render quickly. And the AMP Cache leverages caching to deliver pages quickly to our users.

None of this means you need a brand new, large development team to build AMP pages – AMP pages are just regular webpages so building them uses existing skill sets.

To achieve this fast, safe experience for users, there are a few restrictions. First, you cannot write arbitrary JavaScript in AMP, except in sandboxed iframes. We also put in place certain requirements to protect users – for example, we require developers to specify an https endpoint to securely handle form input.

But that’s it. The main restriction is really the absence of arbitrary JavaScript. But AMP itself is JavaScript, handling all of AMP’s best performance practices, as well as providing the functionality you would expect and want on a page. This functionality is achieved through our web components library. Examples include amp-ad to let you serve display ads, amp-analytics to let you track user engagement, video players, social embeds. You can also take advantage of 40+ different vendors who have come into the project, contributed code, and made their integrations work. Check out the full list of components – it’s constantly growing as we build out support for new use cases. Because AMP is open-source, anyone can contribute and shape the direction of AMP development; so far we’ve had over 450 code contributors.

None of this is to say that AMP pages need to be super templated or static. CSS is available as AMP supports the layout of your existing pages through design flexibility to incorporate your brand look. amp-bind acts as our interactivity layer, using data-binding and JS-like expressions. And we have many ways of handling fresh data. With these tools, you can build a full eCommerce experience in AMP – including filtering/sorting, personalized recommended product carousels, reviews and star ratings, checkout flows, autosuggest searching, and more.

Get Started

You can get started now by automatically converting any blog pages you have hosted on WordPress by using the WordPress AMP plugin. For product and purchase flow pages, we look forward to continuing collaboration with Automattic in increasing AMP support.

In the meantime, if you can’t wait to take advantage of AMP, explore our documentation at ampproject.org and our GitHub repository, and try your hand at building a WooCommerce AMP plugin yourself – we’re happy to answer any questions on our Slack channel or GitHub.

Lisa Wang is a Product Manager for the AMP Project.

Original article written by Lisa Wang >

[wpseo_map width=”100%” height=”300″ zoom=”-1″ map_style=”roadmap” scrollable=”0″ draggable=”1″ show_route=”0″ show_state=”1″ show_url=”0″] [wpseo_address hide_address=”1″ show_state=”1″ show_country=”1″ show_phone=”1″ show_phone_2=”0″ show_fax=”0″ show_email=”1″ show_url=”1″ show_logo=”0″ show_opening_hours=”1″]