So you have a bad site, not performing well on the Pagespeed Insights, don’t worry. It’s time to go back to basics, where we used to work only on HTML, CSS. No matter how much browser evolves, we will still have to first think of writing browser compatible code. Other libraries or polyfills can simplify browsers middleware code but still there is some efforts or compilation of code.
Before optimizing anything we need to analyze what our website already has. Like a doctor would see first the blood report and see what is low and what is high in blood. So analysing and finding out what all things our website has is the first thing to know.
Following is the way to find out simply in the dev tools. You may need to do a lot of repetitions of these steps to see which thing works and which thing doesn’t.
At the very first, open your website’s dev tools. Normally you can open it by pressing Option+Command+I together. It should open dev tools as below.
Analyse Assets Loading
It is very important to know which JS files or CSS files are causing the performance issues in the site. A quick way to know is using Chrome’s lighthouse tool in dev tools.
There are two possibilities with this on Lighthouse:
- If it shows good score.
- If it shows poor or bad score.
- There is some more optimization that you will have to do. Such as CSS, fonts, media, etc.
- For CSS and other things, you can use URL blocking feature of dev tools. URLs of CSS files or any other resources can be blocked from network tab of dev tools. As you can see below.
- You can check the performance in lighthouse after blocking some CSS files, if it improves that means you have to optimize the CSS of blocked URL.
So by doing the above thing, you will be able to identify where the problem lies and you can act accordingly.
Hope this helps you analyze the site issues and areas to work on.