Have you ever wondered what CSS & JS is responsible for what you see in the frontend?
I mean sure it’s easy to determine it by simply enabling or disabling CSS & JavaScript on your browser but what if you want to find the exact CSS or JS files responsible for front-end visibility, features & content?
You will be challenged with the question when you will have to evaluate whether the said CSS files or JavaScript files should be Asynced, Deferred or preloaded.
You naturally wouldn’t want to defer critical Javascript but non-critical you can.
In this post, we will learn how to block network requests to a specific CSS or JavaScript file to observe their impact on the front end as you see the page in the browser.
Step 1 - Open Chrome Devtools on your Webpage
Press Cntrl + Shift + I to open the Devtools
Step 2 - Go to Network Tab to identify CSS or JS that you want to test blocking
In this example, we will be looking at Yelp’s website. Here in the above screenshot, you can see we have accessed the Network tab, selected CSS & now I can see the CSS Files stacked for me.
Step 3 - Go to Network Tab to identify CSS or JS that you want to test blocking
Right click on the CSS File & you will see “Block Request URL” option.
Click this & the next screen would look like this confirming that the said request URL has been blocked.
Step 4 - Reload the Page to observe the Impact
Here in the above screenshot, we can see that the Google Maps embed is no longer working. The filtering that used to be on the left side is no longer sticky.
The fact that the facets are no longer sticky could affect the UX negatively. In fact the facets being in the first fold could also prompt us to preload the CSS responsible for loading them.
So to sum up, this is how you can debug the impact of CSS & JS files on your webpage & make decisions regarding preloading, differing or delaying.
Kunjal Chawhan founder of Decode Digital Market, a Digital Marketer by profession, and a Digital Marketing Niche Blogger by passion, here to share my knowledge