• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

12 November - 2016 By Paal Joachim 15 Comments
Last updated on: May 27, 2021

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

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 WordPress

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 WordPress Results

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

Autoptimize plugin to speed up your web site

 

Autoptimize settings:

Autoptimize settings WordPress plugin

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 WordPress plugin

WP Performance Score Booster

Settings screen where one activates the options.

WP Performance Score Booster WordPress plugin settings

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 WordPress plugin

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 dashboard WordPress plugin

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 WordPress plugin

WP Rocket plugin

 

Basic options

WP Rocket basic options WordPress plugin

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

WP Fastest Cache Plugin

Settings. I clicked most of them and saved.

WP Fastest Cache plugin Setting

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

Share this:

  • Email

Categories: Featured, How to, Plugins, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Apkreach says

    4 July - 2021

    Thank You for Share the code.

    Reply
  2. themediazones says

    10 February - 2021

    thanks for your article very helpful

    Reply
  3. Emma Brown says

    11 March - 2020

    Thanks for the information.

    Reply
  4. Delimp says

    25 September - 2019

    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?

    Reply
  5. Hussain Deewan says

    28 March - 2019

    Optimizing the load time of a website seems like a pretty complicated process.

    Reply
    • Paal Joachim says

      10 April - 2019

      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.

      Reply
  6. Alien says

    25 July - 2018

    Caching is maybe among top measures any webmaster must take for SEO.

    Reply
  7. A Steyn says

    15 April - 2018

    Many many thanks for the article

    Reply
  8. itroz says

    6 April - 2018

    Thanks for awesome article

    Reply
  9. Baldwin Jackson says

    29 January - 2018

    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

    Reply
  10. Waqas says

    28 November - 2017

    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

    Reply
    • Paal Joachim says

      28 November - 2017

      Thanks for sharing Waqas!

      I have added the link to the w3 Total Cache section.

      Reply
  11. Harish says

    18 October - 2017

    Good…. and I’m using also the new version:

    https://wordpress.org/plugins/remove-query-strings-littlebizzy/

    Reply
  12. H says

    23 April - 2017

    Hi! are you turning them all at once? which ones do you recommend I use? alot of them seem to do the same job?

    Reply
    • Paal Joachim says

      23 April - 2017

      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.

      Reply

Leave a Comment Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2022 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪