The Goal
The goal of this article series is to speed up the front end performance of your WordPress & Woocommerce website significantly. We want to see pages being delivered to the browser in 250-300ms or less. This series is written for experienced web developers, or anybody who wants to give it a try. Feel free to ask questions, when your stuck at some steps along the way. Be advised to make frequent backups of configuration files and databases, so that you can easily revert changes in case something goes wrong.
Measure site performance
In order to measure the success of these steps I recommend that you take a snapshot of the “Satus quo”, your current websites’ performance with all of the following tools. Take screenshots or write down the important metrics like scores, rendering times. Prepare to repeat this step along the way – or once you have finished all the tutorials of this series.
- Webpage Test gives you a complete breakdown of load and rendering times, shows which percentage of data are images, css or js, the number of resources loaded, tells you how many domains and third party providers have been involved in the page request and many more.
- PageSpeed Insights gives you two performance scores, one for mobile and one for the desktop experience. It also tells load and rendering times.
- RedBot is giving you feedback on wether there are errors in your servers HTTP(S) response. It checks server clock, caching, compression, cache validity and lifetime and displays the response headers returned from your website. It’s perfect for validation of specific resources (URLs) cache settings.
- GTMetrix much like Google’s PageSpeed insights gives you a general score and improvement suggestions.
- DNSSpy.io and Mozilla’s Observatory check your DNS settings and SSL certificate configuration. They give you detailed feedback on what to improve. Since we are focussing on Ecommerce here, you should really have a SSL certificate in place for the sake of security of your customer’s payment credentials.
- (Optional) New Relic APM which can be used even in its free trial mode to get detailed insights into any application not exclusively for WordPress & WooCommerce sites. It shows PHP Performance metrics, DB performance, Plugin compute times, it even tells which Hooks and Filters are most time consuming, which errors occur. It requires a server side installation, though.
- Nginx Amplify allows you to add up to 5 Nginx servers in the free plan. It detects problems in your configuration, shows lots of status details, you can confiugure Email alerts and more. It requires server side configuration and adjustments in your logging. amplify.nginx.com
- WordPress itself in its recent versions offers the Site Health section under Tools, which gives you feedback on outdated theme files, plugins, misconfigurations and more.
- And last, but not least, WooCommerce has a system report under WooCommerce > Status, which also gives you info on theme inheritance, DB size, Versions, Plugins and many more.
I am developing on macOS, so some command line commands throughout these article series might be slightly different on your operating system. Also, I am using Nginx web server instead of Apache, so you won’t find any tips specific to Apache here.
The Tutorials
- Setting up WordPress & WooCommerce with Composer Setup
- Using an .env file for database and other credentials Setup
- Debugging in your development environment Setup
- Setting up CI (Continuous Integration) with GitHub actions Deployment
- Reduce the number of WordPress plugins Performance
- Fixing a bottleneck: Transactional Emails Performance
- Optimising Frontend Resources with Perfmatters & Grunt Performance
- Reduce logging in your production environment Performance
- Improve WordPress & WooCommerce DB indexes for all meta tables Performance
- MySQL Configuration & Fine Tuning Performance
- Using a dedicated MySQL database server Performance Setup
- Enable, configure and monitor PHPs OPCache Performance
- Deactivate the REST APIs Performance Security
- Replacing WordPress Cron and Scheduled Actions with a real cronjob or deactivating it altogether. Performance
- Utilise the WordPress Firewall to prevent plugins from phoning home Performance Security
- Deactivate automatic updates Performance Stability
- Convert images to .webp format Performance
- Use a CDN for image uploads Performance
- Optimise Nginx to use HTTP 2.0 Performance
- Optimise Nginx to allow for better client side caching of static resources Performance
- Lock out unwanted crawlers and bots Performance Security
- Set Request Limits in Nginx Security
- Avoid and remove gettext Performance
- Use Cloudflare with proxy caching enabled Performance
- Use In-Memory Object Caches like Memcache or Redis Performance
- Pre-compress static assets with Brotli or Gzip Performance
- Using Caching plugins like WP Supercache, WP Rocket, etc. Performance
- Summary of Must-Have WordPress Plugins Performance
Et voilá! Your efforts will be rewarded with happier customers and better search engine rankings.
