2

I am not getting good performance when i audit my website with chroome lighthouse. I am getting few errors like - Remove unused CSS - Ensure Text Remain Visible during web front load - Minimize main threat work

Please anybody help me fixing these little things.

enter image description here enter image description here

7
  • Have you tried defer parsing CSS? Commented May 23, 2019 at 9:45
  • no. How to do it ?
    – Ashar Riaz
    Commented May 23, 2019 at 11:48
  • did you figure out how to remove unused css? i'm also looking at pagespeed insights and want to removed some unused css like …merged/055fb59….min.css 509 KB Commented Jun 18, 2019 at 0:53
  • no. i am still looking for any solution asno one replied with any solution. Merging css is also necessary and magento is using same merged (big css file) on all pages.
    – Ashar Riaz
    Commented Jun 19, 2019 at 10:35
  • there are few option for css in this module modpagespeed.com/doc but i think it is not reducing css page by page.
    – Ashar Riaz
    Commented Jun 19, 2019 at 10:37

1 Answer 1

0

This is my solution to use for my page.

First, unmerge, unbundling, un-minify js and CSS

Next, turn on Coverage tab in Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/coverage/ then check unused CSS and JS

or you can check each file one by one.

then you can remove a file unused, put code to the layout of the page you want to remove.

Ex: I will remove some file in the homepage so I put to cms_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="js/bundle/bundle0.js"/>
        <remove src="css/bootstrap-magento.css"/>
    </head>
</page>

Hope this solution will solve your issue.

2
  • This is not working specifically to remove the JS - do you have any other solutions ? Commented Dec 31, 2019 at 13:51
  • if its JS file, you can use my solution above, if its JS from requirejs-config.js, you need find it in require where JS call and remove it EX: <script type="text/javascript"> require(['jquery','masonry','jquery/ui','domReady!'], function($,Masonry) { I see i don't want masonry, i will remove it. <script type="text/javascript"> require(['jquery','jquery/ui','domReady!'], function($) { Done. JS will not call in your page
    – Init
    Commented Jan 6, 2020 at 6:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.