We all want a faster website that’s able to keep up with consumer’s needs, traffic spikes, and loads quickly. Great, but how do we make it happen?
A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is typically chosen.
Some large Internet companies own their own CDN, but it’s more cost-effective to use a CDN service provide. For start-up companies and private web sites, the cost of a CDN service can be too high, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.
Moving stylesheets to the document HEAD makes pages appear to be loading faster. By putting stylesheets in the HEAD, it allows the page to render progressively. Front-end engineers that care about performance want a page to load progressively; that is, they want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page.
The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers. These browsers block rendering to avoid having to redraw elements of the page if their styles change. Leaving the user stuck viewing a blank white page, and who wants that?
A high number of DOM elements can be a symptom that there’s something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there’s a better and more semantically correct way to do your markup.
But, how many DOM elements are too many? A good way to check is by looking at other similar pages that have good markup. Also, be sure to test how many DOM elements you have, an easy way to check is by using Firebug’s console: document.getElementsByTagName(‘*’).length
Still not fast enough for you? Click over to the rest of their article for more great tips on increasing your speed!