Creating your website..!! That’s is pretty awesome. Then you should better know that one of the most important considerations of building websites is to make sure that your website load faster.So now the question is what makes your website slow, and what are the things that should be considered while developing your website. And finally how one can analyse how it loads in different devices.Don’t worry in this article I’m going to cover all these points. So let’s start.
What makes your website slow ?
As we know the building block of your website are HTML, JavaScript, CSS , Images and in few cases fonts too. When browser loads your website it downloads all the required scripts, CSS and Images.To see this, open your website and if you are using Chrome Press F12 key that will open a developer tool window for you. On this section you can see Network tab, by clicking on it you can see those files which are loaded by the browser for the page. These are those files which is being downloaded by the browser from web server.
HTTP Request and Response
In the diagram above you can see the conversation between browser and server. If the file is too big, browser has to wait till the file get completely downloaded.
Then What to do ?
- Minify HTML, CSS and JavaScript: Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser. To minify the files there are various online tools available. I found this which will compress all three files for you.
- Make CSS and JavaScript External: Using external files will generally make the pages load faster because JavaScript and CSS files are cached by the browser.Alternatively, if you use CSS in a web page, place the CSS in the HEAD element. This makes the page appear load faster and it can do so progressively. With JavaScript, move the scripts to the bottom of the page.
- Use Bundling: Bundling is the techniques you can use to improve request load time. Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.) Refer this for more details.
- Eliminate Duplicate Scripts in a Web Page: This issue might seem strange but it is actually quite common. Duplicate JavaScript and CSS files degrade performance by creating unnecessary HTTP requests and wasted JavaScript execution. It´s also important to check and see if scripts have been duplicated in external files, as well. To avoid this problem is to use a script management module with your templates.
- Leverage Browser Caching: Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. Refer this for more details.
- Optimize Images: Reduce image sizes using either GIF, PNG-8. or JPEG as the file formats. This will help browser to download it faster.
Analyse your Website
Done with the development now it´s important to see how well they are functioning, first. One way to do this is to make use of the Make the Web Faster tools, by Google. This is the one of the awesome tool by Google. You can now run Page Speed Insights to analyse your page speed in Desktop as well as Mobile.
Enjoy.. !!
