Şəkli yükləmə Şəkilləri: Tam Bələdçi Üstünlüyü Bunun 3 yolu

Şəkli yükləmə Şəkilləri: Tam Bələdçi Üstünlüyü Bunun 3 yolu

Şəkli yükləmə Şəkilləri: Tam Bələdçi Üstünlüyü Bunun 3 yolu
СОДЕРЖАНИЕ
02 июня 2020

Lazy Loading Şəkillər: Tam Bələdçi


İnternetdə funksionallıq və interaktivlik artdıqca, son bir neçə ildə veb səhifə ölçüsündə davamlı artım müşahidə olunur. 2018-ci ilin əvvəlinə, orta səhifə ölçüsü internetdə 2 MB-dən çox dayandı! Bununla necə mübarizə aparmaq olar? Tənbəl yükləmə şəkilləri adlı bir az şey daha yaxşı həllərdən biridir.

Bu təlimatda biz keçirik tənbəl yükləmə şəkillərinin bütün incəlikləri, və bunun həyata keçirilməsinin üç fərqli yolu üzərində danışın.

Gələcəklərin məzmunu ilə başlayaq:

  • Niyə tənbəl yükləmə vacibdir?
  • Tənbəl yükləmə nədir?
  • Tənbəl yüklənmənin faydaları
  • Şəkilləri tənbəl yükləyərkən nələrə diqqət etməli
  • Seçim 1: Tənbəl yükləməni sıfırdan həyata keçirin (başlanğıc dostu: ⭐ / 5)
  • Seçim 2: JavaScript plaginindən istifadə edin (başlanğıc dostu: ⭐⭐ / 5)
  • Seçim 3: WordPress plaginindən istifadə edin (başlanğıc dostu: ⭐⭐⭐⭐⭐ / 5)
  • Nəticə

Niyə tənbəl yükləmə vacibdir?

Bir veb səhifənin nəhəng yükü, ilk növbədə şəkillər, skriptlər, üslub cədvəlləri, şriftlər və videolardan ibarətdir. Bununla birlikdə şəkillər adi bir veb səhifənin ölçüsünün 60% -dən çoxunu alır. Şəkillər veb səhifənin dizaynı üçün də çox vacibdir, buna görə onlardan qurtula bilməyəcəksiniz.

Heç bir optimallaşdırmadan istifadəçinin veb brauzeri bir səhifəni tamamilə göstərmədən əvvəl bütün mənbələri yükləyir. Bu, insanı özündən çəkə biləcək yüklərin artmasına səbəb olur. WooCommerce təxmin etdi hər 100 ms səhifə sürətinin yaxşılaşdırılması üçün bir e-ticarət veb saytı gəliri 1% artıra bilər.

Buna bənzər bir ssenaridə, yükləmə müddətinizi optimallaşdırmaq üçün lazım olanı etmək çox məna verir. Şəkillər veb səhifənin ölçüsünə əsas töhfə verdiyindən, onlardan başlamaq yaxşı bir fikirdir. Tənbəl yükləmə oyuna girdiyi yerdir.

Tənbəl yükləmə nədir?

Tənbəl yüklənmənin necə işlədiyini başa düşmək üçün burada görüntülərin CodeinWP-də necə göstərildiyini nümayiş etdirən sürətli bir cizgi GIF.

Lazy Loading Şəkillər DemoCodeinWP-də tənbəl yükləmə nümayişi

Səhifə yükləndikdə bütün şəkillər dərhal yüklənmir. Bir görüntüyə aşağı diyirlədikdə əvvəlcə onun bulanıq bir versiyasını görürsən və faktiki şəkil arxa plana yüklənməyə başlayır. Bu bulanıq görüntü, ölçüsünün bir hissəsində, son görüntünün aşağı bir tərifli bir versiyasıdır. Yükləmə və istifadəçi üzərində fırladana qədər görüntünün təxirə salınması bu fenomen, tənbəl yükləmə adlandırılan şeydir.

Baxmayaraq "tənbəl" ümumiyyətlə mənfi bir şəkildə əlaqələndirilir, tənbəl yükləmə əslində yaxşı bir təcrübədir və saytınızı ümumiyyətlə optimallaşdıraraq səhifə yükləmə müddətinin azaldılmasına səbəb olur.

Qeyd. Bu yazıda tənbəl yükləmə prosesinə baxırıq, ancaq tənbəl yükləmə yalnız şəkillərlə məhdudlaşmır – videolar, şərhlər kimi hər hansı bir mənbəni göstərərkən eyni fikri istifadə edə bilərsiniz. içində bu yazı) və hətta şriftlər də var.

Tənbəl yüklənmənin faydaları

Bir veb səhifənin yükləmə müddəti tərk edilməyə böyük töhfə verdiyindən, tənbəl yükləmə şəkilləri səhifənin yüklənməsinə qədər qalan istifadəçilərin xeyli artmasına səbəb ola bilər ki, bu da nəticədə daha yüksək satışa və ya çevrilməyə səbəb ola bilər..

Tənbəl yükləmə şəkillərinin digər əhəmiyyətli bir faydası endirilən server sənədləridir. Siz yalnız izləyicinin fırlandığı görüntülərə xidmət edirsiniz və səhifənin görünməmiş hissələri üçün bant genişliyinə qənaət edirsiniz. Şəkillər səhifə çəkisinin dominant hissəsini meydana gətirdiyindən, bu, server xərclərinin aşağı düşməsinə səbəb ola bilər.

Bütün şəkilləri ön tərəfə yükləmək oxucularınız üçün də zərərli ola bilər. İstifadəçi veb üçün sınırsız bir məlumat planında olarsa, ehtimal ki, əhəmiyyətsiz olmamalıdır. Bununla birlikdə, məhdud məlumatları olan planlarda, təsvirləri tənbəl yükləməklə izləyicinizin məlumatlarına qənaət edirsiniz.

Şəkilləri tənbəl yükləyərkən nələrə diqqət etməli

İndi veb saytınıza tənbəl yükləməni düzgün şəkildə həyata keçirmək qərarına gəldiniz, bunu necə həyata keçirəcəyiniz barədə bir neçə əsas mülahizəni nəzərdən keçirək..

Tənbəl yükləmək istədiyiniz şəkilləri müəyyənləşdirin

Bütün şəkillər tənbəl yükləmə üçün ideal deyil. Məsələn, dizaynınızın tərkib hissəsi olan və hər şeyi düzgün göstərmək üçün yüklənməli olanları tənbəl etmək istəməzsiniz..

Tənbəl yükləmə üçün yalnız ekrandan kənar olan və səhifənin quruluşuna kömək etməyən şəkillər nəzərə alınmalıdır. Tipik olaraq, bunlar təsvirlərdir  səhifənin gövdəsində görünən elementlər.

Şəkil yerini seçin

Nəzərə alınacaq növbəti şey, izləyicinin üzərinə sürüşdükdən sonra görüntü yükləndikdə göstərilməli olan aralıq şəkil və ya rəngdir. Şəkil yükləmə müddəti görüntünün nə qədər böyük olduğundan asılıdır və hətta bir neçə saniyə çəkə bilər. Buna görə, yükləmə zamanı istifadə etməyi üstün tutduğunuzu nəzərə almalısınız.

Tərtibatçıların bu mövzuda adətən qəbul etdiyi iki istiqamət var:

  • Təsvirin dominant rəngini fon kimi istifadə edin
  • Təsvirin aşağı keyfiyyətli versiyasından istifadə edin

aşağı rezervuarTənbəl yükləmə üçün yerlər kimi təsvirlərin aşağı keyfiyyətli versiyalarına misal

Burada düzgün seçim saytınızın dizaynından və görüntünün yüklənməsini gözləyərkən istifadəçiyə nə göstərilməyinizdən asılıdır..

Bir üsul görüntü görüntü limanına girən kimi yükləməyinizə baxmayaraq, baş verməmişdən əvvəl bir tampon vaxtı əlavə etməyi düşünə bilərsiniz – istifadəçi heç vaxt doldurucu görməməsi üçün..

Şəkillər yüklənərkən səhifə quruluşunu dəyişdirməkdən çəkinin

Bir şəkil yüklənməmişdən əvvəl 0 px ölçüləri ilə göstərilə bilər. Bu dizayn quruluşunuzu qorumaq üçün ideal deyil.

Bu səhifənin düzülüşünü və mətnin vəziyyətini asanlıqla dəyişdirə bilər. Sadə bir həll, dərhal görüntüyə düzgün ölçülər əlavə etməkdir – bu görüntü elementinin yükləndikdən sonra eyni qalmasını təmin edir.

Yuxarıda göstərilən mülahizələri nəzərə alaraq indi WordPress saytında tənbəl yükləməni necə həyata keçirə biləcəyimizə baxaq..

Seçim 1: Tənbəl yükləməni sıfırdan həyata keçirin

Əvvəlcə heç bir plugin istifadə etmədən bunu necə edəcəyimizə baxaq. Bu seçim JavaScript ilə rahat olanlar üçün tövsiyə olunur. İdeal olaraq aşağıdakı addımları atmaq lazımdır:

  1. Səhifənin yüklənməsi zamanı görüntünün yüklənməsinin qarşısını al: Src atributunda görüntünün URL və ya yolunu göstərəndə  etiket, şəkil yükləmə zamanı brauzer tərəfindən yüklənəcəkdir. Brauzerin görüntünün yüklənməsinin qarşısını almaq üçün, məlumatın src atributunda görüntünün yerini göstərməlisiniz.  əvəzinə etiket.
  2. İki hadisənin elementlərini yoxlamaq üçün hadisə idarəedici funksiyasını JavaScript-də qeyd edin: yükləmə və diyirləmə.
  3. Görünüş limanına bir element daxil olduqda, məlumatı src elementinin dəyərini src elementinə yükləyin, bu da brauzerin görüntünü yükləməsinə səbəb olur.

Bu prosesin sadə bir şəkildə həyata keçirilməsi izah edildi Robin Osborne və demo mövcuddur CodePen-də.

Seçim 1.1: qovşaq müşahidəçisi API istifadə edin

Kəsişmə müşahidəçisi API Görmə limanında olan hər hansı bir anda DOM elementlərini müəyyən etməyə kömək edir. Bu hadisə idarəedici funksiyasını yazmadan tənbəl yükü tətbiq etmək üçün daha təmiz bir yoldur. Tənbəl yükü həyata keçirmək üçün kod xətlərinin sayı da çox azalır. Bununla birlikdə, brauzer uyğunluğu bir problem olaraq qalır.

Google Yaradıcılar Blogu vasitəsilə kəsişmə müşahidəçisi API tətbiqini izah edir bu CodePen demo.

Seçim 2: JavaScript plaginindən istifadə edin

Yuxarıda müzakirə olunan iki seçim JavaScript ara səviyyədə bilik tələb edir. Serverə yük qoyan ağır bir plugin istifadə etmədən tənbəl yükləmənin daha asan həyata keçirilməsini istəyirsinizsə, düz JavaScript plaginini sınaya bilərsiniz, bənzər.

The bədii kitabxana 2 KB-dən az bir ölçüdə, tənbəl yükləmə şəkillərini asanlıqla idarə etməyə imkan verərkən yükləmə hissəsinə əlavə bir yük qoymur.

BLazy kitabxanasından istifadə etmək üçün başlatmanız lazımdır  aşağıdakı atributları olan elementlər:

  • sinif: hamının sinfini təyin etmək  b-tənbəl üçün etiketlər
  • src: doldurucu görüntüsünə link
  • data-src: yükləmək üçün görüntüyə keçid
  • data-src-small: eni 420 pikseldən az olan ekranlara yükləmək üçün görüntüyə keçid

BLazy kitabxanasını bir neçə sətir kodda başlatmalısınız və bütün şəkilləriniz tənbəl yükləmə yolu ilə göstəriləcəkdir.

; (funksiya () {
// Başlat
var bLazy = yeni Blazy ();
}) ();

CodePen demo mövcuddur burada.

Seçim 3: WordPress plaginindən istifadə edin

Sizə tənbəl yük verə biləcək bir neçə seçim var. Xüsusi qeyd edilməli:

Bütün bu pluginlər avtomatik olaraq sizin üçün tənbəl yükləməni idarə edəcəkdir. Hər biri də bəzi gözəl yan xüsusiyyətləri ilə gəlir.

Məsələn, Lazy Load by WP Rocket də tənbəl YouTube videolarını yükləyir və eskizlə əvəz edir.

Optimole, ThemeIsle ailəsinə ən yeni əlavə olmaqla yanaşı rok-sağlam görüntü optimallaşdırmasını da təmin edir (burada sınaqdan keçirildiyi kimi) bu baxımdan olduqca inkişaf etmiş xüsusiyyətlərə malikdir. Məsələn, istifadəçinin ekran ölçüsünə əsasən dinamik boyutlandırma imkanı verir.


Şəkil optimallaşdırılması və Optimole tərəfindən tənbəl yükləmə Şəkil optimallaşdırılması & Optimole tərəfindən tənbəl yük

Müəllif (lər): Optimol

Cari versiya: 2.3.1

Son Yeniləmə: 21 aprel 2020

optimole-wp.zip


96% Reytinqlər


50.000 + quraşdırır


WP 4.7 + tələb olunur

Əksər pluginlərdə olduğu kimi, tənbəl yüklənmə üçün də, plagini quraşdırın və plagin idarəetmə panelindəki funksiyanı aktivləşdirin:

Lazy Loading Şəkillər üçün Optimole

Nəticə

Bu yazı tənbəl yükləmə şəkillərinin ehtiyac və faydalarını araşdırdı. Bir WordPress saytında tənbəl yükləmənin həyata keçirilməsinin üç fərqli yolunu da müzakirə etdik:

  • JavaScript-də aralıq bacarıqınız varsa, sıfırdan başlayaraq tənbəl yükləməni həyata keçirə bilərsiniz
  • Bəzi proqramlaşdırmanı bilirsinizsə, lakin heç bir plugin, yüngül JavaScript kitabxanası istəmirsinizsə, bLazy bir seçimdir
  • Veb saytınızdakı şəkilləri tənbəl yükləmək üçün bir kliklə həll etmək istəsəniz, Optimole kimi bir plugin üçün getməlisiniz

Tənbəl yükləmə haqqında nə düşünürsən? Veb saytınızın işini yaxşılaşdırmaq üçün istifadə etdinizmi??

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector