Səhifə təcrübəsi üçün Critical CSS, veb səhifənin görünən hissəsini dərhal render etmək üçün lazım olan xüsusi üslubların müəyyən edilməsini və daxil edilməsini əhatə edir. Bu xüsusi üslublara üstünlük verməklə, brauzerlər ilkin görünüşü göstərməzdən əvvəl tam, ağır üslub cədvəlinin yüklənməsini gözləməkdən qaçırlar. Bu texnika render-bloklayan resurslara sərf olunan vaxtı azaldır, bu da birbaşa yükləmə performansını yaxşılaşdırır və saytların Google tərəfindən bəyənilən 2.5 saniyəlik Largest Contentful Paint həddinə çatmasına kömək edir.
Render-bloklayan CSS nədir və niyə vacibdir?
Standart CSS faylları brauzerlər tərəfindən çox vaxt render-bloklayan resurslar kimi qəbul edilir. Bu o deməkdir ki, brauzer istifadəçiyə hər hansı bir məzmunu göstərməzdən əvvəl bütün üslub cədvəlini yükləmək və təhlil etmək üçün render prosesini dayandırır. Müxtəlif şəbəkə sürətlərinə malik mobil cihazlarda bu gecikmə ekranın boş qaldığı nəzərəçarpacaq bir boşluq yaradır, bu çox vaxt ağ ölüm ekranı adlanır.
Əgər CSS faylınız minlərlə sətir koddan ibarətdirsə, lakin istifadəçi yalnız qəhrəman bölməsini və naviqasiya panelini görürsə, brauzer lazımsız məlumatlar üzərində işləyir. Bu gecikmələri minimuma endirmək brauzerin HTML təhlil edildikdən dərhal sonra ekranı boyamasını təmin edir. Bu optimallaşdırma olmadan, brauzer bir düyməni rəngləməyi və ya şrift ölçülərini tənzimləməyi bilməzdən əvvəl bütün CSS kitabxanasını gətirməlidir.
Tipik yüksək trafikli e-ticarət mağazası üçün ağır CSS faylı bir neçə yüz kilobayt məlumat təşkil edə bilər. Bu render-bloklayan olduqda, 4G bağlantısı olan istifadəçi yalnız yuxarı səviyyəli naviqasiyanı görmək üçün üç saniyədən çox gözləyə bilər. CSS-i bölməklə, brauzerin ən vacib vizual elementlərə üstünlük verməsinə imkan verir və ilk boyanma vaxtını effektiv şəkildə azaldırsınız.
Critical CSS Core Web Vitals-ı necə yaxşılaşdırır?
Google saytın sağlamlığını və istifadəçi təcrübəsini qiymətləndirmək üçün Core Web Vitals-dan istifadə edir. Critical CSS, brauzerin tam üslub cədvəlinin yüklənməsini gözləmədən əsas şəkli və ya mətn blokunu render etməsinə imkan verərək LCP metrikasına birbaşa təsir edir. Brauzer vacib üslublara dərhal sahib olduqda, gec yüklənən CSS elementləri son mövqelərinə sıçramağa məcbur etdikdə baş verən layout dəyişikliklərindən qaçır, bu da Cumulative Layout Shift (CLS) ballarını aşağı saxlamağa kömək edir.
Sayt sahiblərinə Axtarışda uğur qazanmaq və ümumilikdə əla istifadəçi təcrübəsini təmin etmək üçün yaxşı Core Web Vitals əldə etməyi şiddətlə tövsiyə edirik.
Google Search Central
LCP-dən kənarda, dərhal üslubların təmin edilməsi daha sürətli interaktivliyi də dəstəkləyir. İstifadəçi naviqasiyanı və düymələri görə bilirsə, onların məşğul qalma ehtimalı daha yüksəkdir. Əsas üslub cədvəli fonda yükləndikdə, istifadəçinin ilkin qarşılıqlı əlaqəsini kəsmədən qalan layout qaydalarını təmin edir. Bu, müasir yüksək keyfiyyətli veb saytlar üçün gözləntilərə uyğun gələn sürət qavrayışı yaradır.
Xidmət səhifəsinin mürəkkəb şəbəkə sisteminə malik olduğu bir vəziyyəti nəzərdən keçirin. Əgər bütün şəbəkə üçün CSS ilk mətn bloku göstərilməzdən əvvəl tələb olunursa, LCP yüksələcək. Qəhrəman mətni və qəhrəman bölməsinin fon rəngi üçün xüsusi qaydaları daxil etməklə, brauzer məzmunu millisaniyələr ərzində göstərir və şəbəkənin qalan üslubları gələnə qədər istifadəçinin oxumağa başlamasına imkan verir.
Critical CSS-i tətbiq etmək üçün addımlar hansılardır?
- Görünən məzmunu müəyyən edin: İstifadəçi sürüşdürməzdən əvvəl ekranda hansı elementlərin göründüyünü müəyyən edin.
- Üslubları çıxarın: Bu görünən elementləri üslublayan xüsusi CSS qaydalarını tapmaq üçün avtomatlaşdırma alətlərindən istifadə edin.
- CSS-i daxil edin: Bu üslubları birbaşa HTML sənədinizin baş hissəsinə yerləşdirin.
- Qalanını təxirə salın: İlkin renderi bloklamamaq üçün qalan, kritik olmayan CSS fayllarını asinxron şəkildə yükləyin.
Kritik üslublar daxil edildikdən sonra, qalan üslublarınızın bloklamayan şəkildə yükləndiyindən əmin olmalısınız. Ümumi bir üsul, media atributu ‘print’ olaraq təyin edilmiş link teqindən istifadə etmək və ya fayl yükləndikdən sonra media növünü ‘all’ olaraq dəyişdirmək üçün JavaScript-dən istifadə etməkdir. Bu, istifadəçi aşağı sürüşdürməyə başlayan kimi tam səhifə üslubunun mövcud olmasını təmin edir.
Alien Road Critical CSS-i necə tətbiq edir
Alien Road-da biz performansa texniki SEO-nun əsas komponenti kimi yanaşırıq. Müştərilərimiz üçün saytın çatdırılma zəncirində render-bloklayan yolları müəyyən etmək üçün audit keçirməklə başlayırıq. Biz ümumi düzəlişlər tətbiq etmirik; əvəzində, dizaynın ‘kritik’ hissəsini nəyin təşkil etdiyini müəyyən etmək üçün hər bir əsas açılış səhifəsinin xüsusi DOM strukturunu təhlil edirik.
Tipik bir əməkdaşlıq üçün prosesimiz aşağıdakıları əhatə edir:
- Masaüstü və mobil cihazlarda cari LCP və CLS vaxtlarını ölçmək üçün performans profillərini işə salmaq.
- Avtomatlaşdırılmış qurma alətlərindən istifadə edərək ilkin görünüş sahəsi üçün tələb olunan vacib CSS-i çıxarmaq.
- Bu üslubları HTML sənədinin baş hissəsinə daxil etmək üçün server tərəfi və ya qurma vaxtı alətlərini konfiqurasiya etmək.
- 28 günlük pəncərədə Core Web Vitals hesabatında təkmilləşdirmələri yoxlamaq üçün saytı Search Console-da izləmək.
Quraşdırma mərhələmizdə, biz tez-tez köhnə çərçivələrin ilkin render üçün lazım olmayan ağır qlobal üslubları daxil etdiyini görürük. Daxil edilmiş CSS blokunu 10KB-dan aşağı saxlamaq üçün bunları çıxarırıq. Bu, ilkin HTML sənədini mobil istifadəçiləri hədəfləyən saytlar üçün vacib olan şəbəkə üzərindən sürətlə çatdırılacaq qədər kiçik saxlayır.
CSS-i optimallaşdırarkən ümumi tələlər
Tərtibatçılar bəzən daxili bölməyə çoxlu kod daxil etmək səhvinə yol verirlər. Əgər baş hissəyə bütün səhifə üçün üslubları daxil etsəniz, HTML faylınızın ölçüsünü əhəmiyyətli dərəcədə artırırsınız, bu da serverdən ilkin cavabı gecikdirə bilər. Brauzerin sürətli qalmasını təmin etmək üçün daxili CSS-i ciddi şəkildə görünüş sahəsi ilə məhdudlaşdırın.
Həmçinin, əsas CSS faylının düzgün keşləndiyinə əmin olun. Kritik üslublar səhifəni render etdikdən sonra, istifadəçi digər səhifələrlə qarşılıqlı əlaqədə olduqda və ya daha aşağı sürüşdürdükdə saytın qalan hissəsi üçün qalan üslublara ehtiyac duyacaq. Əgər keşləmə siyasətiniz düzgün qurulmayıbsa, istifadəçilər hər bir səhifə yüklənməsində tam üslub cədvəlini yenidən yükləməyə məcbur olacaqlar, bu da bant genişliyini israf edir və təkrar ziyarətçi təcrübəsinə zərər verir.
Bu həftə haradan başlamaq lazımdır
Brauzerinizin tərtibatçı alətlərində performans tabını açmaqla başlayın. Yükləmə prosesini qeyd edin və şəlalə diaqramında xüsusilə render-bloklayan sorğulara baxın. Əgər ilk boyanmanı əngəlləyən böyük CSS faylları görürsünüzsə, ölçülərinizə təsirini müşahidə etmək üçün tək bir yüksək trafikli açılış səhifəsində daxiletmə strategiyasını sınayın.
Sonra, hazırda LCP və ya CLS həddini keçə bilməyən səhifələri müəyyən etmək üçün Google Search Console Core Web Vitals hesabatınızı nəzərdən keçirin. Səylərinizi əvvəlcə bu xüsusi URL-lərə yönəldin. Bu gün baza performansınızı sənədləşdirərək, Critical CSS-i tətbiq etdikdən sonra sürətdəki qazancı dəqiq ölçə bilərsiniz.