17 Ways to Speed Up Your Site

“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.

4) Minimize DNS Lookups – Multiple DNS lookups for multiple hostnames can slow site response time down as the client tries to resolve the various entries. Cutting down on these checks reduces the overall return trip time needed to render the Web page. The best way to do this from the development side is to limit the number of different DNS lookups used, particularly within the code that initially renders the page. Google recommends two ways to minimize DNS lookups: 1) use URL paths instead of hostnames where possible, and 2) load JavaScript from the same hostname as the main document.

5) Combine JavaScript Files – JavaScript files are typically loaded sequentially and block further page rendering until the JS is fully loaded and parsed by the browser. When you run multiple JS scripts across multiple files that load time really starts to add up. By combining your JS scripts into fewer documents you can drastically cut the load time by reducing the number of HTTP requests the browser must make, and saving the associated round trip time. Google suggests cutting page JS into two files, 1) the code needed to render the page initially and 2) the javascript that isn’t needed until the page is fully rendered. More JavaScript optimization techniques.

6) Combine External CSS – The same rules that apply for JavaScript apply for CSS. By combining CSS files you reduce the number of HTTP calls and associated round trip time. Again, by splitting the CSS into two files, one with the critical elements to initially render the page, and the second to handle items after page load. Google recommends two CSS files, three at the absolute maximum.

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.

9) Enable Compression – By using gzip or deflate, you can compress HTML, CSS and JavaScript reducing file size and delivering the page elements faster to the browser. Gzip only works on larger file sizes because of the overhead built into compressing and decompressing the resource. Google recommends gzip for files that are at least 150 bytes, otherwise the overhead required in compressing/decompressing can actually make the file larger and slower to render.

10) Minify CSS and JavaScriptMinifying code means to optimize it by removing excess bytes such as extra spaces, line breaks and indentation. By minifying your CSS and JavaScript you reduce bytes which speeds up the downloading and parsing of those files. What exactly are the benefits? Google outlines them well:

First, for inline JavaScript and external files that you don’t want cached, the smaller file size reduces the network latency incurred each time the page is downloaded. Secondly, minification can further enhance compression of external JS files and of HTML files in which the JS code is inlined. Thirdly, smaller files can be loaded and run more quickly by web browsers.

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.

14) Defer JavaScript loading – As mentioned above, JavaScript is typically loaded sequentially and blocks rendering of other page elements until fully loaded. This slows down the initial page render. By prioritizing and deferring JavaScript loading for JS that is only needed after the page is fully rendered, you reduce the initial page load time and render, reducing the wait time for your user. Google has great recommendations on how to setup your JavaScript during the page load process for maximum efficiency and speed.

15) Use a Content Delivery NetworkServing 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.

Comments are closed.