Wow! I just sped up my website performance quite a bit using Google’s PageSpeed Insights tool. While I still have some work to do, I wanted to share with you some of the things I learned using this tool on my website. If you are a novice web developer, you will find these tips come in handy when you move to speed up the performance your website using Google’s free PageSpeed Insights tool.
Remember that website performance is an important factor in determining your page rank in search engines. If you want to rank high, your visitors need to be able to get access to your content quickly. Long loading screens are harmful to your overall SEO scores.
Here are a few tricks I learned using this tool:
This means inlining the crucial elements of your css and small scripts that you need to load on your home page (the same goes for other pages too). So if you have a script on your homepage that loads a slider showing featured posts, you may consider inlining the CSS for that element of the page if it isn’t too bulky. Too much inline CSS can slow down the page in the long run, but if you can get away with inlining small, crucial elements and make fewer requests to the database to load resources, then all the better.
If you must load several resources in the <head> of your web page, Google recommends Try to defer or asynchronously load blocking resources, if you cannot inline them.
According to Google, “Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.”
This isn’t as big of a deal if your server response time is clocked in as being fairly quick, but if your theme is resource heavy, I recommend taking a look to see what you can do to implement a browser cache system on your website. In WordPress, this is as simple as pasting some PHP into your .htaccess file.
Still in the vein of loading resources, keep in mind that your user’s browser has to load each and every image placed on your web page. If your home page uses a hefty background image, as well as several photos for featured blog posts, or an hd photo of you and the crew on the sidebar, all of these resources can stack up. Run your images through an image compressor to cut down on unnecessary space. Oftentimes, you can “losslessly” compress the image and the finished result will be 40%-50% lighter, and still identical to the previous one. There are several plugins available to help you do this in WordPress, or you can just do it manually before you upload your files.
If site performance is important to you (and it should be), these tips should help you dramatically increase your site’s performance if you have any problems with speed whatsoever.