Improving our page speed
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.
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.
subscribeJust a couple emails a week!
- add link in Colorbox caption - Drupal Answers
- Colorbox - Adding a hyperlink to the photo's caption | Drupal.org
- Email failed : Library à la Carte Tool
- nice idea
- coderwall.com : establishing geek cred since 1305712800
- Collaboration Solutions by Jive Software
- Home - Katerina's Kouzina
- Microsoft Virtual Academy – Free IT Training, Online Learning of Microsoft Technologies
- Home of free code snippets for Bootstrap | Bootsnipp.com