Siz brauzerin ilkin render prosesi zamanı şəkil faylını mümkün qədər tez aşkar etməsini və yükləməsini təmin etməklə hero şəkilləri üçün LCP-ni optimallaşdırırsınız. Preload etiketlərindən və fetch priority atributlarından istifadə etməklə, brauzerə hero şəklinin digər vacib olmayan skriptlərdən və ya üslublardan əvvəl yüklənməli olan yüksək prioritetli resurs olduğunu bildirirsiniz.
LCP səhifə təcrübəniz üçün niyə vacibdir?
Google, ən böyük məzmun elementinin ekranda görünməsinin nə qədər vaxt apardığını ölçmək üçün LCP-ni əsas metrik kimi istifadə edir. Əksər səhifələr üçün bu element hero şəkli və ya viewport-un yuxarı hissəsində yerləşən böyük mətn blokudur. Əgər bu şəklin yüklənməsi çox vaxt apararsa, istifadəçilər səhifəni yavaş hesab edir ki, bu da çox vaxt daha yüksək çıxma dərəcələrinə (bounce rates) səbəb olur.
Yavaş LCP balı axtarış sistemlərinə səhifənin sürətli və istifadəçi dostu təcrübə təqdim etməyə biləcəyini bildirir. Səhifə baxışlarının əksəriyyəti üçün LCP balını 2.5 saniyə və ya daha az saxlamaq müasir veb performansı üçün standart hədəfdir. LCP elementi gecikdikdə, bu, səhifə keyfiyyətinin ümumi qavrayışına təsir edir.
Standart e-ticarət məhsul səhifəsini nəzərdən keçirin. Əgər əsas məhsul şəkli brauzerin marketinq skriptlərini və ya ikinci dərəcəli ikonları yükləməklə məşğul olması səbəbindən gecikərsə, LCP balı zərər görür. Bu gecikmə istifadəçini boş bir sahəyə baxmağa məcbur edir və mənfi ilkin qarşılıqlı əlaqə yaradır.
Texniki baldan əlavə, səhifənin vizual sabitliyi də vacibdir. Böyük elementlər gec yükləndikdə, onlar çox vaxt səhifənin qalan hissəsinin aşağıya doğru sürüşməsinə səbəb olur. Bu layout dəyişikliyi istifadəçi axınını pozur və saytınızda konversiya dərəcələrini azalda biləcək məyusedici bir təcrübə yaradır.
Şəkillər üçün fetch priority necə tətbiq olunur
Fetch priority, brauzerə resursun nisbi vacibliyini bildirməyə imkan verən HTML atributudur. Hero şəkli etiketinizə fetchpriority=’high’ əlavə etmək, brauzerə həmin şəklin yüklənməsinə aşağı gövdə şəkilləri və ya gec yüklənən sosial vidjetlər kimi digər aktivlərdən daha çox üstünlük verməyi tapşırır.
Bu atributu tətbiq etmək brauzer planlaşdırmasına təsir etməyin birbaşa yoludur. Varsayılan olaraq, brauzerlər dərhal görünməyən şəkillərin prioritetini azalda bilər, lakin hero şəklini yüksək prioritet kimi qeyd etmək brauzeri onu yükləmə növbəsinin əvvəlinə çəkməyə məcbur edir.
- İlkin viewport-da ən böyük element olacaq şəkli müəyyən edin.
- fetchpriority=’high’ atributunu birbaşa img etiketinin özünə əlavə edin.
- Şəklin lazy-load edilmədiyinə əmin olun, çünki lazy-loading yüklənməni qəsdən gecikdirir.
- Şəkil mənbəyinin ilkin HTML təhlilindən sonra JavaScript tərəfindən dinamik şəkildə dəyişdirilmədiyini yoxlayın.
Bu atributu tətbiq edərkən yalnız ən böyük elementə diqqət yetirməlisiniz. Bir çox elementdə ‘high’ prioritetindən həddindən artıq istifadə etmək, brauzeri bant genişliyi üçün rəqabət aparmağa məcbur edərək performans faydasını sıfıra endirə bilər. Ən yaxşı nəticələr üçün ən vacib aktivə sadiq qalın.
Brauzerinizin developer alətlərində şəbəkə şəlaləsini (network waterfall) yoxlayaraq tətbiqinizi sınaqdan keçirin. Siz hero şəkli sorğusunun prioritet atributu olmadan olduğundan xeyli əvvəl başladığını görməlisiniz. Bu ani dəyişiklik çox vaxt LCP vaxtınızda nəzərəçarpacaq dərəcədə azalma ilə nəticələnir.
Şəkil optimallaşdırılmasında preloading-in rolu nədir?
Preloading, istifadəçi agentinə resursun dərhal lazım olduğunu bildirən brauzer işarəsidir. Sənədinizin baş hissəsinə (head) preload linki yerləşdirdiyiniz zaman, brauzer HTML gövdəsinin qalan hissəsini təhlil etməzdən əvvəl hero şəklini yükləməyə başlayır.
Bu texnika effektivdir, çünki o, kəşf gecikməsini aradan qaldırır. Preloading olmadan, brauzer HTML-i təhlil etməli, img etiketini tapmalı və sonra şəbəkə sorğusunu başlatmalıdır. Preloading sorğunun başladılmasını sənəd həyat dövrünün ən əvvəlinə keçirir.
Bu ən yaxşı təcrübələrə riayət etmək, Google Search-ün saytınızın məzmununu və strukturunu başa düşməsinə kömək etməklə yanaşı, istifadəçilərinizin saytınızda yaxşı təcrübə keçirməsinə kömək edəcək.
Google Search Central
Bunu düzgün tətbiq etmək üçün sənəd başlığında link etiketindən istifadə edin: . Bu, brauzerə şəklin tam sənəd strukturunu emal etməzdən əvvəl gətirilməli olan yüksək prioritetli aktiv olduğunu bildirir.
Responsive şəkillərlə ehtiyatlı olun. Müxtəlif şəkil ölçülərini təqdim etmək üçün srcset istifadə edirsinizsə, preload linkinizin brauzerin istifadəçinin xüsusi cihaz eni üçün seçəcəyi mənbə ilə uyğun olduğundan əmin olun. Əks halda, performansa kömək etməkdən çox zərər verən ikiqat yüklənməyə səbəb ola bilərsiniz.
Ümumi LCP problemlərini necə debug edə bilərsiniz?
LCP-ni debug etmək developer alətlərindəki şəlalə diaqramına sistemli baxışı tələb edir. Səhifənizi gizli (incognito) pəncərədə yükləməklə və şəbəkə trafikini qeyd etməklə başlayın. Şəklin yüklənməsinin tam olaraq nə vaxt bitdiyini görmək üçün vaxt tabında ‘LCP’ markerini axtarın.
Ümumi səbəblərə uzun server cavab vaxtları və ya şəklin sorğulanmasına mane olan render-blocking CSS daxildir. Əgər server ilkin HTML-i qaytarmaq üçün çox vaxt aparırsa, heç bir şəkil optimallaşdırılması LCP balınızı düzəltməyəcək. Serverinizin sorğulara tez cavab vermək üçün konfiqurasiya olunduğundan əmin olun.
Hero şəklinizin üçüncü tərəf domenindən çatdırılıb-çatdırılmadığını yoxlayın. Cross-origin sorğuları çox vaxt DNS axtarışı və ayrı TCP/TLS bağlantısı tələb edir ki, bu da yüklənmə vaxtına əlavə millisaniyələr əlavə edir. Bu yükü azaltmaq üçün dns-prefetch və ya preconnect kimi resurs işarələrindən istifadə edin.
Nəhayət, şəklin brauzer tərəfindən ölçüsünün dəyişdirilib-dəyişdirilmədiyini yoxlayın. Əgər hero şəkliniz 2000px enindədirsə, lakin 400px-də göstərilirsə, siz bant genişliyini israf edirsiniz. Şəkil göstərilməzdən əvvəl yüklənməli olan ümumi bayt sayını azaltmaq üçün müvafiq ölçülü şəkillər təqdim edin.
Alien Road bunu necə tətbiq edir
Alien Road-da LCP-ni yaxşılaşdırmaq prosesimiz Chrome DevTools istifadə edərək texniki auditlə başlayır. Biz gecikməyə səbəb olan xüsusi hero şəklini müəyyən edirik və onun render-blocking CSS və ya JavaScript tərəfindən bloklanıb-bloklanmadığını yoxlayırıq. Bizim yanaşmamız texniki təkmilləşdirmələrin biznes məqsədləri ilə uyğunlaşmasını təmin edir.
Tipik müştəri əməkdaşlığı üçün sürəti təmin etmək üçün bu addımları izləyirik:
- Hero şəklinin yüklənməsini hansı tapşırıqların blokladığını görmək üçün kritik sorğu zəncirini yoxlayırıq.
- Sənəd başlığında əsas hero aktiv üçün əl ilə preloading tətbiq edirik.
- Konteyner ölçüsünün müəyyən edildiyinə əmin olmaq üçün CSS-i tənzimləyirik, bu da layout dəyişikliklərinin qarşısını alır.
- Şəkil sıxılmasını yoxlayırıq və WebP və ya AVIF kimi müasir formatları təqdim edirik.
- Düzəlişdən əvvəl və sonra yüklənmə vaxtlarını müqayisə edərək nəticələri istehsal mühitində yoxlayırıq.
Biz tez-tez optimallaşdırılmamış nəhəng hero bannerləri olan müştərilərlə işləyirik. Bir halda, biz böyük PNG faylını WebP ekvivalenti ilə əvəz etdik və fetch priority etiketini tətbiq etdik. Bu sadə dəyişiklik LCP metrikini 800 millisaniyədən çox azaltdı və nəticədə istifadəçi cəlb edilməsində nəzərəçarpacaq artım oldu.
Komandamız həmçinin skriptlərin hero yüklənməsi ilə necə qarşılıqlı əlaqədə olduğunu nəzərdən keçirir. Çox vaxt vacib olmayan izləmə skriptləri başlığa daxil edilir ki, bu da ilkin renderi gecikdirir. Biz hero şəklinin mümkün qədər tez render edilməsi üçün əsas axını təmiz saxlamaq üçün bunları təxirə salınmış yükləməyə (deferred loading) keçiririk.
Bu həftə haradan başlamalı
PageSpeed Insights alətindən istifadə edərək cari LCP balınızı yoxlayın. Əgər əsas şəkliniz yavaş yüklənən resurs kimi işarələnibsə, onun lazy-load edilmədiyini yoxlayın və fetchpriority atributunu tətbiq edin. Növbəti on dörd gün ərzində Google Search Console-da axtarış performans göstəricilərinizə təsirini izləyin.
Əsas səhifənizdəki ən böyük məzmun elementini müəyyən etməklə başlayın. Şəkli tapdıqdan sonra başlıq hissənizə preload linkini tətbiq edin və fetch priority atributunu əlavə edin. Dəyişikliklərinizin istifadəçiləriniz üçün nəticə verib-vermədiyini görmək üçün bir həftəlik məlumat topladıqdan sonra performans təsirini nəzərdən keçirin.
Axtarış üçün optimallaşdırma zamanı ardıcıllıq əsasdır. Bu texniki dəyişiklikləri etdikdən sonra, gələcək sayt yeniləmələri zamanı onları qoruyub saxladığınızdan əmin olun. Yeni məzmun və ya skriptlərin əsas şəklinizin yüklənmə prosesinə mane olmadığından əmin olmaq üçün ana səhifənizi mütəmadi olaraq yoxlayın.