Google, Site Speed and 2010 part 2

Richard Harrington on 12 January 2024

Here at Andy Stats we know the value of staying up-to-date with the latest news from search engines, and how to employ this into helping our dentists 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->

This blog was written over 6 months ago and Internet Marketing and is an always changing industry which means the information within this blog may be out of date. Use caution when using any methods or suggestions within it.

More From Author

All Hail the Power of Google

Is Google’s future moving towards an opinionated search engine?

Leave a Reply

Your email address will not be published. Required fields are marked *