Cloudways Optimizing Website speed (under 3 sec)
The headline of this blog post was part of an Upwork request by a customer. He was looking for someone to speed optimize his website and get it to load under 3 seconds. Not only was he specific on loading time, and under 2-3 seconds is good practice and the site specs – WooCommerce on Cloudways.
The customer gave details on the actual site specs or the site’s background. He mentioned the following:
- Caching plugin = Breeze (but deactivate, plugin cause css break need fix)
- Server = Cloudways Hosting
- CDN = Cloudflare
So he mentioned it is a WordPress , WooCommerce website, that it runs Breeze as a caching and optimization plugin, that the server is with Cloudways and that he uses Cloudflare as his Content Delivery Network
He also stated specifically what needed to be focussed on and that was pretty much anything you can focus on to improve the site’s speed really:
- WordPress Best Practices Review & Optimization
- Page Caching Configuration & Tuning
- Browser Caching Configuration & Tuning
- Database Optimization & Cleanup
- Anti-Heartbeat Setup
- HTAccess File Optimization
- 404 & Bad Request Review & Repair
- Plugin Review & Pruning
- Server Compression Tuning
- Image Optimization & Compression
- Before and After Reports
- Post Speed Fix Site Backup Provided
- Content Delivery Network Setup (currently using Cloudflare)
Now let me slowly work through this list here and add some details of what is meant by this all.
WordPress Best Practices
When you set up and run a WordPress website there are basic rules / things you need to think about to run your website well. There are coding best practices, there are accessibility best practices , there are SEO best practices and maintenance and security best practices and all these help with a better accessible website and are connected.
Page Caching Configuration & Tuning
Page caching is the technique to make sure all PHP for pages are cached and do not have to be generated on each request. PHP FPM Cache can be used for this. But there are other PHP caching tools out there such as Varnish. So the options tend to depend on what the server has on offer.
Cloudways for example showed at a W3 Total Cache configuration article that they use enhanced page caching . For the usage with Breeze which is used for WordPress more often these days they offer Varnish caching.
NB For Varnish vs PHP Fast CGI Caching see this article.
Browser Caching Configuration & Tuning
On Browser Caching I have written a lot in the past here and on other websites. Browser caching helps your browser to decide what files to load anew from scratch and what files to keep in cache. Google looks at your setup this way closely as it thinks you should not waste an end users or customer’s time on visiting your site. If he had been there before why should he load all images again. Well, the rules to tell what to reload anew and when can be setup in .htacesss, nginx configuration manually with rules that follow best practices or they sometimes can be set by plugins or other tools.
Cloudways has written an article on browser caching. And they did mentioned the basic .htaccess boilerplate
Cloudways Optimized WordPress Hosting & Browser Cache
They also rightfully stated
If you are a Cloudways optimized WordPress hosting customer, then you should put aside your worries about WordPress leverage browser cache warning popping up in online speed testing tools. Because Cloudways handles this issue by itself. You can change the expiry time by simply navigating to Server → Settings & Packages → Advanced, scroll down a bit and look for NGINX – Static Cache Expiry. The default value is 43200 min, that is equivalent to 30 days.
Only when using this it is for the whole server and cannot be set per website! See Brad’s article on this issue he bumped into himself.
So perhaps better to use the manual or plugin way. WP Rocket has got your back. And so does W3 Total Cache , only their configuration sucks.
Nginx Setups and Browser Caching
For Nginx setups that do not have this see https://github.com/h5bp/server-configs-nginx/blob/master/h5bp/web_performance/cache_expiration.conf which we use on our servers
Database Optimization & Cleanup
There are many ways to optimize your database, general database optimization and more specific WordPress ones like dealing with saved drafts, revisions, old plugin table leftovers and such. Cloudways has an article on this database optimization as well, but your setup depends on the package you run with them.
Some standard optimization like database and table optimizations can be done with ease and so can the removal of revisions as long as you do not need them. But removal of old plugin generated tables and meta data in the options table have to be done in a more careful kind of way.
Cloudways tip to use
DELETE FROM wp_comments WHERE comment_type = 'pingback'; DELETE FROM wp_comments WHERE comment_type = 'trackback';
to remove pingbacks and trackbacks is not a bad idea if you had these turned on and could live without .
And they also rightfully so mention that the Breeze plugin can help with this as well.
Anti Heartmap Setup
You see the mention of anti heartmap setup on many site speed optimization websites. At Webdesign Prague you can read
WordPress Heartbeat API can start sending excessive requests to your server which can lead to high CPU usage. We will make sure the WordPress Heartbeat API is set up and used properly with no SPEED leaks.
So that explains it already. It is about the well known WordPress Heartbeat API which allows near realtime frontend updates. Webnots has some great examples:
- Creation of periodic auto save and revisions when you create / edit posts in editor.
- Real-time sales data on the dashboard by ecommerce plugins.
- Used to show notification on the WordPress admin dashboard.
- Shows the locking information of a post by other author. On multi-author sites when an author is editing a post, all other authors will see a message that the post is locked by other author.
Updates that can be useful but are not always needed and can be demanding. Fortunately it is not that hard to tweak this. Our favorite WP Rocket team made a plugin for it called Hearbeat API Control .
HTAccess File Optimization
When they talk about .haccess file optimization they in general mean what you can do to improve client side speed using the Apache webserver .htaccess file. If you would be using Nginx that would be the configuration file. But let’s talk about the options you have:
- Enable Gzip and DEFLATE Compression
- Enable Keep Alive
- Enable Browser Caching
- Add Expires headers
- Disable Image Hotlinking
- Enable mod_pagespeed
- HtaccessLightSpeed Server Cache
You could use the extended .htaccess boilerplate by h5bp, but that may be a bit much and you would need to combine it with general WordPres rules. Roots however has a WordPress version based on it at https://github.com/roots/wp-h5bp-htaccess which you can install with
composer require roots/wp-h5bp-htaccess 2.0.1
Or you simply just use Wyck’s one https://gist.github.com/wycks/3011895 or Creare’s https://github.com/Creare/WP-htaccess which can just be added and it does include all the WordPress goodies to run permalinks and such. Creare’s seems the better choice in this manual addition section. Roots’ boilerplate is still numero uno though.
Also, as discussed earlier, many plugins such as WP Rocket help out with adding most if not all of these rules, so if you do not want to work with a boilerplate and tinker with it all do try solid plugins like WP Rocket first which work for server side as well as browser side caching.
More content to be added here at a later stage……