During performance optimization, I am unable to make improvements related to the unused JS & CSS. I wanted to know if anyone has solutions/steps to reduce the unused CSS & JS in Magento2, please share.
Thanks
asked Jan 11 at 12:13
Add a comment
|
2 Answers
In my practice I'm using Google Chrome Coverage Tab. It shows you which CSS/JS parts are not used by the browser.
See below the coverage of this website, 90%+ of CSS isn't used.
To turn on Coverage Tab, go to Chrome Developer Tools, then click on Run Command:
Then type Show Coverage:
And it will show up. Click on record, browse the site up and down, resize window to catch responsive rendering. Then click on any file and it will show red lines next to unused CSS/JS blocks:
In newer Chrome versions it has an export button but on my computer it freezes when I click on it, could've needed more RAM I guess.
Anyway I was using it to optimize CSS on some websites I worked on, it did took time but the rewards are obvious.
I'm sure there are ways to automate it, I've heard about tools like Critical but I haven't tried them.
-
Hi Konstantin, Yes I know about the same tool & I also used the same. But I'm looking for other more easiest automatic options to optimize the CSS/JS. Like a page should use the CSS part that is necessary for the same page. Commented Jan 19 at 4:52
-
@Magedivine all the automatic tools I used give mediocre results with layout off in all major browsers. Commented Jan 22 at 15:04
if you can reduce the unused CSS & JS in your site, you can do this work manually because there are no online tools available to do this type of work.
Otherwise, you can hire any professional front-end developer to do this work perfectly.
else you are doing one thing on your side enable the CSS & JS minify and merge from the system configuration.
Go to the Stores > Configuration > Advance > Developer > JavaScript Settings = For JS
Stores > Configuration > Advance > Developer > CSS Settings = For CSS
Here you can enable this setting by default they can set "No".
Note:- This setting appears in the store configuration when your Magento site mode is developer, and these settings work when your site mode is production.
-
Hi @Rohit, I'm aware of this configuration, It will merge and minify the JS and CSS, but it will still call 100% JS and CSS. However, I am looking for a solution that will only load the required CSS and JS for the specific page being triggered. Currently, Magento pages are loading 100% of the CSS and JS, even though only 10% of it is actually in use, leaving the rest unused. Commented Jan 19 at 4:58
-
Hi @Magedivine I can understand but for that, I think you have to sort out this thing in manually otherwise I don't know any other way to sort out this issue. or if you can help from a front-end developer. Commented Jan 19 at 5:16