Optimizing Page Load Times

John Callender writes, "Google engineer Aaron Hopkins has written an interesting analysis of optimizing page load time. Hopkins simulated connections to a web page consisting of many small objects (HTML file, images, external javascript and CSS files, etc.), and looked at how things like browser settings and request size affect perceived performance. Among his findings: For web pages consisting of many small objects, performance often bottlenecks on upload speed, rather than download speed. Also, by spreading static content across four different hostnames, site operators can achieve dramatic improvements in perceived performance."

Erm.. huh?

[Turn-X Alphonse (789240)]

I'm not quite sure how this really has any "real world" effects.. Browsing speed is already insanely fast to the point where if you blink you miss the loading on most connections these days. How does speeding up this second or so really help anything?

I can see it's use on large sites but this seems aimed at smaller sites.

Then again HTML isn't my thing so it goes over my head I guess.

Re:Erm.. huh?

[rf0 (159958)]

If you are on a fast broadband pipe you are correct but there is still a lot of other people on small connections with low upload limits (64k-256kbit) and I can see why this could be a bottle neck as it can't get the requests out fast enough. That said there are things a user can do to help themselves.

Firstly if the ISP has a proxy server then using it will reduce the trip time for some stored content meaning it only has to go over a few hops than prehaps all the way across the world. You can also look at something like Onspeed [onspeed.com] which is a paid for product but compresses images (though makes them look worse) and content and can give a decent boost on very slow (GPRS/3G) connections and also get more out of your transfer quota.

Re:

[Jussi K. Kojootti (646145)]

Browsing speed is already insanely fast to the point where if you blink you miss the loading on most connections these day.

Unfortunately that is not true. Many "broadband" connections are definitely not insanely fast, and at least here in Finland the upload speeds of most connections are so pathetic that the problems mentioned in the article are very easily observed.

Re:

[mabinogi (74033)]

1.5Mbps ADSL.
5 Seconds to refresh the page on slashdot. That's just to getting the page to actually blank and refresh, there's still then the time it takes to load all the comments.
Sometimes it's near instant, but most of the time it's around about that.
Most of the time is spent "Waiting for slashdot.org", or "connecting to images.slashdot.org".
It used to be a hell of a lot worse, but I installed adblock to eliminate all the extra unecesary connections (google analytics, and the various ad servers). I did

Re:Erm.. huh?

[x2A (858210)]

There are other factors.

1 - keepalive/pipelining connections means only 1 dns lookup is performed, often cached on your local machine means this delay is minimal.

2 - the dns lookup can be happening for the second host while connections to the first host are still downloading, rather than stopping everything while the second host is looked up. This hides the latency of the second lookup.

3 - most browsers limit the number of connections to each server to 2. If you're loading loads of images, this means you can only be loading two at once (or one while the rest of the page is still downloading). If you put images on a different host, you can get extra connections to it. Also, cookies will usually stop an object from taking advantage of proxies/caches. Putting images on a different host is an easy to way make sure they're not cookied.

Re:

[jakoz (696484)]

It has very big implications still. For you it obviously has no effect, but let me give you an example.

We are in the middle of the planning of a software release that rolls out to thousands of users. So that they can access it remotely, we are toying with the idea of supporting 3G PCMCIA cards.

In the area we're benchmarking in, latency and a retarded slow-start windowing algorithm are the limiting factors. Keep in mind that this software is crucial to the company, which is a fairly large one. Adoption

Those tenths of seconds add up

[giafly (926567)]

If a big part of your job involves using a Web-based application, reducing page-load times really helps. My real job is writing one of these applications and getting the caching right is much more important than sexier topics like AJAX. There's some good advice in TFA.

Re:Erm.. huh?

[orasio (188021)]

User perception of responsiveness on interfaces has a lower bound of 200 ms. Some times even lower.

Just because 1 seconds seems fast, it doesn't mean that it's fast enough to stop improving.
When you reach that 200ms barrier, the interface has perfect responsiveness, a bigger interval is always perfectible.

HTTP Pipelining

[onion2k (203094)]

If the user were to enable pipelining in his browser (such as setting Firefox's network.http.pipelining in about:config), the number of hostnames we use wouldn't matter, and he'd make even more effective use of his available bandwidth. But we can't control that server-side.

For those that don't know what that means: http://www.mozilla.org/projects/netlib/http/pipeli ning-faq.html [mozilla.org]

I've had it switched on for ages. I sometimes wonder why it's off by default.

Re:

[SanityInAnarchy (655584)]

I always wonder why it's off by default. IE I can understand -- they still don't support XHTML -- but Firefox?

Re:HTTP Pipelining

[baadger (764884)]

This is NOT just Opera fanboyism, but Opera however *does* do pipelining by default (with a safe fallback)

Opera pipelines by default - and uses heuristics to control the level of pipelining employed depending on the server Opera is connected to

Reference [operawiki.info]

Some reasons

[harmonica (29841)]

I've had it switched on for ages. I sometimes wonder why it's off by default.

Some reasons against pipelining [mozillazine.org].

HTTP/1.1 Design

[keithmo (453716)]

From TFA:

By default, IE allows only two outstanding connections per hostname when talking to HTTP/1.1 servers or eight-ish outstanding connections total. Firefox has similar limits.

And:

If your users regularly load a dozen or more uncached or uncachable objects per page load, consider evenly spreading those objects over four hostnames. Due to browser oddness, this usually means your users can have 4x as many outstanding connections to you.

From RFC 2616, section 8.1.4:

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

It's not a browser quirk, it's specified behavior.

Re:

[jakoz (696484)]

It might be specified behavior, but it's stupidly outdated, and seriously needs to get with the times.

It has been that way since I had dialup many years ago. It might have been prudent at the time, but now it is sadly outdated.

Things have changed. The popularity of FasterFox, which happily breaks all specifications, is a reflection of it.

I feel that 10-20 is a much more realistic figure now. I haven't seen many webmasters complaining about FasterFox.

Re:

[ben there... (946946)]

I feel that 10-20 is a much more realistic figure now. I haven't seen many webmasters complaining about FasterFox.

I've seen webmasters complain right on FasterFox's download page on Mozilla Update.

Re:

[jakoz (696484)]

Then perhaps they need to invest in some modern systems. The following definitions are interesting:

3. SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course. 4. SHOULD NOT This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior

Re:HTTP/1.1 Design

[x2A (858210)]

The limit's not to do with your connection speed as such - it's to do with being polite and not putting too much drain on the server your downloading from.

Re:

[jakoz (696484)]

I realize that, but the limits need to be revised. 2 might have been courteous a decade ago, but now it isn't realistic.

Re:HTTP/1.1 Design

[x2A (858210)]

Depends on server load; how many of the objects are static vs dynamic etc. 5-10 connections for images might be okay, but for dynamic objects it might not be. Perhaps it should be specifiable within the html page?

Re:

[jakoz (696484)]

You know... that's a damn good idea and should be modded up. It's a very good solution that should be in the specs already. Granted that some browsers could ignore it, but they could anyway,

Re:

[hany (3601)]

At the end you have just one pipe to push that data even if you have say 100 connections.

By still having one pipe with certain capacity (i.e. bandwidth) but increasing amount of connections, you're wasting your bandwidth for maintenance of multiple connections.

Also you're wasting the resources of the server for the same reason.

At the end, you're slowing yourself down.

Yes, there are scenarios where using for example 4 connections as opposed to just 1 yields better download performance but AFAIK almost al

Simulation software available?

[leuk_he (194174)]

"Regularly use your site from a realistic net connection. Convincing the web developers on my project to use a "slow proxy" that simulates bad DSL in New Zealand (768Kbit down, 128Kbit up, 250ms RTT, 1% packet loss) rather than the gig ethernet a few milliseconds from the servers in the U.S. was a huge win. We found and fixed a number of usability and functional problems very quickly."

What (free) simulation is available for this? I only know dummynet which requires a linux server and some advanced routing. But surely there is more. Is there?

Re:

[OffTheLip (636691)]

NIST Net (http://www-x.antd.nist.gov/nistnet) can be used for latency and bandwith simulation. It is no longer supported though. Not sure what other free alternatives are out there.

Re:

[Jussi K. Kojootti (646145)]

Try trickle. It won't do fancy stuff like simulating packet loss, but a
trickle -d 100 -u 20 -L 50 firefox
should limit download, upload and latency rates.

Re:Simulation software available?

[ggvaidya (747058)]

You could try using Sloppy [dallaway.com]. I've only ever heard about it because its programmer has a very nice page on getting a free Thwarte FreeMail certificate to work with Java WebStart [dallaway.com], so this isn't a recommendation or anything. Looks pretty decent, though.

Re:

[Slashdiddly (917720)]

From the home page:

Sloppy deliberately slows the transfer of data between client and server.

So basically a straight proxy then - only in Java!

Re:

[badfish99 (826052)]

If you're running linux you can do all of this with iptables (even simulating random packet loss). The command syntax is a bit complicated but once you've got the hang of it, it is extremely powerful.

Re:

[leuk_he (194174)]

Actually Dail up cost me money. While i have a always on adsl already available.

And it is impossible so simulate faster lines than my current adsl.

Css and Scripts

[Gopal.V (532678)]

I've done some benchmarks and measurements in the past which will never be made public (I work for Yahoo!). And the most important bits in those have been CSS and Scripts. A lot of performance has been squeezed out of the HTTP layers (akamai, Expires headers), but not enough attention has been paid to the render section of the experience. You could possibly reproduce the benchmarks with a php script which does a sleep() for a few seconds to introduce delays at various points and with a weekend to waste [dotgnu.info].

The page does not start rendering till the last CSS stream is completed, which means if your css has @import url() entries, the delay before render increases (until that file is pulled & parsed too). It really pays to have the quickest load for the css data over anything else - because without it, all you'll get it a blank page for a while.

Scripts marked defer do not always defer and a lot of inline code in <script> tags depend on such scripts that a lot of browsers just pull the scripts as and when they find it. There seems to be just two threads downloading data in parallel (from one hostname), which means a couple of large (but rarely used) scripts in the code will block the rest of the css/image fetches. See flickr's organizr [flickr.com] for an example of that in action.

You should understand that these resources have different priorities in the render land and you should really only venture here after you've optimized the other bits (server [yahoo.com] and application [php.net]).

All said and done, good tutorial by Aaron Hopkins - a lot of us have had to rediscover all that (& more) by ourselves.

Re:

[Evets (629327)]

I've found that once a page has layout it will begin rendering and not before. CSS imported in the body do not prevent rendering. CSS imported in the HEAD will. In fact, the css and javascript in the head section seem to need downloading prior to rendering.

I have also found that cached CSS and Javascript can play with you a little bit. When developing a site you tend to see an expected set of behaviors based on your own experience with a site - but you can find later that having the external files either

Re:

[RAMMS+EIN (578166)]

``The page does not start rendering till the last CSS stream is completed''

On the other hand, stylesheets are often static and used by many pages, so they could be cached (Opera does this). The same is true of scripts.

Caching of dynamic content

[baadger (764884)]

This [web-caching.com] is a good place to start testing the 'cacheability' of your dynamic web pages. Quite frankly it's appauling that even the big common web apps used today like most forum or blog scripts don't generate sensible Last-Modified, Vary, Expires, Cache-Control headers. With most of the metadata you need to generate this stuff stored in the existing database scheme theres just really no excuse for it.

Abolishment of nasty long query strings into nicer, more memorable URI's is also something we should be seeing more of in "Web 2.0." Use mod_rewrite [google.com], you'll feel better for it.

Re:

[RAMMS+EIN (578166)]

``Quite frankly it's appauling that even the big common web apps used today like most forum or blog scripts don't generate sensible Last-Modified, Vary, Expires, Cache-Control headers.''

The problem is that things don't usually break if you don't use these headers effectively. In other words, you don't notice that something could be improved.

Pipelining

[RAMMS+EIN (578166)]

FTFA:

``Neither IE nor Firefox ship with HTTP pipelining enabled by default.''

Huh? So all these web servers implement keep-alive connections and browsers don't use it?

Re:

[smurfsurf (892933)]

Pipelining is not the same as keep-alive. Although pipelining needs a keep-alive connection.
Pipeling means "multiple requests can be sent before any responses are received. "

Re:Pipelining

[TheThiefMaster (992038)]

Pipelining is not keep-alive. Keep alive means sending multiple requests down one connection, waiting for the response to the request before sending the next. Pipelining sends all the requests at once without waiting.

Keep-alive no:
Open connection
-Request
-Response
Close Connection
Open connection
-Request
-Response
Close Connection
-Repeat-

Keep-alive yes:
Open connection
-Request
-Response
-Request
-Response
-Repeat-
Close Connection

Pipe-lining yes:
Open connection
-Request
-Request
-Repeat-
-Response
-Response
-Repeat-
Close Connection

Re:

[x2A (858210)]

Keep-alive sends the next request after the first has completed, but on the same connection (this requires the server to send Content-length: header, so it knows after how many bytes the page has finished loading. Without this, the server must close the connection so the browser knows it's done).

Pipelining sends requests out without having to wait for the previous to complete (this does also require a Content-length: header. This is fine for static files, such as images, but many scripts where output is sen

Connection Limits

[RAMMS+EIN (578166)]

``By default, IE allows only two outstanding connections per hostname when talking to HTTP/1.1 servers or eight-ish outstanding connections total. Firefox has similar limits.''

Anybody know why? This seems pretty dumb to me. Request a page with several linked objects (images, stylesheets, scripts, ...) in it (i.e., most web pages), and lots of these objects are going to be requested sequentially, costing you lots of round trip times.

Re:

[MathFox (686808)]

The "max two connections per webserver" limit is to keep resource usage in the webserver down; a single apache thread can use 16 or 32 Mbyte of RAM for dynamicly generated webpages. If you get 5 page requests a second and it takes (on average) 10 seconds to handle the request and send back the results you need 1 Gb RAM in the webserver, if you can ignore Slashdot. (2-4 Gb to handle peaks)

If you have a second webserver for all static data, that can be a simpeler http deamon with 1 Mb/connection or less. You

Requests Too Large

[RAMMS+EIN (578166)]

FTFA:

``Most DSL or cable Internet connections have asymmetric bandwidth, at rates like 1.5Mbit down/128Kbit up, 6Mbit down/512Kbit up, etc. Ratios of download to upload bandwidth are commonly in the 5:1 to 20:1 range. This means that for your users, a request takes the same amount of time to send as it takes to receive an object of 5 to 20 times the request size. Requests are commonly around 500 bytes, so this should significantly impact objects that are smaller than maybe 2.5k to 10k. This means that serving small objects might mean the page load is bottlenecked on the users' upload bandwidth, as strange as that may sound.''

I've said for years that HTTP requests are larger than they should be. It's good to hear it confirmed by someone who's taken seriously. This is even more of an issue when doing things like AJAX, where you send HTTP requests and receive HTTP responses + XML verbosity for what should be small and quick user interface actions.

Latency

[RAMMS+EIN (578166)]

Latency matters a lot. My connection does up to 512 KB/s downstream, meaning a 10 KB object would take about 0.02 seconds to receive. However, before I start receiving the bytes, my request has to travel to the server, and the response has to travel back to me. When the site is in the US (I'm in Europe) the round trip time to the server can easily be 100 to 200 ms. If the TCP connection is already open, this time gets added once. However, if the connection still has to be established, this will result in an

Re:

[RAMMS+EIN (578166)]

``If you read the article, you will see that the default behavior for Firefox and MSIE is to use only up to two connections per hostname (resulting in many objects being received sequentially - add one round trip time for each), and that they don't use HTTP pipelining, meaning a new connection is set up for each object (add one round trip time for each).''

Whoops. I somehow got confused into thinking that pipelining == keep-alive (despite clicking on the provided link). HTTP pipelining means that multiple re

Re:

[RAMMS+EIN (578166)]

``That may be true, however the limit is in the HTTP/1.1 spec for a reason.''

Yeah, namely that there are so many sucky web servers and operating systems out there. So what we do? We protect these poor little things by writing their limitations into the standard. I mean, a web server worth its salt is able to cope with many concurrent connections, be they from one client or from many clients.

Gmail

[protomala (551662)]

I hope they apply this study on Gmail. Using it on a non-broadband connection (plain 56k modem) is a pain unless you use the pure HTML view that is crap compared to other HTML webmails.
The fun is that newer AJAX products from google (like goffice) don't suffer from this behavior, they have a much more cleaner code (just pick view code on your favorite browser and see). Probally Gmail HTML/Javascript is already showing it's age, and paying the price for being a first at google AJAX apps.

Re:

[Peeteriz (821290)]

Yes, I have the problem also, it's very painful - my upload speed at home is severely limited, and GMail gets timeout messages occasionally - and if something like Bittorrent is running, then it's impossible to send anything with attachments - for example, a small 50 kb document is impossible to send.

Is this really news?

[iritant (156271)]

There is a paper about this in SIGCOMM 1997 (!) by Nielsen, Gettys, et al that goes into far more detail of the "whys" and "wherefores". I'm not sure this shows ANYTHING new. In fact, what this gentleman demonstrates is the way that TCP windows work. By spreading requests over four hosts you are in effect getting four times the window size, arguably more than your fair share. Without looking at the aggregate impact, one cannot really judge what's going on.

Also, the reason pipelining is turned off by def

Page load time is still important

[Dekortage (697532)]

There are a lot of posts here asking "why is this important" and saying that pages already load fast enough on their broadband Internet connection. That may be true for you, but I'm frequently in a position where I am designing a site that needs to load over a slow satellite connection in rural Africa, say, or into a remote village in Nepal. They have a fairly recent computer, OS and browser on the recieving end, but their Internet connection is dog slow; anything I can do to speed it up will be greatly a

All the offsite stuff is ads anyway. Block them.

[Animats (122034)]

This is an excellent argument for ad blocking. The article never mentions the basic truth - almost all offsite content on web pages is ads. (Of course, this is someone from Google talking, and Google, after all, is an ad-delivery service which runs a search engine to boost their hits.) Web page load is choking on ads. I noted previously that some sites load ads from as many as six different sources. This saturates the number of connections the browser supports. Page load then bottlenecks on the slowest ad server.

So install AdBlock and FlashBlock in Firefox, and watch your browsing speed up.

Web-based advertising looks like a saturated market. Watch for some big bankruptcies among advertising-supported services.

Re:

[mdarksbane (587589)]

Since every fricking developer seems to think that the web is the end all be all future solution for everything, then yes, it does matter.

When I click on an element in a web page to manage my email or use a word processor, the response time is going to be around my ping (30-90 ms depending on where in the country it is) plus the time to load. That is long enough that I am clicking, and waiting. If I were working on a local native app, the response time would be under 30 ms and I would probably not even noti

Re:

[mrsbrisby (60242)]

Nice trick with 4 hostnames, but this means 4 security contexts for your content, which may make a lot of development hard (especially client based with JavaScript).

Why? Doesn't your javascript explicitly state document.domain to the common root?

Not to mention the management issues of having to link to content on 4 different domains in an efficient enough manner.

You mean creating four hostnames for the same address? Or do you mean changing a few src="" attributes?

This leaves us with pipelining on the client