Update to WooCommerce 3.5.1+

How to Achieve a High Performance Score on Google PageSpeed Insights for WooCommerce

Written by Gareth Morgans on November 8, 2018 Blog.

Website performance is an essential aspect of web design that is often overlooked by agencies.  If your site responds and delivers content very quickly, you’ll receive many benefits – including an increase in conversions and better rankings in Google.

At Herdl, we fully appreciate the benefits that high performance can offer across multiple marketing channels and consider performance optimization an integral part of our process.

Why is Website Speed Important?

As an eCommerce site, the conversion rate is a vital piece of data that should form the core of your reporting process. Site speed has a fundamental effect on website conversion rate, and research presented by Google highlights the profound benefits of a fast website. In their report, it’s easy to spot the strong correlation between website speed and conversion rate.

Google has also recently re-confirmed the importance of website speed as a ranking factor: Earlier in 2018, they announced the Speed Update as part of their broader transition to a mobile-first index. The Speed Update rolled out in July 2018 and reportedly affected only a small percentage of sites that were responsible for the slowest website experiences.

As an eCommerce site, the conversion rate is a vital piece of data that should form the core of your reporting process.

Nevertheless, website speed has been part of Google’s search engine algorithm as far back as 2010 when Google PageSpeed Insights was first released. During the launch, site speed was officially named as one of Google’s rankings signals, and has since been recognized as an integral SEO ranking factor.

Site speed was officially named as one of Google's rankings signals and has since been recognized as an integral SEO ranking factor

The Importance of Hardware and Setup

Performance starts with hardware, so if your servers or network are limited, performance will inevitably suffer.

Our hosting platform is designed, built and managed by infrastructure expert, John Arundel, of Bitfield Consulting, and provides high-performance WordPress hosting with data center-level disaster recovery. We distribute sites across Digital Ocean and Linode, which both provide reliable and scalable virtual private servers running on fast hardware with SSD drives and a 40Gbit network.

For performance and security, we always work on a single-site-per-server model with a per-server firewall. Shared hosting is best avoided for business sites, and should definitely be avoided for eCommerce. When it comes to hosting and security, be paranoid – “don’t take risks” is the best mindset to adopt.

Shared hosting is best avoided for business sites and should definitely be avoided for eCommerce.

Herdl servers run a LEMP stack (Ubuntu LTS, Nginx, MySQL, PHP) with configuration management by Puppet. Puppet enables us to automate our server setup, application installation, and system management, eliminating human error during these repetitive tasks. It’s also used to automate daily server backups, saving full database and incremental site backups to Amazon S3. By saving backups offsite to S3, we ensure that they are accessible even if a data center goes down.

Gareth Morgans of Herdl
For a single-server architecture, the performance bottleneck is often the database, which can be memory-intensive – make sure that you have plenty of RAM as well as vCPUs. Database performance can be improved further by using Redis to cache query results.

The standard config that ships with MySQL (my.cnf) will work, but you probably want to tweak that a little based on your server spec. There are plenty of good articles on optimizing MySQL for WordPress which include helpful suggestions and example config files, but the best option is to tune it to your actual site usage – for this, we use this excellent Perl script.

Be sure to always test any config changes on your staging site first, and benchmark your results using mysqlslap (which ships with MySQL). It’s a good idea to enable the MySQL slow query log on your staging server too, as this can highlight troublesome queries which should be investigated (and can also be useful for providing test queries for your benchmarking).

If you’re publishing content regularly, the WordPress database can become very bloated due to all the page and post revisions it automatically saves. By default, there are no limits on how many revisions WordPress saves – we restrict this number to five by adding the following line to the WordPress config file (wp-config.php):

define( 'WP_POST_REVISIONS', 5 );

Lastly, it’s also worth optimizing your database from time to time, but be sure to back it up first. WP Rocket, a WordPress caching plugin, provides all the tools you need for this. I’ll talk a little more about WP Rocket later.

Development tools

For WordPress development, we rely on our own special “flavor” of WordPress using the Sage starter theme (and workflow) by the Roots team. This includes Gulp for advanced, automated build tasks, Composer for controlling dependencies, including the use of third-party WordPress plugins (and versioning), and npm for package management.

As you can imagine, our workflow is constantly evolving and we’re always looking at new tools and services to incorporate into our process. Our team endeavors to keep our code DRY and follow BEM principles as closely as possible. The way we structure theme files is set up to facilitate this by breaking up theme functionality, templates, and assets.

Herdl uses the Sage starter theme as part of their own special 'flavor' for projects

For version control, we use Git via Bitbucket, following the NVIE git workflow. Code is automatically built and deployed via DeployHQ, which is straightforward to set up and provides all the options needed for WordPress development. Plus, their support is first class.

Once your application is up and running, it’s time to measure and benchmark the vital stats so you can fine-tune and optimize performance. For this, we use a combination of Pingdom Tools, GT Metrix and Google PageSpeed Insights. There are a lot of metrics to look at in the reports these services produce – ultimately, Load Time and Page Size are the ones to focus on, with the aim to get both as low as possible. This ensures that all users on all devices (and network connections) have the best possible experience.

A screenshot showing aspects of herdl.com's load time and page size

When it comes to cross-browser and device testing, we choose LambdaTest. It’s simple to use, offers a comprehensive test suite, and has plans to suit all budgets. It also integrates with Trello and Slack, forming an essential part of our workflow.

WP Rocket is our preferred WordPress caching plugin, and will dramatically improve the performance on any site. It’s easy to configure and provides very granular controls for the more advanced user, meaning you can fine-tune your cache configuration. WP Rocket integrates nicely with CDNs, and their licensing model is perfect for agencies.

Depending on the client’s budget and site, static assets are either served directly by the web server, from a CDN (such as Beluga and BunnyCDN), or through real-time image optimization services (Piio and Imagekit). For mobile performance, Piio (pronounced pie-o) is an excellent choice as it detects, optimizes, and resizes images on the fly before lazyloading them – this means that each device receives optimized and correctly resized images (without scaling in the browser).

Piio optimizes and resizes images on the fly

If we’re not using an image optimization service, then Short Pixel is our recommended plugin. It provides excellent image optimization using lossy, glossy, or lossless compression and can also convert images to WebP format. It can also bulk-optimize your entire media library, and the pricing is very competitive too.

Security is an essential component of website performance. If your site is damaged, infected with malware, or taken offline through an attack, then it’s not performing optimally. Being so popular makes WordPress an obvious target for hackers, so application-level security is essential. We use and strongly recommend WordFence which is far and away the best WordPress security plugin available. For eCommerce sites, choose the paid-for Pro License – customer data is not something you should risk.

WP Rocket, a WordPress caching plugin, provides all the tools you need for optimizing your WordPress database from time to time
WP Rocket, a WordPress caching plugin, provides all the tools you need for optimizing your WordPress database from time to time.

Availability is key too. There’s no point having the fastest site on the planet if it’s currently down and you don’t know about it. For server-level monitoring, we use Icinga to keep an eye on all the services running on each server. We also use Uptime Robot for added peace of mind – together, these two ensure we are always promptly alerted to any issues.

Mabl, Sentry, and Fluxguard handle application monitoring, alerting us to any application level issues. They can also detect changes at the content level – a good indicator of underlying code level issues following an update. Mabl does loads of other cool stuff too, including automated testing. It’s one of our favorite services, and definitely one to check out.

Mabl does loads of other cool stuff including automated testing. It's one of our favorite services and definitely one to check out

As traffic and load increases beyond the capacity of a single server, a multi-server architecture comes into play. At this point, we’d strongly recommend hiring a dev ops consultant or a dedicated in-house member of your team.

Make Performance Part of Your Design and Development Processes

Performance is a consideration throughout our process, from planning through to design and development. There’s a continuous dialogue between our design team and developers regarding the best way to approach a project – or even specific elements – to create the best online experience.

During the planning stages, we have a firm idea of what functionality will be required on the site. Using WooCommerce is an excellent example of this, as hosting requirements are different when we provide an eCommerce element. Clients are aware of this from the outset and are supplied with a different set of hosting options.

This same thinking is carried over into the design phase, where we’ll create wireframes, concepts, and even animations, to represent pages and elements on the site. It’s here that most front-end effects are conceived, and our team works together to design something that delivers an amazing experience where performance plays an integral part.

We feel it’s important to consider all devices as part of this process, taking into account how mobile and desktop experiences may differ.

Most front-end effects are conceived during the design phase at Herdl

We take an iterative approach to testing throughout development, with elements continually being tweaked. We follow a process of graceful degradation, starting with our ideal concept and removing layers appropriately for individual devices and browsers. In addition, we’ll set aside time specifically for performance optimization, introducing caching and file optimization, as well as code level changes. During this step, we’ll test and re-test elements across multiple devices until we’re happy that it’s performing at its best.

Focusing on performance throughout all stages of our work has helped to ensure that the sites we deliver are well received during launch, and has resulted in us winning many awards. These include a number of development-specific awards, such as Awwwards’ Developer Award, Mobile Excellence Award, and Mobile Site of The Week (amongst others).

Improve the Speed and Security of Your WooCommerce Sites

We hope that, by sharing some background on website performance and details around our setup and process, we can help WooCommerce managers improve the speed and security of their sites. To run an eCommerce website effectively, performance should be a top priority, and we feel it’s only going to become more critical with the prevalence of mobile devices.

If you have any questions or comments regarding our setup, leave us a comment or get in touch.

17 Responses

  1. Anh Tran
    November 9, 2018 at 8:00 am #

    Hi Gareth,

    This is an awesome post! I found a lot of interesting tools in this guide. Optimization, especially on the server side is one thing that I’m interested in for several years. I think it’s not only about the pagespeed score (which is usually about the front end), but also about the website performance in general. With correct settings and tuning, it helps the server run faster and serve more users.

    • Gareth Morgans
      November 9, 2018 at 3:27 pm #

      Hi Anh,

      Thanks for the comments and really pleased to hear you found the article useful. Totally agree with your points on pagespeed score, which can be more of a vanity metric. The article went a bit deeper in the end as it’s such a large topic – we started with the idea of talking about google pagespeed and perhaps should have changed the title to reflect the broader scope. Interested to hear any useful tips you might have?

  2. Peter Bray
    November 10, 2018 at 12:48 am #

    Great blog post, and we’re glad to see that Fluxguard is helping you detect application issues!

  3. Domain specialist
    November 10, 2018 at 8:20 am #

    This is an awesome post and i found it very interesting and in fact i am planning to implement these steps on my website https://domainglo.com . Thank You !

  4. david
    November 11, 2018 at 5:28 pm #

    hi, Gareth, do you recommend any special theme for have a good pagespeed score? because i start yesterday a e-commerce of crafts, and would be great if you have any recommendation and i want avoid the task of create a theme from scratch if is possible

    thanks in advance!

  5. Bradley Davis
    November 12, 2018 at 4:49 am #

    Some fun looking tools to checkout and test. Cheers.

  6. Lisa Anoy
    November 13, 2018 at 6:11 am #

    I’ll try your tips and I hope, I am also archieve the high speed.

  7. Tunde Sanusi (Tuham)
    November 13, 2018 at 6:26 pm #

    I’ve been using W3 cache for a long time.. Haven’t tested WP Rocket but would do so soon!

    And as regards hosting, i think a shared hosting plan should be able to handle it

  8. Rahman
    November 14, 2018 at 6:34 am #

    Great for the case study to archieve more fast speed.

  9. Vidmate
    November 14, 2018 at 12:35 pm #

    Really Helpful Article For Me

  10. Gentiqo Review
    November 15, 2018 at 7:12 am #

    Your tips is really helpful for me to archieve the best result in pagespeed.

  11. mohitjha13feb
    November 15, 2018 at 10:18 am #

    nice blog very informative thank you

  12. rizwan khan
    November 15, 2018 at 12:07 pm #

    Hello Gareth,
    its such a nice info and post! i must say i m from india…. i am web developer…using this amazing tool wooCommerce for amazing ecommerce industry so far!

  13. myfaayda
    November 15, 2018 at 12:09 pm #

    amazing post! and super extraordinary platform for eCommerce industry! & this article is really useful for page speed! which is most important part as for google seo!

  14. hareesh12312
    November 15, 2018 at 9:54 pm #

    Thanks for the details.

  15. Lima
    November 16, 2018 at 8:18 am #

    It is really interesting to the archieve the best speed.

  16. Rina
    November 18, 2018 at 9:42 am #

    Thanks Gareth and I love it to speed my pagespeed insight.

Leave a Reply

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: