Şəkillərin tənbəl yüklənməsi üzrə ən yaxşı təcrübələr saytın sürətini yaxşılaşdırmaq üçün vizual məzmunun səmərəli çatdırılmasına yönəlir. İlkin görünüş sahəsindən kənarda mövcud olan şəkillərin yüklənməsini təxirə salmaqla, səhifənin yüklənməsi prosesində tələb olunan ilkin ötürmə qabiliyyətini azaldırsınız. Bu üsul brauzerlərə kritik resurslara üstünlük verməyə kömək edir, əsas məzmunun hər bir ziyarətçi üçün əlçatan və cavabdeh qalmasını təmin edir. Düzgün tətbiq edildikdə, bu strategiya müxtəlif cihazlarda və şəbəkə şəraitində istifadəçilər üçün ümumi təcrübəni əhəmiyyətli dərəcədə artırır.
Yerli tənbəl yükləmə necə işləyir?
Müasir veb inkişafı yük atributunun yerli brauzer tətbiqindən güclü şəkildə asılıdır. web.dev sənədlərinə görə, loading=”lazy” istifadəsi istifadəçi onların yanına sürüşənə qədər ekrandan kənar şəklin yüklənməsini yerli olaraq təxirə salır. Bu xüsusiyyət sənayedə əvvəllər geniş yayılmış ağır JavaScript kitabxanalarına ehtiyacı aradan qaldıraraq, əksər müasir brauzerlər tərəfindən dəstəklənir. Şəkil etiketinə bu sadə atributu əlavə etməklə brauzer sorğunun vaxtını idarə edir, faylı yalnız o, ekran görünəcəyi ehtiyacı olduqda əldə edir.
Bu yerli yanaşma çox səmərəlidir, çünki o, tətbiq səviyyəsində deyil, brauzer səviyyəsində işləyir. O, mürəkkəb veb tətbiqlərində ümumi performans dar boğazı olan əsas axındakı əlavə xərcləri azaldır. Tipik bir hesabda, tərtibatçılar sadəcə olaraq şəkil işarələrini bu atributu daxil etmək üçün yeniləməklə resursların ayrılmasında dərhal qazanc əldə edirlər. Bu, minimal səy tələb edən, lakin səhifənin yüklənmə vaxtları üçün aydın üstünlüklər təmin edən sadə bir dəyişiklikdir.
Niyə ekranın yuxarı hissəsindəki məzmun üçün tənbəl yükləmədən qaçınmalısınız?
Veb performansında kritik bir qayda ondan ibarətdir ki, ekranın yuxarı hissəsindəki əsas şəkillər Heç vaxt tənbəl yüklənməməlidir. Qəhrəman şəkli adətən ən böyük məzmunlu rəsm (LCP) elementidir və onun yüklənmə vaxtının gecikdirilməsi birbaşa performans xallarınıza zərər verir. Brauzer səhifənin yuxarı hissəsində loading=”lazy” atributu olan şəkillə qarşılaşdıqda, o, elementin həqiqətən də görünüş sahəsində olub-olmadığını görmək üçün çox vaxt gözləyir və bu da saytın ən vacib hissəsinin göstərilməsində lazımsız gecikməyə səbəb olur.
Ən yaxşı istifadəçi təcrübəsini təmin etmək üçün həmişə ilkin vizual məzmunun dərhal göstərilməsinə üstünlük verin. Qəhrəman bölməsi üçün tənbəl atributu olmadan standart şəkil etiketlərindən istifadə edin. Bəzi hallarda tərtibatçılar brauzerə qəhrəman şəklinin yüksək prioritetli resurs olduğunu bildirmək üçün fetchpriority=”high” atributundan da istifadə edə bilərlər. Bu kombinasiya brauzerə ilkin vizual məzmunun vacibliyini başa düşməyə kömək edir və yükləmə prosesinə mümkün qədər tez başlamağa imkan verir.
Şəkil yükləmə strategiyalarının müqayisəsi
| Strategiya | İstifadə halları | Performansa təsiri |
|---|---|---|
| Standart Yük | Qəhrəman şəkilləri və loqolar | LCP üçün ən yüksək prioritet |
| Yerli Tənbəl | Ekranın aşağı hissəsindəki məzmun | İlkin yükləmə üçün bant genliyini qənaət edir |
| Qaynar Yükləmə | Mühüm nişanlar | Ani görünürlüğü təmin edir |
Tətbiq üçün ən yaxşı təcrübələr hansılardır?
Bu texnikaların tətbiqi saytınızdakı müxtəlif media növləri üçün aydın strategiya tələb edir. Şəkillərinizi ilkin görünüş sahəsinə nisbətən mövqeyinə görə təsnif etməlisiniz. Səhifə yüklənən kimi dərhal görünən məzmuna üstünlük verilməlidir, səhifənin aşağı hissəsindəki məzmun isə tənbəl yükləmə üçün idealdır. Sayt böyüdükcə baxımı daha asanlaşdırmaq üçün bu atributları şablonlarınızda necə tətbiq etməyinizdə ardıcıllıq olmalıdır.
- Bütün qəhrəman şəkillərini müəyyən etmək üçün saytınızı yoxlayın və onlardan yükləmə atributunu silin.
- Uzunmüddətli məqalələr və ya qalereya bölmələri daxilindəki bütün şəkillərə loading=”lazy” əlavə edin.
- Düzen dəyişikliklərinin qarşısını almaq üçün bütün şəkillərə eni və hündürlüyü atributları daxil edin.
- Tam şəkil yüklənməzdən əvvəl vizual strukturu qorumaq üçün yer tutucu rənglərdən və ya aşağı keyfiyyətli versiyalardan istifadə edin.
- Ekrandan kənar şəkillərin yalnız sürüşdürmə zamanı tələb olunduğunu yoxlamaq üçün brauzer tərtibatçı alətlərindən istifadə edərək səhifələrinizi sınayın.
Alien Road şəkil optimallaşdırmasını necə tətbiq edir
Alien Road olaraq müştərilərimiz üçün şəkil çatdırılmasını optimallaşdırmaq üçün sistemli yanaşmanı izləyirik. İlkin kəşf mərhələsində biz hansı elementlərin ən böyük məzmunlu rəsmə töhfə verdiyini müəyyən etmək üçün səhifə strukturunu xəritələndiririk. Tipik bir əməkdaşlıq üçün biz məzmun idarəetmə sistemini qəhrəman bölmələrini tənbəl yükləmədən avtomatik olaraq istisna etmək üçün konfiqurasiya edirik, eyni zamanda atributu standart olaraq bütün digər media aktivlərinə tətbiq edirik. Bu, texniki təməlin əvvəldən möhkəm olmasını təmin edir.
Biz həmçinin məzmun dəyişdikcə yükləmə strategiyalarının effektiv qalmasını təmin etmək üçün səhifə performansı göstəricilərinin müntəzəm icmallarını həyata keçiririk. Müştəri yeni eniş səhifələri əlavə edərsə, biz şəkil optimallaşdırma qaydalarının düzgün tətbiq olunduğunu təsdiqləmək üçün şablon mantıqunu yoxlayırıq. Tətbiqi sadə və standartlara uyğun saxlamaqla biz gələcək yeniləmələr zamanı sıradan çıxa biləcək mürəkkəb xüsusi koda ehtiyac duyulmadan müştərinin saytının sürətli və etibarlı qalmasını təmin edirik.
Tərtibatçılar hansı ümumi tələlərdən ehtiyat etməlidirlər?
Ümumi səhvlərdən biri şəkilləriniz üçün dəqiq ölçüləri təyin etməməkdir. Şəkilləri tənbəl yüklədiyiniz zaman brauzer əslində yüklənənə qədər şəklin ölçüsünü bilmir. Bu, səhifə məzmununun şəkillər nəhayət göründükcə sıçradığı əhəmiyyətli düzən dəyişikliklərinə səbəb ola bilər. Həmişə HTML-də eni və hündürlüyü atributlarını təyin edin və ya yüklənməbitmədən əvvəl şəkil üçün yer ayırmaq üçün CSS aspekt nisbəti xüsusiyyətlərindən istifadə edin.
Digər bir məsələ, qatın bir qədər aşağısında olan, lakin demək olar ki, dərhal görünüşə sürüşdürülə bilən elementlərə tənbəl yükləmənin həddindən artıq tətbiq edilməsidir. Brauzer yükləməni nə vaxt işə salacağı konusunda ağıllı olsa da, saytınızdakı istifadəçi davranışını nəzərə almalısınız. Xüsusi bir bölməyə tez-tez baş çəkilirsə, istifadəçi həmin bölməyə çatdıqda dərhal görünməsini təmin etmək üçün həmin xüsusi şəkillər üçün standart yükləməni nəzərdən keçirmək istəyə bilərsiniz.
Saytınızın performans auditi üçün yoxlama siyahısı
- Bütün əsas eniş səhifələri üçün HTML mənbə kodunu nəzərdən keçirin.
- Qəhrəman bölmənizin əsas şəklinin tənbəl atributundan məhrum olduğunu yoxlayın.
- Bütün şəkillərin təyin edilmiş eni və hündürlüyü atributlarına malik olduğunu yoxlayın.
- Aşağı sürüşdürərkən şəkillərin necə göründüyünü müşahidə etmək üçün incognito pəncərəsindən istifadə edin.
- Üçüncü tərəf vidjetlərinin əsas məzmununuza mane olacaq şəkildə şəkilləri yükləmədiyinə əmin olun.
Bu həftə haradan başlamaq lazımdır
Bu həftə saytınızın performansını yaxşılaşdırmaq üçün ən çox ziyarət edilən ilk beş səhifənizi müəyyən etməklə başlayın. Bu səhifələri brauzerinizdə açın və hansı şəkillərin əvvəl yükləndiyini görmək üçün şəbəkə nişanını yoxlayın. Qəhrəman şəkillərinin gecikdiyini görürsünüzsə, dərhal tənbəl atributunu silin. Kritik yolu optimallaşdırdıqdan sonra uzun məzmununuz üzərində işləyin və gözdən kənar şəkillərə tənbəl atributu tətbiq edin. Bu sadə iki addımlı proses daha yaxşı performans üçün möhkəm təməl təmin edəcək.
Tez-tez Verilən Suallar
Tənbəl yükləmə SEO-ma zərər verəcəkmi?
Yerli brauzer xüsusiyyətlərindən istifadə etməklə düzgün tətbiq edildikdə, tənbəl yükləmə SEO-ya zərər vermir. Google kimi axtarış sistemləri JavaScript-i göstərməyə və tənbəl yüklənmiş şəkilləri başa düşməyə qadirdir. Şəkillər düzgün işarələnibsə və skanerlər üçün əlçatandırsa, axtarış sistemi reytinqləriniz sabit qalmalı və ya hətta səhifə sürətinin yaxşılaşdırılması səbəbindən yaxşılaşmalıdır.
Tənbəl yükləmə bütün brauzerlərdə işləyirmi?
Yerli tənbəl yükləmə bütün müasir brauzerlər tərəfindən dəstəklənir. Yükləmə atributunu dəstəkləməyən köhnə brauzerlər üçün atribut sadəcə olaraq nəzərə alınmır və şəkillər atribut olmadan olduğu kimi normal şəkildə yüklənəcək. Bu, köhnəlmiş sistemlərdə olan istifadəçilərin təcrübəsinə təsir etmədən onlara zərif ehtiyat nüsxə təqdim etdiyi üçün xüsusiyyətin istifadəsini təhlükəsiz edir.
Fon şəkilləri üçün tənbəl yükləmədən istifadə edə bilərəmi?
Yerli yükləmə atributu yalnız standart şəkil etiketləri üçün işləyir. CSS fon şəkillərindən istifadə edirsinizsə, brauzer həmin elementlər üçün yerli tənbəl yükləməni dəstəkləmir. Fon şəkillərini tənbəl yükləmək üçün daha mürəkkəb JavaScript texnikalarından istifadə etməli və ya fon effektini təqlid etmək üçün CSS yerləşdirmə ilə standart img etiketlərindən istifadə etmək üçün dizaynınızı dəyişməli olacaqsınız.
Tənbəl yükləmə üçün kitabxanadan istifadə etməliyəmmi?
Əksər hallarda tənbəl yükləmə üçün üçüncü tərəf kitabxanasına ehtiyacınız yoxdur. Yerli brauzer dəstəyi əksər veb-saytlar üçün kifayətdir. Kitabxananın istifadəsi səhifənizə lazımsız fayl çəkisi əlavə edir ki, bu da saytınızı yavaşlada bilər. Kodunuzu təmiz və performans göstəricilərinizi mümkün qədər yüksək saxlamaq üçün mümkün olduqda yerli xüsusiyyətlərə sadiq qalın.
Şəkillərimin tənbəl yükləndiyini necə yoxlaya bilərəm?
Brauzerinizin tərtibatçı alətlərindəki Şəbəkə nişanından istifadə etməklə şəkillərinizin tənbəl yükləndiyini yoxlaya bilərsiniz. Səhifəni yeniləyin və yavaş-yavaş aşağı diyirləyin. Siz yalnız şəkillərin yerləşdiyi ərazilərə yaxınlaşdıqca şəbəkə siyahısında yeni şəkil sorğularının göründüyünü görməlisiniz. Bütün şəkillər birdən yüklənərsə, tənbəl yükləmə yəqin ki işləmir.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn