In the third part of our multipart Frontend Optimization series I’ll cover my notes from Steve Souder’s “High Performance Websites” and “Even Faster Websites” books that can help optimize your HTML and CSS code.
Optimize HTML Code
- Get rid of iFrames if possible. They’re by far the slowest dom element and even prevent onload from firing until the onload of the frame src is finished. Also stylesheets will block the iFrame from loading. iFrames also share the max connections with parent. 2 connections per server don’t turn into 4 because the iframe src is on another server.
- Get rid of table based layouts. This isn’t always the case, but in most sites going with a css based layout will dramatically reduce your html file size and number of dom elements (less dom elements = faster javascript executions).
- Do a “divitis” checkup. Go through your markup, or better yet code markup entirely first from the get-go, to make sure you’re utilizing the proper elements in CSS and not using more elements then necessary.
- Don’t scale images in HTML. (unless you want to blow it up in html.)
- Always set image width and height attributes. Browsers have the ability to start to lay pages out before all the assets are downloaded. If it isn’t given image dimensions in the html it has to wait till the image is downloaded and that data can be received before it knows how to lay out that image on the page. Therefore if you set the dimensions on the html doc you can speed up the drawing time.
- Flush the document early with your backend language if applicable. This will send html code to your browser even though its not done totally generating.
Optimize CSS Code
- Avoid CSS Expressions. These puppies are powerful and IE proprietary. The problem is that they’re executed on load, resize, scroll, and mouse movement. just moving the mouse can cause it to execute 10k times. Use event handlers and javascript instead.
- Delete selectors you’re not using. This is obvious but just like assets they can slip by on long development processes.
- Delete duplicate or unused properties.
- Use CSS Shorthand
- Avoid CSS Filters. Another proprietary IE item. Most common is the AlphaImageLoader. It blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption per element and not per page which means the problem is multiplied.
- Simply your CSS selectors. CSS reads right to left so “#foobar a” might seem easy cause you just find #foobar then style the “a” tags. Actually the browser must check every single “a” tag to see if its inside #foobar. So keep the rightmost selector item as unique as possible.
[...] 1 2 3 [...]
[...] 1 2 3 [...]
[...] 1 2 3 [...]
[...] 1 2 3 4 5 Last 5 posts by steveFrontend Optimization, pt. 4 – June 11th, 2010Frontend Optimization, pt.3 [...]