How to make your website really, really fast

How to make your website really, really fast

Summary: Steve Souders knows how to make a website speed through a web browser.And he works at Google, one of the fastest websites around.

SHARE:

Steve Souders knows how to make a website speed through a web browser.

Steve Souders from Google

And he works at Google, one of the fastest websites around.

Web performace is a two-pronged beast: efficiency and response time. Efficiency deals with the scalability challenges of building a top 100 global website. You have millions of users and billions of page views, and it's awe-inspiring to understand the full scope of the backend architecture of something that large.

The set of directions that the HTML document gives to every process really determines the speed of the page.

On iGoogle for example, only 17% of the page is backend, non-cached data and needs to be requested each time. The rest is front-end processing.

80-90% of the end-user response time is spent on the front-end. Start there when you want to figure out how you can make your site faster.

If you can cut this front-end time in half, your users will notice it. Offer greater potential for improvement and notice simple performance tweaks on the backend too.

14 tips for performance

  1. Make fewer HTTP requests
  2. Use a CDN
  3. Add an Expires header
  4. Gzip components
  5. Put stylesheets at the top
  6. Put scripts at the bottom
  7. Avoid CSS expressions
  8. Make JS and CSS external
  9. Reduce DNS lookups
  10. Minify JS
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Configure ETags
  14. Make AJAX cacheable

YSlow is a Firebug extension that gives developers the chance to analyze every slow part of your website and test it against the 14 points mentioned above.

O'Reilly Velocity is a web performance and operations conference co-founded by Souders and Tim O'Reilly. There should be some really good talks this year.

Souders also taught a class at Stanford called High Performance Websites.

Why focus on Javascript? They have a huge impact on the page load time.

Time spent on the front end

AOL has about 5 scripts accounting for about 60 or 80% load time.

Facebook has about a megabyte of Javascript.

Why focus on Javascript?

JS is downloaded sequentially, even if the HTML document has already been downloaded. It won't draw anything on the screen unless the script is finished downloading.

Cuzillion is a tool that does batch testing on webpages.

Cuzillion from Steve Souders

HTTPWatch is his preferred packet sniffer.

If you can split the Javascript in what's needed to render and "everything else", you will dramatically improve your page load time. Microsoft has a whitepaper that talks about how this can be done automatically with something called Doloto. Look at the source code of MSN.com and see how they do it.

Steve Souders from Google

But even if you can split the initial page load, you will still have external scripts that will have an impact on your page.

There are many ways to make your scripts load all at the same time. XHR evaluation is an option but you are open to XSS attacks and all scripts must have the same domain.

Fast websites by Steve Souders

Putting a script in an iframe causes the JS to be downloaded in parallel with other resources on the page. You can use the DOM method for creating the head element using createElement.

Try the <script defer src="file.html">. This works in IE and FF 3.1, but it's not the best method. Domains can differ and you don't have to refactor your code though.

Don't even use the document.write method. It's terrible for many reasons.

It's always good to show busy indicators when the user needs feedback. Lazy-loading code sucks, but the user needs to know that the page isn't done.

Ask yourself three questions:

  • What's the URL of the script?
  • Do I want to trigger busy signals?
  • Does this script have to be executed in order or not?

Fast websites by Steve Souders

Sometimes the user is waiting for their inbox to load, and you need the scripts to load in order. Other times it won't matter.

The best part: none of these techniques are that hard to implement.

Don't let scripts block other downloads either.

Stylesheets load in parallel, but if you have a stylesheet followed by an inline script, parallel downloads are broken.

Also, use link instead of @import.

Here is a link to Souders' UA profiler. It's a chart of all the compatibilities among all browsers regarding fast loading pages. Or as Souders puts it, a "community-driven project for gathering browser performance characteristics".

He also built something called Hammerhead, which adds a little tab to Firebug that tells you the load time of the page. It also clears the cache in between load times. You can compare websites side by side too.

In HTTP 1.1 you can do transfer encoding in chunks. Your browser can un-gzip even a partial HTML document and start parsing it before the stylesheet is even loaded. CNET.com does this.

IE7 will open two connections per server name, unless the traffic is HTTP 1.0. Optimize images with smush.it

Takeaways

Focus is on the front end. Many front end engineers are learning on the job, kinda teaching themselves. It's an under-represented but a critical part of the web community.

Everything is going Javascript. It's the most painful thing to deal with on the page, and we need to identify and adopt some best practices in that space.

Speed matters. If you are waiting, you get bored and frustrated. When Google slowed down 500ms, they lost 20% traffic. Yahoo sped up their search results page only 400ms, and they got 5-10% faster. Amazon ties a 100ms latency to 1% sales loss. A faster page has an impact on revenue and cost savings.

Here is a link to Steve's presentation »

Souders wrote High Performance Websites in 2007.

Topics: CXO, Browser, Hardware, Software Development, IT Employment

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Talkback

29 comments
Log in or register to join the discussion
  • Best Performance..

    Make it Lynx optimised ;) Sorry, couldn't resist making that joke :)
    TedKraan
  • RE: How to make your website really, really fast

    Quote from recent Forrester report " the key to web performance is a multidiscplinary approach that focuses not only on raw speed but also on the customer's perception of performance."

    Or as one of our customers put it: "a poor user experience delivered fast is still a poor user experience."

    So while speed is important, there are other factors at play. And whay is key is the experience end-users get. And the only way to know this is to measure their experiences via several perspectives - from end-user desktops, from Internet backbone nodes and from within actual users' browsers.

    Check out this useful white paper called: "How to take your site to the highest levels of performance" at http://www.gomez.com/info_center/viewabstract.php?id=30

    Thanks.
    samanthamcgarry
    • Fast is good only if you can read it!

      I visited the linked site (gomez.com) and sure enough, it loads quickly; however, the web designer has chosen such a small font that it's difficult to read. The various shades of green used for the background don't help, either.

      To quote from your post..."a poor user experience delivered fast is still a poor user experience."

      I feel that I was delivered a poor user experience. It's a good thing that my screen resolution is only 1280x1024 - I'd hate to think how tiny the font would be at 1600 or higher!
      ken@...
      • Fast is good and youcCAN still read it

        You have some points but the site was a example of how to increase the
        speed of you page load not a example of graphic design or content
        format any of the problems you mentioned can be addressed without
        effecting the page load.
        The point is to learn to write the code of your page to load faster. You can
        still design the content as you wish but still follow the advice given in
        this post so you can have both fast load times and be able to read it so
        really the drawbacks you found on the example site have nothing to do
        with what makes the page load fast.
        Michael Fournier
  • Please use a spelling and grammar checker

    Just scanning your article quickly I spotted 3 spelling mistakes:
    1) "Web performace is a two-pronged beast: efficincy and response time." - efficincy?
    2) "YSlow is a Firebug extention that gives developers the chance to analyze" - extention?
    3) "Stylesheets load in parallel, but if you have a stylesheet followed by an inline script, paralell downloads are broken." - paralell?

    Finally, another tip for speeding up a website: don't insert unnecessary photographs when simple text will do just as well!
    JohnOfStony
    • spelling fixed

      Thanks--david
      David Grober
    • Hey!

      Sorry about the spelling, I need to edit better.

      I am hosting these photos on Flickr so it's not slowing down this site at all :)
      Andrew Mager
  • RE: How to make your website really, really fast

    If you have a photo, you can edit it to be the actal size that it will show up on the screen. That saves the browser from having to resize it each time.
    harry_w_lewis@...
  • NO Flash!!!

    Take away the annoying flash and you have a fast website.

    Most websites today can only be watched if using high speed internet. I really feel for people who are still using dialup.
    wackoae
    • Justifiable Flash is scarce

      I have lost count of how many sites I've stumbled upon which had next to no justification for using Flash, yet used it heavily. Mostly it was just for the sake of having something moving on the page - and in many cases, a simple and much smaller animated GIF would have required no plug-ins to be loaded and would have achieved the same effect.

      There were also many instances of blatant pure designer vanity ("see what I can do, I can do Flash!"), dubious taste and unnecessary added complexity in navigation. Anything can be a disaster if badly used, but Flash has the potential to be catastrophic.

      In very few cases I can truly say that the user experience was enhanced. For me, this means easier access to the information one is looking for, and while I can certainly understand someone wanting to impress and also present a point that might have otherwise gone unnoticed, the user quickly getting what he or she wants is still paramount, otherwise he or she will be put away and will be reluctant to return, if at all.

      It is also not smart to assume that everybody is on broadband today. I know some very wealthy people with high-profile consumer habits who live in country or seaside retreats where broadband is simply not available. And they will be put away by a slow-loading page, along with any orders they might place. Not everyone is in the luxury market anyway, and given that dial-up (as well as narrower-band xDSL access) still rules in many areas of virtually all countries, irritating and excluding viewers and customers is definitely not intelligent.

      Definitely, a non-Flash version (where a previous choice is much better than "skip intro" or such things) is still much welcome, and will remain so for a long time. Like any technology, Flash is not necessarily good or bad, but it is one that demands a high degree of discretion and a good justification to be used.
      goyta
  • Good advice, thanks

    Most front pages are terribly cluttered and probably could use an over haul and move to a much smaller front page. The secondary pages, though, tend to get book marked and as a result you wind up having more of them cached if you care at all to turn on the caching. But it is hard to get javascript to work well and it is even harder to work through the parts of the javascript that slows everything down, too. All in all, web sites are pretty much a black art and we could easily be persuaded to move to something like Silverlight and get rid of the javascript.
    progon
  • Light may be important too

    When we consider that important customers may be accessing a site with a Blackberry/iPhome or a Netbook, we have a whole new set of considerations.
    Sagax-
  • RE: How to make your website really, really fast

    Nice article, Steve.
    thanks

    -vallabh
    vallab444
  • Simplify, simplify, simplify....

    Why do people and many companies insist on making such darn complicated web-sites? They're often both hard to navigate and tediously slow and can have a negative impact on the visitors a company want to become customers.

    Perhaps some don't care about speed?
    Want to impress with fancy features?
    Don't know any better?
    Mikael_z
  • RE: How to make your website really, really fast

    Excellent ARTICLE. Thanks Steve

    Cheers,
    -Kathiravan Manoharan
    http://kathyravan.blogspot.com
    http://paisamechanic.blogspot.com

    m.kathirav@...
  • If only more would

    The Internet would be so much better if web designers would pay attention. Many seem to only think about how pretty they can make a page, not how long it takes to load.
    Greenknight_z
  • RE: How to make your website really, really fast

    Thanks Steve,

    These are great tips and some folks are unaware that they can improve their web page load time...


    Jeff Hartman
    http://www.neptunehelpsong.com
    Neptune_Help
  • RE: How to make your website really, really fast

    Steve's list of best practices matches ours very closely except for, 'move scripts to the end'. That was a browser behavior that blocked all other files from loading while a script was in the process of loading. This has been removed in IE8.

    Use the Visual Round Trip Analyzer (VRTA) to see how this affects performance of a page by 20-30%. http://www.microsoft.com/downloads/details.aspx?FamilyID=119f3477-dced-41e3-a0e7-d8b5cae893a3&DisplayLang=en

    Jim Pierson
    Principle Perf Architect at Microsoft.
    Jimpier
  • I know that since 1996

    Since 1996 I do that, no wonder my pages are fast, but now you don't need this anymore (because of broadband and a lot faster computers), unless your site has a huge audience.
    Gradius2
    • Still needed

      Not everyone has broadband, or a really fast computer. Have a little consideration for those who don't, they will reward you with increased traffic on your site.
      Greenknight_z