I recently optimized page load time for the Spelling Word's Well homepage as part of a redesign. Using the YSlow Add-on helped, but I still had a learning curve to face, and I also uncovered some other tricks. Here's a summary of the most important steps I took:
1. Make a DIY, Cookie-free Content Delivery Network
Choose a subdomain name that makes sense to you. I like to store these files outside of the public directory of the main domain (hence /subdomains/static instead of /public_html/static in the screenshot). Once this directory is created, be ruthless about putting everything you can on this subdomain, and update your html to use this subdomain.
UPDATE: Finally, make your DIY CDN real using CloudFlare for free.
UPDATE April, 2014: See my walkthrough describing how to setup AWS CloudFront with a custom SSL cert and an AWS S3 bucket (what I do on this site) for as little as $10 for the 1st year.
2. Supercharge Your Subdomain
Create an htaccess file in the root directory of your subdomain (in my example, /subdomains/static/.htaccess). The following .htaccess file asks browsers to store images and other static assets in it's cache longer for better repeat traffic. It utilizes mod_deflate to compress all kinds of text files (js, xml, html, css, ajax, etc.) over the netwok. It also blocks access to directory listings and sensitive batch files for security.
3. Fight the Scourge of Social Sharing Widgets
So, how do you fight back?
- Reduce unnecessary social widgets On Spelling Words Well, I removed a facebook badge that was hiding down the page, and saved almost a second in page load time.
- Load Widgets using AJAX Many widgets do this already, but check the documentation for more info.
UPDATE: In a future post, I'll walk you through using twitter web intents in a more detailed way, and I'd like to discuss creating customized performance focused google plus sharing widgets that function similarly to the twitter web intents. Follow me on twitter to find out when I write this follow up article!
4. Optimize Images
There's two parts to optimizing your images. The (more) obvious part is that you should use the lowest quality settings for JPGs that you can bear to look at. This makes the filesize smaller without shrinking the image's display size on screen. PNG files can be compressed using the free GIMP photo editing wonderland software. Don't use gifs. Just don't.
UPDATE October, 2013: I now recommend the incredible (and currently free) service from kraken.io to shrink images an exta 10-25% on average. Kraken does this without sacrificing any image quality. You can drag and drop dozens of files and download the optimized images as a single zip file once Kraken has worked it's magic.
The somewhat less obvious part is to crop your images in your photo-editing software (or in Drupal or Wordpress) so that the browser won't have to resize the image on fly. Setting a size in the
<img /> tag that is different the size of image stored in the server will force the browser to do extra work to resize the image. While is this really cool, it is slower. Of course, if you're using a responsive design, you'll have to weigh this carefully, and probably disregard my advice. Responsive images have a whole host of other puzzles to untangle that requires several posts to tease out.
- Move all that code into a separate JS file, and point a
<script>tag at the new JS file
- Experiment with different orders to see what feels the fastest
If you did steps 5 and 6, you'll start to notice your page feels much much more responsive already. Well done! This is the hardest part.
7. Minify CSS and JS
I've used YUI CSS Compressor and been happy with my compressed css. Once you're happy, upload it to your own CDN from step 1. Alternatively, if you've started using LESS, SASS, or Stylus, these all can minify the css they produce for you easily. Consult the appropriate documentation for details.
Personally, I like using Google Closure Compiler to minify my JS. I've setup a batch script that includes all my JS files in a specific order and compresses it into a slightly smaller output file. That should be the subject of a whole separate post later, but suffice it to say that you can minify using closure compiler online too.
Just the Beginning