How to improve site speed - Part 1: Rendering

Understanding what the common causes of slow page loading are can help us design pages/server infrastructure to minimise them. Some things are easy to implement and may be overlooked without realising the impact that they have.

Content-Type

The first element in the head element should declare the content encoding. For a variety of reasons, the encoding that the server thinks it is serving may not be the same as the content being delivered. When the browser reaches the Content-Type meta element, it reads the charset value and then re-interprets the page with that charset. If this is at the very top of the head element, there is very little that has to be re-read.

Listing 1: Meta Content-Type at top of head

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

. . . snip . . .

</head>

<body></body>

</html>

CSS

It is a good idea to load CSS resources before JavaScript. JavaScript can block downloading of resources until it is downloaded and parsed. Resources that have started to download before the JavaScript is included will continue to download.

Listing 2: CSS before JavaScript

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="style.css">

<script src="blocking.js " type="text/javascript"> </script>

. . . snip . . .

</head>

<body></body>

</html>

JavaScript

It is important to realise that JavaScript can block downloading of resources. Traditionally, when JavaScript has been included on a web-page, it blocks the download of other resources until it is downloaded and parsed. If the JavaScript included on the page is large, it can take a significant amount of the total page load time to download and parse the code. While this is happening, everything else must wait. This introduces delays where other resources could have been downloaded.

Listing 3: Blocking JavaScript

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="blocking.js " type="text/javascript"> </script>

. . . snip . . .

</head>

<body></body>

</html>

Until recently, the solution was to load the JavaScript as the very last thing on the page. This works quite well, unless that JavaScript is also pulling in several resources. This can cause a page that appears to be ready to seem like it's loading again. The current best practice is to load the JavaScript in a non-blocking way.

This allows the JavaScript to go back in the head where it belongs, but does not stop other scripts from loading. It is important to note that the JavaScript may be downloaded and ready before the document has completely loaded. Any JavaScript that will interact with the page directly should wait for the document.ready event to be fired.

Listing 4: Non-blocking JavaScript

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

(function () {

var script = document.createElement('script');

script.type = 'text/javascript'; script.async = true;

script.src = 'non-blocking.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);

})();

</script>

. . . snip . . .

</head>

<body></body>

</html>

Images

When a page includes images, they should always have their width and height attributes set. This allows the browser to layout the web-page before the images have finished loading. If the width and height are not set, the browser will try to layout the web-page, but as the images download the browser will be forced to re-flow the page. This slows down the time before the page is considered loaded and can cause screen flickering that may annoy the user.

It is also important to server images that are the correct size. If you send a large image to the browser and rely on the browser to scale it, you are wasting both time and bandwidth.

Make sure that any images served are in an appropriate format. For photos, use JPEG as it reduces the size of the files considerably and the loss of quality is barely noticeable. For graphics, icons, logos etc. use PNG. If possible, use indexed PNGs as this will also reduce the size of the files.

Listing 5: Image with width and height set

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

. . . snip . . .

</head>

<body>

<img src ='image.jpg' width='100' height='100' alt='Image with width and height set'>

</body>

</html>


Read the first part of this article in How to improve site speed - Part 2: Network.


Want to know more?

Find out about our SEO and online marketing services.

Speak with one of our experts


www.mercurytide.co.uk would like to store information (cookies) on your computer. By continuing to use this site, you consent to this.
More info