LWS April: Faster Web Pages (Live Blog)

by Jeff Van Campen. 6 Comments

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.

Update: Kornel has posted a PDF of his presentation as well as video on his site.

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.

Merge JavaScript & CSS files into one file. Don’t use @import! Use @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.

  • Use mod_expires in Apache.
  • Change the URL when content changes (e.g. style.css?1234)

document.write is evil. It can create any code that might completely change the meaning (and thus the layout of the rest of the page. It also makes the parse wait for all scripts. WebKit, Firefox and IE8 parse the page twice. Once without JavaScript enabled, and then with JavaScript enabled. This still doesn’t fix all the issues. IE7 and Opera don’t do this. There is no hope fr scripts that write other scripts (e.g. Google Analytics).

The moral of all this? Place scripts at the end of the body.

Good example of using a defer() function. Ads cannot be deferred. Place ad JavaScript at the end of the page, then use 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.

Hosted JavaScript libraries don’t help. Users would have to have the same version from the same provider, and users often don’t have that version in their cache. If they don’t have it, the browser has to do a DNS lookup on another server then download the whole script.

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 divs and brs. Use overflow:hidden instead. Otherwise, use the clearfix hack.

Bandwidth

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.

In some cases, gzip doesn’t work, so it’s best to minify your files using YUI Compressor or Google Closure Compiler (for very large JavaScript libraries). Google Closure Compiler requires some tweaking. makefile is perfect if you know how to write makefiles.

Image reduction

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

Image optimisation

Remove unused data by removing EXIF data and color profiles. Kornel has created ImageOptim to make this process easier.

And that’s it.

6 comments on “LWS April: Faster Web Pages (Live Blog)

  1. Francesco on said:

    a big thank you guys, I was going to attend tonight but I’m stuck in the office.. aaargh

    at least I can follow you through this live blog!

    THANK YOU!

  2. prisca on said:

    Thanks to Kornel for a great talk. It was good to get some confirmation on certain points as well as learn something new.
    and Jeff, thanks for the live note taking 🙂

  3. Rob Enslin on said:

    I’m sure I speak on behalf of all the attendees last night, but Kornel’s presentation was great. Lots of useful tips and tricks.

    Does anyone have a reference to support implementations for page performance improvements, aimed at senior stakeholders? That could include empirical studies, case studies and examples where higher performing websites made a tangible difference to company’s bottom lines demonstrating that much needed ROI argument.

  4. Sergey Chernyshev on said:

    Hello from New York Web Performance Group!

    Great presentation! I’ve posted it to TechPresentations: http://www.techpresentations.org/Faster_Web_Pages_(at_LWS_April_2010)

    Can you post slides on SlideShare please. You didn’t specify the license and I don’t want to just upload your content without asking, but I can do that under my account if you don’t have time.

    You can also check out a few other presentations about Web Performance I’ve collected from our sessions and other conferences:
    http://www.techpresentations.org/Performance#Presentations_about_Performance

    Great to see this topic being brought up on all continents!

    Sergey

  5. Jeff Van Campen on said:

    Hi Sergey,

    Thanks for posting that on TechPresentations. I see you found Kornel’s PDF and video of the presentation on his site. Let us know if there’s anything else you need.

    -jeff

  6. Jeff Van Campen on said:

    Rob,

    Steve Souders recently wrote a post that included a section on the impact of performance on the bottom line. Is that the kind of thing you’re looking for?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.