კონტენტზე გადასვლა

ვებსაიტები / UPSCALE JOURNAL

Core Web Vitals ბიზნესისთვის: რას ნიშნავს LCP, INP და CLS

გაიგე სისწრაფის სამი მთავარი მაჩვენებელი, რეალური და ლაბორატორიული მონაცემების განსხვავება და სამუშაოების სწორი პრიორიტეტი.

UpScale6 წუთის საკითხავი

საიტის ჩატვირთვის, რეაქციისა და ვიზუალური სტაბილურობის სამი მაჩვენებელი

საიტის სისწრაფე ერთი წამზომი არ არის. გვერდი შეიძლება სწრაფად გამოჩნდეს, მაგრამ ღილაკზე გვიან რეაგირებდეს; ან ტექსტი უკვე იკითხებოდეს, როცა ახალი ბანერი ყველაფერს ადგილს უცვლის. Core Web Vitals ამ განსხვავებული გამოცდილებების შეფასებაში გეხმარება. ბიზნესისთვის მთავარი ამოცანაა გაიგოს, რომელი პრობლემა უშლის ხელს მომხმარებლის მოქმედებას და რომელი სამუშაო უნდა გაკეთდეს პირველად.

1. სამი მაჩვენებელი სამ განსხვავებულ კითხვას პასუხობს

LCP აჩვენებს, როდის გამოჩნდა ხედვის არეში ყველაზე დიდი შესაბამისი კონტენტის ელემენტი; ეს შეიძლება მთავარი ფოტო ან ტექსტური ბლოკი იყოს. INP მომხმარებლის მოქმედებაზე გვერდის რეაქციის სისწრაფეს აღწერს, ხოლო CLS — მოულოდნელ ვიზუალურ გადაადგილებას. ერთის გაუმჯობესება დანარჩენების ავტომატურ გამოსწორებას არ ნიშნავს.

მაჩვენებელი რას ამოწმებს კარგი ზღვარი
LCP ძირითადი დიდი ელემენტის გამოჩენა არაუმეტეს 2.5 წამისა
INP მოქმედებაზე ვიზუალური რეაქცია არაუმეტეს 200 მილიწამისა
CLS მოულოდნელი განლაგების ცვლილება არაუმეტეს 0.1-ისა

Google-ის რეკომენდებული შეფასება 75-ე პერცენტილს იყენებს და მობილურ და კომპიუტერის მონაცემებს ცალ-ცალკე განიხილავს. პრაქტიკულად ეს ნიშნავს, რომ შესაბამისი ვიზიტების სულ მცირე 75% კარგი ზღვრის ფარგლებში უნდა მოხვდეს. ზღვარი თითოეულ მაჩვენებელს ეხება. წყარო: web.dev — Web Vitals. CLS დროის ერთეული არ არის, ამიტომ მის გვერდით „წამი“ არ უნდა ეწეროს.

2. ლაბორატორიული ტესტი რეალური ვიზიტებისგან გაარჩიე

PageSpeed Insights ერთ გვერდზე აჩვენებს რეალური გამოყენების მონაცემებსა და მოდელირებული ტესტის შედეგებს. პირველი ნაწილი, როცა საკმარისი მონაცემია, წინა 28 დღის CrUX გამოცდილებას ეყრდნობა. მეორე კონკრეტული ტესტის პირობებში პრობლემის პოვნაში გეხმარება. ციფრების განსხვავება თავისთავად ხელსაწყოს შეცდომას არ ნიშნავს — იხილე PageSpeed Insights-ის განმარტება.

შეამოწმე, ანგარიშში კონკრეტული მისამართის შედეგს კითხულობ თუ მთელი დომენისას. მცირე საიტს შეიძლება საკმარისი რეალური მონაცემი ჯერ არ ჰქონდეს. ეს არც კარგ გამოცდილებას ადასტურებს და არც ცუდს. ასეთ შემთხვევაში დაიტოვე ლაბორატორიული დიაგნოსტიკა და რეალური ტელეფონით შემოწმება. ანგარიშის ასლთან შეინახე თარიღი, მისამართი და მოწყობილობის რეჟიმი, რათა შემდეგში განსხვავებულ შემოწმებებს შემთხვევით ერთმანეთს არ შეადარო.

3. LCP-ის პრობლემა მთავარი ელემენტიდან გამოიკვლიე

ჯერ დაადგინე, რომელ ელემენტს ასახელებს ტესტი LCP-ად. შემდეგ გუნდი შეამოწმებს, როდის ხდება მისი აღმოჩენა და ჩატვირთვა. ყველა ფოტოს შეკუმშვას ბრმად ნუ დაიწყებ: შეიძლება მთავარი შეფერხება რესურსის დაგვიანებული მოთხოვნა იყოს. მთავარი დიდი ფოტოსთვის დაგვიანებული ჩატვირთვა, ანუ lazy loading, შეუსაბამო აღმოჩნდეს.

Google-ის რეკომენდაციებში შედის LCP რესურსის ადრეული აღმოჩენა, სწორი პრიორიტეტი და მისთვის lazy loading-ის თავიდან აცილება — Core Web Vitals-ის გაუმჯობესების პრაქტიკა. ბიზნესის მხრიდან მნიშვნელოვანი გადაწყვეტილებაა, საჭიროა თუ არა პირველ ეკრანზე ვიდეო, მძიმე სლაიდერი ან რამდენიმე კონკურენტი ვიზუალი. შეარჩიე ის მასალა, რომელიც შეთავაზებას მართლაც ხსნის. შემდეგ შემსრულებელს მოსთხოვე კონკრეტული დიაგნოზი: რა აგვიანებდა ელემენტს, რა შეიცვალა და იგივე დიზაინი მცირე ეკრანზე როგორ გამოიყურება.

4. INP შეამოწმე მაშინ, როცა მომხმარებელი მოქმედებს

გვერდის გახსნა ჯერ მთელ გამოცდილებას არ აჩვენებს. დააჭირე მენიუს, გახსენი ფილტრი, შეცვალე პროდუქტის რაოდენობა და სცადე ფორმის ველები. თუ თითის დაჭერასა და ეკრანის პასუხს შორის შესამჩნევი პაუზაა, ჩაიწერე ზუსტი სცენარი. INP-ის გამოსაკვლევად ტექნიკურმა გუნდმა სწორედ ურთიერთქმედებები უნდა ნახოს.

ჩვეულებრივი Lighthouse ჩატვირთვის ტესტი რეალურ INP-ს ვერ ზომავს, რადგან მომხმარებლის მოქმედებები არ სრულდება; მის დიაგნოსტიკაში TBT შეიძლება დამხმარე მაჩვენებლად გამოჩნდეს. ეს განსხვავება Web Vitals-ის დოკუმენტაციაში განმარტებულია. საილუსტრაციო სცენარი: მაღაზიის მენიუ კარგად იხსნება, მაგრამ ფილტრის თითო არჩევანი დიდ კატალოგს ამუშავებს და რეაქციას აყოვნებს. ეს გამოგონილი მაგალითია. ასეთ შემთხვევაში მთავარი ეკრანის ფოტოს შეცვლა პრობლემის შესაბამისი პასუხი ვერ იქნება; გამოსაკვლევია კონკრეტული მოქმედების შესრულება.

5. CLS-ის წყარო ვიზუალური მოძრაობის დაკვირვებით იპოვე

სცადე გვერდის გახსნა და ნელი ჩამოსქროლვა. ხომ არ ჩამოდის ტექსტი ქვემოთ ფოტოს გამოჩენისას? ხომ არ გადაადგილდება ღილაკი ზედა შეტყობინების დამატების შემდეგ? ასეთ სცენარებში მომხმარებელი შეიძლება უკვე შერჩეულ ელემენტს აცდეს. ეკრანის ვიდეო ტექნიკურ გუნდს გადაადგილების მომენტის პოვნაში დაეხმარება.

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

6. სამუშაოები გვერდის ბიზნესროლით დაალაგე

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

  • რომელ კონკრეტულ მოქმედებას ან ელემენტს აქვს შეფერხება?
  • პრობლემა მობილურზეა, კომპიუტერზე თუ ორივეზე?
  • რომელი საერთო შაბლონი ან დამატებითი სერვისი მონაწილეობს?
  • შესაძლებელია ცვლილების უსაფრთხოდ გამოცდა?
  • რით გადავამოწმებთ გამოსწორებას?

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

7. შედეგს ცვლილების შემდეგ შესაბამის დროს დააკვირდი

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

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

წყაროები და დამატებითი კითხვა

Scroll to Top