fix(kdebek): split home page into per-section islands instead of one client:load blob - #8
Open
polubis wants to merge 1 commit into
Open
fix(kdebek): split home page into per-section islands instead of one client:load blob#8polubis wants to merge 1 commit into
polubis wants to merge 1 commit into
Conversation
…client:load blob pages/index.astro hydrated the entire home page (Navbar + Hero + Testimonials + About + Offer + OnlineBookingCta + Footer) as a single client:load React island, shipping ~83KB of React/Astro runtime JS even for sections that never use hooks or handlers. This was the main driver of a 4.2s LCP. Rewrite About, Offer, and OfferPanel as plain .astro components (zero JS) and compose the home page directly in a new home.astro entry point. Only the genuinely interactive pieces now hydrate as islands: Navbar (client:load, above the fold) and AboutGallery/Counter/OfferWidget (client:visible, below the fold). Hero, Testimonials, ServicesGrid, BookingWidget, OpeningHours, OnlineBookingCta, and Footer render as static markup with no client JS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
pages/index.astroused to hydrate the entire kdebek home page (Navbar + Hero + Testimonials + About + Offer + OnlineBookingCta + Footer) as a singleclient:loadReact island, shipping the full React/Astro runtime for sections that never use any client-side JS. This was flagged inapps/kdebek/TODO.mdas the main driver of a 4.2s LCP (PageSpeed Insights audit).About,Offer, andOfferPanelas plain.astrocomponents (zero shipped JS) and introduced a newhome.astrocomposition root that replacesmain.tsx.Navbar→client:load(above the fold — mobile menu needs to be usable immediately)AboutGallery,Counter(×6 in the stats grid),OfferWidget→client:visible(below the fold)Hero,Testimonials,ServicesGrid,BookingWidget,OpeningHours,OnlineBookingCta,Footer) now renders as static SSR markup with no client JS at all.navbar,about-gallery,counter, andoffer-widgetchunks are hydrated (plus the shared React runtime) — no static leaf component's JS ships to the client anymore.apps/kdebek/TODO.mdto check off the resolved item.Test plan
astro buildsucceeds; inspecteddist/client/index.htmland confirmed only the 4 intended components hydrate as islandsastro check(type-check) — 0 errorseslint— cleanvitest run— passingastro dev+ Playwright screenshots of Hero, About, Offer, and Footer sections — visual output matches prior behavior, no console errorsaccessibility.spec.ts,visual.spec.ts) could not be run in this sandbox due to a Chromiumchrome-headless-shellversion mismatch unrelated to this change — recommend runningpnpm test:e2ein CI to confirmGenerated by Claude Code