Optimize your website for happy visitors and a better ranking in Google!
Reducing HTTP Requests
The most apparent performance hit is connected to a file's size. All the bytes that make up its content must be downloaded to the visitor's computer. The more bytes the file has, the longer the user will have to wait.
However, there's also a less visible implication: every asset that is included on a page must be requested by the browser. Establishing and managing these HTTP connections takes time; not much, in most cases, but it quickly sums up when more than a handful of files are included.
Even worse is the fact that browsers have a limit as to how many requests they allow simultaneously. If, as an example, your page includes 30 resources, the visitor's browser will download them in batches (of between 2 and 8, typically). This means that even if the individual files' sizes are small, it will still take a considerable amount of time until all of them are downloaded.
Therefore, to reach our goal of a well-performing website, we must make sure to make as few HTTP requests as possible.
If you're using a framework like Ruby on Rails or Django, chances are that such a preprocessor is already part of your toolbox. If not, check out tools like CodeKit (Mac), Prepros (Mac, Win, Linux) or the corresponding plugins for Grunt or Gulp.
Combining Images in CSS Sprites
The same principle is applicable to images: instead of serving every image file on its own, you can combine them in a so-called "CSS Sprite" - simply a larger image file where a couple of graphics were combined in.
With a handful of images in the same file, you can then reference the image via CSS as a background. When width, height, and background properties are properly set, you'll be able to use the same physical file to display different images.
However, as with many things, you can easily overdo this: CSS Sprites work great when combining many smaller images into a single file. This makes it perfect for logos, icons, and other smaller image assets.
By contrast, you won't have much fun combining a couple of large-format photographs. These are indeed best left in their own, separate files because compression algorithms would not be as efficient and memory consumption in the browser would skyrocket.
You don't have to do this manually. Here are a couple of tools that help you create CSS Sprites:
Take a look at your images and combine smaller assets like logos and icons into a CSS Sprite.
The reason for this is that redirects cause roundtrips to the server(s) just like any other request. If you're unlucky, additional tasks like DNS lookups and TCP handshakes have to be performed as well.
All of this means just one thing: you should carefully check if loading your pages involves redirects. As an example, it might be worth serving a modern, responsive page for all devices instead of redirecting mobile visitors to a special "m.yourdomain.com" place.
In a Nutshell
Carefully check if and when your visitors are redirected. Since this entails (at least) another HTTP request, it is best to reduce redirects to a minimum.
Fixing 404 Errors
It goes without saying that a 404 error is no cause for celebration: it means that a requested resource could not be found. This is most obvious (and most embarrassing) when a user enters a URL in her browser's address bar and receives the legendary "Page could not be found" message in return.
But why is this a problem at all? A resource is requested, it's not found - end of the story, right? Almost... because requesting a resource, of course, involves an HTTP request. And you've already learned that these are expensive. Even if no data is returned by the request, its connection overhead will slightly slow down the page load.
While it's indeed easy to pick up such a bug, it's just as easy to fix. Using your browser's developer tools, you can search the "Network" traffic for resources that returned a 404 response. In Chrome Dev Tools, you can simply sort by the response "Status" and instantly see any bad requests.
In a Nutshell
Fixing 404 Errors
Searching your pages for missing resources (and the resulting 404 errors) should be a regular housekeeping task. Your browser's developer tools make it easy to inspect your page's network traffic and spot any 404 responses.
Get our popular Git Cheat Sheet for free!
You'll find the most important commands on the front and helpful best practice tips on the back. Over 100,000 developers have downloaded it to make Git a little bit easier.
As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.
Just like with Tower, our mission with this platform is to help people become better professionals.
That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.