Kila Uboreshaji Nyuma ya Alama Kamili ya Lighthouse

Ninatumia Lighthouse kwenye tovuti yangu kila wakati. Inabaki ikiwa 100 katika kila mtihani wa ndani na 100 katika Real Experience Score ya Vercel.

Alama hizi hazitokani na orodha ya kawaida ya mambo ya kufanya. Nazipata kwa kuhamisha kazi kutoka kwenye kivinjari (browser) kwenda kwenye hatua ya ujenzi (build stage).

Hivi ndivyo ninavyofanya hasa.

Hamisha kazi kwenye wakati wa ujenzi (build time)

Mwongozo mwingi unakuambia uweke kila kitu kwenye "lazy-load". Mimi napendelea kutumia prerender. Ninatumia TanStack Start ikiwa imewashwa prerendering.

Hii inageuza tovuti nzima kuwa HTML ya kudumu (static HTML) wakati wa ujenzi. Kivinjari hakihitaji kutekeleza JavaScript nzito ili tu kuonyesha ukurasa wa kwanza. HTML tayari ipo wakati mtumiaji anapobofya enter.

Kokotoa mantiki tata mapema (Precompute complex logic)

Ukurasa wangu wa nyumbani una ramani ya dunia yenye nukta 5,000. Kwa kawaida, maktaba (library) ingechanganua GeoJSON na kufanya hesabu kwenye main thread. Hii inazuia ukurasa kwa milisekunde 1,000.

Nilitatua hili kwa kuhamisha hesabu hizo kwenye skripti ya ujenzi (build script).

• Ninatengeneza mfululizo mmoja wa SVG path kwa nukta zote 5,000.
• Path moja ni haraka zaidi kwa kivinjari kuonyesha (render) kuliko duara 5,000 tofauti.
• Ninakokotoa majedwali ya utafutaji wa kuratibu (coordinate lookup tables) mapema ili kivinjari kisifanye hesabu yoyote wakati wa utendaji (runtime).

Ucheleweshaji wa milisekunde 1,000 unakuwa picha moja inayojitokeza papo hapo (instant paint).

Boresha upakiaji wa fonti (font loading)

Ninatumia rel="preload" kwa fonti zangu kuu.

Kosa la kawaida ni kusahau sifa ya crossOrigin. Ukiiacha, kivinjari kitapakua fonti mara mbili. Hii inaharibu Largest Contentful Paint (LCP) yako. Ninapakia mapema (preload) fonti tatu tu zinazotumiwa sehemu ya juu ya ukurasa (above the fold).

Tumia zana sahihi kwa ajili ya miondoko (animation)

Ninatumia SMIL kwa miondoko rahisi ya kupiga mapigo (pulse animations) kwenye alama za ramani yangu. Ni rahisi zaidi kuliko kutumia React state kuendesha mzunguko wa miondoko. Inaruhusu kivinjari kushughulikia kazi hiyo kwenye compositor thread.

Kwa njia tata, ninatumia motion. Ninaiweka kuwa rahisi. Ninaifanya iwe na miondoko mara moja wakati inapoingia (on mount) na kuepuka kusikiliza nafasi za kusogeza ukurasa (scroll positions).

Zingatia vekta (vectors) na WebP

Ikiwa ni nembo (logo) au umbo, tumia SVG. Ikiwa ni picha, tumia WebP. Hii inafanya ukubwa wa faili uwe mdogo na inazuia mabadiliko ya mpangilio (layout shifts).

Epuka uhandisi uliopitiliza (over-engineering)

Situmii CDN ya picha. Situmii mgawanyo wa kodi tata (complex code-splitting). Tovuti yangu ni ndogo, hivyo mgawanyo wa kiwango cha njia (route-level splitting) unatosha.

Alama kamili inaweza kuwa kipimo cha majivuno tu. Lengo halisi ni kupima utendaji wako na kuhamisha kazi nyingi kadiri inavyowezekana mbali na kifaa cha mtumiaji.

Portfolio yangu: brodin.dev

Kanuni chanzo: github.com/NathanBrodin/Portfolio

TanStack Start prerendering: tanstack.com/start

Paper Shaders: shaders.paper.design

Makala kamili: https://dev.to/nathan-brodin/every-optimization-behind-a-perfect-lighthouse-score-283n