How to lower time to first byte for assets

Need some advice here. So I see on my speed test that 68% of the time it takes to load my page is spent on idle.

you can see here the light color is just idle time.

This is for a small png file. Time to first Byte is 529ms and the actual download time is 1ms.

Any idea why so much idle? This website is a wordpress/woocommerce on digital ocean and Forge Laravel.


Any thoughts on this?

Hey Erik!

Time to First Byte on subsequent resources on an HTTP/2 connection are always gonna be a bit weird. :slight_smile: The browser finds the resource and sends out the requests, but the server is going to respond by sending the higher priority resources back sooner than the lower priority ones.

So, for example, the PNG you mention has a low priority. By the time it’s requested, the browser has already made requests for a bunch of JavaScript files (and a few images as well from the looks of it). Even though the server knows it’s going to need to send those images, it’s putting the priority on the JavaScript and images that were already requested, which pushes out the TTFB for the png.

I wouldn’t worry significantly about optimizing for TTFB of an individual resource, but if you want to speed it up, you’d want to either reduce the number of assets that get requested before it, or make some of those earlier resources smaller (from the looks of your screenshow, main.js and …geme_widget_v2.js both look like they’re fairly hefty).

The “Idle” is the browser’s main thread and that is a good thing. Do you have the bottom of the waterfall where it shows the bandwidth utilization? That will tell you how effectively you are using the available bandwidth.