[ad_1]
Hi @zain37
The file you have linked to contains CSS not JS. The browser is trying to interpret CSS as JS and giving you the console errors.
@jamieburchell Yes, that’s the file I’m having issue with according to PageSpeed Insights. It’s decreasing my best practices score from 100 to 92.
Right, but you’ve got a .js file which doesn’t contain JavaScript. It’s a CSS file.
For context, I followed these steps: Hostinger support link
I added all links shown as render blocking resources to the stylesheets, perhaps those links didn’t contain JS and its a blank file that’s why? @jamieburchell
You need to make sure that you’re adding .css files to the CSS section and .js to the JS section. At least one of them looks to be in the wrong place.
@jamieburchell Can you tell how are we supposed to identify them from links in Pagespeed insights? On a second look, all the minify links have CSS in their names so I should probably remove them from JSS stylesheets right?
@zain37
JavaScript (JS) filenames end with .js and stylesheets (CSS) end with .css. Only .js files should be put in the JavaScript/JS section and only .css files should be put in the Stylesheets/CSS section.
The error you are getting is because the browser is trying to interpret a stylesheet as JavaScript.
It’s unrelated to Pagespeed insights actually, that is just alerting you to the error you’d see if you opened the developer console in your browser (F12 usually).
@jamieburchell Thank you so much, I removed the CSS links from JS stylesheets and it resolved the issue. Really appreciate it.
But now some of the links I removed from JS stylesheets are appearing as render blocking resources in Pagespeed insights, any idea how to fix this?
Hi @zain37
Glad it helped!
“Stylesheet” describes CSS files only, not JavaScript/JS files.
For render blocking JavaScript, the answer is “it depends”. There really isn’t a simple answer to that. If you change all of the JS files to use “defer” or “async”, you may find things start to break.
@jamieburchell Thanks for the info, I was able to find the sweet spot. I use the following JS minify settings now:
Embed type:
Before</head> Minify Combine only
Non-blocking using "defer"
After<body> Minify Combine only
Non-blocking using "defer"
Before</body> Minify Combine only
Default (blocking)If I change the last one to defer too, site menus break for a moment.