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.

Speedtesting easywebdesigntutorials

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.

P3 Plugin Performance Profiler Plugin

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.

P3 Plugin Performance Profiler Plugin
Results

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 plugin to speed up your web site

Autoptimize settings:

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).

WP Performance Score Booster

Settings screen where one activates the options.

WP Performance Score Booster plugin settings

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.”

WP Speed of Light plugin

Multiple settings pages that are easy to understand.
Settings sections are:
– Dashboard,
– Speed analysis,
– Speed optimization,
– Image Compression,
– Database cleanup and
– Configuration.

WP Speed of Light plugin dashboard

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

WP Rocket plugin

Basic options

WP Rocket 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

WP Fastest Cache Plugin

Settings. I clicked most of them and saved.

WP Fastest Cache plugin Setting

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/

wordpress.inspector.io

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

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