0% found this document useful (0 votes)
130 views

Wordpress Optimization Guide

This document provides recommendations for optimizing CDN/DNS, SSL, server configuration, and caching on a website to improve performance. It recommends using Cloudflare as a free CDN and enabling most of its optimization options. It also provides tips for optimizing Apache, PHP, MySQL, Varnish, and enabling object caching with Redis. Configuring virtual private servers, disabling unnecessary services, and tuning Linux settings can further boost performance.

Uploaded by

sofyan123
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
130 views

Wordpress Optimization Guide

This document provides recommendations for optimizing CDN/DNS, SSL, server configuration, and caching on a website to improve performance. It recommends using Cloudflare as a free CDN and enabling most of its optimization options. It also provides tips for optimizing Apache, PHP, MySQL, Varnish, and enabling object caching with Redis. Configuring virtual private servers, disabling unnecessary services, and tuning Linux settings can further boost performance.

Uploaded by

sofyan123
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 77

CDN/DNS

Cloudflare

For the majority of sites, a CDN is an almost mandatory service to implement if you want the
best performance. Cloudflare has a free tier, and is one of the most reliable CDNs out there.

Be aware that if you choose not to proxy your traffic through Cloudflare, you will also lose
most(almost all really) of the benefits of Cloudflare’s CDN, so you should speed test your site
with the CDN active(orange cloud), and with the CDN inactive(gray cloud) both.

Don’t just rely on the speed test results, visually check the site by loading it on your phone.

Cloudflare SSL

In Cloudflare, you should have pretty much every speed option enabled. Also submit your site to
the HSTS preload list, which will make browsers load your site faster as it makes the SSL
handshake shorter(It is a setting under ssl settings, be aware that if you do not install an ssl
certificate from cloudflare(the origin cert which needs to be installed on your host/clustercs, or a
let’s encrypt cert), your site will be inaccessible. HSTS prevents a site without a valid SSL cert
from loading. Your site will be completely inaccessible. Your site MUST have a valid SSL cert if
you submit your domain to the preload list.

You can issue as many origin certs from cloudflare as you want, they link them to your real ssl
cert. If you choose to use Let’s Encrypt, Let’s Encrypt lets you generate 5 certificates per week,
per domain. Be aware of this if you are reissuing certs to debug an issue. You will get rate
limited by let’s encrypt certs if you try to issue more than 5 and will have to wait until the
following week to deploy a new let’s encrypt SSL certificate.

Cloudflare origin certs do not have this issue. You can create as many as you want.

This allows you to revoke origin certs at will, which is very handy if you want to move hosting
providers, and will let you maintain access to a site protected via HSTS. You can revoke origin
certs while protected via HSTS with no issue.

Cloudflare does not have every performance optimization enabled by default. I recommend
going into the speed tab, as well as the network tab and activating most of the inactivated
options to get the full benefits of what the CDN can provide.
VPS and Linux Web Server Optimization
Set your init level to 3 if the default is set to 5. Use the command “init 3” to set the init level to 3,
then reboot for the changes to take effect. You can click the link below for instructions on how to
do so.

https://www.cyberciti.biz/howto/question/linux/changing-run-levels-3-5.php

This link is how to do the reverse, changing 5 to 3 if the “init 3” command does not work. If your
run level is set to 5, change it to 3.

Server backend configuration: PHP, APACHE,


MYSQL, NGINX, Varnish, HAProxy, Redis
You should attempt to utilize as much of the server resources your VPS has as possible. If you
aren’t utilizing all of the available RAM and CPU utilization, try tweaking your Apache, PHP and
MySQL settings, raising the values for all of them. Otherwise, you’re leaving performance on the
table. Server side optimizations are very important, I took my site from a mid 50’s pagespeed
score to the 70’s or even the 80’s, just by tweaking my server configuration files. You should
tweak the values for all of your server level services: PHP, Apache(or Nginx), MySQL, Varnish,
and HAProxy.

Apache
Apache: Heavily customized htaccess file

https://docs.google.com/document/d/1x-4SPBlsVzXd9gcnmm9-fD4XWv04HulbUHXqjNZ624M/
edit

You should be able to just copy paste the contents into your .htaccess file.

If you are not using WP-Rocket, feel free to remove the WP-Rocket rules in your config file after
you copy paste.

Apache MPM Settings

Prefork is the default. You can also test the Worker MPM or Event MPM with your site,
theoretically they should offer performance benefits. I haven’t tested either extensively. The
event MPM should be the fastest of the 3 if your Wordpress install works with it.

You want to increase these values in your httpd.conf configuration file:

# prefork MPM
# StartServers: number of server processes to start
# MinSpareServers: minimum number of server processes which are kept spare
# MaxSpareServers: maximum number of server processes which are kept spare
# ServerLimit: maximum value for MaxClients for the lifetime of the server
# MaxClients: maximum number of server processes allowed to start
# MaxRequestsPerChild: maximum number of requests a server process serves
<IfModule prefork.c>
StartServers xxxx
MinSpareServers xxxx
MaxSpareServers xxxx
ServerLimit xxxx
MaxClients xxxx
MaxRequestsPerChild xxxxx
</IfModule>

# worker MPM
# StartServers: initial number of server processes to start
# MaxClients: maximum number of simultaneous client connections
# MinSpareThreads: minimum number of worker threads which are kept spare
# MaxSpareThreads: maximum number of worker threads which are kept spare
# ThreadsPerChild: constant number of worker threads in each server process
# MaxRequestsPerChild: maximum number of requests a server process serves
<IfModule worker.c>
StartServers xxxx
MaxClients xxxx
MinSpareThreads xxxx
MaxSpareThreads xxxx
ThreadsPerChild xxxx
MaxRequestsPerChild 0
</IfModule>

The values you set here are heavily dependent on the amount of RAM allotted to your server.
My server had 12 GB of RAM, so I was able to set very large values here. Tweak the values
incrementally to increasingly large values up to a max of 1024(where the xxxx are), again,
depending on the amount of available RAM. These values are probably too high, but in my
testing 1024 had the best performance.

Do this for everything except MaxRequestsPerChild under prefork MPM(leave the worker MPM
one at 0) until you either max your server resources, or hit 1024.
You should look at the graphs for your RAM and CPU utilization in your hosting provider’s
backend panel. Make sure you aren’t going over whatever your host deems acceptable, and
definitely make sure it isn’t hitting 100%. The max you would want to go on either of them would
likely be 80%, but aim for 60% max utilization. You want to leave room for spikes due to heavy
load from a large influx of simultaneous users. If your site becomes popular all of a sudden
because of a link from a big blog, or a social media influencer or some other traffic source, the
usage may spike.

Further Apache tuning documentation

https://httpd.apache.org/docs/2.4/misc/perf-tuning.html

PHP Settings
I used PHP 7.4 when I built my site, as it was compatible with all the plugins I was using. If PHP
8 doesn’t have incompatibilities with the plugins you use, you should use 8-8.2(use the most
recent version of PHP if your site’s plugins support it if a newer version has come out after this
guide was written). Use the newest version of MariaDB or MySQL that you can.
PHP execution time should be increased to 300 seconds, input time increased to 300 seconds,
input variables increased to 20000, memory limit set to 384 MB-512 MB of RAM. It is generally
not advisable to allocate the entire portion of RAM allotted to your VPS, as doing so can cause
performance issues/crash the server. In my screenshot above, the PHP memory limit was set
too high, so try to keep it at a more rational limit such as 384-512 MB as mentioned above. If
you are on shared hosting, you might want to go with 256-384 MB as you won’t have very much
RAM allocated to your site.
PHP Opcache
Increase OPcache memory to at least 512 MB, preferably 1024 or 2048 if your server has more
ram. The max accelerated files limit should be increased as much as your server resources will
allow, the cap is 100000.

MySQL performance optimizations


Releem
https://releem.com/

Releem will automatically optimize your MySQL config, otherwise you can try my settings or
modify them.

My MySQL config

I created a separate document for my MySQL performance optimizations here:

https://docs.google.com/document/d/17SZoocudTrLC2pn9Udvit4GnK3kFPZ0zb1IIzNH-xWs/
edit?usp=drivesdk

Varnish VCL custom config


https://docs.google.com/document/d/18IrewYSQBt0AChDn_wENbDnKHlr0BWt_zkhfttfVbks/
edit?usp=sharing

You should be able to just copy paste the contents into your Varnish Default.vcl config file.

If you are using ClusterCS, clear the Varnish/Nginx cache in ClusterCS by going to
domains>expand your domain> click speed. Then, edit the clear cache speed rule. Make sure
to clear both Varnish and Nginx, if they are both active, then click get links and the top link in the
popup to manually clear the cache if you need to purge the cache.

If you’re sticking to Apache, use this command over Putty to completely disable the
Nginx service from booting, should boost the perf a little bit: “systemctl disable
nginx.service”, then reboot.

Note: You should use Apache or Nginx, not both, unless you are
using NGINX as a reverse proxy instead of Varnish.
If you are using Apache + Varnish, disable Nginx. Make sure you disable the Apache or
Nginx service(whichever one you are not actively using as your server backend) if you
are using a VPS with a Linux distro and don’t need the service. It will simply suck up
server resources, and since you are not using it it can be safely disabled.

You shouldn’t let unnecessary services stay active, they will slow your site down.
The more you strip down unnecessary services, both at the Wordpress level, and
the server level, the better your performance will be.

Change Init level to 3 if it is not the default


More info on that here

Disable THP
https://www.pingcap.com/blog/transparent-huge-pages-why-we-disable-it-for-databases/

Tuned-ADM
https://manpages.ubuntu.com/manpages/jammy/man7/tuned-profiles.7.html

Object cache
Redis

Redis is also a server level service, which you will need a Wordpress plugin to activate. I
recommend Redis Object Cache developed by Till Krüss. I just installed the Redis
service(which is done at the server level) and activated the plugin.

The Redis service needs to be enabled in most panels(including ClusterCS and


Cloudways), it’s just a toggle to enable it.

If the Redis service is not active at the server level, this plugin will do absolutely
nothing. The plugin will show that it cannot connect to the service in the settings page
of the plugin, so make sure it can connect when you press the button in the settings
page to activate the connection.
Make sure the Redis port(port #: 6379) that Redis is set to at the server level is set to
the default that the plugin uses(in most cases it defaults to the port used by the plugin),
otherwise the plugin will be unable to connect with the Redis service.

You also need to enable the Redis addon for PHP, which is a required dependency to
activate Redis caching.

Once you enable the connection in the Redis plugin settings, Redis database caching is
already configured and caching your database calls. No further configuration is
required, and you are done. Easy peezy.

Once correctly configured, you will see a flush cache option when visiting the redis plugins
settings. You will see your number of database queries in Query Monitor drop significantly after
installing and configuring Redis, and should immediately notice a speed improvement on your
site.

I noticed absolutely no difference in performance between the free version of the plugin
vs the pro version. I tested the pro version with the zlib compression feature
enabled(which is a pro only feature, and to enable zlib compression requires additional
configuration at the server level), but if your site is heavily database dependent(an
example would be a large e-commerce site), you may find the pro version improves
performance further. YMMV.

If you want to test the pro version, get a Pro license and request a refund if it doesn’t
add any additional performance.
Even with Redis, you want to keep database calls to a minimum. Reduce them to the absolute
minimum by removing unnecessary cruft from old plugins and themes via Advanced Database
Cleaner, and have as few plugins active as possible to accomplish whatever features you want
to implement.

If you need some plugins that only have functionality on the backend, make sure to disable
them on the frontend with Asset Cleanup’s plugin manager. The lighter weight the plugins are,
the better. The plugin’s file size is a general indicator of how efficient the codebase is. If a plugin
is 6 MB and another competing plugin is 900 KB, you’ll likely want to go with the 900 KB one if it
has all the features you need.

Docket Cache

https://wordpress.org/plugins/docket-cache/
Docket cache can be used when you cannot install Redis(some shared hosting plans don’t have
it for instance). Docket cache is an object cache, just like Redis is, except it functions at the
Wordpress level as opposed to the server level.

If you can use Redis, I would recommend using it instead of Docket cache. Test both to see
which performs better.

Nginx Configuration files


https://github.com/pothi/wordpress-nginx/

Installation instructions are included in the github repo. For a far easier way to install nginx and
really the whole server stack, use WordOPs(which is linked to above in the preface).

Haproxy
Raise your nbproc to 2. This will make your performance much more consistent. At least it did
for me, test the page speed of your site before and after changing the value to confirm.

You should also run “yum update” over SolarPutty(the command line SSH tool)
after you provision a VPS to ensure that all the installed packages on your VPS
are updated to the latest version.

To automatically update all your packages on a schedule to keep them on the


latest version, you will want to set up yum cron to run a cron job at a set time
interval. I may link to a tutorial on how to do so in the future, but for now you’ll
have to google it.

Speed Testing
One of your main goals when optimizing is to reduce the total weight(size in KB/MB) of a
page to the absolute minimum possible.

1. Input the url you want to speed test:


2. You can see the file weight of a page at the bottom of the waterfall chart on
GTMetrix, another reason why it’s one of the most useful tools you can use
for speed tests.

3. The other important metric you are trying to reduce is the number of
requests, shown at the bottom of the GTMetrix waterfall.

Both total page weight and the number of requests need to be reduced to the minimum possible
values you can achieve.

4. This is how to sort by file size:


This is how to filter by file type:
Every additional request(even if they are incredibly small, even a .3 kb request) adds additional
latency. Eliminate as many requests as you possibly can.

For desktop, your best tool to test with will be GTMetrix.

GTMetrix is superior to Pagespeed insights for Desktop scores and and provides more
actionable info on what you need to optimize, as you can access the waterfall chart to see load
times for specific files, as well as a list of all CSS and JS files that are loading on a specific page
that you are testing. You can run the test on individual URLs such as the homepage, an about
page, service page or whatever you want to test on the site you are testing.

If your Desktop score is good on GTMetrix, it should be good enough for Google. GTMetrix
offers mobile speed tests, but they are paid(not available on the free tier), and really, it doesn’t
matter if GTMetrix says you pass their tests.

For mobile speed tests, the metrics you need to improve are best measured by
Pagespeed Insights.

You need to satisfy Google’s speed tests for your SEO. Other sites may offer mobile pagespeed
tests, and perhaps they have a waterfall chart for mobile, but the end all be all for mobile
tests is Google’s Pagespeed Insights testing tool.

While you are trying to give the user the best possible experience on mobile(as the majority of
the site’s traffic will be coming from mobile), the only company you need to satisfy for speed
tests is Google because they are the gatekeepers for SEO. Bing refers less than 5% of the
traffic to your sites than Google does, and if your metrics satisfy Google, they will satisfy Bing.
You only care about optimizing for Google for SEO.

To expand on what I mentioned above, where GTMetrix really shines is its waterfall chart. It will
tell you exactly what files are loading, how fast they are loading, what their file path is if they are
loading from your server in your wordpress installation(which means they are loading from your
server and hosted locally) or from a third party domain(Google, a plugins developer’s server,
wherever).

This information is crucial to knowing what you need to optimize. For instance, if your site is
loading Google Fonts from Google’s fonts service, you will want to install them locally and serve
them from your VPS, as it will usually be faster to serve it from your site rather than Google’s
CDN.

I use GTMetrix to diagnose my issues, but Pagespeed insights to gauge how much farther I
have to go on my optimizations.
You are always aiming to optimize your mobile score (and not your desktop score on GTMetrix)
on Pagespeed Insights. Pagespeed insights is the only metric used for Google’s ranking for
search results. GTMetrix is simply for diagnosis so you know what to fix.

I cannot stress this enough, the metrics Pagespeed Insights


measures for mobile are the only ones that matter. GTMetrix
scores only real value are as a gauge of your progress and what
you need to fix.

If your desktop score improves on GTMetrix, your mobile performance score will improve along
with it.

Real world performance

Sometimes, the speed may seem artificially faster on speed tests(i.e. your scores have
improved), however it may load faster than reported in the speed tests in the real world(and
your site has actually gotten slower after a change even though a speed test reports that your
site is loading faster). Real world load times improvements are just as important as the
Pagespeed insights results.

Page Speed tests are mostly accurate(and satisfying Pagespeed Insights is absolutely
necessary for SEO), but the real world measurement should be measured by your own
perception and always gauged by your eyes. Test the changes with multiple devices for your
CDN specifically. In some cases, a pagespeed test may tell you that your performance is good
and rock solid, but loading it yourself and viewing the timing may actually show that it’s slower.
The reasons for this vary, but be aware of this because it means you need to fix something
you’ve done to optimize the site.

The real world speed not matching a speed test result is rare, but it does occur, so always
check how fast the site loads on your own devices, instead of synthetic speed tests(pagespeed
measurement tools).

If there is a mismatch between real world performance and your speed tests, something is
wrong, and you may need to restore to a backup if you can’t reverse the effects of changes you
have made.

You need to improve both the real world load time and the pagespeed test results on
pagespeed insights.
Wordpress Optimizations

Best practices
Disable XML-RPC via Asset Cleanup. This will enhance your site’s security and also prevent
some ddos attacks. You can just delete the file, XML-RPC is not used by 99% of wordpress
sites, you only want XML-RPC active if it’s necessary for a plugin to function.

Do not activate any plugins on your live site that you are not certain that you want. Always test
them in staging or on a local wordpress development server. Some plugins introduce lag that
cannot be completely removed even by cleaning the database tables and options left behind by
it. I’ve gained some performance back by removing the database entries that a plugin has
created, but there have been times I cannot reclaim all of the lost performance, and had to
revert to a backup. Create a backup often when you are working on the Wordpress side.
You don’t want to lose the work you’ve put in due to an easily avoidable mistake.

Always test your new plugins in a non-live environment before you commit to them and activate
them on your live site.

Choose Quality Plugins

If there are multiple plugins that all suit your needs for a certain task, pick the most optimized
one, because it will run the best. If there are 3 plugins, one is 300 kb, 700kb, and 1.2MB, the
300 kb plugin is the one that will perform best most of the time. Always compare the file sizes of
the plugins.

After you install a plugin, make sure to inspect your database with Advanced Database Cleaner
to check how many tables and plugin options were added. Many plugins can create too many
tables and/or too many options set to autoload, which can seriously slow your site down. If a
plugin adds too many database tables and options and you want to remove the plugin, you have
to delete the database entries with Advanced Database Cleaner after deleting the plugin.

Plugins do not clean up after themselves when you deactivate and remove them, they will
always leave tons of cruft over in your database that you have to manually prune.

Keep themes and plugins up to date.


Automatic plugin and theme updates

Keep your themes and plugins up to date for security and performance reasons. Devs generally
will frequently issue performance, feature and security updates for their plugins, and they should
ideally always be kept up to date.

I recommend only setting some of your plugins that do not have critical site functionality
to auto-update. Some plugin updates can completely break certain functionality by introducing
new bugs, so it’s a good idea to have backups before updating in case you need to revert.

Theme updates usually don’t break anything, especially since if you’re following the advice in
this guide, you should be disabling everything humanly possible in your theme and work
exclusively with some sort of page builder or custom code your site if that’s your preference.
Image Optimization
Image compression

https://compress-or-die.com/

https://tinypng.com/

https://batchcompress.com/en

https://squoosh.app/

I recommend running it through multiple services, and compressing the image multiple times.

It’s best to start with a high quality picture that has a large file size, because when you run it
through a compressor multiple times it degrades the quality with each pass. I ran them through
tinypng 3 times, then Batch Compress, then Squoosh to convert the PNGs to jpg, then through
TinyPNG again 3 more times). You can get your images to under 100 kb through this process,
even if the image starts at 4-9 MB. It’s certainly a hassle to do this, but it does work. The quality
degrades on each compression run, so it’s best to start with an ultra crisp high quality image so
the degradation isn’t noticeable.

Using Squoosh or Compress-or-die you can convert the image into jpg or png and manually
adjust the quality of the image you would like. If you convert a compressed image from tinypng,
batch compress or compress-or-die with Squoosh, a TinyPNG will generally regard it as a non-
compressed picture, thus tricking it into compressing it even further.

Running a picture through TinyPNG multiple times will usually shave off a few kb, but converting
it to another format with Squoosh(such as png to jpg) then compressing it again with TinyPNG is
usually the best way to significantly reduce image file sizes.

Once you have uploaded the file to Wordpress, Wordpress will automatically create various
sizes of your images. If you choose one of the smaller sizes that it creates(medium, medium-
large etc), if you are using a visual editor such as Elementor, you can select the smaller size(if
appropriate) and the file size will be reduced further.

Make sure the image is of acceptable quality before you put it live on
your site.

Flying Images for image compression, WebP and lazyload(free):


You can use Flying Images to compress and optimize my images.
https://wordpress.org/plugins/nazy-load/

It automatically serves them from an image based cdn, and auto-converts to the WEBP format
on the fly for supported browsers. Do not install Flying Images if you are using WP-Rockets
lazyload instead of Flying Images lazyload, it will load the media files from your site instead of
the statically cdn. If you want to use Flying Images/the statically cdn, WP-Rockets lazyload
must be disabled. Flying images has its own lazyload implementation.

Lazyload
Lazyload will prevent images that are below the fold(out of the user’s viewport when the site
loads) from loading until the picture enters the user’s viewport(i.e. they can see it on screen),
which reduces the weight of pages that contain images, which will significantly speed up their
load time. This is crucial if you have a very image heavy website.

There’s a free plugin for just the image lazyload feature from WP Rocket, but I haven’t tested it
since I have both:

https://wordpress.org/plugins/rocket-lazy-load/

Robin Image Optimizer

https://wordpress.org/plugins/robin-image-optimizer/

I don’t recommend this option if you have the time to manually optimize your images, but if you
don’t care to squeeze absolutely every ounce of performance you can get via optimizing your
images, robin image optimizer is a pretty good solution.

Robin Image Optimizer is the other solution for automatic image optimization and I would use it
either in addition to flying images, or instead of Flying Images. It will optimize and compress
your photos, which will reduce their file size. You can use it with Flying Images, or instead of
Flying Images. If you are using WP-Rockets lazyload, flying images is useless for you and you
shouldn’t use it. Use Robin Image Optimizer instead.

Icon Optimization

You can download font awesome free SVGs from here: https://fontawesome.com/download

https://www.flaticon.com/
Upload the individual svg files for all your icon needs. If you are using Elementor, remove font-
awesome as described above(code pasted into functions.php).

If your theme has font-awesome pre-enabled(many do, please check your GTMetrix speed
page speed test), disable it and replace all your icons with individual SVGs so the entire font
awesome library is not loading. This will significantly reduce your page weight.

Vecta.io
Use https://vecta.io to compress your SVGs.

Block Bad Bots


https://wordpress.org/plugins/blackhole-bad-bots/

The Blackhole plugin helps to stop bad bots and save precious resources for legit visitors.

Resource Hints
https://wordpress.org/plugins/pre-party-browser-hints/

This plugin allows users to automatically and easily embed resource hints to improve page load
time.

Resource hints included: DNS prefetch, prerender, preconnect, prefetch, and preload are all
supported.

Database Optimization
WP-Sweep
https://wordpress.org/plugins/wp-sweep/

Scalability Pro
https://www.wpintense.com/product/scalability-pro/

Helpful on pretty much any site, but especially so for woocommerce stores.
Meta Optimizer
https://wordpress.org/plugins/meta-optimizer/

(Unnecessary if you use scalability pro)

Query Monitor
https://wordpress.org/plugins/query-monitor/

Use Query Monitor to debug and identify plugins that have slow database queries.

It’s one of the best tools you can use to diagnose performance issues. Once you have identified
which plugins have slow queries, you can look for alternative plugins that have the same
functionality, but that are leaner and faster.

Advanced Database Cleaner Pro

Free version:

https://wordpress.org/plugins/advanced-database-cleaner/
Paid Pro version

https://sigmaplugin.com/downloads/wordpress-advanced-database-cleaner/.

It’s important to go through and delete every option you can, autoloading data builds up over
time and can slow your site without you realizing it. If you install a plugin, then uninstall it,
always delete the leftover tables and options with advanced database cleaner pro. Some
plugins create a ton of database tables and options, you should avoid those. You want as low a
database hit as possible, so fewer queries is better. This is important for Redis performance.
Better optimized plugins will make fewer calls to the database. I’ve also set anything that
shouldn’t be autoloading set to “autoload no'' via advanced database cleaner.

You can also disable autoload for many plugin database options with advanced database
cleaner. Many plugins will autoload unnecessary data, so disabling the autoload should boost
your site speed. Just make sure to bug test your site to ensure the entries you’ve disabled do
not cause issues with the plugin’s features.

Index WP MySQL For Speed

https://wordpress.org/plugins/index-wp-mysql-for-speed/

(Unnecessary if you use scalability pro)

Third party files


Third party files are any files that are not served by your domain. Screenshotted
below is a snippet of GTMetrix’s waterfall chart for a speed test of CBDMDs
domain.
Youtube, fonts.gstatic.com, and cdn.searchspring.net under the domain column in the
waterfall chart are the third party domains listed in this screenshot.

You want to host as many of the files from your plugins on your site as possible. Photos,
videos, anything that you can. CAOS for Google Analytics for example downloads the
files needed for Google Analytics locally to your VPS or hosting. If your builder has a
video player element that lets you choose a video from your Wordpress library, it is
usually better to use that than call a video to youtube, unless you are trying to get
subscribers to the youtube channel.

On that note, Youtube specifically will absolutely murder your site speed, and it should
be a last resort. If your client is demanding you use youtube and you can’t escape using
it, your site speed is going to tank, and I really haven’t found a way to deal with that(not
that I’ve really tried too hard to be honest). There just isn’t much you can do about it.
The file sizes Youtube serves for their videos is absolutely insane, in the multi MB range
and that is just an absolute page speed killer(especially on mobile). You can lazyload
the videos if they are below the fold, and that will reduce the file weight when the page
is loaded, but if they are above the fold, you are kinda screwed there. Even if you
lazyload the videos, many youtube implementations will make external calls even when
the videos are lazyloaded.

There will be a short delay for the video player to appear if you lazyload the video(it will
load/appear as the user scrolls down), and probably some CLS since the player is so
big(especially on mobile connections), since it takes a bit to download once it enters the
viewport, but it’s better than slowing down the initial page load time.

The load times for mobile users(especially with video) will be exacerbated by slow
internet speeds, so if your client’s sites operate in rural areas, they are going to
experience an even more severe delay than populated areas such as big cities.

Hosting files locally to reduce external requests and improve


performance:

You should always host every file you possibly can on your server locally. That includes images,
unless you are using a CDN for image delivery. Never load files from other third party
servers(that aren’t CDN’s) if you can avoid it, they will always load much slower.

You do not want to have your site download Google Fonts or the Google Analytics file for every
user from an external domain. It introduces additional latency, there will always be an additional
delay when connecting to any external site. Use Asset Cleanup to preload fonts, css and js files
that you want loading first, as mentioned before. All your local fonts(which you can identify via
Gtmetrix waterfall chart, if you see any font extension(WOFF, WOFF2, TTF etc) you can
preload them in Asset Cleanup.

Fonts
WP FOFT Loader

https://wordpress.org/plugins/wp-foft-loader/

This plugin implements and automates Zach Leatherman’s “Critical FOFT with preload, with a
polyfill fallback emulating font-display: optional” to optimize and speed up web font loading and
improve UX by minimizing Flash of Invisible Text, Flash of Unstyled Text, and DOM Reflow.
See https://github.com/zachleat/web-font-loading-recipes#the-compromise-critical-foft-with-
preload-with-a-polyfill-fallback-emulating-font-display-optional

Pair this with Font Squirrel

Self-Hosted Google Fonts

https://gwfh.mranftl.com/fonts

Fonts are heavy files that add a lot of page weight, and when you use Google Fonts from
Google’s CDN, the user has to make requests to their external server, which has a big
performance cost. If you are using a fast VPS or managed host you will definitely want to serve
those fonts locally.

Every single external call to a third-party domain will introduce additional lag. Minimize
third-party calls as much as possible. Fonts are a big opportunity to reduce lag, so this is a key
filetype to self-host.

Check your GTMetrix waterfall to identify what fonts you are using. Many plugins load fonts that
you aren’t even using, so you might want to disable the Google Fonts feature of the plugin
entirely and replace them with your downloaded WOFF2 files (which have the most browser
compatibility, and the smallest file sizes).

If you are using Elementor, it has a section in the settings to upload custom fonts. When you are
using an element, use the setting to select your font, it should be listed at the top of the list once
you upload them. Other builders should also have this option, you’ll have to check their
documentation to have to find out how to use it on your builder if you aren’t using Elementor

Font Squirrel
https://www.fontsquirrel.com/tools/webfont-generator

Web Font Generator

OMGF

https://wordpress.org/plugins/host-webfonts-local/

OMGF will locally host your Google Webfonts, which removes external calls for your fonts.
Fix Redirect Chains

You should always rectify redirect chains. Your site should either be set to have a single https
redirect to https://yourdomain.com or a single redirect directly to the
https://www.yourdomain.com version. You should never have an intermediary redirect between
the unprotected SSLless http version to the https www version if you choose to use www. E.G.
http>https://>https://www. This extra hop will always introduce additional latency. Make sure that
you eliminate it.

To reiterate, you should only have the bare http link which is immediately redirected to the
correct https link in your waterfall chart on gtmetrix. If it’s www, it should be
http://yourdomain.com>https://www.yourdomain.com. You should not have an intermediary
redirect to https://example.com.

This can be done either through an htaccess rule, or via your CDN. Cloudflare allows you to
create a redirect rule that will always forward http links straight to www, skipping the
intermediary redirect. Your SEO plugin will usually also have this option, but doing it via the
wordpress side will introduce additional latency. You will want to implement this on the server
level or via your CDN to achieve the lowest latency.

WP-Config Memory limit constant


Also ensure that you have defined the wordpress memory_limit constant to be the same value
you allocated for your PHP memory limit(the values should be identical, if you set 1024M ram
for PHP, you should also allocate the same amount, 1024M, for Wordpress via the memory limit
constant. You can add this to your wp-config file manually, or do it via duplicator if you’re
installing a backup. The needed line is: define('WP_MEMORY_LIMIT', '7200M');.

Do not make the memory limit larger than the amount of RAM that your VPS has or your
Wordpress site will crash. Look up your server specs before changing this value.
You can paste it into your wp-config file just above the line “/* That's all, stop editing! Happy
publishing. */” just make sure to modify the value to match whatever you set in your PHP
settings.

E.g:

define( 'WP_MEMORY_LIMIT', '1024M' );


/* That's all, stop editing! Happy publishing. */

Note: The memory limit is how much RAM is allowed to be allocated to a single PHP
process. You should not have any plugins or scripts taking up that much RAM. If you do,
I recommend you switch plugins.

--

Backups
Make sure you disable your backup plugin from running in the frontend with Asset Cleanup or
another plugin which can disable the plugin on the frontend entirely.

SEO
The SEO Framework
I now recommend you go with The SEO Framework instead of RankMath, as it
has the lowest page speed impact. I’m going to leave the sections I’ve already
written on Rankmath however

Rankmath

Rankmath is a very well optimized plugin that is not detrimental to pagespeed.

Make sure you enable sitemap functionality in Rankmath. This will allow WP-Rocket to detect
the Rankmath sitemap, which should increase preload efficiency.
Analytics
Rankmath Self-Hosted Analytics

Rankmath has cookieless tracking and hosting Google Analytics locally as options in the pro
version. You should always host the analytics file locally.
Its cookieless tracking option means you can completely remove or ignore any cookie
related GDPR compliance plugins, since you are no longer tracking users with cookies!

CAOS - Host Analytics locally

https://wordpress.org/plugins/host-analyticsjs-local/

If you use any tracking analytics or any tags(you should!), use CAOS analytics to host gtag.js
locally to negate the performance impact they have on your site.
The cookie value will be unique to what the laws are for the areas your customers are in, so be
aware of local privacy laws.

Tag Manager

https://tagmanager.google.com/#/home

Use Google Tag Manager to add third party tracking tags. Never use additional tracking plugins.
Once you’ve set up all your tags with Tag Manager, use CAOS to download gtag.js. All your
tracking tags should function via that one file, which should reduce requests and speed up your
load times. Many sites are very laggy because of bad tracking tag implementations.

Theme
Astra

https://wordpress.org/themes/astra/

You do not need the pro version, it will make your site slower.

You should not be depending on the theme at all if you are using a page builder. You want the
lightest weight theme you can get(Astra) and to strip the theme to the bone as much as you can
to reduce its performance impact as much as possible. If you are using a page builder, it should
be capable of designing the whole site top to bottom.

These are the optimal settings for Astra that you should enable with Asset Cleanup:
You should also download the astra child theme:

https://wpastra.com/child-theme-generator/

Copy paste this into your functions.php in theme editor:


Put these lines right under where it says “define constants”

function astra_remove_header() {
remove_action( 'astra_masthead', 'astra_masthead_primary_template' );
}

add_action( 'wp', 'astra_remove_header' );

add_filter( 'astra_schema_enabled', '__return_false' );

add_filter( 'astra_meta_box_options', 'default_disable_options' );

/**
* Default disable the Meta Options
*
* @param array $meta_option Page Meta.
* @return array
*/
function default_disable_options( $meta_option ) {

$meta_option['ast-main-header-display'] = array(
'default' => 'disabled',
'sanitize' => 'FILTER_DEFAULT',
);
$meta_option['footer-sml-layout'] = array(
'default' => 'disabled',
'sanitize' => 'FILTER_DEFAULT',
);
$meta_option['footer-adv-display'] = array(
'default' => 'disabled',
'sanitize' => 'FILTER_DEFAULT',
);
$meta_option['site-post-title'] = array(
'default' => 'disabled',
'sanitize' => 'FILTER_DEFAULT',
);
$meta_option['site-sidebar-layout'] = array(
'default' => 'disabled',
'sanitize' => 'FILTER_DEFAULT',
);
$meta_option['site-content-layout'] = array(
'default' => 'disabled',
'sanitize' => 'FILTER_DEFAULT',
);
$meta_option['ast-featured-img'] = array(
'default' => 'disabled',
'sanitize' => 'FILTER_DEFAULT',
);
$meta_option['ast-breadcrumbs-content'] = array(
'default' => 'disabled',
'sanitize' => 'FILTER_DEFAULT',
);

return $meta_option;
}

add_filter( 'astra_amp_support', '__return_false' );

Picostrap

Note: I prefer Astra, but you may find PicoStrap to be faster. Test both(and make sure to
disable unnecessary files loaded by Astra first) to determine which one is better for your
site.

https://picostrap.com/

Picostrap is one of the lightest weight themes I’ve ever tested. If you are just starting to build
your site, I highly recommend picostrap. I would compare it to Astra, depending on your plugins
one may perform better than the other. Since PicoStrap is built to be ultra lightweight(the entire
theme is ~350kb, it’s 4x lighter than astra), it may perform better for you.

For my site, Astra is actually faster, but YMMV.


You should absolutely try both. Astra absolutely does require optimizations to realize the full
performance you can achieve with the theme. They are however very easy optimizations to
implement. The Asset Cleanup settings will be automatically applied if you import my settings
config file I posted further down in the guide. The screenshots are if you want to apply the
correct settings manually.

Elementor
If you’re using Elementor add-ons, make sure you go into every add-on pack you use setting’s
panel in the backend and disable any unnecessary widgets.

Enable the inline SVG icons setting under “experiments” in Elementor’s settingsif it’s disabled in
the wordpress backend.

This will require you to upload individual svg icons if you want to use icons that you can
download from https://www.flaticon.com/ or another free/paid icon site.

Lightweight Youtube Player


https://wordpress.org/plugins/wp-youtube-lyte/

WP YouTube Lyte allows you to “lazy load” your video’s, by inserting responsive “Lite YouTube
Embeds”. These look and feel like normal embedded YouTube, but only call the “fat” YouTube-
player when clicked on, thereby reducing download size & rendering time substantially

Lightweight Cookie Notice


Lightweight Cookie Notice by DAEXT

https://codecanyon.net/item/lightweight-cookie-notice/30970799

This is the lightest-weight cookie notice plugin I’ve found, it adds only 8 KB to your page weight.

Machete

https://wordpress.org/plugins/machete/
Preload Inner Pages with Flying Pages
https://wordpress.org/plugins/flying-pages/

This plugin will preload inner pages.

Note: Make sure to delay the js file “flying-pages.min.js” in Perfmatters(or whatever


plugin you are using to delay javascript) settings panel. WP Meteor, while it does delay
everything, does not seem to touch this file.

Control WP-Cron Jobs


https://wordpress.org/plugins/wp-crontrol/

WP Crontrol enables you to view and control what’s happening in the WP-Cron system.
Remove Unused CSS
Instructions
Note: For these instructions I will be using perfmatters interface for the example.

1. Enable the remove unused CSS function:

2. Clear the caches of the caching plugin you are using, and the server cache if your host
has one or you’ve enabled it on your VPS if you have one configured.

3. Check the frontend to ensure nothing has broken. Check every page thoroughly
throughout the entire site. Remove unused CSS will remove unused CSS on every
page on your site.

4. Add exclusions if necessary. Clear your unused css using the button at the bottom, or
the the clear unused css function of whatever plugin you are using.

5. Clear your caches again and verify that nothing is broken. If something is still broken,
repeat adding exclusions until the design no longer breaks.

6. Once everything that you need to exclude is excluded(if you need to add exclusions at
all that is), move on to delaying javascript
How to identify classes that need to be excluded

1. Inspect element over the css element you are trying to exclude.

2. Double click the class so the text is highlighted and then copy it.

3. Paste it in the exclude classes box with a period before the text. For example, “.media-
wrap medium-down--hide”

How to Identify which stylesheets need to be excluded


If excluding a class or a selector does not work, you may have to exclude an entire css
stylesheet.

1. First, go https://gtmetrix.com and speed test the website you are trying to optimize. This
requires you to copy paste your URL into the text box on the GTMetrix homepage:

2. Next go to the waterfall chart tab, and sort by CSS files:


3. Find the Stylesheets that need to be excluded and paste them into the exclusions box
and hit save.

You will have to play around with it. I highly recommend you test the implementation of this
feature on a staging site (not your live site), so the user experience is not affected on the live
site due to design breakage.

Paid plugins with remove unused CSS


Flyingpress, WP Rocket, and perfmatters all have the option. There are other caching plugins
which also have the option.

Free Option for removing unused CSS

https://wordpress.org/plugins/debloat/
Delay Javascript
Delaying javascript is absolutely necessary for big performance gains, as javascript is one of
the worst offenders for reducing page speed performance. Delay JS is essentially lazyload for
javascript, and it loads those javascript files only after user interaction to prevent them from
downloading on initial page load.

How to Identify which files need to be delayed or excluded


from being delayed.
NOTE: You will have to delay scripts on every page. Certain
plugins(such as some form plugins) will only load on the page in which
they are used(the contact page in the case of the form plugin for
example). That means you will need to gtmetrix test every url and
add the specific scripts to either the delay list or exclusions list.
Speed test thoroughly!
4. First, go https://gtmetrix.com and speed test the website you are trying to optimize. This
requires you to copy paste your URL into the text box on the GTMetrix homepage:
5. Next go to the waterfall chart tab, and sort by JS files:

6. For this example, I will use perfmatters to demonstrate how to choose which files to
delay. You will pick the specific scripts you want to delay out of the waterfall chart. For
example, wp-polyfill.min.js. Other files in the list are bankful-script.js, w.js,
hooks.min.js, etc. You do not need to copy the full URL, just the name of the javascript
file you wish to delay.

7. Paste the name of the js files you want to delay(or exclude) into the box and hit save.

8. Next you should go to the frontend of your site and check that nothing has broken either
with the design, functionality or both. If a javascript file is essential and you delay it, stuff
will break on the frontend, so make sure you test your site thoroughly after delaying a
javascript file

9. If instead of delaying specific scripts you wish to delay all of them wholesale and then
add exclusions for the scripts that need to run without being delayed, perfmatters
has that function.
This may be preferable if you have a lot of scripts loading on your site. Instead of specifying
scripts you want to delay here, you will want to list the scripts you wish to exclude here.

These instructions are applicable to any of the plugins that can delay javascript listed in
this guide or any other plugin that contains functionality for delaying javascript.

WP-Meteor

https://wordpress.org/plugins/wp-meteor/

WP-Meteor functions similarly delays javascript in a comparable way to WP-Rocket. I have


found wp meteors delay to be superior, but YMMV. I would recommend testing both. As with
removing unused CSS, please be aware that this may break functionality or the way your
elements display, and so these plugins should be tested on a staging site before pushing the
changes live.

WP-Meteor is free. Try it out, contact the dev if there are any bugs you encounter.

WP-Rocket will disable its Delay Javascript feature if you activate WP-Meteor, since you do not
need 2 plugins to delay javascript. Only use one or the other.

Keep in mind, WP-Meteor and WP-Rocket will delay all javascript, and this can and likely will
break some elements on your site’s pages. If this occurs, you need to manually add exclusions
for the javascript files that are required for specific functionality of a plugin to work. Design
elements may break as well by delaying javascript, so it is critical to go through your site after
enabling this feature and check all of the pages(and/or post types) to ensure something did not
break. You have been warned.
This feature will give you one of the largest page speed boosts you can get out of the methods
listed in this guide, however, stuff will likely break. I can’t stress this enough, double and triple
check your site to ensure everything is functioning correctly. Test that your form submissions
still works, add to cart process still works, popups, anything that is dependent on javascript. If it
is a feature and not a design element, it is very likely to be implemented via javascript.

To identify the files you want to exclude, test your site in GTMetrix and filter it to only display
javascript files with the javascript tab before you activate the delay javascript feature, so you
know what you need to test excluding.

Exclusions

However, delaying javascript has a very high likelihood of breaking functionality and/or the
design of your site, so you will most likely have to add exclusions for specific javascript files to
prevent this. Double and triple check your pages and site features after activating this feature to
ensure nothing has broken, because I have seen some nasty side-effects(such as forms not
submitting, broken pop-ups, broken video players, broken maps and more) if exclusions are not
added.

Perfmatters Delay JS

I highly recommend using Perfmatters delay specific JS feature in conjunction with WP-Meteors
delay JS feature. Any javascript you want delayed to completely prevent it from loading on the
initial page load has to be added manually. It is keyword based, so you can either specify a
specific js file, or a string that is used in multiple js files.

If you want to delay all javascript files relating to a plugin, here is a random example of a
hypothetical plugin which I’m just making up. if every file from “Sumo Wrestler forms” has the
word wrestler in every javascript file, you can just use the word “wrestler” in the delay js box to
delay all of those files.

Do not use Perfmatters Delay All JS feature(there is a dropdown where you can select either
option) if you are using WP Meteor or WP-Rocket’s delay javascript feature.

As mentioned above, Flying Pages Javascript file will show up in the GTMetrix waterfall of the
page speed report and it will download on every page on the site when a user visits a page.

Delaying it with Perfmatters Specific Delay JS feature will prevent the file from loading entirely
until user interaction with the page, and is required to remove the page weight impact of using
Flying Pages. Otherwise, Flying Pages will hurt your page speed performance.
If a file is not needed at all until user interaction, delay it with Perfmatters Specific JS file delay
feature. This also applies to your analytics files(Google Analytics, Hotjar, or any other analytics
tracking software you are using). This can also apply to video players(use this feature on the
video player javascript files only if the video player is below the fold), otherwise you will
get pop-in when the video player JS file downloads, which is quite jarring and hurts the user
experience.

WP-Rocket Delay JS

WP-Rockets Delay JS feature will delay ALL js, and sometimes even if you exclude a file in their
exclusion box, it will not actually exclude the file from the delay feature. Exercise caution if you
choose to use WP-Rockets delay javascript feature, as it may be impossible to exclude a
specific file that is required to enable a specific piece of functionality in one of your plugins. It is
a known bug in WP-Rockets Delay JS feature which I believe has not been fixed yet.

Flying Scripts (Free)

If you need a free option, flying scripts is the go to.

https://wordpress.org/plugins/flying-scripts/

Delay/Lazyload anything

https://wordpress.org/plugins/delay-load-any-content/

This is useful for delaying html elements such as the footer(and other objects below the fold)
from loading on the initial page load.

Caching Plugins
Flyingpress

Flyingpress should be used together with WP Rocket. I prefer all of Flyingpress’s


functions(minification, caching, critical css etc) except for the missing image dimensions(I’ve
found that the WP Rocket implementation works better, even though Flyingpress does have an
option for it) and lazyload feature. WP Rocket’s lazyload is just superior in my experience.
WP-Rocket

https://wp-rocket.me/

My settings config which you can import

https://mega.nz/file/ooBAHZAQ#B5GxnsZbzaECjOB3NDDgDOl4i2zMwEoNboJdf4Cqexs
WP Rocket(or Flyingpress) is a necessity IMO. It also generates critical css for all post types,
and you can use it to generate critical css on a per page basis if they have different critical css
requirements. Enable pretty much every option in its settings, except for combine css and
combine javascript.

You don’t need link preloading since you will install Flying Pages. Make sure you disable link
preloading in WP Rocket or Flyingpress, the feature will add a javascript file to every page load,
and the functionality is redundant since we will be using Flying Pages to preload inner page’s
html.

Lazyload for images

Enabling this option makes WP-Rocket create a very small js file which will make your site only
load the images that appear in the viewport when your site loads. Lazyload makes it so the
images that are offscreen only load when the user scrolls down, to speed up the initial load time
of the page, only loading the other photos as needed. This massively improves the page load
size and the user experience.

However, you need to add image exclusions in the exclusion box to all the images that
load in the above the fold content so that they are not lazyloaded in WP-Rockets settings
if you use their lazy-load.
You do not want to lazyload the files that are above the fold, as that will artificially slow
down their load times because they will load after the lazyload js file. This will negatively
impact your performance if you do not add the exclusions, so don’t forget! As long as
you don’t forget to add exclusions, lazyload will significantly boost your site’s
performance.

WP-Rocket Preloading and XML sitemaps

You should enable the XML sitemap feature in Rankmath. Once Rankmath has created a
sitemap for you, a new option will appear in the preload section of WP-Rockets settings which
will let you preload based on the sitemap.

How to reduce CLS score with WP-Rocket

The add missing image dimensions feature in the media settings will significantly reduce your
sites Content Layout Shift score(CLS), which is a critical Core Web Vitals metric. My CLS was
reduced to zero by activating this setting.
WP-Rocket specific Varnish and Nginx cache settings on ClusterCS

Following this guide from cloudways: https://support.cloudways.com/how-to-configure-wp-


rocket-plugin-wordpress/

If you are using WP Rocket(which you should be) with Varnish, you will need to add a query
string exclusion for “(.*)/?f=(.*)”. This is considered a query string exclusion in clustercs’s
panel, it may be just a url exclusion for you depending on your hosting panel options.

Otherwise, you will receive 404 errors when you clear the cache. You can add this by editing the
varnish caching rule in ClusterCS, adding an option for query string, not_contains, and then
pasting (.*)/?f=(.*) to be whitelisted. Make sure you save your settings for the rule, then scroll
to the bottom of the page and press save there too to apply them. If you have issues with
admin-ajax, make a path and query string exclusion for it if you receive 404 errors for admin
ajax, that seemed to resolve my issue.

These fixes will also apply if you are using Varnish or the Nginx cache if you have used an
alternate panel configuration service, or WordOPs to configure your VPS.

Perfmatters
My Perfmatters config which is importable:

https://mega.nz/file/VtA22TSQ#1-sbR7K37MLDnIQS6DgvRHAg_BQXmabpudqr29aFO6c

I’ve screenshotted the settings I have active in Perfmatters if you don’t want to import the config,
leave the Google Maps setting untoggled if you use Google Maps on your site.
You should also get the plugin perfmatters. https://perfmatters.io/.

You should ALWAYS preconnect and prefetch any external domains that your site links to. This
includes sites like google tag manager, or google analytics, facebook, or any external sites your
website is linking out to.

Make sure you set up perfmatters to preconnect and prefetch the statically cdn domain so you
get the best performance if using flying images. You can get the cdn url if you run a gtmetrix
speed test on your site and check the waterfall chart.
You can easily identify these external domains by looking at the waterfall chart in gtmetrix and
looking at the domains listed, you can easily pick out which sites your site is connecting to. Use
preload for domains that load content on your site like a photo CDN, you don’t need to preload
links to other websites that you aren’t pulling content from. Perfmatters has these configuration
settings in the extras tab.

Anti-Spam - Do not use a Captcha


https://wordpress.org/plugins/zero-spam/

Captchas introduce additional lag, the above is a far better solution. If zero-spam doesn’t work
for you, find another captchaless option in the Wordpress plugin directory. Always seek to
minimize calls to third party websites.

If zero-spam isn’t working for you, try to find another non-captcha anti-spam plugin.

Another option is:

https://wordpress.org/plugins/fullworks-anti-spam/

Asset Cleanup
Asset Cleanup is an essential optimization plugin.

Asset Cleanup takes the most effort to configure out of everything in this guide.
It has the unload rules, async/defer rules, items moved from head to body, preload rules, plugin
unload rules. Everything described below.

If you have any issues, you can undo any of my rules that I have configured by loading the page
and toggling them off.

It includes all the on page optimizations for Elementor, Astra, Woocommerce, Powerpack for
Elementor, Woocommerce Discount Rules, Woolentor, a ton of other Woocommerce addons, all
of the backend optimizations, Rankmath optimizations, and much more.

If you’re using any of these plugins, importing this will significantly speed up your optimization
time and includes specific settings like moving certain files to body or disabling them sitewide if
they aren’t needed. You can always import and change/customize the settings to your liking, it’s
just a really, really good starting off point with tons of preset optimizations.

It also includes all the settings in Asset Cleanup’s settings panel preconfigured.

Test Mode

Enable test mode if you’re optimizing a live site so that only the administrator user account can
see the changes. Or install, migrate your website to a staging site or local wordpress
development, then optimize away without having test mode enabled. Otherwise you have to
worry about breaking the frontend for a site which already has existing users and traffic.
Asset Cleanup Disabling CSS and JS files in the Asset
Cleanup Metabox on pages:

You should disable all unnecessary js and css files from plugins that are loading on a page if
you do not want to completely disable them with the plugin manager that you can without
breaking the page.
Asset Cleanup File Preloading in the Asset Cleanup Metabox
on pages:

You should only preload css files you want to load first that are critical to the page
rendering.

Some files need basic preload, some can be asynced preloaded, other files cannot be
preloaded at all due to breaking your page. You will have to clear caches and retest all related
functionality to the file on the frontend to ensure you did not just introduce a new bug. For
instance, I moved the simple lines icon file from a plugin called Woolentor. This damaged the
ajax add to cart functionality of it’s widgets gear icon for a split second after pressing the add to
cart button. I would never have known that was an issue if I didn’t test my changes.

You should preload css files above the fold(the content that loads in the viewport without
scrolling) so that they load with priority and render your content faster. Ideally, your above the
fold content should not need any javascript at all, which will improve perceived and actual load
times. Set the preload to async if you can.

I generally would not preload a js file, as this will make it load in the head and give it
priority, making your render-blocking score worse.
Move css/js files load location from head to the body to
reduce render blocking

If you cannot completely disable a css/js file on a page because it is necessary, you should
move every js/css file that isn’t immediately needed and doesn’t break the page when doing so
to the body of instead of the head to reduce render-blocking and improve load times.

Most js files do not need to be loaded in the head, and most plugins are poorly coded and load
them in the head. You should move all or as many js files as you can from the head to the body.

You should also do this with any css file that isn’t immediately needed, as this also reduces the
render blocking score.

Keep in mind, you cannot change the location per page, moving the file from head to body will
do so globally on every page on the site, so be aware that this could break something on one
specific page vs another if the code needs to load in the head vs loading in the body.

Asset Cleanup Async, Defer for JS files:

I also set all css and js to async that I could.

You have to test the frontend functionality to make sure nothing broke if you set any file css or js
to preload, async, or defer. You should only do it to CSS files that are above the fold, as these
are critical and need to load first to avoid flashes of unstyled content. You will need Asset
Cleanup Pro for async and defer settings, I don’t think the free version has them.
You should be asyncing and deferring any javascript file you can. These properties can also
break your page, so you will need to test it after you implement it for every file. I suggest doing
them in small groups and then backtracking if any issues arise, for sake of time. 2-3 files per
run, that way you don’t make too many changes and can more easily narrow down the issue. 1
by one is horribly slow and inefficient to do.

CSS Inlining with Asset Cleanup

https://blog.logrocket.com/improve-site-performance-inlining-css/

Be careful not to inline too many files, this can hurt performance. Inlining CSS will integrate this
CSS into your HTML head, which will likely download on every page. Only inline critical CSS
stylesheets that will download on every page, such as small CSS files from your theme,
or a plugin that is used site-wide.

Elementor and Asset Cleanup

You can move elementor-icons-shared-0 in the Asset Cleanup metabox to the body, or disable it
entirely. If you remove all font-awesome files via the function pasted in your child theme’s
functions.php, you shouldn’t need this unless your menu has a submenu indicator. If you are
using powerpack for elementor and use their advanced menu instead of the default nav menu
widget in elementor, you can upload an svg file for the submenu indicator.

Removing font awesome entirely is highly recommended, your pagespeed insights mobile score
should jump up by ~10 points. You will have to replace all icons on your site with svg icons
however. It’s honestly super, super worth it, and a major performance boost.
Disable unnecessary hardcoded and external css/js on pages
that they are not needed:

Some plugins do not load their code as a file that’s identified under the plugin in the Asset
Cleanup metabox that appears on pages. They appear at the bottom in the hardcoded section.
One file that appeared there for me was from a form plugin that was loading a captcha. I
couldn’t figure out where the file was coming from until I disabled the hardcoded text that
referenced the captcha. It was loading the captcha file, even though I didn’t even have the
captcha feature activated. Some plugins will load useless files that you don’t need,
unnecessarily bogging your site’s speed down.

Hardcoded code will not specify what plugin it’s related to, but if you read the section labeled
“source” that is hardcoded, it’s relatively easy to identify what plugin it is related to. If you aren’t
sure what the hardcoded code does, either disable it and test the frontend to ensure nothing
broke, or just leave it alone. These files generally do not have a huge performance impact, but
this varies by plugin, so it may be worth disabling them.

As far as I know, perfmatters does not have the ability to unload Wordpress core files

Disable Theme JS and CSS using Asset Cleanup


If you’re using Elementor and using the theme builder, it replaces a lot of needed functionality
from your theme. You should check through the css/js files your theme loads and see if any file
of a theme can safely be disabled without breaking any functionality or the design.

Only disable Woocommerce general and Woocommerce layout on non-Woocommerce


pages if you are using Astra. Otherwise it will break Woocommerce page layouts.
Asset Cleanup and Query Monitor

If you disable multiple js/css files with asset cleanup before saving the page and something
breaks, Query Monitor is very useful for diagnosing which plugin is responsible, and you should
know which scripts or css you need to re-enable. It will give you useful php error messages
which are usually specific to the plugin having issues, so you’ll more easily be able to tell which
file you manipulated that’s causing the issue.

Asset Cleanup’s Plugin Manager

Out of everything in this guide, this will be one of the most important
things you can do for optimizing your site and will have a significant
impact on both your backend and frontend performance.

You should use the plugin manager(found under asset cleanup in the backend) and disable any
plugins that don’t need to run on specific pages on the frontend. Any plugin that runs entirely in
the backend and does not have any frontend component can be disabled sitewide, you don’t
need to add an exception.

If you need to add exceptions, they need to be added as regex rules. Please check the asset
cleanup documentation for further information on this:
https://www.assetcleanup.com/docs/what-are-load-exceptions/

It’s more powerful than just disabling js/css. You should also disable plugins on the admin
dashboard that are unnecessary on certain backend pages. For instance, you don’t need
elementor to load on the settings pages of other plugins. This will significantly speed up your
wordpress admin dashboard.

Be cautious with this feature, as it will completely unload ALL the plugins code on that page, not
just the CSS or JS. It’s like the plugin was completely disabled on that page if you disable a
plugin via the plugin manager function.

Functionality can break when disabling plugins via plugin manager if you disable them on the
wrong pages in the admin dashboard. If you have disabled a plugin on a certain settings page
and functionality is missing, the plugin most likely should not be disabled for that url/regex rule.

Asset Cleanup’s CSS and JS concentation and caching vs


WP-Rocket’s

I recommend you do not use Asset Cleanups CSS or JS minification or concentation, WP


Rocket’s is superior in my experience. However, I would enable the option at the bottom of both
the CSS and JS settings panels(dynamic caching) in the asset cleanup settings; you can use it
at the same time as WP Rocket. Also enable the Varnish addon in WP-Rockets settings if you
use varnish(you should).

I’ve tested pretty much every minification/concentation/caching plugin on the market, wp-rocket
pretty much performs the best.
Fonts

Disable Google Fonts via Asset Cleanup and preload all local
fonts

Another thing you can use asset cleanup for to have a huge impact on your site is to disable all
of your Google Fonts and host all your fonts locally. Asset Cleanup lets you preload local fonts
and apply font display properties as well, i recommend setting the value for that to swap.
Sitewide and html source settings rules in Asset Cleanup’s
settings

In Asset Cleanup’s settings, enable all the options you can in the site-wide common unloads tab
and I would disable everything, unless you need the functionality, such as emojis or oEmbeds. If
your builder supports Emojis, they most likely have their own library for implementing them, and
there is no reason to leave this feature enabled as it is the Wordpress default one for Gutenberg
or the Classic editor. Disable XML-RPC as well as almost no site relies on its functionality, and
it’s a security vulnerability. Also enable all options in the HTML CleanUp tab.

--------------------------

Disable Gutenberg and re-enable the classic


editor
https://wordpress.org/plugins/disable-gutenberg/

All Gutenberg css and js will be disabled, which significantly speeds up your site if you are not
using Gutenberg as your builder. It automatically disables it once you have installed this plugin,
no configuration required.
This also installs the classic editor, which I find much better.

Dequeue Woocommerce Cart Fragments and re-


enable them on the fly for improved performance
https://wordpress.org/plugins/disable-cart-fragments/.

Woocommerce Cart Fragments are disabled and reenabled on the fly. There are no options to
configure.
Speed up the WP-Admin backend
WP-Admin Cache

You should also install WP Admin Cache to speed up the Wordpress admin backend:
https://wordpress.org/plugins/wp-admin-cache/

You will have to enable it after installing/activating, go to the settings for admin cache under
settings>wp admin cache and press check all to enable it for your whole admin dashboard, then
save the settings. You may have to clear the cache after installing a new plugin, if you extract it
from a zip file via a file manager plugin, or it won’t appear in the list due to a stale cache that did
not have an update that triggered the cache.

Admin Speedo

https://wordpress.org/plugins/admin-speedo/

SSH tools
I use Windows as my OS. I use a combination of two different SSH programs. For an SSH file
manager, I use WinSCP. For an SSH shell to run terminal commands, I highly recommend
SolarPutty instead Putty.

Putty lacks the ability to do basic things such as copy paste, or saving login credentials. If you
go the VPS route like I did, you are going to be using SSH to modify config files frequently(at
least during the initial setup), and it will be absolutely necessary to use it if you somehow
manage to crash your server and get locked out of the frontend/backend of Wordpress. You can
always revert your changes to the config file if they cause issues, because Wordpress is just a
program running on your server. You will always be able to access the config files via SSH as
long as your server is on.

Always configure your SSH credentials and log in with an SSH client before you
make any modifications to Apache, PHP, MySQL, Varnish, HAProxy, Nginx, or any
other server level software so you don’t get locked out and have to start from
scratch. You will need to do this with any VPS you manage.

This is absolutely critical for the servers your live sites run on. Do not
forget to set your SSH credentials up.

Hosting
Make sure you choose a fast host. In my testing VPS hosting is fastest, but managed hosting
providers such as WP Engine are close.

Other Hosts
A VPS is always faster than shared hosting. Avoid shared hosting like the plague.
ClusterCS

I use ClusterCS to configure my VPS automatically. All you need are SSH credentials, they
handle everything else. You can also tweak many, many more settings than using a hosting
providers panel directly, they don’t place any limitations on what you can configure. They’re the
priciest panel option however,

aaPanel

aaPanel is free, and the closest to my LAMP setup(meaning you can follow the apache
optimization section. Unfortunately I have no experience with NGINX).

WordOPs

WordOPs is another free option to automatically configure your VPS to run Wordpress, instead
of using a paid cloud control panel such as ClusterCS. WordOPs will configure your VPS to use
NGINX, which I don’t use and can’t help with.

WordOPS is also free.

The other options that I’m aware of that you have for VPS configuration are services such as
Runcloud, SpinUpWP, and some other cloud control panels like Cyberpanel.

MISCELLANEOUS
Other optimization plugins of note

Phastpress

https://wordpress.org/plugins/phastpress/

Phastpress is interesting, and can potentially be combined with other optimization plugins. You
may get the best results using Phastpress instead of WP-Rocket depending on your setup.

I haven’t really tested Phastpress extensively, but it was impressive when I did. This is once
again a situation where the plugin's usefulness varies site by site, so you’ll have to test it for
yourself to see which plugin gives you the biggest gains.
Load testing
https://loader.io

I may reorder where this section is in the future, but this is a very important step to be able to
gauge your server’s capacity to handle load after modifying these server values. I use loader.io
to simulate 10,000 simultaneous users on my site(the max of the free tier, you can simulate up
to 100,000 on the paid tier). Due to the server resources I had, handling that load was a piece of
cake, but what your site can support is heavily dependent on the specs allocated to your VPS or
server package.

The amount of load your site needs to be capable of support will be dependent on what the site
is of course. If you’re building a site for a local handyman, or a bakery, they are not going to
have many simultaneous users, and using this tool is a moot point and kind of a waste of time. If
you are building an e-commerce site, or a SAAS site or anything that has the potential to draw
large amounts of traffic, I highly recommend you load test your site. You do not want the site to
crash due to a potential large influx of users/visitors.

Awesome Open Source

Amazing page, has lists most speed plugins out there, tons and tons more not listed here:

https://awesomeopensource.com/project/lukecav/awesome-wp-speed-up

Most of these plugins won’t be of any use to you as they are just poorer implementations of the
features WP-Rocket, Flyingpress and Perfmatters contain here, but there are a few diamonds in
the rough.

Luke Cavs Github Repos

https://github.com/lukecav?tab=repositories

Some of this guide was sourced from his repos, he also has a lots of stuff not in this guide that
may be applicable to your site. He has a bunch of repos, each one is its own beast. Highly
recommend browsing through it, tons of goodies. This one can be a real deep dive, prepare to
get lost in how much stuff he has.

The repos he maintains also contain resources for many popular plugins. A few examples would
be Awesome Elementor or Awesome Gravity Forms, which are mega wiki pages that contain
almost every resource and addon available for both plugins. He has over 100 repos.
Purifycss

https://purifycss.online/

SVG Compression

https://vecta.io/nano

IcoMoon

https://icomoon.io/

SVG Icons

Subfont

https://github.com/Munter/subfont

Command line tool to subset and optimize your fonts.

WPSpeedMatters

https://wpspeedmatters.com/

Useful blog, has some things not covered by this guide

Awesome WP Speed Up

https://github.com/lukecav/awesome-wp-speed-up

Kinsta’s blog

https://kinsta.com/blog

Useful info, techniques and other things not covered here. I implemented some of the
suggestions from their articles that I have not listed in this guide. Also a fantastic resource for
many other things related to web development, highly recommended reading.
Inline SVGs

https://yoksel.github.io/url-encoder/

Subsetter

http://subsetter.com/

Use subsetter to strip unused characters out of your font files, to reduce their file size.

Local WP Development

If you’re interested in developing your Wordpress site on a local server instead of a staging
server, i recommend using Dev Kinsta: https://kinsta.com/devkinsta/

The other option for local Wordpress development is LocalWP: https://www.localwp.com

You might also like