Boost WordPress performance and PageSpeed score, easy and effective!

If your WordPress runs slow and your GTmetrix/PageSpeed/Yslow scores are not the best, check these four easy steps to make them fly and reach the scores of the next picture with almost zero effort!

boost wordpress pagespeed-score

STEP 1: INSTALL AUTOPTIMIZE

We’ll use this plugin to minimize and compress all HTML, JavaScript and CSS code.

Get Autoptimize here or search for “autoptimize” within your WordPress admin (in the “plugins -> add new” section), install and activate it.

Now browse to the plugin’ settings page and activate these settings:

  • Optimize HTML Code
  • Optimize JavaScript Code
  • Optimize CSS Code

I usually leave empty the “CDN Base URL” because I couldn’t find a fee CDN to use with WordPress, if you know one please drop me a comment!

Autoptimize best settings for wordpress

Autoptimize settings used this blog

In the “extra” section on the settings you can try to tweak a few more parameters (especially if your theme uses Google Fonts).

STEP 2: INSTALL CACHE ENABLER

This plugin is great because it caches a completely rendered copy of every page of our blog, lowering to the bare minimum the computation needed to generate any page when a user will browse.

Get Cache Enabler here or search for “cache enabler” within your WordPress admin (in the “plugins -> add new” section), install and activate it.

Now browse to the plugin’ settings page and use these settings:

  • Cache Expiry: 0 (cache will never expire unless… read the next point)
  • Cache Behavior: “Clear the complete cache if a new post has been published”
  • Cache Exclusions: leave the field empty unless you have special needs
  • Cache Minification: Disabled (it’s done by Autoptimize)
Cache Enabler best settings for WordPress

Cache Enabler settings used in this blog

STEP 3: INSTALL WP SMUSH IT (optional, if you don’t post images)

This plugin allows us to automatically compress (without loosing quality) every image we upload to our WordPress, not to waste bandwidth both for us and the visitors (and Google is very happy about this behaviour).

Get WP SmushIt here or search for “smushit” within your WordPress admin (in the “plugins -> add new” section), install and activate it.

Right after installation a popup will ask you which settings you want to enable, I use the “Automatically smush my images on upload” and nothing else. If you’re a photographer you maybe want to enable the “Preserve EXIF data”.

Smushit settings for this blogAlso, WP Smush it allows you to bulk process all pre-existing images, and that’s just great!

STEP 4: TWEAK YOUR .HTACCESS FILE

As a last step let’s tell the web server to compress things as much as possible and let’s tell the visitors’ browsers to use their own cache too.

Open the “.htaccess” file in the root directory of your WordPress installation and, at the beginning of the file, before anything else (and without touching anything else) simply paste the next few lines:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresDefault "access plus 2 days"
</IfModule>

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header unset ETag
FileETag None
</FilesMatch>

THAT’S IT

Thoughts? Suggestions?
Drop me a comment ;-)

Leave a Reply

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