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.
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.
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.
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.
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.
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.
Make JS and CSS external
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.
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.