28 Nov 2012
css, design, html
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
5 Oct 2007
css, event, html, yahoo
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
- Fewer HTTP requests
Combine disparate javascript files – guilty. Yes, I’ll do this
- 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.
- Use the Expires header
Okay, this needs to go in. Very helpful for people who’ve already got a primed cache.
- 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.
- Put stylesheets on the top
Slightly bemused – where else would I put them?
- 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.
- Avoid CSS expressions
Steve, I won’t dream of using css expressions
- Javascript and css should be in external files
Duh!
- Reduce DNS lookups
Okay, so if I’m downloading components from more than one server then DNS lookup for each separate server = delay!
- 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.
- 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.
- Remove duplicate scripts
DUH! But apparently this happens. And it’s not uncommon.
- 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
- 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.