Network dependency tree
Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.LCP
Maximum critical path latency: 2,494 ms
Initial Navigation
https://adv-escalavel-website.vercel.app - 311 ms, 29.30 KiB
/_astro/NewFeatureCards.udYuDi1D.js(adv-escalavel-website.vercel.app) - 2,462 ms, 2.17 KiB
/astro/IntegrationSection.D3DoP5i.js(adv-escalavel-website.vercel.app) - 2,493 ms, 1.94 KiB
/_astro/ExcellenceGrid.BZgsMUvX.js(adv-escalavel-website.vercel.app) - 2,472 ms, 2.12 KiB
/_astro/CtaSection.BeijVX4T.js(adv-escalavel-website.vercel.app) - 2,494 ms, 1.63 KiB
/_astro/FloatingCta.DZys9cIw.js(adv-escalavel-website.vercel.app) - 2,494 ms, 1.41 KiB
/_astro/Navbar.DE1zNKHs.js(adv-escalavel-website.vercel.app) - 425 ms, 4.39 KiB
/_astro/jsx-runtime.D_zvdyIk.js(adv-escalavel-website.vercel.app) - 485 ms, 1.25 KiB
/_astro/index.DtoOFyvK.js(adv-escalavel-website.vercel.app) - 471 ms, 3.75 KiB
/_astro/LeadFormSheet.hI-ptH8H.js(adv-escalavel-website.vercel.app) - 512 ms, 2.68 KiB
/_astro/client.BBKXMyYs.js(adv-escalavel-website.vercel.app) - 438 ms, 57.23 KiB
/_astro/Hero.N_Y2BLw5.js(adv-escalavel-website.vercel.app) - 448 ms, 2.12 KiB
#google page speed issues
summer warren
humble pierBOT
Hi @summer warren. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on your Google PageSpeed report, the main issue is a long chain of critical JavaScript requests, which increases the Maximum Critical Path Latency (LCP). In Astro, this can happen if multiple interactive components are hydrated on the client, causing several JavaScript files to be loaded and executed before the page is fully interactive.
How to address these issues in Astro:
1. Use Client Directives Strategically
Astro only sends JavaScript to the browser for components that use a client:* directive. Review your components and ensure you are only hydrating those that truly need to be interactive. For less critical components, consider using lower-priority hydration strategies:
client:idle– Hydrate when the browser is idle.client:visible– Hydrate only when the component enters the viewport.client:load– Hydrate immediately (use sparingly for above-the-fold, critical UI).
Example:
<HeavyImageCarousel client:visible />
<ShowHideButton client:idle />
This reduces the amount of JavaScript loaded during the initial page load and can break up long chains of critical requests, improving LCP and overall performance Client Directives.
2. Minimize JavaScript Usage
Astro is designed to render as much as possible to static HTML, sending zero JavaScript by default. Audit your components and remove unnecessary client:* directives. If a component does not need to be interactive, do not hydrate it. This will keep your site fast by default Client Islands.
3. Analyze and Optimize Bundle Size
Use tools like rollup-plugin-visualizer to analyze your bundle and identify large or unnecessary dependencies. This can help you spot which components or libraries are contributing most to your JavaScript payload and optimize accordingly Analyze bundle size.
4. Leverage Astro’s HTML Streaming
If you have server-rendered or data-fetching components, structure your code to take advantage of Astro’s HTML streaming. Move blocking data fetches into smaller components so the main page can render and stream HTML to the browser sooner, reducing the time to first contentful paint Using streaming to improve page performance.
5. Optimize CSS Delivery
Astro automatically splits and inlines small CSS chunks to reduce request overhead. You can further control this behavior with the assetsInlineLimit and inlineStylesheets options in your astro.config.mjs Production CSS.
Summary:
To reduce critical request chains and improve LCP in your Astro site, minimize the use of client:* directives, use lower-priority hydration where possible, analyze your bundle for large dependencies, and structure your code to take advantage of HTML streaming. These steps will help you avoid long chains of critical requests and deliver a faster, more efficient site.