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

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.

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.

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.

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.

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

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.

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.

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.

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.

About

Gareth Morgans