Optimising your website's speed
As we all know, website speed is very important. It is not only for the user experience, but also for search engines like Google in search rankings. Therefore you need to optimise your website’s speed and take it into account by optimising as many components of your website as possible in order to reducing the loading time of the website.
In the previous post, I wrote an article about how to optimise the website’s graphics, which is one of the main components causing the slow speed of your website. So it needs to be optimised properly to speed up your website.
Today, I am going to show you some other tips to improve the performance of your website.
1. Use external Javascript and CSS files and let the Javascript files finally loaded
When your website first loads, the browser will cache external resources such as JS files and CSS file to improve the loading time of the site when users visit the site next times. So, instead of using inline JS and CSS, it is best to put them in separate files.
Also, using external JS and CSS files makes site easier for maintenance in the future.
Another point you should consider is you should place javascript tags at the bottom of the page rather than at the beginning. Putting them next to the closing body tag (</body>) will allows the browser to render everything else before it renders the Javascript. Most current browsers can download some components in parallel, but when downloading the javascripts, only javascript is dowloaded, it blocks other components until the javascript has finished dowloading. So it is better to make the javascripts file load last and allow the other components such as images, css to load first.
<script type=”text/javascript” src=”js/scriptA.min.js”></script>
<script type=”text/javascript” src=”js/scriptB.min.js”></script>
</body>
</html>
2. Compress CSS and Javascript files
When deploying to live server, you should compress or minify your CSS and Javascript files to render the file faster. It is useful and important to send as few bytes of CSS and JS as possible. There are a lot of various approaches for cutting down the size of JavaScript and CSS. One of the common approaches is removing whitespace and comments for JS and CSS files.
I suggest you create two files, one is the original file for development and the other is the compressed file for redering in live server. You can name the compressed file with the word “min” to separate with the original one.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<title>How to speed up your website</title>
<link rel=”stylesheet” href=”css/stylesheetA.min.css“>
<link rel=”stylesheet” href=”css/stylesheetA.min.css“>
</head>
<body>
The content is in here
<script type=”text/javascript” src=”js/scriptA.min.js“></script>
<script type=”text/javascript” src=”js/scriptB.min.js“></script>
</body>
</html>
You can google the tools for the keywords such as JS compressor or CSS compressor. Here are some tools you can use to compress JS and CSS files.
a. Javascript:
Javascript Compressor
JS Compress
YUI Compressor
b. CSS:
YUI Compressor
CSS Compressor
CSS Compressor & Minifier
Also you may be interested in using Grunt, the Javascript Task Runner, to compress JS and CSS files and do many other things. It is a very powerful tool. I will show you how to use it in another article in the future.
3. Optimise your HTML, CSS and JS code
You also need to optimise the way how you code the HTML, CSS and JS. Try to avoide duplicate scripts because making your browser load the same script twice will increase your page loading time. In other words, writing clean code that doesn’t unnecessarily repeat itself can make your website much quicker. So make sure you double check your code to not call a script 2 or 3 times.
Also, try not to use images if you can do it with CSS. For example the button of the contact form, the shadow and the round corner of the box. It also helps to reduce the loading time of the site.
With some useful tips above, I hope they will help you have a better idea about how to speed up your website as well as improve your website’s performance for user experience and search engines.
You may also be interested in looking at how to optimise website graphics. Along with this article, optimising website graphics is very important factor you need to take into consideration when you develop your website.
