3

I was looking into how to optimize web pages and the biggest way (code-wise) to optimize a website is to reduce the number of requests a browser has to make to your web server to get the full page.

The most obvious ways of doing this are:

  • Sprite sheets instead of individual images
  • Put all your css into one file
  • Put all your javascript into one file

But what if I got it down to one file total? By:

  • Converting all images into base64 encoded strings, embedded inline
  • Put all css inline
  • Put all javascript inline

Resulting in a very large html file, but no other requests.

I've loaded large HTML files from servers before (because they contained lots of information in a table or what not), and it actually choked the browser a bit loading the file. Is it advantageous to still segment out some files (such as large images, a single css and js file, etc) or would you get best performance out of a single document with all resources embedded?

  • It's not just the number of requests. It's the size of each request, how long it takes the server to render the content, etc. It's not at all clear that combining the content in the manner you suggest will actually improve performance. Using hosted libraries can improve performance, even though they are separate requests. So it's not as simple as that. – Robert Harvey Jun 23 '15 at 21:09
  • base64 will increase the size of your images significantly. Also by using separate css and js files, they can be cached between pages by the browser, reducing the transfer size. – GrandmasterB Jun 23 '15 at 21:20
10

Combining resources is one way to potentially improve performance for a web site. Let's look, though, at what happens when we take this to the extreme hypothetical you pose.

Size Savings?

We can Base64 encode images and put them directly into an HTML document. The first problem, though, is that Base64 encoding a binary object increases its size by a factor of 33%. By doing this, we actually produce larger files to download, which can easily outweigh any savings from eliminating requests.

Independent caching

If we put everything into a single file, we've coupled together any changes to that file. That means that if the HTML file changes, that file and all of the assets in it will also need to be downloaded again. The same is true for changes to any of the other assets. If the files are separate, they get cached separately, and only the files that change need to be downloaded again. (HTTP provides all the necessary mechanisms for this.)

Reuse

Putting everything into a single file prevents reusing cached resources on other pages. Say we have a home page and an about page with the same stylesheet. With multiple resources, that stylesheet need only be downloaded when we visit one, then the cached version can be used when we visit the other. If everything is embedded directly into every file, the same CSS gets downloaded over and over again for each page.

Parallel downloads and pipelining

In HTTP/1.0, browser developers realized that downloading all assets serially would cause page load to be slow as assets would only load one after the other. In response, browser developers wrote in features to allow multiple connections so that assets could be downloaded in parallel, then all rendered together. This provided some speed up.

HTTP 1.1 introduced many new tools for optimizing performance. Among them was the introduction of pipelining. Instead of waiting for a response to finish, then sending the next request, browsers could take advantage of the full-duplex nature of TCP connections and send the next request as soon as it realized it had to. This allowed assets to be downloaded without delays between, speeding up performance as well.

With your single-page model, browsers would not be able to take advantage of parallel connections to download different assets at once. This could make your page load slower. With the introduction of pipelining, HTTP allows us to offer a similar effect as downloading a single file without interruption.

While combining some files does make sense when measured in real-life situations, combining every file could actually backfire.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.