Over the past week I’ve slowly improved the Google Page Speed score for our home page from 82 to 89. The most-time consuming work involved removing extraneous CSS and spriting our images. Improving page loading time is desirable because users really dislike slow pages.

Before I get to describing those two areas of improvement, I should mention that we’d already applied some of the basic recommendations for page loading optimization.  The easiest were placing all CSS in the head of our web pages and moving the JavaScript as far down the page a possible.  We use Drupal and within it’s template system, and this is the same in other CMS like WordPress, the point of output for CSS and JavaScript are determined by one variable each.  So, it was a simple matter of placing those variables in the optimal locations.  Initially this meant the CSS variable within the head tag and the JS variable near the closing body tag.  However, I found that placing the JavaScript so far down the page delayed the visual display of the tabbed sections of our site.  To alleviate this problem, I move the JavaScript output and placed it right before the closing head tag.  This did not have a negative impact on the Page Speed score.

Tackling page compression and optimizing for the client’s cache was more complex task.  I’m still working on a better understanding of how to apply these recommendations.  Following directions really helped!  I was able to activate compression via the Apache web server configuration file.  Optimizing page headers for caching was accomplished by adding setting the the Cache-Control header to private and setting the Vary: Accept-Encoding response header.   More info is available here: http://code.google.com/speed/page-speed/docs/caching.html#LeverageProxyCaching.

The above got me to 83 in Page Speed.  However, I was dreading the next step.  Our CSS had become a labyrinth of rules that interwove our site display with all the style sheets generated by Drupal.  Thankfully, I found the CSS Usage add-on for Firefox.  This amazing tool scans your stylesheets and prefaces all unused stanzas with the word UNUSED.  While I still had to go through over a thousand lines of CSS, much of the unused stanzas were in chunks.  After removing all the extra CSS, I used an online CSS beautifier tool to make everything nice and neat.  In the Drupal template, I hardcoded a statement to only use the single, optimized style sheet only for the home page.

Lastly, I “sprited” all our images.  Once again, I was saved by an online web dev tool.  This time it was the SpriteMe service.  This tool scans the images on your page and generates image sprites that combine multiple images into one.  A sprite greatly improves your web site’s load time by reducing requests to the server.  In place of 15+ images, we now use two.

There were other tweaks that helped too.  However, the biggest improvements came with the reduction in CSS and the generation of image sprites.

m4s0n501
 

Comments are closed.