Mindless Philosophy






Speed up your website

by Darren Street

Created on: Tuesday August 20, 2013

3 comments

We have all experienced it from time to time….waiting for the page to load. So before you blame your internet connection, being web developers we have a few tricks to help your site traverse the intraweb that much faster.

Cortina

Make fewer HTTP requests

These are the round trips to the server for images, video and styling information. The less the better.

At Refresh Websites we use a technique called image sprites that allows us to bundle up all our image requests into just a few files. This improves the page loading speeds.


Maestro

Add an expiry header

If you configure the pages with a long expiry, pages will load from cache which is much much faster.

Not only do Refresh Websites specify a long expiry on static pages we do the same for dynamic pages too.


Fiesta Mki

Put stylesheets at the top

Instead of styling individual objects on the webpage, it’s much more efficient to style them all at once…and better still to put them all in a style block in the head of the webpage. Doing so allows the code to load in parallel.


Qashqai Grey And Red

Put scripts at the bottom

Scripts on your website allow the content to be manipulated such as in a gallery slider or menu control. It’s always best to load scripts at the end of the page lifecycle so that it doesn’t put off your visitor. After all, whilst waiting for your scripts to load the visitor can always read your text and look at your pictures.


Jaguar Xj

Minify JS

When we write code for a website it’s actually written like a script or mark-up that has carriage returns, comments to the reader and blank space. This is to make life easier when making amends to the code or debugging. However, when a web server reads (or parses) a page it doesn’t really need any spaces or page breaks. In fact a computer would rather read code in a single line as it takes up less space (smaller file size so it’s more efficient).

So when a website is about to go into Production (go live on the "intraweb") we run a process that removes all the spaces, carriage returns and comments. This process is call minification.


BMW M3 CSL E46 4812D091c15a1

Use a CDN

A CDN or Content Delivery Network is a large group of computer servers all connected to each other around the world. A typical CDN will have very fast computer servers, lots of computer "intraweb" bandwidth and fast DNS services. The purpose of a CDN is to hold all your static files such as images or media files. In doing so it takes a cache copy and distributes the copy to all the other servers in its network.

The main benefit is that if a user connects to your website from the US then the images and media content will be served form a local CDN server in the US not the UK. This makes any pages with CDN content load and display much faster.


2013 Aston Martin Db9 Update Overseas 02 1 0919

Make JS and CSS external

Using external files generally typically makes pages load faster because the JavaScript and CSS files are cached by the browser (like Microsoft Internet Explorer). JavaScript and CSS that are inlined in HTML documents (actually coded into the webpage) get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document.


Original

Gzip components

Gzipping parts of the webpage generally reduces the response size by about 70%. Gzipping is just like the compression program on your computer desktop. It removes the empty space in files and makes them much smaller. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip. Gzipping improves the speed of the website page render.

We automated this process and ensure that all files are appropriately Gzipped before delivery.


Bugatti Veyron GSV 01 1024X768 Edit 1

Avoid re-directs

A re-direct is when a web page tells the server to load a different one. For instance when you visit a page called Products this page automatically re-directs you to latest Products.

The main thing to remember is that re-directs slow down the user experience. Inserting a re-direct between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

3 comments




ElaineRockery commented on 16 Oct 2013


Forget the jag. Include a Toyota Starlet. Top girlie motorcar.


ElaineRockery commented on 11 Oct 2013


Wot! no 2CV. That's terrible


wreckitDave commented on 25 Sep 2013


Nice article, thanks. However I think the Jag should be after the Aston?



Have your say


Sorry this post is no longer accepting comments.