Amua kinachohitajika sasa, sio kile kinachoonekana mapema katika markup
Lazy loading inamaanisha kuchukua rasilimali kama zisizo za muhimu hadi zitakapohitajika. Panga kwa safari halisi: vitu muhimu vya mwonekano wa kwanza, media chini-ya-kichwa (below-the-fold), embeds zisizo za lazima, na msimbo kwa njia au paneli ya baadaye. Nafasi ya CMS si ushahidi wa kutosha; picha inaweza kuwa nje ya eneo la kuonekana kwenye template moja na kuwa ya msingi kwenye nyingine.
Kagua upakiaji wa baridi (cold loads) kwenye simu ndogo na dawati la kawaida. Pia jaribu viungo vya kampeni na anchors za ukurasa, ambazo zinaweza kumualika mgeni mbali zaidi chini ya ukurasa. Mapitio hayo yatakuambia ni nini kinachopaswa kuwa tayari bila ombi linalochochewa na skroli.
Kazi ya awali, urambazaji unaoonekana, nakala kuu, na picha au muonekano wa kwanza una maana vinapaswa kupatikana mara moja.
Galeri za chini-ya-ukurasa, ramani, embeds za mitandao ya kijamii, wachezaji wasioko kwenye eneo la kuonekana, na msimbo kwa vipengele visivyopendekezwa ni wagombea wa kawaida.
Linda hero na viewport ya awali
Usilazy-load yaliyomo yanayoweza kuwa yaonekana wakati ukurasa unapofunguliwa. Google inatoa tahadhari juu ya hili, na uchambuzi wa web.dev unaonyesha kwamba lazy-loading ya picha za viewport ya awali inaweza kuchelewesha LCP (Largest Contentful Paint). Kipengee cha LCP kinaweza kuwa hero, picha ya bidhaa, poster, au maandishi; hakikisha kwenye kila template muhimu badala ya kubahatisha.
Pakia picha iliyothibitika kuwa LCP kwa haraka (eager). Ikiwa upimaji unaonyesha picha muhimu inayofahamika inapoteza kipaumbele cha mtandao, jaribu dalili ya fetch-priority ya juu kwake. Ni dalili, si amri. Picha ya asili katika CSS inaweza kuhitaji preload ya mapema kwa sababu parser haiwezi kuigundua moja kwa moja; pima hiyo.
Angalia mipangilio ya CMS na plugin kwa picha zilizo na sifa (featured images) ambazo zimewekwa kwa makosa kama lazy kwenye ukurasa wa orodha.
Tumia upakiaji wa baridi kwenye simu na dawati, sio tu muhtasari wa muundo wa dawati.
Weka nafasi kabla media haijafika
Cumulative Layout Shift (CLS) ni kusogea kusikotarajiwa kwa yaliyomo yanayoonekana. Picha iliyocheleweshwa bila urefu uliothibitishwa inaweza kusukuma maandishi na vit controls baada ya msomaji kuanza kusoma au kugusa kitufe. Hii ni hatari ya mwingiliano, sio tu suala la kipimo.
Toa sifa sahihi za upana na urefu kwa picha na video, au hifadhi umbo kwa CSS aspect-ratio. Tumia placeholder yenye footprint ya mwisho ya sehemu. Kwa fremu ya mtu wa tatu (third-party frame), hifadhi urefu wake na toa hali wazi ya kupakia au kutokuwepo.
Hifadhi vipimo vya media pamoja na mali pale inapowezekana; uwiano wa jumla hauwezi kutegemewa kwa umbo mchanganyiko la picha.
Skrola, chuja, fungua paneli, geuza kifaa cha mkononi, na tumia urudisho wa nyuma ili kupata mabadiliko ya muundo baadaye.
Weka yaliyomo yanayoweza kufutwa na mwingiliano kueleweka
Google Search Central inasema Google haishiriki na kurasa kwa kuscroll au kubofya. Yaliyomo muhimu yaliyolazy-loaded yanapaswa kupakia wakati yanapoonekana, na HTML iliyochapishwa inapaswa kufichua yaliyotarajiwa au URL za media. Angalia kurasa za kawaida katika Search Console baada ya utekelezaji.
Orodha isiyo na mwisho (indexable infinite list) inahitaji njia iliyopangwa kwa kila sehemu thabiti: URL ya kipekee, yaliyomo yasiyotegemea mabadiliko kwa URL hiyo, na viungo kupitia mfululizo. Hii pia inaunda sehemu inayoweza kushirikiwa kwa watu kurejea.
Wakati kitendo kinafunua yaliyomo, hifadhi udhibiti uweze kutendeka kwa keyboard na fanya matokeo yaeleweke. Kwa sasisho la maana lisilo la focus kama 'matokeo yamepakiwa', fikisha hali hiyo kibiashara ili teknolojia za msaada ziweze kutangaza bila kuhamisha focus.
Maelezo ya bidhaa, mwili wa makala, taarifa za uzingativu, na maagizo ya jukumu hayapaswi kuwepo kwanza baada ya kitendo cha mgeni.
Usichelewesha udhibiti muhimu wa malipo au uthibitisho. Waombaji wa usalama na uzingatiaji wanapaswa kutathmini mabadiliko ya malipo, utambulisho, na skripti za wahusika wa tatu.
Tumia mbinu isiyo dhaifu
Kwa picha na iframe za kawaida zisizo katika eneo la kuonekana, lazy loading ya kivinjari (native) mara nyingi ni mwanzo rahisi zaidi. Kivinjari huchagua lini ombi la karibu na viewport linaanza; umbali huo si dhamana. Tukio la window load linaweza kutokea huku rasilimali zilizolazy zikibaki zisijakamilika.
Tumia Intersection Observer wakati sehemu iliyopewa jina inahitaji uanzishaji maalumu, kama kuweka paneli ya gharama kubwa kabla haijaonekana. Weka observer mpana kwa kiasi kidogo na anza kazi mapema vya kutosha kwa skroli ya kasi. Tumia code splitting kwa njia zisizo za awali au vipengele vya hiari, sio kama sababu ya kuchelewesha kazi ya sasa.
Usibadili chanzo rahisi na data attributes, skripti kadhaa, na maktaba isipokuwa tabia iliyoongezwa itatatua hitaji lililopimwa.
Embed ya hiari inapaswa kuwa na fallback wazi au hali ya kutokuwepo, sio spinner ya kudumu.
Pima, zindua, na tatua pamoja
Linganishwa msingi (baseline) na kandidati kwenye URL sawa, hali ya cache, viewport, na njia ya mtumiaji. Tumia upimaji wa baridi, wa simu uliokandamizwa pamoja na ukaguzi kwa vifaa halisi pale inapowezekana. Rekodi LCP, mtiririko unaoonekana, shifts za muundo, hitilafu za media, HTML iliyochapishwa, na vitendo muhimu. Data ya uwanja (field data) inakamilisha upimaji wa maabara (lab testing).
Tuma mabadiliko yanayoweza kubadilishwa na yanayolengwa kwa template. Rekodi mali zilizohamishwa kutoka eager kwenda deferred, kumbukumbu ya uzinduzi, hatua za cache, mmiliki, na hatua ya kwanza ya kurudisha nyuma. Ikiwa LCP imekuwa lazy au njia ya uongozaji wa ubadilishaji imekaa haina ukamilifu, ondoa kanuni kutoka kwa mali muhimu na hakikisha tena. Angalia tena baada ya mabadiliko ya theme, CMS, huduma ya picha, tag, au embed.
Lenga kuzuia na kutatua uzoefu uliovunjika, sio tu kuripoti hali ya sasa au kutuma onyo.
Rudisha nyuma mipangilio ya template iliyohusiana kabla ya kurekebisha tena kila picha katika tovuti nzima.