I’ve been playing around with the new Site Speed Suggestions Tool that was released today for Google Analytics, and noticed a couple of issues that popped up on my WordPress site.
One was that I needed to “eliminate render-blocking JavaScript and CSS in above-the-fold content” and the other was that I needed to “leverage browser caching”. Both sounded pretty intimidating, but with a little research I was able to fix both issues and improve my site’s speed score from 65 to 82 in just a few minutes.
Here are the fixes that I found:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
This one is a common problem in most WordPress sites because many WordPress plugins come with their own Javascript and CSS files. What happens is that once you activate these plugins, all of the Javascript and CSS files are pushed into the header, and have to be loaded before the page can load.
The quick fix to this is to download the install the free Autoptimize Plugin. Once activated, just go into the settings and check the “Optimize Javascript code” and “Optimize CSS code” checkboxes, and it will automatically combine all CSS & Javascript files into a single file to reduce load time.
Total time taken: Less than 1 minute
Leverage browser caching
This one is another common issue, that can be fixed by setting an expiry date or maximum age for static resources (like images) in the HTTP headers to allow better browser caching. That sounds pretty complicated, but all you have to do is copy and past the following code into your .htaccess file, and you’d done (credit Thomas Griffin):
## 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 ##
If you need help updating the .htaccess file, I would visit the link above, but it’s really as simple as logging into your site via FTP, editing the file, and re-uploading it.
Total time taken: Less than 1 minute
So there you have it, 2 quick fixes that will get your site running a little faster in just a couple of minutes.
Thats a good simple explination.
When I saw goodle suggest that I ‘Leverage Browser Cacheing’ it sounded more complicated than you have made it seem.
Thank you Takeshi
Thanks so much for the Autoptimize plugin tip. I had been searching for ages for an easy fix to my slow loading problem and this plugin solved it.
Great share – thanks again.
Hi, big thank you for these tips. My clients’ desktop loading speed went up from 58/100 to 89/100. That’s downright amazing! Mobile loading speed increased from 51/100 to 68/100 which is also very strong.
I’m impressed, it’s been a long time since I got such straight to the point and actionable advice.
Great job!
Thats a good simple explanation. Got 81/100 after applying these tricks.
Thanks
Good stuff.
I know about .htaccess
Some Great Tips. Really struggling to fix the render-blocking javascript and css for my website from couple of days. Hope your solutions will help me fix the issues easily
Thank you for this, the Autoptimize Plugin is exactly what I’ve been needing!
Two points for folks to consider…
1. Autoptimize screwed with my theme. Disabling it fixed things, but be careful.
2. The code for express caching is incomplete, or at least it was for me. Go to the link that is provided (where he is crediting Thomas Griffin) and use the code there PLUS the additions suggested by The Web Design Group in the first comment string on that page (adding Javascript expirations).
Thanks for the feedback. Those are both good points to consider.
I had been struggling with various suggestions from the WordPress support forums for ages, and tried several cache plugins, all of which were overly complicated and some of which actually slowed things down. This is the best advice I have seen, and I’m now at 91/100 which is far better than I got with any other single or combination of plugins and htaccess code. Thanks for cutting all the crap and giving some great advice!
Yay! You are my saviour! I have been trying to fix these errors for ages! Thank you!!!
Breaking the 91/100 has been bugging me for months. Thanks to your Autoptimize plugin suggestion I hit the illusive 95/100 on a digital ocean $10/month cloud node in Singapore.
Thankyou!
My setup is haproxy(ssl termination) -> nginx with ngx_pagespeed -> php5-fpm -> (wordpress) wp-ffpc plugin -> memcached. I also use the free WordPress Jetpack photon CDN.
THANK YOU!
This worked great and was a million times more simple than ANY other method out there….I appreciate this post!
I installed Autoptimize and checked google page speed insight. There was slight improvement in the desktop performance but mobile speed dropped significantly. Any advice on this?
thanks for the info. installed the “Optimize” and the .htaccess on several clients sites with great results. One which had been extremely stubborn to fix went from slow 64 to fast 87 immediately with one highly suited client !!
Hello Takishe, It’s great it is working in my twenty ten theme. Thanks a lot…. I believe many webmaster will enjoy your site and many will donate…. how I wish I could do that but at the moment I am not able yet…Thanks again!
This is awesome. Just the info I was looking for.
Woh Amazing post with useful information. My site was at scor of 60 but now 90 Thanks Takeshi Young a lot.
Thank you for your great information. This really helps me a lot on my website.
thanks a lot for this great post 😉
I find this post by searching on google when i m tired to solve this problem.
Nice post but my problem is not fix now showing 1 blocking script js 2 blocking CSS 58 / 100 my website http://allapkapps.com
I tried autoptimize, did not solve the problem. I still get that “Eliminate render-blocking Javascript and CSS in above-the-fold content” error and no improvement in load times.
It also breaks ‘Responsive Menu’.
Owww That’s a Great information sir, Thank u So much 🙂
plugin are not work.
Thank you very much for the code! Really!
Thank you, this actually made my site much faster (now 86!)
Thanks takeshi a lot autoptimize helped me a lot
I’ve done all of these things, the first go round, it seemed to make a difference but then when i went to my page it gave me a 500 error, I then found the original post cited here http://hotclonethemes.com/leverage-browser-caching-wordpress-via-htaccess/ and tried that version but got this error: If you are the webmaster of this site please log in to Cpanel and check the Error Logs. You will find the exact reason for this error there.
Common reasons for this error are:
* Incorrect file/directory permissions: Above 755. In order files to be processed by the webserver, their permissions have to be equal or below 755. You can update file permissions with a FTP client or through cPanel’s File Manager.
* Incorrect Apache directives inside .htaccess file. Make sure you have not specified unsupported directives inside the local .htaccess file. Such include PHP settings and Apache module settings.
Either way, all three combined or just the two plugins didn’t speed up my site. Any ideas what I’m doing wrong?
used the plugin still getting 1 blocking script resources and 4 blocking CSS resources. Can you please help?
Thats true but Autoptimize Plugin can break your site.
It works like a CHARM! Thank yo very much!!! You helped me a lot! 😀
hey there really great thanks for sharing this,
that code is really good help me in reducing leverage browser cache
thanks a lot
Thank you very much. I was facing google page speed test errors. with your suggest plugin It remove 90% errors and show good result in Google Page speed tests. Thank you again
The speed of my website is slow thanks for sharing tips i am testing them.
Woooowwww Amazing Dude. My site speed was 65 and now it is 86. Just Woooooww
Thanks Dude you are the best
thanks, its working…thanks for sharing this tips.
Fantastic, just implemented both of these on our heater site and although we’ve got a bit more work to go it really helped. Still getting some issues with google analytics not caching but that seems like a common issue, any ideas around this?