Warning: This is a live blog post. I’ll be typing as it happens. Expect typos, mistakes and my own distinctive interpretation of the night’s events.
Google & Bing did some speed tests where they delayed their page. Half a second actually has an impact on the way people interact with the site. People will abandon search rather than waiting half a second more.
Google has now added speed into their ranking algorithm. Google may be counting how long it takes for ads on your site to load.
Some of the PHP tips on Google’s “make the web faster” site can actually make websites slower.
The longer it takes pages to load, the more likely users will abandon the page (see Neilsen’s page load limits).
Kornel has a fantastic illustration of the pipes that the Internet is made of. Now we have fat pipes that have a lot of bandwidth. The size of the file doesn’t matter as much as latency, the time it takes to cross the wire.
Bandwidth has improved 300 times sinc modems. latency has imported only 3 times. It isn’t going away. It won’t get faster until we upgrade the universe.
Most web standards were written when bandwidth mattered and latency didn’t matter that much. Three way handshake (SYN, SYN-ACK, ACK) = 2 pings to download anything.
HTTPS is much much worse because there is a lot more traffic on the wire for the exchange of keys, etc.
The solution is to reduce the number of requests.
@media print in your main CSS file. It’s best to automate this, but don’t use PHP. PHP deliberately breaks all caching.
Merge images into CSS sprites. This is what Google does. There are downsides to this technique. It breaks when you try to cut-and-paste, and it can be a maintenance nightmare.
IE7 has a limit of 2 connections pre hostname. This is what RFC2616. Unfortunately, IE actually paid attention to the standard. Create a cookie-less assets server (this can be a CDN or just a virtual host). Serve the main style sheet from the same server as the site you’re serving HTML from because it saves a DNS lookup. The download of the CSS will start immediately.
Caching is important, but difficult.
- Change the URL when content changes (e.g.
The moral of all this? Place scripts at the end of the body.
Good example of using a
position:absolute to place the ads toward at the top of the page. Otherwise, you can use a
iframe. SWFObject is great for loading in Flash ads.
Dont’ use the
defer attribute. Few browsers support it, and it’s not supported that well in IE either.
document.write doesn’t work anyway.
IE7 and Opera behave differently than all other browsers.
webpagetest.org, uses IE7 in the background. And Fiddler is a power horse, but make sure you enable “streaming mode” or your waterfall graph will be broken. For Firebug, use YSlow and google PageSpeed.
Progressive rending can slow down fast pages. To avoid this to the extent possible, specify image dimensions and float widths. Avoid clearing
overflow:hidden instead. Otherwise, use the clearfix hack.
The solution is gzip. Computers are so fast, it’s always better to gzip than not. With any text-based file, you get a 50% saving. In Apache use mod_deflate or mod_compress.
Use the lowest number of colors. Don’t use PNG24, but if you do try posterize. Use PNG8+alpha (Photoshop ignores these files, but Fireworks can save these files). There’s no reason to use GIF unless you need animations. JPEGs bug and are based on 8×8 blocks. Sometimes shifting your image by a few pixels can reduce JPEGs considerably.
Kornel has written ImageAlpha to give PhotoShop users access to PNG8+alpha (Mac only).
Remove unused data by removing EXIF data and color profiles. Kornel has created ImageOptim to make this process easier.
And that’s it.