performance optimization

About a month ago, my new website look went live. I already wrote about some of the technical bits of the new site here, but I wanted to share a few more technical details on performance only. With my new update, I migrated from a shared hosting service to a virtual private server solution because I wanted more freedom in hosting plan as it pertained to various performance and software settings.

After the upgrade, I went through the checklist shown below to speed up my website. Some of these updates were pretty technical and contain links to find out more about each item.

• Enable gzipping of HTML, CSS, JS, which reduces the size of these files, and in turn reduces the download time for each file. Resources: Yahoo Best Practices and Apache
• Add expires headers, which tells the browser to not reload CSS, JS files until some specified date (and time) in the future. Resource: Yahoo Best Practices
• Reduce image resizing in HTML, specifically the thumbnails. I installed the WordPress Regenerate Thumbnails plugin after my redesign called for new thumbnail image sizes. This plugin regenerates all of the uploaded WordPress images.
• Optimize images. Images are a big part of any photography site, and it’s important that they are optimized to be served quickly. Resource: Yahoo Best Pratcies. I installed the WordPress Smush.it plugin, which uses Yahoo’s Smush.it service to optimize images by removing meta data, optimizing JPEG compression, converting GIFs to indexed PNGs, and stripping un-used colors from indexed images.
• Reduce HTTP requests by combining CSS files served by WordPress plugins. I grabbed the CSS used in a couple of WordPress plugins and appended the stylesheet rules to the end of my site’s CSS file and eliminated the need for the additional file to be included.
• Google Page Speed recommends that image dimensions be included in HTML to optimize browser rendering. I applied this update to a few large images used throughout my WordPress theme layout.
• Deferred loading of facebook like box, which means that Facebook is not loaded until after the page has fully loaded. This is explained more in depth here.
• Deferred loading of Typekit, which means that Typekit is not loaded until after the page has fully loaded. This is explained more in depth here.

Did anyone notice the update? According to the site’s Google Webmaster Tools crawl stats shown to the left, Google noticed! You can see the nice drop in Time spent downloading a page, and a direct increase in Pages crawled per day since the website update. It’s not surprising that to see an increase in the number of pages crawled per day for sites that are optimized for performance. If you are curious about where I found all these ideas, popular web performance tools like WebPageTest.org, YSlow, and Google Page Speed are all great tools to try out. Each of these tools gives you a grade for various areas of web performance and a checklist on suggested optimizations. With a shared hosting plan, not everyone is going to be able to make these updates to speed up their website. However, optimizing images with the WordPress plugins described above is a good place to start since photographers often share many photos.