5-11-2021, 18:38
First Contentful Paint (FCP) nədir?
Bloq
First Contentful Paint (FCP) nədir? Necə optimallaşdırmaq olar?
Google-un nəticələr səhifələrində yüksək yer tutmaq istəyənlər, İlk məzmunlu boya (FCP) nədir? Necə optimallaşdırmaq olar? Onlar istifadəçi təcrübəsinə əsaslanan metrikdən istifadə etməyin yollarını öyrənə bilərlər.
Məlum olduğu kimi, Əhəmiyyətli Veb Məlumatları (Web Vitals) veb sayt sahiblərinə saytlarını istifadəçi təcrübəsinə görə qiymətləndirməyə kömək edən bir sıra tədbirləri ehtiva edir və onlar əslində iki ayrı kateqoriyada araşdırılır.
Web Vitals ölçüləri Core Web Vitals və Core Web Vitals-a bölünür və hər bir metrik səhifə təcrübəsinin bir hissəsinin nə qədər "yaxşı" olduğunu ölçür.
Əsas Web Vitals
•LCP (Ən böyük məzmunlu boya)
•FID (İlk Giriş Gecikməsi)
•CLS (Kumulyativ Layout Shift)
Qeyri-Əsas Veb Vitalları
•Ümumi Bloklama Vaxtı (TBT)
•İlk məzmunlu boya (FCP)
•Sürət İndeksi (SI)
•İnteraktiv vaxt (TTI)
Qeyri-Core Web Vitals ölçüləri tez-tez xüsusi problemin diaqnostikasına kömək etmək üçün Core Web Vitals metriklərinə tamamlayıcı ölçülər kimi xidmət edir. Məsələn, İlkin Məzmun Boyası (FCP) quraşdırma təcrübəsi üçün vacibdir və LCP ilə əlaqəli problemlərin diaqnostikasında faydalıdır.
FCP (First Contentful Paint) hazırda Core Web Vitals göstəricilərindən biri olmasa da, qəbul edilən yükləmə vaxtı üçün vacib göstəricidir. Mütəxəssislər Core Web Vitals dəstinin zamanla böyüyəcəyini və Google-un gələcəkdə First Contentful Paint-ə daxil olacağını proqnozlaşdırırlar.
FCP nədir?
First Contentful Paint (FCP), ilk məzmunlu boya deməkdir, səhifənin yüklənməyə başladığı andan həmin səhifənin məzmununun hər hansı bir hissəsi ekranda görünənə qədər vaxtı ölçən bir metrikdir.
Digər ölçülərdən fərqli olaraq, FCP cavab müddəti ilə bağlı yalnız texniki göstərici deyil. FCP, arxa planda yüklənənlərə deyil, istifadəçinin təcrübəsinə və saytda ilk olaraq qəbul etdiklərinə diqqət yetirir.
FCP, istifadəçinin səhifənizin bir hissəsinin dəyişdiyini görə bildiyi zamandır (brauzer səhifənizdə ilk DOM elementini göstərdikdə). Buraya şəkillər, ağ olmayan kətan elementləri və ya mətn daxildir ki, bunlar tez-tez başlıq çubuğu və ya fon şəkli kimi göstərilir. Sözügedən element serverdən yüklənmiş ilk element olmaya bilər, lakin o, istifadəçinin görə biləcəyi ilk elementdir və onu saytınızın istifadəçi təcrübəsi (UX) üçün mühüm edir.
FCP maraqlı bir metrikdir, nisbətən subyektivdir. Bu, istifadəçilərin saytınızın sürətli yükləndiyini hiss etməsinə səbəb ola bilər. Baxmayaraq ki, İlkin İnteraktiv Gecikmə (FID), yəni bir ziyarətçi veb saytınızla əlaqə saxladıqdan sonra veb saytınızın cavab müddəti rəqiblərinizdən çox daha çox olsa da, aşağı FCP səbəbiylə saytınız ziyarətçilərə daha sürətli görünə bilər.
Bununla belə, əlbəttə ki, FCP ziyarətçiləri aldatmaq üçün nəzərdə tutulmayıb. Əsas odur ki, aşağı FCP vaxtları LCP (Ən böyük məzmunlu boya) kimi digər səhifə sürəti ölçülərinə təsir edə bilər.
Birinci məzmunlu boya niyə vacibdir?
Google öz reytinqlərində səhifə sürətini qiymətləndirdiyi üçün; Qeyd etmək lazımdır ki, FCP vaxtını azaltmaq üçün istənilən optimallaşdırma UX-i yaxşılaşdıracaq və saytınızın ümumi yükləmə müddətinə müsbət təsir edəcək.
Birbaşa sayt performans göstəricisi olmasa da, biz deyə bilərik ki, FCP istifadəçi mərkəzli qavrayış metrikasıdır: Tutaq ki, iki vebsayt eyni yükləmə müddətinə malikdir; daha az FCP vaxtı olan birinin daha sürətli olduğu düşünülə bilər. Bu qavrayış istifadəçi təcrübəsinə təsir edə bilər.
Bununla belə, First Contentful Paint-in saytın ümumi performansını daha yüksək səviyyəyə çıxarmaqda təsirli olduğunu inkar etmək olmaz. FCP-ni azaltmaq üçün görəcəyiniz hər hansı hərəkətlər ümumi səhifə sürətinizi də yaxşılaşdıracaq. Buna görə də, FCP-ni ümumi performansınızın göstəricisi kimi nəzərdən keçirə bilərsiniz.
Aşağı FCP vaxtı çox vaxt yüksək ümumi yükləmə vaxtı ilə üst-üstə düşmür, buna görə də harada dayandığınızı görmək üçün bir metrikdən istifadə etməlisinizsə, FCP yaxşı bələdçi ola bilər.
İlk məzmunlu boyanı necə ölçmək olar?
FCP ilk mətnin və ya şəklin səhifədə göründüyü vaxtı qeyd edir. Bu, brauzerin DOM məzmununun ilk parçasını göstərməsi üçün nə qədər vaxt lazım olduğunun ölçüsüdür. FCP dəyəri üçün ölçülən məzmun; mətn, əsas və fon şəkilləri, ağ olmayan elementlər və miqyaslana bilən vektor qrafikası (SVG) elementləri daxildir. Hətta yükləmə animasiyası və ya şirkət loqosu kimi sadə bir şey də FCP-ni işə sala bilər.
FCP dəyərinizi yoxlamaq üçün müxtəlif alətləri nəzərdən keçirməzdən əvvəl yaxşı FCP xalının nə olduğunu bilməlisiniz. Birinci Məzmunlu Paint xalını şərh edərkən aşağıdakı həddlər nəzərə alınır:
Yaxşı istifadəçi təcrübəsi təqdim etmək istəyən saytların 1,8 saniyə və ya daha az FCP-yə sahib olmağa çalışması tövsiyə olunur. FCP dəyəri nə qədər aşağı olsa, bir o qədər yaxşıdır.
FCP ölçmək üçün istifadə edilən vasitələrdən biri pulsuz sayt sürətinin ölçülməsi vasitəsi kimi tanınan PageSpeed Insights-dır . Buna Chrome DevTools , Search Console və Lighthouse əlavə edə bilərik. jаvascript-də FCP-ni ölçmək istəyirsinizsə, Paint Zamanlama API-dən istifadə edə bilərsiniz, lakin jаvascript-də FCP-nin ölçülməsi bir az mürəkkəb ola bilər.
İlk boya ilə ilk məzmunlu boya arasındakı fərq nədir?
Bu iki termin bəzən bir-birini əvəz etsə də, FCP və FP-nin texniki cəhətdən iki fərqli ölçü olduğunu başa düşmək vacibdir. First Paint (FP) , dayanır First Paint browser informasiya ilk bayt yaradır ilk pixel, və ya content olmadan, ekranda zaman edir.
FCP (Birinci Contentful Paint) , dayanır First Contentful Paint , browser sənəd obyekt modeli (DOM) hər hansı məzmun göstərir ilk dəfə. İstifadəçinin fon şəkli və ya mətn parçası kimi məzmun kimi istifadə edə biləcəyi elementlər FCP nümunələridir.
First Paint anidəki ekran da First Contentful Paint-də göstərilən ekranla eyni ola bilər.
FCP-ni şərh edərkən, LCP və FP ilə birlikdə təhlil etmək tövsiyə olunur. Core Web Vitals ölçülərindən biri artıq rəsmi olaraq Google-un sıralama faktorlarına daxil edilmişdir, LCP Ən Böyük Məzmun Rəsmi deməkdir. Görünüş pəncərəsində ən böyük şəkil və ya mətn blokunun göründüyü an. LCP dəyəri səhifənin yüklənməsinin ən vacib göstəricisi olduğu üçün çox vacibdir.
Veb saytınız 2,5 saniyədən az müddətdə yüklənməlidir. Yüksək LCP-nin səbəblərinə yavaş server cavab müddəti, jаvascript və CSS problemləri daxildir.
FP, FCP və LCP dəyərlərini Chrome-un DevTools-dan görə bilərsiniz. Bunun üçün yoxlamaq istədiyiniz veb səhifəni açın, sağ klikləyin və “ Yoxlama ” seçin. Performans sekmesine klikləyin və soldakı “ yenidən yüklə ” düyməsini basın. Chrome səhifəni təhlil edəcək və ətraflı hesabat verəcək. "Zamanlama" sətirində FP, FCP və LCP-ni görə bilərsiniz.
FCP dəyərini necə optimallaşdırmaq olar?
Yavaş server cavab müddətləri və render-bloklama resursları çox vaxt aşağı FCP xalının səbəbi olur.
Saytınızın FCP-ni optimallaşdırdığınız zaman siz nəinki ümumi yükləmə müddətlərini sürətləndirir və səhifə sürət reytinqlərini yaxşılaşdırırsınız, həm də ziyarətçilərə sorğularının tam yerinə yetirildiyini və yüklənmənin dayanmadığını göstərirsiniz.
Google web.dev- ə görə, FCP dəyərini azaltmaq üçün addımlar bunlardır :
•Renderi bloklayan resursları silin (saytınızın kodundan yuxarı lazımsız resursları yükləsəniz, ziyarətçilərin brauzerləri vebsaytınızın görünən hissəsini yükləmək üçün daha uzun çəkəcək).
•CSS fayllarını kiçikləşdirin (CSS faylları çox vaxt olması lazım olduğundan daha böyük olur. CSS fayllarının kiçildilməsi səhifə yükləmə performansınızı yaxşılaşdıra bilər).
•İstifadə edilməmiş CSS-i silin (Stil vərəqlərinizdə istifadə olunmamış kod olmamalıdır. Saytınız istənilən vaxt tələb olunarsa, köhnə və ya istifadə olunmamış kod silinməlidir ki, boşuna yüklənməsin).
•Tələb olunan resurslara əvvəlcədən qoşulma (“ preconnect ”) istifadəsi brauzerə vacib üçüncü tərəf keçidlərini prioritetləşdirməyə kömək edir və səhifənin yüklənməsini sürətləndirir.
•Serverin cavab müddətini azaldın (TTFB-nin azaldılması səhifə yükləmə vaxtını optimallaşdırmağa və FCP, LCP kimi digər səhifə sürəti ölçülərini yaxşılaşdırmağa kömək edəcək , TTFB nədir? məqaləmizdə daha çox öyrənin).
•Çoxsaylı səhifə yönləndirmələrindən çəkinin (Yönləndirmələr səhifənizin yüklənmə sürətini ləngidir, Əlavə şəbəkə səyahəti resursun yüklənməsini yüzlərlə millisaniyə gecikdirə bilər).
•Əvvəlcədən yükləmə sorğuları səhifələrinizin daha sürətli yüklənməsinə səbəb ola bilər.
•Kütləvi şəbəkə yükləri uzun yükləmə müddətləri ilə yüksək dərəcədə əlaqələndirilir.
•HTTP keşləmə təkrar ziyarətlər zamanı səhifənizin yüklənmə vaxtını sürətləndirə bilər (Brauzer resurs tələb etdikdə, resursu təmin edən server
brauzerə resursu nə qədər müddətə müvəqqəti saxlamalı və ya keşləməli olduğunu deyə bilər. Həmin resursa hər hansı sonrakı sorğular üçün brauzer onu şəbəkədən almaq əvəzinə olacaq. yerli surətdən istifadə edir).
•Həddindən artıq DOM ölçüsündən çəkinin (Böyük DOM ağacında çox vaxt istifadəçi səhifəni ilk dəfə yüklədikdə görünməyən çoxlu qovşaqlar var ki, bu da yükləmə müddətini ləngidir. Həmçinin, istifadəçilər və skriptlər səhifənizlə qarşılıqlı əlaqədə olduğundan, brauzer daima yenidən hesablamalar aparmalıdır. qovşaqların mövqeyi və üslubu Bundan əlavə, jаvascript-iniz document.querySelectorAll('li') kimi ümumi sorğu seçicilərindən istifadə edirsinizsə, siz bilmədən çoxlu sayda qovşaqlara istinadlar saxlaya bilərsiniz ki, bu da istifadəçilərinizin cihazlarının yaddaş imkanlarını gərginləşdirə bilər) .
•Kritik sorğu dərinliyini minimuma endirin (Kritik sorğu zəncirləri səhifənin göstərilməsi üçün vacib olan bir sıra asılı şəbəkə sorğularıdır. Zəncirlərin uzunluğu və endirmə ölçüləri nə qədər böyükdürsə, səhifə yükləmə performansına bir o qədər çox təsir göstərir).
•Veb şriftinin quraşdırılması zamanı mətni görünən saxlayın (Bəzi brauzerlər şrift yüklənənə qədər mətni gizlədir).
•Sorğunun sayını aşağı və köçürmə ölçülərini kiçik saxlayın.
İndi bu təkliflərdən bəzilərinə daha yaxından nəzər salaq.
Quraşdırmanın qarşısını alan resursların silinməsi göstərməni bloklayan resursların silinməsi FCP vaxtınızı azaltmaq üçün ən təsirli amil ola bilər. Bu resurslar HTML, jаvascript, şriftlər və CSS faylları daxil olmaqla səhifənizin göstərməli olduğu vebsaytınızdakı fayllardır. Onları "render-blok" edən şey, səhifədəki hər hansı bir şeyə üstünlük vermələri və tamamlanana qədər digər şeylərin yüklənməsini dayandırmalarıdır.
Bu saxlama iki səbəbə görə FCP-də kəskin artıma səbəb olur; render-bloklayan fayllar çox vaxt böyük ölçüdə olur və çox vaxt sayt məzmununu deyil, yalnız struktur və işarələmə məzmununu ehtiva edir. Bu resursları kritik göstərmə yolundan silməklə, məzmunun rənglənməsi üçün yer boşalta bilərsiniz. Resursların yüklənməsini gecikdirə, CSS, HTML və jаvascript fayllarınızı kiçildə və birləşdirə bilərsiniz.
Bəzi WordPress mövzularında və bəzi keşləmə plaginlərində render bloklama seçimlərini tapa bilərsiniz və onları işə salmaqla FCP vaxtını azaltmağa cəhd edə bilərsiniz.
Şrift Yüklənərkən Mətnin Görünən Edilməsi bəzən görürsən ki, bütün digər məzmunlar göstərilərkən səhifədəki bütün mətn bir anda daxil olur. Bunun səbəbi brauzerin onu gizlətməsidir. Şrift faylı göstərilməyə “hazır” deyilsə, mətnin şrifti – yüklənməsi gecikə bilər. Çox aşağı FCP-yə sahib olmağın ən yaxşı yollarından biri saytınızın mətn məzmununu görünən etməkdir.
Siz müxtəlif şrift ekran parametrlərindən istifadə edə bilərsiniz, brauzerə sistem şriftindən istifadə edərək saytınızın mətnini dərhal yükləməsini və yükləndikdən sonra onu təyin etdiyiniz ekran şrifti ilə əvəz etməsini söyləyə bilərsiniz.
Bəzi mövzular bunu standart olaraq edir və saytınız fayllar tam yüklənənə qədər səhifənizin məzmununu gizlətmək əvəzinə avtomatik olaraq sistem şriftindən keçəcək.
HTML, CSS və jаvascript-in kiçildilməsi saytınızın HTML, CSS və jаvascript fayllarından lazımsız simvolların (boşluqlar kimi) silinməsi səhifənin ölçüsünü azaldacaq. Bu, səhifə sürətini artırır və FCP-ni yaxşılaşdırır. Məsələn, brauzerlər və serverlər insanların oxumasını və təhlilini asanlaşdırsalar da, boşluqlara ehtiyac duymurlar.
Əgər siz WordPress istifadəçisisinizsə, ehtimal ki, mövzunuzda və ya keşləmə plagininizdə kiçikləşdirmə seçiminiz var.
İlk Bayt Vaxtının Azaldılması (TTFB) İlk bayta qədər vaxt mənasını verən TTFB, serverinizin ziyarətçinin sorğusuna nə qədər tez cavab verdiyini ölçür. TTFB məlumatın ilk baytının brauzerə ötürüldüyü zamandır. FCP bu metrikdən asılıdır, ona görə də TTFB nə qədər sürətli olarsa, İlk Məzmunlu Boyama da bir o qədər sürətlidir. TTFB-ni azaltmağın və səhifənizi sürətləndirməyin ən yaxşı yolu keyfiyyətli hostinq əldə etmək, lazım olduqda CDN-dən istifadə etmək və brauzerin keşini aktivləşdirməkdir.
Bu üç komponentə kifayət qədər qayğı göstərildiyinə əmin olmaq TTFB-ni və əlavə olaraq FCP-ni əhəmiyyətli dərəcədə azalda bilər.
DOM ölçüsünü kiçik saxlamaq Tez-tez sürətli FCP üçün ən məhdudlaşdırıcı amillərdən biri həddindən artıq böyük DOM-a sahib olmaqdır. Çoxumuz ziyarətçiləri heyran etmək üçün ana səhifələrimizi və açılış səhifələrimizi həddən artıq mürəkkəbləşdiririk. Bununla belə, əlavə edilmiş elementlər DOM-u şişirdir və daha yüksək FCP vaxtına səbəb olur. Ancaq yuxarıda qeyd etdiyimiz kimi, FCP nə qədər aşağı olsa, bir o qədər yaxşıdır.
İstifadə etdiyiniz CSS seçicilərinin sayını azaltmaqla buna kömək edə bilərsiniz. Pseudo-selektorlar işləri çətinləşdirir və DOM-un ölçüsünü artırır. Bununla belə, seçicilərin etibarlı olduğu elementlərin sayını da azalda bilərsiniz.
SVG və ya WebP Şəkillərindən istifadə Hər sayt üçün lazım olmasa da, FCP-nin mühüm şəkillərin fayl ölçüsünü əhəmiyyətli dərəcədə azaltması mümkündür. .gif, .jpg və .png kimi tez-tez istifadə olunan şəkil fayllarını .webp və ya .svg faylları ilə əvəz etmək vaxtınıza qənaət edə bilər.
Bu üsul çox güman ki, LCP-yə FCP-dən daha çox təsir edəcək, lakin o, kifayət qədər kiçik SVG loqosunun ziyarətçilərinizin gördüyü ilk şey olmasını təmin edə bilər.
Əgər istəyirsinizsə WebP nədir? Məqaləmizə nəzər sala bilərsiniz , əgər WordPress istifadəçisisinizsə, WordPress 5.8 Tatum haqqında məqaləmizdə daxili .webp dəstəyi haqqında məlumat tapa bilərsiniz.
Bundan əlavə, Google axtarış nəticələrində üst sıraların müəyyənləşdirilməsində oyunu dəyişdirəcək yeni standartlarla maraqlananlar Google Core Web Vitals nədir? və Google-un Son Əsas Yeniləməsi Nə üçün Əhəmiyyətlidir Məqalələrimizi nəzərdən keçirməyi məsləhət görürük.
Xülasə
First Contentful Paint (FCP) səhifənin yüklənməyə başladığı vaxtdan səhifə məzmununun hər hansı bir hissəsi ekranda görünənə qədər olan vaxtı ölçür. Sürətli FCP dəyəri istifadəçilərə məzmundan tam istifadə edə bilməsələr belə, aktiv səhifəyə çatdıqlarını bildirməyə imkan verir.
