Hello guys, this is my first post hope you will find this interesting and useful. Please drop your valuable questions or suggestion in the comment section. Without further delay let’s jump into the topic.
I assume most of you are familiar with website creation and deployment. Let’s jump into the most vital portion that every website needs to satisfy for giving the visitors a great experience. Yes, that is the site speed and it also helps in ranking too. I hope you already know about the Pagespeed insights the most popular equipment to check your overall site performance that is offered by Google itself. It gives you a check list where you can improve your site based upon a score similar to the grade card we used to have in our school days.
So now the question arise how we can improve the site speed?
As we all know that a website consists of text, images, script, videos, graphics, styles, fonts and a lot more things to make our website stand apart from rest of the competition. Now as the number of content gradually increases it need to manage them in a systematic manner to minify the load on the server. Few quick fix to increase the site speed as most of us already know is to compress the image, using extension that has greater compression rate, to use videos by separately downloading it to our server, use as less videos as possible, lazy loading of graphics and images. But then also sometimes we are unable to get the speed we are looking for isn’t it ? The main reason behind this issue is the script and styles. Yes script and styles increase the site loading time tremendously! Let me explain how suppose we write a script or style today and later after few days we added a new feature inside the previous script or style and overwritten it but the previous feature is not being used now; but the code remains there that’s the residual code which keeps on accumulating and keep on increasing in size and affects the loading speed. But we can easily fix it with the option already available to us.
The steps to be followed:
1. Open your website in chrome browser.
2. Right click on the webpage and select “Inspect” option or use the short key “ Ctrl+Shift+I ”
3. The click the “Coverage” option in the bottom right next to “Console”.
4. Then click the icon just below the “Coverage” option.
5. Then you can see all the scripts and styles loaded in the panel below “Coverage”.
6. Here you will be able to see the red and blue marking the red marking indicates the unused part and the blue marking indicates the used part. If you click on the scripts and styles you will get a similar interface same as below.
7. Here you can remove the red or unused part easily taking this as a reference.
N.B: Please make sure you are familiar with the basic web languages before proceeding to the above mentioned process or hire an expert to do the same without any hassel.
Comments
Post a Comment