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.

First, try to see if your site displays properly if you disable javascript. A simplest way to disable the javascript is shown here.

The important point to note is that website doesn’t need javascript to display content. The website only needs HTML and CSS to display the content. For the other interactions and addition features or functionality, we’ll need javascript. So first we can check with javascript disabled, whether it gives good score or not on the Chrome’s lighthouse tool.

There are two possibilities with this on Lighthouse:

• If it shows good score.
  • There is no need to optimize CSS or other things if disabling javascript works fine on lighthouse. This means you only need to work on optimizing or minimizing javascripts.
• 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.