Efektyviai įgyvendinant tingų krovimą mobiliesiems įrenginiams, keli geriausios praktikos praktikos užtikrina geresnes našumas, vartotojo patirtis ir efektyvus išteklių valdymas:
Geriausia tinginio krovimo į mobilųjį telefoną praktika
** 1. Pirmiausia prioritekite matomą turinį
Įkelkite tik tuos išteklius, kurie iškart matomi ekrane (virš raukšlės). Tingūs apkrovos vaizdai, „iFrames“ ir kiti sunkūs turtai, kurie yra už ekrano ar „žemiau raukšlės“, kad būtų išvengta pradinio perteikimo ir sutrumpinant apkrovos laiką [3] [6].
** 2. Norėdami rezervuoti vietą, naudokite vietos žymeklius
Norėdami išvengti išdėstymo poslinkių (kaupiamojo išdėstymo poslinkio ar CLS), visada rezervuokite vietą tingiaminiam turiniui, naudodami vietos žymeklio vaizdus, fono spalvas ar fiksuoto dydžio talpyklas. Tai išvengia turinio šokinėjimo kaip vaizdų ar „iframes“ įkėlimo vėliau [3] [2].
** 3. Sverkite vietinės naršyklės palaikymą
Šiuolaikinės naršyklės palaiko atributą „Lowing =“ tingus “vaizdams ir„ iFrames “, kurie leidžia tingų krovimą be papildomo„ JavaScript “. Tai yra efektyvu ir sumažina sudėtingumą [4].
** 4. Įdiekite sankryžos stebėtojo API
Norėdami pritaikyti tinginį pakrovimą už natūralios atramos, naudokite „Sankryction Observer“ API, kad nustatytumėte, kai elementai patenka į peržiūros sritį ir suaktyvina pakrovimą. Ši API yra labiau veikianti nei klausantis slinkties, keitimo ar orientacijos keitimo įvykių [7].
** 5. Derinkite su reaguojančiais vaizdais
Naudokite reaguojančius vaizdų metodus („SrCSET“ ir „dydžių“ atributus) kartu su tinginiu apkrovimu, kad patiektumėte tinkamo dydžio vaizdus skirtingiems ekrano dydžiams, taupydami pralaidumą ir pagerindami mobiliųjų įrenginių apkrovos greitį [10].
** 6. Optimizuokite mobiliojo tinklo apribojimus
Kadangi mobilieji tinklai gali būti lėtesni ir riboti duomenis, tingus įkėlimas sumažina nereikalingą duomenų naudojimą, įkeliant tik tai, ko reikia vartotojui, kai jam to reikia. Tai išsaugo pralaidumą ir pagerina vartotojo patirtį [2] [5].
** 7. Stebėkite ir išmatuokite poveikį
Naudokite tokius įrankius kaip naršyklės kūrėjų įrankiai, „WebPageTest“ ir „Real“ vartotojų stebėjimas (ROM), kad išanalizuotumėte, kaip tingus įkėlimas veikia puslapio įkėlimo laiką ir vartotojo patirtį. Tai padeda tiksliai sureguliuoti slenksčius ir pakrovimo priežastis [10].
** 8. Venkite perkrauti per daug tingių krovinių
Nereikia tinginio krovinio kritinių išteklių ar per daug mažų elementų, kurie gali sukelti per dideles tinklo užklausas ar vėlavimus. Subalansuokite tingų apkrovą su išankstiniu esminiu turiniu sklandžiai sąveikai [5].
** 9. Pateikite senesnių naršyklių atsargines dalis
Kai kurios senesnės naršyklės nepalaiko sankryžos stebėtojo ar vietinio tinginio pakrovimo. Norėdami užtikrinti nuoseklų elgesį, naudokite „Polyffills“ arba „Atsargos javascript“ įgyvendinimus [7].
** 10. Strategiškai naudokite tingų krovimą vieno puslapio ir elektroninės prekybos programose
SPA ir elektroninės komercijos svetainėms, tingių apkrovos puslapių komponentams, produktų vaizdams ir galerijoms, kad būtų sumažintas pradinis apkrovos laikas ir pagerinamas reagavimas. Prioritetą teikite miniatiūroms ir atidėkite išsamius vaizdus, kol vartotojo sąveika [10] [1].
Vykdydami šią geriausią praktiką, tingus mobiliųjų įrenginių įkėlimas gali žymiai pagerinti puslapio greitį, sumažinti duomenų sunaudojimą, sustiprinti vartotojo patirtį ir sumažinti išdėstymo poslinkius, todėl geriau įsitraukti ir mažesni atmetimų rodikliai.
Citatos:
[1] https://developer.mozilla.org/en-us/docs/web/performance/guides/Lazy_Loading
[2] https://www.linkedin.com/pulse/enhancing-mobile-optimization-lazy-loading-guide-palash
[3] https://library.linkbot.com/how-does-the-use-se-lazy-loading-impact-the cls-iSsue-more-than-0-1-mobile-and-what-the-the-best-praktikai-for-implememation/
[4] https://web.dev/articles/browser-level-image-lazy-loading
[5] https://moldstud.com/articles/p-strategies-for-optimizing-mobile-app-loading-limes-for-better-user-experience
[6] https://developer.mozilla.org/en-us/docs/web/performance/Lazy_Loading
[7] https://tsh.io/blog/lazy-loading-implementation-benefits-good-praktices/
[8] https://www.seozoom.com/what-is-the-lazy-loading-and-how-to-best-use-it/t/
[9] https://blog.pixelfreestudio.com/how-to-implement lazy-loading-in-pwas/
[10] https://elementor.com/blog/what-is-lazy-loading/