Okay
  Public Ticket #2474470
Reducing unused CSS and JS
Closed

Comments

  •  2
    Lars started the conversation

    In an attempt to improve my page speed I am looking into CSS and JS.

    I learned using Google Chrome DevTools that for mobile there is a lot (66%) of unused CSS and for the desktop site a lot of unused JS.

    Browsing through the code this seems related to WP Bakery page elements. 80% of them I am not using. How can I disable/remove those?

  •  8,987
    Tahir replied

    Hey Again,

    Try using this Plugin or similar: https://wordpress.org/plugins/asset-queue-manager/ . With Salient 11 the complete salient codebase was re-written so most code is being added conditional where possible. 

    Thanks


    ThemeNectar Support Team 

  •  2
    Lars replied

    Thanks your your suggestion. I tried the Asset Queue Manager and since that one has not been updated for years, I also tried WordPress Assets manager, dequeue scripts (https://wordpress.org/plugins/gonzales/)

    The latter has helped me confirming that the Salient main styles is a big chunk. themes/salient/css/style.css is 600 kb.

    However, these plugins only allow me to disable that style as a whole but that will break my site. I just want to disable loading the css and scripts for unused elements. Ideally dynamically like also mentioned/asked in this topic.

  •  8,987
    Tahir replied

    Hey Again,

    I am afraid that's not possible unless you rewrite the whole theme. The page specific element CSS already get loaded conditionally.

    Thanks 


    ThemeNectar Support Team 

  •  2
    Lars replied

    Looks like it is working conditionally OK for desktop but not for mobile. See a lot of un-used CSS in Google DevTools.

  •  8,987
    Tahir replied

    Are you hiding some Page Elements on Mobile using the Row/Column Responsive Settings?. If yes the Page Elements are still getting loaded just not visible on the page. 

    Thanks 


    ThemeNectar Support Team 

  •  2
    Lars replied

    Thanks! I had good hopes that that would have a big impact. I thought using "big" elements visible for desktop and "small" variants for mobile on the page builder would help. But instead I was doubling the load.

    However, after removing all the double content and just use one page of blocks behaving responsively on mobile did not lead to a significant improvement.

    LCP (Largest Contentful Paint) still is 13,2 sec.

    Google says it should be 2,5 sec. Any suggestion how I can improve further?

  •  8,987
    Tahir replied

    Have escalated it to the developer so a response can be added.

    Thanks 


    ThemeNectar Support Team 

  •  1,089
    ThemeNectar replied

    Hey Lars, the LCP is being calculated based on the BG image in your first row; i.e. https://cdn.shortpixel.ai/client/q_lossy,ret_img/https://www.evcreate.nl/wp-content/uploads/2020/01/volvo-in-opbouw_1600x720.jpg

    Since it's being lazy loaded, it's waiting longer than it has to for displaying. If the plugin you're using has the option to disable lazy loading on specific images, you should add that one to the list and any that are top level (above the fold).

  •  2
    Lars replied

    Sorry my response took a while. I could nog get it optimized any further so in the end I have decided to use Generatepress instead of Salient for this project/website. That has resulted in the kind of performance I was looking for.