“I feel the need, the need for speed.” It might’ve been your favorite line from Top Gun in the 80’s, but today it should be the mantra for your website. Why? Plenty of research has been done that shows that the speed of your website affects user behavior in a big way – mainly the slower your site the less likely they are to use it. But if that wasn’t enough, Google uses page speed as a ranking factor now, faster sites are favored in search results, and are crawled more frequently by the Google spiders. Between user revolt and Google’s preference for snappy websites, it behooves you more than ever to make sure your site is running as fast as it possibly can. People have always been impatient and now the search engines are too. Here are our 17 top tips to make sure your site hums along, making everyone (humans and spiders alike) happy.
17 Ways to Speed Up Your Website
1) Benchmark your current site speed – Google built a tool that makes it easy to test out your site speed, called PageSpeed Online. Simply pop in your site URL and Google will give you speed analytics, plus recommendations on ways to improve performance. Take note of the recommendations and put them into effect to skinny up your pages and speed up load times. You can also get page speed analytics through various other services like Pingdom and New Relic.
2) Check your site performance regularly – This time you can use another Google tool that you’re already using, Google Analytics, to check your site performance on a daily basis. It’s important to keep an eye on it, particularly if you’ve made site changes, rolled new features or rely on heavy database access to serve dynamic content. If site speed deteriorates you can address it immediately and keep the search spiders and your users happy. To get to site speed, simply go to Content > Site Speed in your Google Analytics account.
3) Leverage Browser Caching – For return visitors browser caching loads files from their local machine instead of over the network. By using local files your browser retrieves less from the server and is able to load assets in a snap from the local disk. You can ensure optimal browser caching by setting expiry dates or maximum age parameters in your site’s HTTP headers. This doesn’t just apply to images either — you can cache all types of page content using this technique. See how to maximize the benefits of site caching here.
7) Combine Images with CSS Sprites – Reduce overall page size and the number of requests made by the browser with CSS sprites. CSS sprites combine multiple images into one file, which reduces the number of individual files the browser has to fetch and render. Not sure which images make good candidates for sprites? Check Google’s list for sprite recommendations. Or use a service like SpriteMe to making creating CSS sprites a breeze.
8 ) Keep Cookie and Request Headers Small – HTTP packets max out at 1,500 bytes. If you can keep your cookie and request headers under 1,500 bytes you can reduce the request overhead of the page. Google recommends storing session information in server-side cookies to keep client-side cookies light, and use the client-side to store a unique ID to reference the stored information on the server.
11) Optimize Images – If you’ve been developing for the web you know all about Adobe’s Save for Web and Devices, but did you know that programs like Fireworks still load up those “optimized” images with comments and other data that are nothing more than bloat and file size for the web browser? By truly optimizing images to remove comments and other excess file payload you can reduce file sizes significantly, speeding up your pages markedly. See Google’s tips for optimizing images.
12) Put CSS in the document head – Using inline CSS markup can slow down the page rendering by the browser. By moving inline CSS to the document header (along with links to external CSS) you allow the browser to progressively render the document and keep it from shifting content around as it reads further CSS instructions. It makes the page load smoother for your users and faster for your browser, double win!
13) Specify image dimensions – This one is a no brainer, but is often left out by developers who are in a hurry. Simply specifying image dimensions cuts down on page render time by your browser and eliminates content shifting and reflowing. Don’t scale images with dimensions either, make sure that the image size specified is the actual size of the image. By leaving image dimensions out you make the browser re-render the page once it determines the image size, slowing down the rendering process.
15) Use a Content Delivery Network – Serving assets from a CDN puts your content on high-availability, high-powered servers that can speed your files to the requesting browser. And by keeping multiple cached copies of your content on various servers, you reduce the round trip request time of the browser and keep serving up files no matter how heavy the traffic crunch may become. Next stop? The reddit front page!
16) For mobile caching, keep individual components under 25kb – Mobile has its own set of challenges and constraints. From shoddy 3G bandwidth to restrictions on file size caching on smartphones, optimizing for mobile is critical in today’s ever-growing mobile world. Yahoo! recommends keeping individual components under 25kb so that the iPhone will cache them. They note that this is the uncompressed file size, so minifying becomes extra important.
17) Cache mobile redirects – Google recommends caching mobile redirects for mobile users who search for the web-version of a resource. For example if your site redirects iPhone users from www.mysite.com to m.mysite.com, caching those redirects will reduce page load time for repeat visitors to your site.
So there you have it. 17 ways to speed up your site and improve both your user experience and your search engine optimization efforts. Many of these tips were taken from the Google PageSpeed developer’s site, and Yahoo! has many more excellent recommendations in their Page Speed Best Practices section of their developer site as well. With speed more and more important to both humans and search engines, it’s important to consider how you can keep your site humming along.