Lighthouse енгізілгеннен бері бет жылдамдығына қатысты жаңа параметрлер пайда болды. Осы параметрлердің ең маңыздыларының бірі - Бірінші мазмұнды бояу (FCP). 10 жылдың маусымынан бастап күшіне енетін Lighthouse 2024 нұсқасында FCP-тің жалпы ұпайға әсері 10% құрайды..

FCP-ді метрика ретінде қабылдау және түсіну үшін алдымен оның психологиясын зерттеу қажет. тұжырымдамасына ұқсас лифттерде орнатылған айналар:

Қысқаша түйіндейтін болсақ: 1900 жылдардың бірінші жартысында биік ғимараттарда лифттерді пайдалану айтарлықтай өсті, бірақ лифт жүйелері бүгінгі күнмен салыстырғанда қарабайыр болды. Сондықтан лифтте өтетін уақытты қысқарту үшін лифттерге айналар орнату идеясы пайда болды.

 

image-11.png
Ақпарат көзі: https://web.dev/fcp/

 

Тақырыбымызға қайта оралу: Бетке кіруге әрекет жасаған кезде сізді жүктеу уақытында күтуге мәжбүр ететін нүкте - FCP. Бірінші мазмұнды бояу анықтамасы пайдаланушыға бірінші мәтінді, кескінді, ақ емес кенепті және т.б. көрсетуге кететін уақытты білдіреді.. FCP бірлігі секунд.

Lighthouse бағдарламасында FCP үшін түс шкаласы келесідей анықталады:

  • 0-2 секунд: Жасыл => Жылдам
  • 2-4 секунд: Қызғылт сары => Жақсарту қажет
  • 4+ секунд: Қызыл => Баяу

HTTP мұрағат деректеріне сәйкес, қарастырылуы мүмкін сайттар саны жылдам 25%, ал бар сайттардың 50%-ы баяу деп жіктеледі.

 

image-10.png
Ақпарат көзі: https://web.dev/first-contentful-paint/

 

FCP жақсарту үшін не істеуге болады?

Сервердің жауап беру уақытын қысқарту

Жалпы, бұл сервердің сервер жағында және бағдарламалық құралда қажет жақсартулар ретінде түсіндірілуі мүмкін. Сервердің жауап беру уақытына теріс әсер ететін мәселелерді тізімдеу үшін:

  • Серверді ортақ пайдалану, конфигурациялау (яғни, сервер параметрлері) және сервер ресурстары мәселе болуы мүмкін. Сіздің серверіңіздің сыйымдылығы трафикке сәйкес ұлғайтылуы керек. Кейбір жағдайларда нашар жазылған дерекқор сұраулары және өте күрделі бағдарламалық құрал құрамдастары сервердің жауап беру уақытына елеулі әсер етуі мүмкін.
  • CDN (Content Delivery Network) пайдаланбау FCP-ге әсер ететін мазмұнға қол жеткізудің кешігуіне әкелуі мүмкін.. Мазмұн өлшемі ұлғайған сайын, мысалы, үлкен анимациялық GIF немесе бейне CDNсіз шақыруға әрекеттенсе және негізгі сервер басқа континентте болса, FCP шешу үшін CDN шешімдерін қарастыру қажет болуы мүмкін.

 

image-12.png
Ақпарат көзі: https://gtmetrix.com/blog/first-contentful-paint-explained/

 

  • Тұрақты мазмұнды дұрыс және тұрақты кэш саясатымен қамтамасыз етпеу шамадан тыс жүктелуі мүмкін келушілер саны артқан сайын серверіңізді қажетсіз. Мысалы, логотипті әр бетке жүктеген кезде ұзақ мерзімді кэште сақтамасаңыз, сервердің жауап беру уақытына қажетсіз зиян келтіресіз.
  • Қажет емес бетті қайта бағыттау бетке кіру кезінде FCP-ге қажетсіз әсер етуі мүмкін. 

Мысалы, бұрын мұндай орнатулар болған: пайдаланушы сайтқа кіргісі келгенде, HTTP-HTTPS қайта бағыттау болды, содан кейін ол ұялы болса, HTTPS-ден ұялы телефонға қайта бағыттау (мысалы, https://) www-ден https://m), ал егер бет жойылып, 301 арқылы басқа жерге қайта бағытталса, пайдаланушы салық кеңсесіндегі үстелден үстелге өтіп жатқандай болды. Бұл жақсырақ түсіну үшін экстремалды мысал, бірақ егер сіз бетті 301 қайта бағыттау арқылы басқа URL мекенжайына қайта бағыттап, содан кейін сол бетті 301 арқылы басқасына қайта бағыттасаңыз, дәл осындай қисынсыз орнатуды жасауыңыз мүмкін.

  • Егер де сен алдын ала қосылуды немесе DNS-алдын ала алуды пайдаланбаңыз үшінші тарап қызметтеріне қосылу және көптеген үшінші тарап қызметтеріне қосылу кезінде префикстерді пайдалансаңыз, FCP үшін пайдалы ештеңе істеп жатқан жоқсыз.

Рендерді блоктау ресурстарын азайтыңыз

Жол элементі ретінде жазылған бұл жалғыз нүктені шешуге бірнеше ай қажет болуы мүмкін екенін мойындауым керек.

image-13.png
Ақпарат көзі: https://gtmetrix.com/eliminate-render-blocking-resources.html

Бұған қол жеткізу үшін барлық жерде шешім әдісі бар JS, CSS және бетті көрсетуді блоктайтын ұқсас ресурстар бетті жасау уақытынан кейін жүктеледі, бірақ сайт жүктеліп жатқанда алдымен сайттың бастапқы көрінетін бөлігі жүктеледі.. Дегенмен, мұны істеу үшін барлық JS, CSS және ұқсас ресурстарды тексеру қажет және көп уақытты қажет ететін процестерді бөлу керек. Сонымен қатар, мүмкіндігінше аз үшінші тарап қызметтерін пайдалану FCP оңтайландыруға көмектеседі.