ჩემი გვერდი

Largest Contentful Paint (LCP) & Cumulative Layout Shift (CLS)

9 მარტს 2022
Largest Contentful Paint (LCP) & Cumulative Layout Shift (CLS)

LCP (Largest Contentful Paint) CWV-ის (Core Web Vitals) მეტრიკია რომლის გამოყენებაც ვებგვერდის მფლობელებს შეუძლიათ იმისთვის რომ განსაჯონ UX  ყველაზე დიდი ბლოკის რენდერის დროით (რომელიც ჩანს აუდიტორიისთვის) და შეამოწმონ დაინტერესდება თუარა მომხმარებელი საიტით.

FastComet-ის მიხედვით როგორც ვებ გვერდის მფლობელს, საჭიროა თქვენი გვერდები რაც შეიძლება მალე ჩაიტვირთოს UX-ისთვის, რადგან მათი (და არა მარტო) აზრით ეს აბსოლუტურად გადამწყვეტი საკითხია ამ კუთხით. დამატებით Google-ის რანჟირების ერთ-ერთი კრიტერიუმიც სწორედ ჩატვირთვის სისწრაფეა. აღსანიშნავია რომ, სწრაფი ჩატვირთვა, ნელთან შედარებით, ზრდის ინტერესს და მომსახურების გამოყენების სიხშირეს.


როგორ იზომება LCP?

LCP არჩეულია როგორც CVW-ს განუყოფელი მეტრიკი, იქიდან გამომდინარე რომ ის ზომავს რამდენად სწრაფად შესაძლებელია ვებ საიტის ნავიგაცია. თან LCP ადვილია გასაზომი და საოპტიმიზაციოა.

საიტის სტრუქტურა

LCP ზომავს კონტენტის ბლოკების ჩატვირთვის სისწრაფეს მომხმარებლის გადმოსახედიდან. LCP-ის მეტრიკა მხოლოდ იმას ატყობინებს მფლობელს, თუ რამდენად სწრაფად ვლინდება კონტენტის სექციები ეკრანზე, ამის იქით არაფერი იზომება.

LCP-ს ოპტიმიზაცია

3 ძირითადი კომპონენტია რომლის ოპტიმიზაცია მნიშვნელოვანია (მეოთხე კონკრეტულად JavaScript-ის framework-ისთვის).

ნელი სერვერები პრობლემას წარმოადგენს როცა საქმე გვაქვს DDOS დონის ჰაკებთან და scraper traffic გაზიარებულ ან VPS ჰოსთზე. გამოსავალი WordPress-ის ისეთი plugin-ის გადმოწერაა როგორიც, WordFence არის რომ აღმოაჩინოთ პრობლემა და დაბლოკოთ.

საიტის განლაგება

ასევე შესაძლოა dedicated server-ის ან VPS-ის არასწორი კონფიგურაცია იყოს. ტიპურ პრობლემას წარმოადგენს მეხსიერების გარკევული ნაწილის PHP-სთვის დათმობას. თუ მსგავსი პრობლემა გაქვთ ჯობს ჩვენს ტექნიკურ დახმარების ცენტრს დაუკავშირდეთ.

დამატებით პრობლემას წარმოადგენს ძველი software-ი (მაგ: PHP-ს ან CMS ვერსია).


ყველაზე უარესი ვარიანტი რამდენიმე მომხმარებლის მიერ ერთი სერვერის ხმარებაა. ასეთ სიტუაციაში, უკეთესი ჰოსთის შერჩევა სწორი გადაწყვეტილებაა. ძირითადად ისეთი ცვლილებების შეტანა როგორებიცაა caching-ი, სურათების ოპტიმიზაცია, რენდერის მბლოკავი CSS & JavaScript გამოსწორება და ელემენტების წინასწარ ჩატვირთვა პრობლემას აგვარებს. Google-ს აქვს გარკვეული რჩევები ისეთ CSS-თან გასამკლავებლად, რომელიც არაა საჭირო რენდერისთვის:

წაშალეთ ნებისმიერი CSS რომელსაც არ ხმარობთ ან თქვენი საიტის სხვა stylesheet-ზე გადაიტანეთ. 

LCP

მსგავსი CSS

იმ CSS-ისთვის რომელიც არ გჭირდებათ პირველადი რენდერინგისთვის, გამოიყენეთ loadCSS, რომ ფაილები ასინქრონულად ჩატვირთოთ, რომელიც იყენებს rel="preload" & onload.

< link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'" >

გამოტოვების გარეშე

CLS ოპტიმიზაციის პლიუსები


ვებსაიტის მფლობელებისთვის საჭიროა რომ მომხმარებლებისთვის რაც შეიძლება იოლი იყოს ლინკების და ღილაკების გამოყენება, რომლებიც გვერდზეა განთავსებული.. CLS მეტრიკია რომელიც ადგენს ლინკებს და ღილაკებს რომლებიც იცვლებიან იმის შემდეგ რაც ვებსაიტი იტვირთება. ასევე ასახავს მომხმარებლების გამოცდილების სირთულის დონეს როცა საიტს რენდერის შემდეგ ხმარობენ.


UX და დიზაინი კარგი UX-ის უმნიშვნელოვანესი კომპონენტებია შესაბამისად საშუალო მომხმარებელი ღიზიანდება როცა გვერდი კითხვისას ადგილებს უცვლის ელემენტებს. CLS ეხმარება დეველოპერებს რომ გაარკვიონ იცლიან თუარა ადგილს ლინკები და სურათები იმისთვის რომ უფრო კომფორტული იყოს ვებსაიტის ნავიგაციის გამოცდილება, მიიპყროს მეტი ყურადღ