Lazy loading nədir və sayt sürətinə təsiri

Müasir brauzerlər, ekrandan kənar şəkillərin lazım olana qədər yüklənməsini təxirə salan loading atributu vasitəsilə yerli lazy loading-i dəstəkləyir. Bu funksiya birbaşa HTML spesifikasiyasına inteqrasiya olunub, yəni tərtibatçılar artıq əsas təxirə salınmış yükləməyə nail olmaq üçün mürəkkəb JavaScript kitabxanalarına və ya xüsusi kəsişmə müşahidəçilərinə etibar etməli deyillər. loading=”lazy” atributunu və ya taqına əlavə etməklə, brauzer istifadəçinin sürüşdürmə mövqeyinə əsasən resursu nə vaxt əldə edəcəyinə qərar vermək məsuliyyətini avtomatik olaraq öz üzərinə götürür.

Brauzer bu atributla qarşılaşdıqda, element ilə cari görünüş sahəsi arasındakı məsafəni hesablayır. Əgər element kifayət qədər uzaqdadırsa, brauzer həmin xüsusi fayl üçün yükləmə prosesini dayandırır. İstifadəçi aşağı sürüşdürdükcə, brauzer həmin aktivləri görünən sahəyə daxil olmazdan dərhal əvvəl dinamik şəkildə sorğulamağa başlayır. Bu mexanizm brauzerin istifadəçinin sessiya zamanı heç vaxt görməyəcəyi elementlərə bant genişliyi və emal gücünü sərf etməsinin qarşısını alır.

Bu texnikadan istifadə etməyin əsas səbəbi veb performans standartlarının əsas komponenti olan Ən Böyük Məzmunlu Boya (LCP) metrikasını yaxşılaşdırmaqdır. Səhifədə onlarla yüksək keyfiyyətli şəkil olduqda, brauzer tez-tez onların hamısını eyni vaxtda yükləməkdə çətinlik çəkir, bu da əsas başlıq və ya əsas hərəkətə çağırış düyməsinin göstərilməsini gecikdirə bilər. Səhifənin aşağısındakı şəkilləri lazy loading ilə yükləyərək, ilkin istifadəçi təcrübəsini müəyyən edən aktivlər üçün əlaqə kanalını boşaldırsınız.

Sürətdən əlavə, bu üsul məhdud planlarda ola biləcək mobil istifadəçilər üçün məlumat istehlakını azaltmaqda yüksək effektivdir. Əgər saytınızda daxili şəkilləri olan uzun məqalələr və ya mürəkkəb qalereya tərtibatları varsa, yalnız ilk bir neçə abzas oxuyan istifadəçi meqabaytlarla görünməz medianı yükləməyə məcbur olmayacaq. Bu, daha təmiz baxış təcrübəsi yaradır və xüsusilə köhnə cihazlarda və ya daha yavaş şəbəkə bağlantılarında istifadəçinin aparat məhdudiyyətlərinə hörmət edir.

Yerli lazy loading-in tətbiqi sadədir və mövcud HTML kodunuzda minimal dəyişikliklər tələb edir. Siz sadəcə saytınızın kod bazasında səhifənin aşağısında yerləşən şəkilləri və ya iframe-ləri tapmalı və atributu əlavə etməlisiniz. Bunu bloq yazısı şəkillərinə, istifadəçi şərhləri bölmələrinə və məzmunun nadir hallarda tam şəkildə baxıldığı altbilgi ilə ağır səhifələrə tətbiq etmək ümumi bir nümunədir.

• Brauzerinizin tərtibatçı alətlərindən istifadə edərək ilkin görünüş sahəsindən kənarda yerləşən bütün şəkilləri müəyyən edin.
• HTML faylınızdakı və ya taqlarına loading=”lazy” atributunu əlavə edin.
• Şəkil yüklənərkən tərtibat dəyişikliklərinin qarşısını almaq üçün en və hündürlük atributlarının müəyyən edildiyinə əmin olun.
• Şəkillərin yalnız görünüş sahəsinə sürüşdürüləndə yükləndiyini təsdiqləmək üçün brauzerinizdəki Şəbəkə tabını izləyərək tətbiqi yoxlayın.
• Səhifənin yuxarısında mütləq tələb olunan şəkillər üçün lazy loading istifadə etməyin, çünki bu, LCP performansını aşağı sala bilər.

Tez-tez edilən səhvlərdən biri, qəhrəman şəkilləri və ya loqolar kimi səhifənin ən yuxarısında görünən şəkillərə lazy loading tətbiq etməkdir. Qəhrəman bannerinizi lazy loading ilə yükləsəniz, brauzer şəkli yükləməyə başlamazdan əvvəl səhifə tərtibatının hesablanmasını gözləyəcək, bu da nəzərəçarpacaq titrəməyə və ya şəklin olmalı olduğu yerdə boş yerə səbəb olacaq. Hamar bir təcrübə saxlamaq üçün ən kritik vizual aktivləri bu optimallaşdırmadan həmişə kənarda saxlayın.

Digər bir problem, tərtibatçılar lazy-loaded elementlər üçün dəqiq ölçüləri təyin etmədikdə yaranır. Şəklin təyin olunmuş eni və ya hündürlüyü olmadıqda, brauzer şəkil məlumatı yüklənməzdən əvvəl onun üçün düzgün yer miqdarını ayıra bilmir. Bu, şəkillər nəhayət göründükdə səhifə məzmununun tullanmasına səbəb olur ki, bu da pis təcrübədir və səhifə sabitliyi ballarınıza mənfi təsir göstərə bilər. Yükləmə ardıcıllığı boyunca tərtibatın sabit qalmasını təmin etmək üçün bu ölçüləri həmişə təmin edin.

Axtarış sistemləri ümumiyyətlə tez yüklənən və sabit istifadəçi təcrübəsi təmin edən səhifələrə üstünlük verir, buna görə də lazy loading-dən düzgün istifadə etmək faydalı ola bilər. Lakin, zəif tətbiq olunarsa, bu, axtarış sistemi botlarının şəkillərinizi aşkar etməsinə və indeksləşdirməsinə mane ola bilər. Bunun qarşısını almaq üçün, necə yüklənmələrindən asılı olmayaraq, aydın, təsviri fayl adları və dəqiq alt mətnlərdən istifadə edərək şəkillərinizin standart axtarış krolerləri tərəfindən hələ də aşkar edilə bilən olduğundan əmin olun.

Əksər veb-saytlar üçün müasir krolerlər JavaScript-i render etmək və lazy-loaded məzmunu görmək üçün səhifələrlə kifayət qədər qarşılıqlı əlaqədə olmaq qabiliyyətinə malikdir. Tətbiqi sadə saxlamaqla və yerli brauzer atributundan istifadə etməklə, kroleri çaşdıra biləcək mürəkkəb mühit yaratmaq riskini azaldırsınız. Yüksək performansla axtarış görünürlüyünü tarazlaşdırarkən sadəlik ən yaxşı dostunuzdur. Sayt strukturunuzu təmiz və resurs sorğularınızı ən yaxşı nəticələr üçün proqnozlaşdırıla bilən saxlamağa diqqət yetirin.

• Əsas qəhrəman şəklinin heç bir lazy atributu olmadan dərhal yüklənməsini prioritetləşdirin.
• İlkin qatın altında yerləşən bütün ikinci dərəcəli şəkillərə loading=”lazy” tətbiq edin.
• Son aktiv yüklənərkən UI-ni cəlbedici saxlamaq üçün yer tutucu üslublardan və ya şəkillərin aşağı keyfiyyətli versiyalarından istifadə edin.
• İstifadəçi səhifənin sonuna çatana qədər təxirə salına biləcəyini görmək üçün yan panel və altbilgi aktivlərinizi nəzərdən keçirin.
• Ağır ola bilən və yalnız görünüş sahəsinə daxil olduqda yüklənməli olan sosial media lentləri kimi üçüncü tərəf vidjetlərini yoxlayın.

Saytınızı təhlil edərkən məzmununuzun vizual iyerarxiyasını nəzərə alın. Yüksək həcmdə şəkilləri olan tipik bir hesab, yalnız altbilgi şəkillərinin yüklənməsini təxirə salmağın ilk boyada bir neçə yüz kilobayt məlumata qənaət etdiyini görə bilər. Bu, sürət təkmilləşdirmələri üçün tez-tez əsas hədəf olan mobil cihazlardakı istifadəçilər üçün əhəmiyyətlidir. Nəyin ilk görünməli olduğu barədə qəsdən olmaqla, istifadəçi səyahətinə daha yaxşı nəzarət edirsiniz.