Speeding up the site manually and by using Cache plugins
As I use this site to test out new plugins over time. Some plugins also affect the performance of the site.
Further down I am also sharing code you can place into the htaccess and functions file.
To see what was going on I went to https://tools.pingdom.com.
This is a pretty bad result. Something I really need to fix.
NB! Run the test a few times and notice that there are some differences for each test.
Performance grade E – 57. Load time 4.96s
F – 0 Combine external JavaScript
F – 0 Combine external CSS
F – 0 Parallelize downloads across hostnames
F – 22 Specify a cache validator
F – 41 Remove query strings from static resources
D – 67 Serve static content from a cookieless domain
The rest are B’s or A’s.
The issue now is taking care of the performance grades as well as the load time to speed up the site. I begin with…
Installed and active Plugins
First thing I will do is check the installed and active plugins.
The plugins I rarely use and do not need I will delete. Others I am uncertain about I deactivated for now until I figure out what to do with them.
I also installed and activated the P3 (Plugin Performance Profiler) to see which plugins slow down the site.
It scans the site to check the plugins.
The scan can take a while depending on how many plugins are installed.
(Below screenshot) I have 24 plugins installed and active. Hovering over each pie chart piece shows the percentage of impact it has on the site. I will again go through and see which plugins have the highest impact. WordFence is the highest one there. It is a security plugin I need, so I keep that one. I will then check out other plugins and see which I want to keep and which to let go.
I did another speed test and Based on the plugins I decided to remove or deactivate the speed test went from 58 to a 74. The performance insights gave me the following:
F – 24 Remove query strings from static resources
F – 30 Combine external JavaScript
F – 30 Combine external CSS
E – 58 Specify a cache validator
C – 76 Minimize DNS lookups
Installing cache plugins
I searched online for cache plugins to try out. Here are a few that I found and the result they gave me.
The aim was to improve the performance grade of 74 to hopefully somewhere between 85 – 90.
Autoptimize
“Autoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.”
Autoptimize settings:
I turned on
– Optimize HTML Code,
– Optimize JavaScript Code and
– Optimize CSS code. Then clicked Save Changes and Empty Cache.
I then turned on Show Advanced Settings and clicked Inline and Defer CSS?.
Speed test result at tools.pingdom.com
Performance grade: B – 84. Load time 3.54 s.
F – 26 Remove query strings from static resources
C – 75 Combine external JavaScript
C – 76 Minimize DNS lookups
C – 77 Specify a cache validator
Speed test result at gtmetrix.com
Performance grade: B -85. YSlow Score 73%. Load time 4.7s.
F – 45 Enable gzip compression
D – 61 Remove query strings from static resources
C – 71 Specify a cache validator
Try Autoptimize and … Simple Cache together.
Simple Cache
“A very simple plugin to make your site run lightning fast with caching.”
Settings. Turned on Enable Caching and Enable Compression.
Turn on Advanced. Enable Gzip compression.
Speed test result
Performance grade: C-76. Load time 1.19s. A very nice load time!
Simple Cache made the site load faster.
WP Performance Score Booster
“This plugin speed-up page load times and improve website scores in services like PageSpeed, YSlow, Pingdom and GTmetrix.”
The next plugin says it will remove:
– Remove any query strings from static resources like CSS & JS files
– Enable GZIP compression (compress text, html, javascript, css, xml and so on)
– Add Vary: Accept-Encoding header, and
– Set expires caching (leverage browser caching).
Settings screen where one activates the options.
By default they are turned on. Just click to Save Changes.
Speed test result at https://tools.pingdom.com
Performance grade: B -85. Load time 3.18s.
E – 51 Remove query strings from static resources
E – 58 Specify a cache validator
Speed test result at gtmetrix.com
Performance grade: B -82. Load time 5.1s.
F – 40 Specify a cache validator
D – 66 Remove query strings from static resources
C – 75 Avoid bad requests
C – 75 Inline small JavaScript
C – 75 Avoid CSS @import
WP Speed of Light
“WP Speed of Light is a WordPress speedup plugin and load time testing. Cache, Gzip compression, minify, database optimization tools.”
Multiple settings pages that are easy to understand.
Settings sections are:
– Dashboard,
– Speed analysis,
– Speed optimization,
– Image Compression,
– Database cleanup and
– Configuration.
Under Speed Optimization I clicked Save Settings. (All the settings were turned on.) I also clicked Advanced and turned on the options there as well. HTML minification, CSS minification and JS minification.
Speed test result at https://tools.pingdom.com
Performance grade: B-85. Load time 1.29s.
F – 26 Remove query strings from static resources
C – 76 Minimize DNS lookups
C – 78 Specify a cache validator
Speed test result at gtmetrix.com
Performance grade: B – 93. YSlow Score C – 77. Load time 3.8s.
D – 62 Remove query strings from static resources
B – 81 Specify a cache validator
B – 83 Avoid bad requests
B – 83 Optimize the order of styles and scripts
I feel like I have barely touched what WP Speed of Light can do for my site. As it has many helpful tools built in.
Testing out the Image Compression tool:
I turned off Photon an Image Compression tool bult into JetPack.
Went to WP Speed of Light -> Image Compression and installed the Image Recycle plugin. Which is a paid service.
WP Rocket – Premium plugin
Basic options
Basic options I turned on are…
Lazyload: Images and iframes & Videos
Files optimisation: HTML, Google Fonts, (CSS and JS)
Mobile cache: Enable caching for mobile devices
Speed test result at tools.pingdom.com
Performance grade: B – 87. Load time 1.55 s.
F – 26 Remove query strings from static resources
B – 80 Specify a cache validator
Speed test result at gtmetrix.com
Performance grade: A – 90. YSlow Score B – 81. Load time 2.8s.
D – 63 Remove query strings from static resources
C – 79 Specify a cache validator
B – 82 defer parsing of JavaScript
B – 83 Optimize the order of styles and scripts
WP Rocket also have a few tools built inn that needs to be explored more.
I tried the plugin on a client site. Performance rating went from 40 up to 75. I turned on many of the settings:
Basic – all settings are on except SSL cache and Emojis.
NB! Turning on Files optimisation CSS and JS might cause a problem on the site. I had to turn these off to get the contact form working as it should.
Advanced options – Turned on Reducing the number of minified files in one file -Js.
Preload – Activate preload bot: automatic. Sitemap preloading Activate the sitemap preloading All in One SEO XML sitemap.
I also adjusted images and lessened the load on the front page.
Btw WP Rocket is one of the most popular cache plugins to speed up the site!
WP Fastest Cache
Settings. I clicked most of them and saved.
Speed test result at tools.pingdom.com
Performance grade: B – 82. Load time 1.54 s.
F – 25 Combine external JavaScript
F – 43 Remove query strings from static resources
E – 59 Combine external CSS
C – 78 Minimize DNS lookups
Speed test result at gtmetrix.com
Performance grade: A – 91. YSlow Score D – 66. Load time 4.4s.
D – 68 Remove query strings from static resources
C – 75 Avoid bad requests
B – 83 Defer parsing of JavaScript
There is also a Premium version which has various added features such as image optimization and more.
WP Disable
“Quickly and easily Disable Emojis, Disable Gravatars, Disable Embeds and Remove Querystrings.”
W3 Total Cache
I am on purpose not including W3 Total Cache because it is difficult to setup even though it might be very efficient for your site. If you decide on trying it out here is a tutorial for setting it up:
https://www.onlinemediamasters.com/w3-total-cache-settings/
.https://pointblankpro.com/how-properly-configure-w3-total-cache/
.https://www.mvestormedia.com/leverage-browser-caching-w3-total-cache/
.https://www.themelocation.com/w3-total-cache-tutorial/
NB! I have JetPack installed and have Photon turned on “Photon is an image acceleration and editing service for sites hosted on WordPress.com or on Jetpack-connected WordPress sites. That means less load on your host and faster images for your readers.”
Having image acceleration also impacts the site speed. I can turn off Photon and use the options of WP Speed of Light or WP Rocket or a specific image acceleration plugin. This is something I still need to experiment with. Here is an interesting article I found. https://www.sitepoint.com/mastering-image-optimization-in-wordpress/
Other plugins that I tested only impacted the load time of the site.
WP Super Cache
“A very fast caching engine for WordPress that produces static html files.”
Settings – Easy:
Easy: I turned on Caching On (Recommended)
Clicked to Test Cache.
Advanced: Compress pages so they’re served more quickly to visitors. (Recommended)
Preload: Preload mode (garbage collection only on legacy cache files. Recommended.)
Speed test result at https://tools.pingdom.com
Performance grade: C-74. Load time 2.85s.
F – 24 Remove query strings from static resources
F – 30 Combine external JavaScript
F – 30 Combine external CSS
E – 58 Specify a cache validator
C – 76 Minimize DNS lookups
Speed test result at gtmetrix.com
Performance grade: B -82. Load time 3.8s.
F – 40 Specify a cache validator
F – 47 Remove query strings from static resources
C – 75 Avoid bad requests
C – 75 Inline small JavaScript
C – 75 Avoid CSS @import
It seems that WP Super Cache main focus is on creating a better load time for the site.
Cache Enabler
“A lightweight caching plugin for WordPress that makes your website faster by generating static HTML files plus WebP support.”
Settings screen:
I clicked the Save Changes button.
Then went to test the speed.
Speed test result
Performance grade: C -75. Load time 1.45s. A very nice load time!
Cache Enabler made the site load faster.
Comet Cache
“Comet Cache is an advanced WordPress caching plugin inspired by simplicity. Speed up your site (BIG time!) with an intelligent and easy-to-use cache.”
Settings. I clicked the first Enable/Disable accordion. I clicked to enable the plugin. Then saved.
Speed test result
Performance grade: C-76. Load time 1.22s. A very nice load time!
Comet Cache made the site load faster.
Cache for WordPress Performance By Pigeonhut and Jody Nesbitt.
Cleaning up the Database to help improve site performance
I also tested out WP Optimize , WP Sweep and Advanced Database Cleaner to clean up the database. Here is another plugin to try out: Optimize Database after Deleting Revisions . These plugins made no changes to the speed of this site. But they did clean the database. Search and Replace or A Better Search and Replace are other database plugins to check out.
Adding code to your htaccess file to speed up your WordPress site.
How to leverage browser caching.
Code from this site: https://www.inmotionhosting.com/support/website/htaccess/apache-module-mod-expires
“In order to add browser caching to your website, you will need to set the date for when the cache expires.
ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days"
Or use the code from .technumero.com: how to leverage browser caching
# TN Expires Caching Start # <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresDefault "access 1 month" </IfModule> # TN Expires Caching End #
How to add gzip compression.
Code from .technumero.com: gzip compression
# BEGIN GZIP COMPRESSION <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> # END GZIP COMPRESSION
They also have additional code in relation to gzip.
How to remove missing a cache validator. Specify a lst modified or etag header.
Code from WP Performance Score Booster support: missing-a-cache-validator-specify-a-last-modified-or-etag-header/
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 year" </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$"> Header set Last-Modified "Mon, 31 Aug 2009 00:00:00 GMT" </FilesMatch> </IfModule>
How to adjust serving static content from a cookieless domain.
Code from .stackoverflow.com: serving-static-content-from-a-cookieless-domain-using-subdomain-and-htaccess
RewriteBase / RewriteCond %{HTTP_HOST} ^example.com [NC] RewriteRule ^(.*)$ https://www.example.com/$1 [L,R=301]
How to specify a vary: accept-encoding
Code from .softstribe.com: vary accept encoding header
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
How to remove query from static resources
Code from technumero.com: remove query from static resources
NB! The following code is inserted into the child theme functions.php file.
/*** Remove Query String from Static Resources ***/ function remove_cssjs_ver( $src ) { if( strpos( $src, '?ver=' ) ) $src = remove_query_arg( 'ver', $src ); return $src; } add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 ); add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
How to defer parsing of javascript.
Code from hostinger.com: how to defer parsing of javascript
NB! The following code is inserted into the child theme functions.php file.
// Defer Javascripts // Defer jQuery Parsing using the HTML5 defer property if (!(is_admin() )) { function defer_parsing_of_js ( $url ) { if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; // return "$url' defer "; return "$url' defer onload='"; } add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 ); }
How to remove render blocking javascript.
.techumero.com: remove render blocking javascript
swostik’s blog
Web site speed test sites
tools.pingdom.com
gtmetrix.com
webpagetest.org/
developers.google.com/speed/pagespeed/insights/
To do multiple tests open the Advanced settings and add a number of tests to run.
varvy.com/pagespeed/
Speedbumps:
makeaweblog.com/how-to-leverage-browser-caching-in-wordpress/
.sourcewp.com/remove-query-strings-static-resources/
To see how your site ranks:
Resources:
firstsiteguide.com
github.com/lukecav/awesome-wp-speed-up (a list of plugins)
cybercashworldwide.com/remove-render-blocking-javascript-wordpress
keycdn.com/blog/speed-up-wordpress
wpbeginner.com/wordpress-performance-speed/
.cloudliving.com/speed-up-wordpress/
.crunchify.com/5-useful-tricks-to-speed-up-wordpress-boost-performance/
dwuser.com/education/content/10-steps-to-a-faster-wordpress/
varvy.com/pagespeed/improve-server-response.html
wpmudev.org/blog/fixing-wordpress-page-speed-problems
.pointblankpro.com/remove-render-blocking-javascript-and-css-wordpress/
.wpspeedguru.com
.wpzoom.com/tutorials/wordpress-site-faster
.cloudliving.com/speed-up-wordpress
.https://www.position.digital/wordpress-speed-optimisation/
optimisation.io/wordpress-plugins/
Comparing Cloudfare and MaxCDN content delivery networks:
winningwp.com/cloudflare-vs-maxcdn/
Hosting
websitesetup.org/best-wordpress-hosting-performance/
7 methods to reduce WordPress CPU Usage without upgrading web hosting plan.
geckoandfly.com/7512/7-methods-to-reduce-wordpress-cpu-usage-without-upgrading-web-hosting-plan/
Image Compression.
wordpress.org/plugins/wp-image-compression
wordpress.org/plugins/ewww-image-optimizer
Thank You for Share the code.
thanks for your article very helpful
Thanks for the information.
Thank you for sharing Pal Joachim this useful information for seeding up WordPress site through cache plugins.
But How can I use it in HTML?
Optimizing the load time of a website seems like a pretty complicated process.
It can be. But there are plugins that do make it a little easier. Such as WP Rocket and LiteSpeed Cache.
You could also contact your web host and hear what they recommend.
Caching is maybe among top measures any webmaster must take for SEO.
Many many thanks for the article
Thanks for awesome article
Great write up mate. However comparing WordPress cache plugin is always difficult task for newbie developers and designer which leads them to pick a wrong one. No doubt that W3 Total Cache Plugin is all time favorite but recently I came across with another cache plugin which surprising provide me better page loading speed on my blog which is Breeze Cache Plugin. Indeed I have tested it on multiple providers of different type like: Shared Hosting from Hostgator, VPS from Blue Host and Managed Cloud Hosting from Cloudways. I would personally recommend WordPress community to give a try. Anyways thanks for sharing
Hi Paal,
Well-detailed article. I want to add that We wrote an in-depth tutorial about configuring W3 total cache at https://www.themelocation.com/w3-total-cache-tutorial/
It has the best and updated details about the plugin. thanks
Thanks for sharing Waqas!
I have added the link to the w3 Total Cache section.
Good…. and I’m using also the new version:
https://wordpress.org/plugins/remove-query-strings-littlebizzy/
Hi! are you turning them all at once? which ones do you recommend I use? alot of them seem to do the same job?
Hi
For easywebdesigntutorials.com I decided on Autoptimize and Simple Cache.
I occasionally continue my tests on other sites as well.
As it can very for each site what works well.