CSS is a messy mess

28 Nov 2012

, ,

CSS is supposed to make my life easier (and it has) but it’s still a broken counter-intuitive very messy mess. It does not solve all problems, and for the past few days (on and off) I have been going round the bend trying to build a comparatively simple HTML / CSS layout.

Read More

Faster, Webpage, Faster

5 Oct 2007

, , ,

Steve Sounders gave one of the few developer “how-to” talks based on his book High Performance Web Sites

Basic premise: Performance-tune the front end, not the back end.

When users request a page, about 5-10% of the response time is spent building and delivering the html; the rest of the wait is for the associated content – images, css, javascript etc. So stop worrying about database optimization (just for a minute) and look at your front-end.

14 Rules for doing it better

  1. Fewer HTTP requests
    Combine disparate javascript files – guilty. Yes, I’ll do this
  2. Use a Content Delivery Network to store static files, so you can delivery content to users from the server which is closest to them
    Uh – pass. I’m sure it helps Yahoo and the BBC, but not me.
  3. Use the Expires header
    Okay, this needs to go in. Very helpful for people who’ve already got a primed cache.
  4. Gzip components such as css and javascript files.
    This goes along with number (10) – basically lets work on making those humongous javascript libraries download a little quicker.
  5. Put stylesheets on the top
    Slightly bemused – where else would I put them?
  6. And put javascript files at the bottom
    This is the one which staggered me – I’ve always always stuck all the javascript in the document header and now he’s telling me to move it.
    Two good reasons:

    • Downloading scripts blocks parallel downloading
      Everything else just sits there in the queue and waits patiently until our javascript files (our disperatejavascript files) have finally arrived.
    • Scripts block the page rendering
      The browser won’t render any content under the scripts until the scripts have finished downloading. So get the content down first – that way your users have something to look at while they wait. Um – with some sites this means we’ll get the flash effect – content shows and then it changes dramatically once the javascript kicks in.
  7. Avoid CSS expressions
    Steve, I won’t dream of using css expressions
  8. Javascript and css should be in external files
  9. Reduce DNS lookups
    Okay, so if I’m downloading components from more than one server then DNS lookup for each separate server = delay!
  10. Minify Javascript
    Make that (humongous) javascript file smaller by stripping out all comments, whitespace and newlines before uploading.I really like the Mootools downloader. You pick the components you need, select the compressor you want to use and then get ONE javascript file (fewer http requests!), compressed, minified, whateverified.
  11. Avoid redirects
    I tend to use redirects in code, can be very useful in avoiding that nice little message about “Do you want to resubmit your form” which tends to freak people out.
    But yes, I know that missing off the ‘/’ at the end of directory names means another round trip to the server. And many other lazinesses.
  12. Remove duplicate scripts
    DUH! But apparently this happens. And it’s not uncommon.
  13. Use ETags in your headers
    Entity tags are an http response header that browsers & servers use to determine whether the item in the cache is EXACTLY the same as the one on the server. Think I might pass on this one, but there’s a lot I want to learn about http response headers and apache config files
  14. Make sure the browser can cache Ajax – use the expires header

Things for me to do

  • Combine small javascript files
  • Minify/gzip the large javascript libraries
  • Make more use of the expires header
  • Put javascript at the bottom of the page, not the top
  • Play with yslow

All nicely explained in Best Practices for Speeding Up Your Web Site

And something I didn’t know – there’s a YSlow plugin for firefox which will analyse webpages and tell you where the bottlenecks are.