Understanding website load times

The load time of a website is directly correlated to the demand made on the server to load the website. The more HTTP requests made to the server and the longer elements take to render, the slower a website will be.

Examples of HTTP requests are:

  • loading CSS style sheets;
  • loading scripts;
  • loading images;
  • loading HTML.

Step 1: compress images

Step number one is to compress all images for web-based quality. We can do this by using the default image compressor built into Google’s Page Speed plugin. Save the compressed version of the image into your local folder on your computer and re-upload the image in place of the uncompressed image.

Updated score: 61 out of 100

 

Step 2: scale images

After compressing images, we then need to modify our images so that they are scaled properly for the website. This avoids server lag needed to re-size images. You can scale images in Photoshop by adjusting them to the same pixel dimensions that they will be in your HTML code.

Updated Score: 72 out of 100

 

Step 3: utilize browser caching

Browser caching stores cached versions of static resources. This speeds up page speed tremendously and reduces server lag. To enable caching, you will want to add the following code to your .htaccess file:

# BEGIN Expire headers
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 2592000 seconds"
# END Expire headers