Support » Plugin: Jetpack Boost » Bug TBT time increased when jetpack boost plugin installed

  • Resolved thomasjarvisdesign

    (@thomasjarvisdesign)


    Thank you for your help with the issue below.
    I need some help with a problem. That you identified while helping me!
    https://wordpress.org/support/topic/bug-font-swap-issues/

    The TBT score gets much worse when jetpack boost is installed and critical css has been generated. I thought it was the WebP plugin I use but after some testing on other sites it turns out that Jetpack boost is causing the TBT issues.

    I have had to deactivate JetPack Boost on all sites again when i realised the reason for the hight TBT score was Jetpack boost.

    I have now inlined all CSS on the same website using Wp-Optimize instead. This works pretty well but obviously adds a lot more CSS in the header than is required for FCP and LCP.

    Questions:
    1. Why would Jetpack boost cause the TBT score to get much worse?
    2. When Jetpack boost generates critical css files. where does it store them?
    If you can answer the question above I will do the following:
    I am going to try copying the critical css created by jetpack boost,manually inserting it into the header conditionally, deactivate jetpack boost and re-test.
    This would prove or disprove whether the boost plugin itself is causing a problem or if the critical css is the problem.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author thingalon

    (@thingalon)

    Hi again!

    Thanks for writing in. I’m sorry to hear that you’ve had more trouble. On the bright side, you keep on bringing us interesting puzzles to solve. 🙂

    TBT is a complicated metric, which can be affected by a lot of different things. It measures the total time your browser spends “blocked” by long tasks – i.e.: tasks which take longer than 50ms. It’s linked to your TTI score.

    When you found your TBT score was worsened, did you find that your TTI score was affected, too?

    As for your questions:

    1. I do have one theory as to how Boost could increase your site’s TBT: When Jetpack Boost has Critical CSS enabled, it forces your main CSS files to lazy-load by altering their media type until they have finished loading. As each finishes loading, it re-enables them – which may cause your browser to reconsider your page’s CSS rules. Each event may contribute towards a TBT score – especially if you have a lot of separate CSS files. We are currently researching ways to make the transition from Critical CSS to main CSS “smoother” to reduce side-effects.

    2. Jetpack Boost stores your Critical CSS in your posts table – as a custom post type called “jb_store_css”. It’s stored in the post_content field – in a serialized string which has been base64-encoded. You could extract it either using PHP (using base64_decode, then unserialize), or using MySQL (using FROM_BASE64 – and then manually extracting the string from the serialized object).

    If you do follow up with your experiment from question 2, I would be very interested to hear the results. If you find that a particular HTML setup avoids extra TBT time then I would be keen to hear about it.

    Thread Starter thomasjarvisdesign

    (@thomasjarvisdesign)

    Thanks Thingalon,

    I’ll run some more tests and answer your question about TTI.

    1. This may explain things. Seeing as the Critical CSS is called early. Is it necessary to alter the media type to prevent the main file loading?

    The site only has one CSS file. A minified and merged file loaded in the header after the critical CSS.

    2. To save me decoding it. I might just enable boost and take the home page critical CSS and manually copy it. I wanted to know where it stores the data because Boost said 3 files were generated but it does not say what post type ir page they relate to so I cannot go and manually copy the files for testing because I dont know what pages/posts/post types they relate to.

    If you can help me with item 2 – Which post/page/post type the generated files relate to – I’ll manually copy the CSS out of the plugin, deactivate boost and then use functions.php to insert the CSS conditionally depending on the page/post type. I can then see what it does to the performance figures.

    Plugin Author thingalon

    (@thingalon)

    Hi again!

    Let me try to answer your questions for you:

    Is it necessary to alter the media type to prevent the main file loading?

    Your browser considers CSS links in the header with a relevant media type to be “blocking” – that is, your page won’t render before the CSS files have been loaded. Changing their media type is key to preventing them from blocking your page from displaying early.

    If you can help me with item 2 – Which post/page/post type the generated files relate to

    Jetpack Boost divides your site up into sections which use similar templates – there is usually one block of Critical CSS for your front page, one for viewing each of your post types (which are visible), category pages, and each type of archive page.

    If you want to experiment with manually handling Critical CSS, I recommend focusing on your homepage CSS – as Critical CSS generally provides the most value on the first page that your users land on.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.