Home Business WordPress How to Optimize Performance & PageSpeed Score of a WordPress Blog

How to Optimize Performance & PageSpeed Score of a WordPress Blog


“As an Amazon Associate & Affiliate Partners of several other brands we earn from qualifying purchases.” [Read More Here]


Hello Friends, Here is the most asked question across bloggers about WordPress Optimizations. Here we will do it with one plugin named “W3 Total Cache” which is already famous among bloggers, and Cloudflare, known for its optimization and security. At last, we will minify some unoptimized files manually. Here, with the combination of these three tools, we are going for WordPress Optimization.

Read: Best Tips To Boost Alexa Rank

Steps for Performance Optimizations on WordPress

For Best Optimisations Result I will recommend you all to use Cloudflare along with W3 Total Cache with the settings that are specified below:-

Moving your DNS and Name Servers to Cloudflare

So, friends, this is the easiest and interesting step in this process.

Setting up WordPress Caching Mechanism

Wordpress Optimizations

Setting Up W3 Total Cache

First, you have to install W3 Total Cache from the WordPress Repository. After this, the most preferred settings are illustrated with its state, i.e., Enabled or Disabled.

PS: WP Rocket is one of the best alternatives of W3 Total Cache as there are not of advanced configuration there(Everything is being already taken care of by the plugin team). It will be a straightforward setup.

Go to General Settings from the Performance tab in the WordPress admin panel.

Ezoic Banner
  1. Toggle all caching types on or off:- Disabled.
  2. Page Cache:- Enabled.
  3. Page Cache Method:- Choose according to your hosting specification. (Default:- Disk Enhanced)
  4. Minify:- Disabled. (Due to disabling no further setting change in sub-items of minifying)
  5. Database Cache:- Enabled.
  6. Database Cache Method:-  Choose according to your hosting specification. (Default:- Disk)
  7. Object Cache:- Disabled.
  8. Browser Cache:- Enabled.
  9. CDN:- Enable if you use any external CDN Service. (Default:- Disabled)
  10. Enable Varnish Cache Purging:- Disabled.
  11. Cloudflare:- Enabled. Enter Email Address that is registered with Cloudflare, Enter API Key and Domain without www.
  12. Security Level:- Medium.
  13. Rocket Loader:- Automatic. (Load All JavaScript Resources Async. i.e., Large Performance Boost )
  14. Minification :- HTML Only.(Safe)
  15. Development Mode:- Off.
  16. New Relic:- Enable if use New Relic. (Default:- Disabled)
  17. Miscellaneous: Verify rewrite rules:- Enabled.

Go to Page Cache from the Performance tab in the WordPress admin panel.

  1. Cache front page:- Enabled.
  2. Cache feeds: site, categories, tags, comments:- Enabled.
  3. Cache SSL (https) requests :- Disabled.
  4. Cache URIs with query string variables:- Disabled.
  5. Cache 404 (not found) pages:- Disabled.
  6. Cache requests only for www.*.com site address:- Enabled.
  7. Don’t cache pages for logged in users:- Enabled.
  8. Automatically prime the page cache:- Enabled.
  9. Update Interval:- 900 Seconds.
  10. Pages per interval:- As your server limit.(Default :- 15)
  11. Pre-load the post cache upon publish events:- Enabled.
  12. Leave other settings to default.

Go to Database Cache from the Performance tab in the WordPress admin panel.

  1. Don’t cache queries for logged in users:- Enabled.
  2. Maximum lifetime of cache objects:- 180000000 seconds.
  3. Garbage collection interval:- 360000000 seconds.
  4. Leave other settings to default.

Go to Browser Cache from the Performance tab in the WordPress admin panel.

General

  1. Set cache-control header:- Enabled.
  2.  :- Disabled.
  3. Set W3 Total Cache header:- Enabled.
  4.  :- Enabled.
  5. Prevent caching of objects after settings change:- Disabled.
  6. Disable cookies for static files:- Disabled.
  7. Do not process 404 errors for static objects with WordPress:- Disabled.

CSS & JS

  1.  :- Enabled.
  2. Set expires header:- Enabled.
  3. Expires header lifetime:- 31536000 seconds.
  4. Set cache-control header:- Enabled.
  5. Cache-Control policy:- Cache with max-age.
  6.  :- Disabled.
  7. Set W3 Total Cache header:- Enabled.
  8. Enable HTTP (gzip) compression :- Enabled.
  9. Prevent caching of objects after settings change:- Disabled.
  10. Disable cookies for static files:- Enabled.

HTML & XML

  1.  :- Enabled.
  2. Set expires header:- Enabled.
  3. Expires header lifetime:- 3600 seconds.
  4. Set cache-control header:- Enabled.
  5. Cache-Control policy:- Cache with max-age.
  6.  :- Disabled.
  7. Set W3 Total Cache header:- Enabled.
  8.  :- Enabled.

Media & Other Files

  1. Set Last-Modified header:- Enabled.
  2. Set expires header:- Enabled.
  3. Expires header lifetime:- 31536000 seconds.
  4. Set cache-control header:- Enabled.
  5. Cache-Control policy:- Cache with max-age.
  6.  :- Disabled.
  7. Set W3 Total Cache header:- Enabled.
  8. Enable HTTP (gzip) compression :- Enabled.
  9. Prevent caching of objects after settings change:- Disabled.
  10. Disable cookies for static files:- Disabled.

Leverage Browser Caching Using .htaccess (Alternative Method)

Warning: Before you start editing the .htaccess file, make sure to back it up; if something goes wrong, you can restore it to make your blog accessible again. 

Ezoic Banner
  1. The first step is to find your .htaccess file located in the root directory of your WordPress installation.
  2. Take a backup of your .htaccess file; if something goes wrong, you can replace the file to keep everything working.
  3. Open up .htaccess file.
  4. The first thing that you need to do is to get rid of Etag. After disabling Etag, a browser needs to rely on cache-control and expires header that is defined by you. For doing so, add the following code to your .htaccess file:
    Header unset Pragma
    FileETag None
    Header unset ETag
  5. Now after disabling Etag. You need to specify expiry headers for the static content like CSS, JS, images, PDFs, etc. For that, add the following code:
    ## EXPIRES CACHING ##
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 2 days"
    ## EXPIRES CACHING ##
  6. Further, you can optimize the content delivery by compressing the components of your pages. For this to work, you need to have mod_deflate or mod_gzip installed on your hosting server. Now add the following code:
    mod_deflate
    <FilesMatch "\\.(js|css|html|htm|php|xml)$">
    SetOutputFilter DEFLATE
    </FilesMatch>
    
    mod_gzip
    <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>
  7. Now save your .htaccess file.

Optimizing JavaScript & CSS Manually

In this step, we will manually minify the JavaScript, which is not automatically optimized by W3 Total Cache And Cloudflare. You can also minify CSS using the same steps as below, but it can also break your theme so do it at your own risk.

Identifying and Minifying JavaScript/CSS using GTMetrix

  1. Go to GTmetrix.
  2. Analyze your blog.
  3. In Pagespeed, find Minify Javascript.
  4. Expand it. Now you have to see the location of that JavaScript file on your blog.
  5. Click the Optimised version to see the Optimised JavaScript File.
  6. Go to the file manager to the location of the JavaScript file. Click edit/code edit.
  7. Replace all the content with GTmetrix Optimised content.
  8. Click Save.
  9. Repeat this process for all other local JavaScript Files & do the same for CSS files.

Fix Render-Blocking JavaScript & CSS

  1. Go to WordPress Dashboard -> Performance -> General Settings.
  2. Change Minify mode to manual.
  3. Go to Google Pagespeed Insights and test your URL. Keep this page open we will need it later.
  4. Go to WordPress Dashboard -> Performance -> Minify.
  5. Navigate to JS section and enable it & change embed type of Before </head> to Non-blocking using “async”.Fix Render-Blocking Javascript &Amp;Amp; Css In Wordpress
  6. Get the URL of the JS files that need to be fixed from the Google Pagespeed Insight test we did earlier.
  7. Now one by one, add those files as shown in the screenshot below.Fix Render-Blocking Javascript &Amp;Amp; Css In Wordpress
  8. After adding all files, click Save all settings.
  9. Similarly, Enable CSS to minify settings.Fix Render-Blocking Javascript &Amp;Amp; Css In Wordpress
  10. In CSS File management, follow the same process we did in JS above.Fix Render-Blocking Javascript &Amp;Amp; Css In Wordpress
  11. After adding all files, click Save all settings.
  12. Now Empty all caches and recheck the Google PageSpeed Insights score.

Caution: Adding some JS/CSS files may cause a problem in loading or an undesirable user experience. So you can check after adding each file whether it is compatible with this optimization or not.

Deferring Parsing of JavaScript using Functions.php

Warning: Before you start editing the functions.php file of your theme, make sure to back it up; if something goes wrong, you can restore it to make your blog working. 

  1. Open up the functions.php file in your theme folder either via hosting panel or WordPress editor.
  2. Add up the following code in the functions.php file.
  3. function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' async onload='myinit()";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
  4. Save your files and check your blog performance.
  5. In most cases, this works great, but if this is breaking your theme, you should remove the added code to revert.

Combine Images using CSS Sprites

  1. Open SpriteMe(Discontinued) [Use this instead].
  2. After opening, you will see the installation section and drag that link to your bookmark toolbar. (It is actually JavaScript)
  3. Open up your blog in a browser.
  4. Click SpriteMe from the bookmark bar. You will find something like this.Combine Images Using Css Sprites To Boost Blog Speed
  5. Find images that are needed to be optimized using GTmetrix.
  6. According to your requirement, drag and drop to include or not include an image.
  7. Finally, click make sprite.
  8. Sprite will be created within a few seconds, and click on the link to open the sprite and save it.
  9. Now click export CSS. I will advise you to save the sprited image on your server.
  10. Do the changes as illustrated by SpriteMe in your CSS file and replace the URL from SpriteMe with the URL of the file you have copied on your server.
  11. Now you have successfully combined images using CSS sprites.

Also Read: Best Managed WordPress Hosting That You Should Try

Comparison Between Before and After Optimisations

Wordpress Optimizations
Pingdom Report Before Optimisations

Wordpress Optimizations
Pingdom Report After Optimisations

Wordpress Optimizations
GTmetrix Report Before Optimisations

Wordpress Optimizations
GTmetrix Report After Optimisations

Semrush Banner

Thank you for reading this post, and keep connected to Tech Arrival to continue enjoying wonderful posts. Share your views about this post in the comment section below. If you are still having any query, throw it in the comment section.

If you find this post helpful, don’t hesitate to share this post on your social network. It will only take a moment, and also it is quite easy and helpful for others.

About Author

Mehul Borichahttps://techrrival.com
Mehul Boricha is the founder of Tech Arrival & Astute Links. He is a computer and smartphone geek from Junagadh, Gujarat, India. He is a Computer Engineer by Education & an Entrepreneur by Passion. Apart from technology geek, he is an audiophile & loves to connect with people.

6 COMMENTS

  1. Many of the settings depend very much on server configuration. Though this is a way to go. Probably only Cloud flare can be a week point, sometimes Cloud flare instances would slow down loading instead of speeding it up.

    • You are right but this happens in very few case, but it is still a good option. You can also check out page speed of Tech Arrival.

Leave a Comment

Please enter your comment!
Please enter your name here

By submitting the above comment form, you agree to our Privacy Policy and agree with the storage and handling of your data by this website.

Stay Connected

Subscribe to our Newsletter

Stay updated with all the latest news, offers and special announcements.

By signing up, you agree to our Privacy Policy and agree with the storage and handling of your data by this website.

Latest Posts

10 Best iPhone 11 Cases You Should Check Out

The iPhone 11 is one of Apple's most sold iPhones to date and continues to be a major success. The phone resulted in an...

9 Best Mobile Phones You Can Buy For Under $400

Nowadays, you don't need to spend a lot of money to buy a decent smartphone. We have seen a lot of innovation in the...

11 Best Software Development Tools You Should Know About

Being a software developer isn’t an easy job. There are a lot of things you need to keep in mind while you are developing...

11 Password Security Best Practices You Should Know About

Cybercrime - a Problem of the Present & the Future It all starts and ends with cybercrime. Without it, companies and individuals would have nothing...

11 Best WhatsApp Alternatives You Can Use

With WhatsApp changing their privacy policy, it has created a huge rift among users. People are concerned about their privacy and the security of...

All Time Favorites

18 Best WiFi Hacking Apps for Android

When you enter the hacking world, you would know that almost every basic tutorial you would search for on the net won’t be possible...

21 Best Android Apps Not on Google Play Store

Google Play Store has the most extensive collection of apps for Android. Almost everyone downloads apps from the Play Store. But many excellent apps...

14 Best Game Hacker Apps for Android (With/Without Root)

Are you a mobile gamer? If you are, then you've come to the right place. In this post, we are going to tell you...

How to Download Torrent Files with IDM (Torrent to IDM)

Hey guys, you may all have heard about different ways to download torrent files. And some of you may also have downloaded them using...

11 Best Download Managers for Windows

The Internet is a vast resource of a lot of things which includes music, videos, movies and a lot of other things. The ability...