Astro
client:load
client:load is the Astro directive that hydrates an island as soon as the page loads. It is the most eager option and the most expensive.
How it is measured
The island's script is requested at page start and runs as soon as it arrives. Check the network panel for the component chunk and the framework runtime it pulls in. Add the sizes of both to get the real cost of the directive.
Look at total blocking time and interaction readiness. Every client:load island competes with the main thread during load. Two of them add up.
Worked example
A ticket-sales page has a seat picker that must work the moment the page appears. It uses client:load and ships 46 KB gzipped, including the Preact runtime. Time to interactive on a mid-range phone is 2.1 seconds.
The same page also had a newsletter popup marked client:load. Moving it to idle drops 5 KB from the critical path and gets the seat picker ready 220 ms earlier.
How it differs
client:load starts hydration immediately. client:idle waits for a quiet moment. Load excludes the deferral that protects first paint; idle excludes the guarantee that the island is ready early.
Common errors
Adding it to every component to be safe. Using it for content below the fold. Forgetting the framework runtime cost on the first island. Putting it on a large chart. Not testing on slow devices.
In practice
Keep client:load for the one or two things the visitor needs right away, such as a checkout control. Audit the rest and downgrade each to idle or visible. Re-measure interaction readiness after every change.