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.

Site Specs

The customer gave details on the actual site specs or the site’s background. He mentioned the following:

  • WooCommerce
  • 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

Optimization Needs

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

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

</IfModule>

## EXPIRES CACHING ##

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

# ----------------------------------------------------------------------
# | Cache expiration                                                   |
# ----------------------------------------------------------------------

# Serve resources with far-future expiration date.
#
# (!) If you don't control versioning with filename-based
# cache busting, you should consider lowering the cache times
# to something like one week.
#
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires
# https://nginx.org/en/docs/http/ngx_http_headers_module.html#expires

map $sent_http_content_type $expires {
  default                                 1M;

  # CSS
  ~*text/css                              1y;

  # Data interchange
  ~*application/atom\+xml                 1h;
  ~*application/rdf\+xml                  1h;
  ~*application/rss\+xml                  1h;

  ~*application/json                      0;
  ~*application/ld\+json                  0;
  ~*application/schema\+json              0;
  ~*application/geo\+json                 0;
  ~*application/xml                       0;
  ~*text/calendar                         0;
  ~*text/xml                              0;

  # Favicon (cannot be renamed!) and cursor images
  ~*image/vnd.microsoft.icon              1w;
  ~*image/x-icon                          1w;

  # HTML
  ~*text/html                             0;

  # JavaScript
  ~*application/javascript                1y;
  ~*application/x-javascript              1y;
  ~*text/javascript                       1y;

  # Manifest files
  ~*application/manifest\+json            1w;
  ~*application/x-web-app-manifest\+json  0;
  ~*text/cache-manifest                   0;

  # Markdown
  ~*text/markdown                         0;

  # Media files
  ~*audio/                                1M;
  ~*image/                                1M;
  ~*video/                                1M;

  # WebAssembly
  ~*application/wasm                      1y;

  # Web fonts
  ~*font/                                 1M;
  ~*application/vnd.ms-fontobject         1M;
  ~*application/x-font-ttf                1M;
  ~*application/x-font-woff               1M;
  ~*application/font-woff                 1M;
  ~*application/font-woff2                1M;

  # Other
  ~*text/x-cross-domain-policy            1w;
}

expires $expires;

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……

Leave a Reply

Your email address will not be published. Required fields are marked *