Google Pagespeed improvements

Google PageSpeed Increase of 80%+ in 5 Minutes

“Eliminate render-blocking JavaScript and CSS in above-the-fold content”

“Leverage browser caching”

 

Is Google PageSpeed giving your WordPress site the suggestions seen above? There’s an easy fix. No programming knowledge is necessary to see improvements of over 80%+ in two minutes.

It sounds too good to be true, but I’ve tested this on three sites and seen Google PageSpeed improvements on each, ranging from 18% to 82%.

Those last few lines look like a bad sales pitch, but honestly I’m not selling anything here.  I’m just trying to help a wordpresser out.  It worked so well for me, I wanted to share.

Credit goes to KeshKesh.com for figuring this out. I’m just showing it in action.  I’m definitely not a programmer (not for lack of trying).

This is what you’ll need to do. First, go into Google PageSpeed Insights and test your site. Check to see If you get either of these messages.

  • “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
  • “Leverage browser caching”

They seem to be pretty common issues – I actually got them on every WordPress site that I checked.

For the “Eliminate render-blocking Javascript and CSS” issue, you’ll need to move your JS and CSS Scripts from the header to the footer.  That sounds difficult, but no worries.  There’s a plugin for that.

Move Javascript and CSS scripts to your WordPress footer

  1. Install the WordPress plugin, Autoptimize.
  2. Activate the plugin and go into the settings.
  3. Click “Optimize Javascript code” and “Optimize CSS Code.”
  4. Save your settings.

Autoptimize Eliminate Render Blocking Javascript

Ok, you’re all done with that.  Told you it was easy.

Ok – on to fixing the next issue.

Leverage Browser Caching Fix

This one is almost as easy.  You’ll need to edit your .htaccess file to include a snippet of code that should help, significantly.

  1. Access your WordPress site files (use “FileManager” from Hostgator or similar hosts.
  2. Go to the root of the site and make sure to “show hidden files.”
  3. Select your “.htaccess” file and “edit.”
  4. Add the following code into the file and save it.

## 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 ##
Edit htaccess file

You’re done.

In case you’re having any troubles, I put together a quick, two-minute video showing those steps in action.

In the video, I apply the above to an old site of mine for test purposes. Luckily, I had the most significant pagespeed improvement occur during this video. The WordPress site jumps up by the following.

Google PageSpeed Insights Before:

  • Mobile:  43
  • Desktop:  53

Google Pagepseed Before

 

 

Google PageSpeed Insights After:

  • Mobile:  84
  • Desktop:  91

Google PageSpeed After

That’s an improvement of over 80% and it took me less than a few minutes to implement.

Here’s the video:

 

If you see an increase in Google PageSpeed, please let me know by how much!

UPDATE (4/16):  I’ve had one user let me know that Autoptimize and W3 Total Cache don’t play nice together. He said it screwed up his site and he had to remove Autoptimize.  I’m using W3 Super Cache and it works fine.

Comments 53

  1. willc

    Thanks…I tried this out on one site I run and I saw about 15-20 points of improvement, though I still got the warnings:

    “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
    “Leverage browser caching”

    It looks like there were some elements that the plugin could not deal with, such as Google Fonts API inclusion.

    1. Post
      Author
      1. Post
        Author
  2. Natasha Burke

    Hi Mike,

    Simple yet informative!

    I followed all your steps however, I did not see any improvement in my site’s score. Any help from your end is appreciated.

    Cheers!

    -Natasha

    1. Post
      Author
      mjirout

      Hi Natasha – to be honest, I’m not sure. Did webmaster initially suggest you had this as an issue? Unfortunately, I can only speak to the success I had. I tried this on multiple sites with varying WP themes, but there are obviously thousands of them out there that may react differently. Sorry I don’t have a better answer!

  3. Natasha Burke

    Hi Mike,

    Apart from “leverage browser caching” and “render blocking issues”, we did notice issues relating to “image optimization” and “Combine images using CSS sprites”, maybe that is the reason the site score still remains low.

    However, thank you for this wonderful presentation and prompt response.

    1. Post
      Author
    1. Post
      Author
      mjirout

      Thanks, Arafin – I’ll include a note in the post to warn people. I’m running “W3 Super Cache” – I’m not sure what the difference is, but it seemed to work well for me and this plugin. Appreciate it!

    2. Marcel

      Hi Arafin,

      I had some problems with using Autoptimize and W3 Total Cache together. I fixed it by changing the settings so they no longer interfere with their optimizations of my website.

  4. Edris

    Thank you so much for this amazing post! My site was as slow as a snail! After literally 3 mins from following your video, it changed into a lightening bolt. Thanks jirout.

    1. Post
      Author
  5. Luis

    I am Here Again….. i have some issues with this plugin, cause when i do active, the dropdown menus, are bloked, what can i do on this case…
    When deactive this plugin, it work as usual submenus.

    Thank you.

  6. Luis

    Ok, what i see is this: If i active “optimize css” all dropdown menus are available, but if i active “optimize Javascript” dropdown menus are bloked.
    On this case i deactive Javascript. but i hope this will be possible to fix…
    Thank you.

  7. Farcas Gelu Danut

    Tnx. Sorry, my English language is not very good.
    Is posiible to replace Autoptimize with this plugin: Script to footer? Work well for my websites.
    Autoptimize work well only in 2 of my websites. 😉

  8. DAN

    Thank you for your excellent article, very helpful.

    when testing my site on developers.google.com
    i have the following error:
    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 1 blocking script resources and 2 blocking CSS resources.
    This causes a delay in rendering your page.
    You suggested that it can be achieved through W3 Super Cache or eventurally with W3 Total Cache plugin but My host provider Goddaddy refuses to activate it for security reasons. these are blacklisted.

    Is there a way like putting a code in the .htaccess file that will solve this problem?
    Thank you for your comments
    Dan

  9. Debé

    You are a super hero! Used this to fix the page speed issue with a difficult clients site – and WOLLA – got the green tick from Google PageSpeed Insights. Client happy = Happy Webmistress 🙂 Going to add this to ALL my client websites. Thanks Mike!!

    1. Post
      Author
  10. Alex

    Very nice article. Should probably write in the following things.
    . if you use the plugin for javascript, then turn off javascript on w3tc so you do not get errors.
    Do this for HTML and CSS as well.

    Alex
    Website Administrator

    1. Post
      Author
    1. Post
      Author
  11. Pingback: Best Business Strategies for Timing Web Site Redesigns

  12. Raul

    What about if I using google fonts plugin ? this plugin use a remote google url and it’s placed in header section. how I can use but remove of enfold content?

  13. Connor Rickett

    This broke my site with W3, but I switched over to another cache (WP Super) and it bought me 20 points . . . then combined it with Above the Fold plugin (which also doesn’t like W3) and my mobile speed bumped from 37 to 90!

    I’ve been trying to fix this all morning, and it’s the first damned thing that’s worked, thank you!

    1. Post
      Author
  14. frank

    Regarding Autoptimize & W3 Total Cache; they can be used concurrently, on condition that all minification settings in W3TC are turned off.

    Have fun guys & girls,
    frank (Autoptimize’s developer)

  15. Matt Selby Photography

    Great article, thanks for sharing.

    I found this site as I was looking for a solution to fix the ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ issue in Google’s PageSpeed insights.

    After installing Autoptimise, I analysed my site again and saw no improvements. It’s still showing ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’

    Luckily I didn’t see any conflicts with WP super Cache and saw a slight improvement in Pingdom’s Website Speed Test. Not sure if to remove the plugin, as I’ve already hardcoded leverage browser caching.

    Can anyone offer any advice how to resolved the ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ issue?

    Thanks in advance

    Matt 🙂

    1. Post
      Author
  16. Shristi Jain

    Outstanding Such A Great Trick. This article has all the basics to improve page speed, after using this Trick my website speed up. so thank You for giving Great Idea. Keep it up,

Leave a Reply

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