Google, Site Speed and 2010 part 2
January 12th, 2010 by Richard
Here at SEO Consult we know the value of staying up-to-date with the latest news from search engines, and how to employ this into helping our clients get the best rankings they can. So, continuing my previous post on decreasing a website’s speed in order to make it rank higher, here are some more tips on making a page load faster, and how to make a page appear to load faster.
Don’t Scale Images In HTML
Just because you can set the width and height of an image in HTML does not mean you should! If you want to display an image that is 100px wide and 100px high, then the image should be 100×100px rather than a scaled down 500×500px image! This will reduce the size of the image therefore make it load faster.
Script Locations
Where you import your CSS and javascript can make a huge difference on how long a page takes to load, and how long it appears to take.
CSS At the Top
Moving stylesheets to the HEAD makes pages appear to be loading faster as the page will render progressively. Not only is this stated in the HTML specifications, but by placing them near the bottom of the document, many browsers will be unable to render the page correctly as these browsers block rendering to avoid having to redraw elements of the page if their styles change.
Javascript At The Bottom
Browsers are able to download from multiple sources at the same time (usually two downloads in parallel per host) allowing a page to load a smidgen faster. The problem with javascript is that they block these parallel downloads. Moving them to the bottom of the page gives everything else time to load. Sometimes this is impractical as some script may be needed in order to insert content into the page, for example if the script uses document.write. A work-around for this is to create a function at the bottom of the page and use an on-load command, where you want the content, to call a function when the page has finished downloading.
Flush
In PHP the function flush() allows a partially ready HTML response to be sent back to the browser. This is useful while the backend is putting together the rest of the HTML page and is most noticeable on busy back-ends, where a script requires a lot of time to pull together a lot of resources and complete making the page before sending it to the browser. A good place to consider flushing is right after the HEAD as this is usually the easiest part of the page to create and allows the browser to start including any CSS and javascript files the browser requires while it waits for the rest of the HTML page, which the backend is still constructing.
For example:
…<!–css, js–>
</head>
<?php flush();?>
<body>
…<!–content–>
You can follow any responses to this entry through the
RSS feed.
Link to us
If you want to link to this blog, copy and paste the following HTML code to your website.
