28
Nov
2014

Google PageSpeed Insights

Everyone knows about minifying javascripts and CSS to reduce load times, as well as image compression techniques and caching. But how well is your site actually performing?

Fortunately, Google's PageSpeed Insights will not only test your site and rate its performance, but also give you tips on which areas of your site can be sped up. The really neat part is Google will tell you how much data you can save in each area, which really helps you know which areas to target to optimize performance.

According to PageSpeed Insights, my CSS and Javascript are performing well minified, but there is a lot of load time that can be saved by compressing images. That's the long pole in the tent, as it were.

After writing a simple PHP script to compress the jpg images and optimize the pngs, the savings were significant. The script reduced images to a maximum width of 800px, and a jpg quality to 75%. After some initial tests, 75% was an optimal balance of image quality and file size. The directories I used contained a variety of images, including small clipart and full resolution photos.

Here are the results from the script:

Directory # of Images Initial Size Optimized Size Percentage
/images/ 197 22.98 Mb 3.1 Mb 86.47%
/photos/ 66 49.21 Mb 2.59 Mb 94.72%

Not bad! Lets take a look at Google PageSpeed Insights to track the improvement:

Google PageSpeed Insights

Much better! Now we're performing at 85% instead of the low 20% range. There are still some improvements that can be made, but with some quick image optimization the page load time is significantly improved.

Check out your site's performance at Google PageSpeed Insights

Share This:

Tags:

Comments:

View (0) Comments Post a Comment
  • Replying to Adam Konieska on Using Google PageSpeed Insights to Optimize Your Site's Load Time