MailChimp for WooCommerce

The new and improved MailChimp for WooCommerce extension opens up a world of smart, automated marketing - and it's free!

Use AMP to Make Your WordPress Site Load Faster

Written by Lisa Wang on February 7, 2018 Blog.

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.

Slow Loading Gif

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 one-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 one-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.

Loading an AMP Web Page
Loading an AMP web page

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.

Benefits of AMP

Anatomy of AMP

AMP has three core components:

Components of AMP

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.

Amy Schumer Stay Calm

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.

cta-banner-dynamic-pricing-v2_2x

17 Responses

  1. Anh Tran
    February 8, 2018 at 3:22 am #

    An integration between AMP plugin and WooCommerce is really helpful. The AMP plugin is basic and works for only posts and pages, which is suitable for normal blogs or magazines, while most of the WordPress websites now uses custom post types as a true CMS or e-commerce website. Looking forward to the improved version of the plugin!

  2. GoMovies
    February 8, 2018 at 5:22 am #

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

  3. Riyaz
    February 8, 2018 at 12:40 pm #

    Thanks, Lisa Wang.

    The AMP is good for loading page fast, But for the Blogger who earns money via showing ads in their content has revenue decrease issue.

    Because of it, I have removed AMP from 2 of my client’s website.

    Else everything is awesome.

  4. Karol Vörös
    February 9, 2018 at 6:01 pm #

    Using since lunch in 2015. Looking forward to see news things coming.

    • Ken M
      February 27, 2018 at 5:29 pm #

      you must be hungry by now!

  5. arsalan
    February 10, 2018 at 10:36 pm #

    Thank you for your useful article.
    The page speed has a lot of impact on the bounce rate.
    Using the AMP does not compromise the position of pages that rank on Google?

  6. Surendra Soni
    February 11, 2018 at 10:05 am #

    I have installed amp plugin by wordpress but its crashing my site. tech vitality. How I can fix it? Any help ?

    Regards,
    Surendra Soni

  7. Alex
    February 11, 2018 at 8:33 pm #

    I think AMP is a serious threat to our blogs. Google is serving pages under their URL which I think is dangerous. Maybe they can remove things like ads if we don’t follow their guidelines of AMP.

  8. Luke
    February 12, 2018 at 5:05 pm #

    AMP is great in theory, we always like pages to load super-fast right? But there are so many limitations to design and so forth, that you REALLY have to decide if it’s for you.

    You may not be able to include all the functionality that your site includes in the AMP version, but you have to remember that the AMP version is built for speed first, and is occasionally served from googles servers, which gives you a blazing fast CDN for free.

    I actually haven’t used it in a shop yet though, as I wasn’t 100% sure it worked with woocommerce.

  9. David
    February 16, 2018 at 8:42 am #

    We are about to implement AMP to improve user experience that also helps with rankings.

  10. yupsumit
    February 18, 2018 at 5:25 pm #

    AMP is a good feature. It reduces the load time and decreases your bounce rate. Nowadays, most of the time website is browed through mobile devices. It improved your ranking to a great extent.
    Regards

  11. Adam
    February 21, 2018 at 12:13 am #

    Thank you for your grate article. We are starting implement AMP, so we check result

  12. Egor
    February 27, 2018 at 5:28 pm #

    does it actually work with woocommerce product pages? Can customer “add to cart” products?

    • AdvisorExpertWordpress
      February 27, 2018 at 6:02 pm #

      Hello,
      I am also wondering about AMP for Woocommerce ?
      Anybody is using it ?
      What are the problems ?
      Should we wait more to use it ?
      Thank you.

  13. Ben
    February 27, 2018 at 9:05 pm #

    I think this is a good guide, though the current AMP plugin for wordpress needs a bit more tweaking. It doesnt really provide a design integration with your theme and seems a bit harder to setup then normal. I am not sure it works with Woocommerce product pages either? Maybe it is just suited for blog pages.

  14. ThemeMasterly
    March 3, 2018 at 6:49 am #

    Hi
    I have gone through the blog post about WordPress AMP plugin, I am wondering, if the plugin works for custom post and woocomerce products. Thanks

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment
%d bloggers like this: