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!
- How to Use the Drupal Quiz Module
- Build a Mobile App to Geo Locate Nearby Places with Drupal | Tyler Frankenstein
- Scraping websites into Drupal using Feeds and Import.io | Fourword: The Four Kitchens blog
- HowToMD5SUM - Community Help Wiki
- Alfresco Anti-Patterns: When You Probably Shouldn’t Use Alfresco | ECM Architect
- Primo issue
- Primo by Ex Libris - a place in the sky
- Home | American Express Redesign
- Portland State University Library
- Wiley Online Library: Search Results Page