You could spend months researching and testing Web site optimization techniques, but right now, you probably want to know what the quick wins are, right? In this article I’ll teach you five basic steps to optimize the front-end experience and improve page load times.
Step 1: Use Web standards
I hope that this is a no-brainer, but I’m not going to make any assumptions. One of the great benefits of writing standards-compliant code is that you’ll end up writing less code – and less code means a faster download time! Here’s a simple demonstration: this table-based wrapper requires 76 characters of markup:
<table id=”wrapper” border=”0” cellpadding=”0” cellspacing=”0”><tr><td> ... </td></tr></table>
Meanwhile, a simple DIV wrapper only needs 21 characters of markup:
<div id=”wrapper”> ... </div>
I’d estimate that using Web standards, your markup will shrink by about 30% – personally, I’ve seen sites where switching to Web standards reduces markup by as much as 80%!
What’s more, a page built with semantic markup and CSS-based layout will render faster than its table-based equivalent. Are you using a single table to wrap all of your page content? How many levels deep are tables nested in your code? How does the browser calculate the size of each table cell in each table to know how to render the table? You really don’t need to work through the math to intuitively know that table-based layouts utilize overly complicated code which requires more processing time in the browser. Simplify all of that with Web standards.