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.
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.
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.
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″]