Performance

Core Web Vitals të shpjeguara për pronarët e faqeve

Core Web Vitals masin ngarkimin, reagimin dhe stabilitetin vizual. Mëso çfarë janë LCP, INP dhe CLS, vlerat që duhen synuar dhe nga të fillosh rregullimin.

Nga Zebra Hosting Cloud

Core Web Vitals janë tri matje që Google i përdor për të përshkruar si ndihet një faqe për një vizitor real: sa shpejt shfaqet përmbajtja kryesore, sa shpejt reagon faqja kur dikush prek ose klikon dhe nëse faqosja kërcen gjatë ngarkimit. Ato janë pjesë e sinjaleve të përvojës së faqes së Google, por arsyeja më e rëndësishme për t'u kujdesur është më e thjeshtë. Vizitorët largohen nga faqet e ngadalta dhe të kërcyeshme, dhe rrallë të thonë pse.

Ky udhëzues shpjegon tri metrikat në gjuhë të thjeshtë, pragjet që publikon Google dhe si të vendosësh çfarë të rregullosh së pari në një faqe të zakonshme biznesi të vogël.

Tri metrikat me një shikim

MetrikaÇfarë matE mirëE dobët
LCP (Largest Contentful Paint)Koha deri sa elementi më i madh i dukshëm të jetë vizatuar2,5 sekonda ose më pakMbi 4 sekonda
INP (Interaction to Next Paint)Sa kohë i duhet faqes të reagojë vizualisht pas një prekjeje, klikimi ose shtypjeje tasti200 milisekonda ose më pakMbi 500 milisekonda
CLS (Cumulative Layout Shift)Sa lëviz papritur përmbajtja e dukshme0,1 ose më pakMbi 0,25

Vlerat mes "të mirës" dhe "të dobëtës" bien në një brez "kërkon përmirësim". Google e vlerëson një faqe në përqindjen e 75-të të vizitave reale, që do të thotë se tre të katërtat e vizitorëve të tu duhet të marrin një përvojë në pragun ose më mirë. Një test i shpejtë në laptopin tënd nuk provon se faqja kalon.

Largest Contentful Paint: a shfaqet faqja?

LCP shikon imazhin, posterin e videos ose bllokun më të madh të tekstit në ekranin e parë dhe regjistron kur përfundon vizatimi i tij. Në shumicën e faqeve ky është një imazh hero ose një titull i madh. Një LCP i ngadaltë zakonisht vjen nga një prej katër shkaqeve: përgjigje e ngadaltë e serverit, imazh i rëndë ose i formatuar keq, CSS ose JavaScript që bllokon vizatimin, ose shfletuesi që e zbulon imazhin kyç shumë vonë.

Interaction to Next Paint: a reagon faqja?

INP zëvendësoi metrikën e vjetër First Input Delay në mars 2024. Ndërsa First Input Delay shikonte vetëm ndërveprimin e parë dhe vetëm vonesën para se të fillonte, INP merr parasysh ndërveprimet gjatë gjithë vizitës dhe raporton një nga më të ngadalshmit, nga hyrja deri te fotogrami i ardhshëm i vizatuar. Faqet që ngarkohen shpejt por ndihen të ngjitura kur hap një meny ose shtyp një buton zakonisht kanë problem me JavaScript: shumë kod që ekzekutohet njëkohësisht në thread-in kryesor.

Cumulative Layout Shift: a qëndron faqja e palëvizshme?

CLS mbledh lëvizjen e papritur të elementeve të dukshëm. Këtë e ke ndjerë kur shkove të prekësh një lidhje dhe një banner u ngarkua sipër, duke e shtyrë lidhjen poshtë. Shkaktarët e zakonshëm janë imazhet pa atribute width e height, reklamat dhe embed-et që ngarkohen vonë, fontet që ndërrohen dhe ndryshojnë madhësinë e tekstit dhe banerat e cookie-ve të injektuar në krye të faqes.

Të dhëna laboratorike kundrejt të dhënave nga terreni

Ka dy lloje matjesh, dhe përzierja e tyre krijon konfuzion.

  • Të dhënat nga terreni (field data) vijnë nga vizitorë realë që përdorin pajisje e rrjete reale. Google i mbledh nga përdoruesit e Chrome dhe i shfaq në PageSpeed Insights dhe Search Console kur faqja ka trafik të mjaftueshëm. Kjo është ajo që llogaritet për vlerësim.
  • Të dhënat laboratorike (lab data) vijnë nga një test i simuluar, si Lighthouse. Është i përsëritshëm, çka e bën ideal për diagnostikim, por është një pajisje në një lidhje.

Një faqe e vogël mund të mos ketë fare të dhëna nga terreni. Në atë rast përdor testet laboratorike për të gjetur problemet dhe rezultatet trajtoji si orientim, jo si verdikt.

Nga të fillosh rregullimin

  1. Mat faqet që kanë rëndësi. Testo faqen kryesore, faqen e uljes më të vizituar dhe një artikull ose faqe produkti tipike me profil mobil. Mos bëj mesataren e gjithë faqes.
  2. Rregullo metrikën më të ngadaltë së pari. Nëse LCP është e dobët dhe CLS në rregull, puno te LCP.
  3. Fillo me fitoret e lira. Kompreso dhe ndrysho madhësinë e imazhit hero, vendos dimensionet e imazheve, aktivizo caching, shqyrto një CDN dhe hiq shtesat ose skriptet që nuk i përdor më.
  4. Ri-testo pas çdo ndryshimi. Ndrysho një gjë çdo herë që të dish çfarë ndihmoi.
  5. Prit që të dhënat nga terreni të arrijnë. Numrat e botës reale mblidhen gjatë një periudhe rrëshqitëse, ndaj përmirësimet marrin disa javë të shfaqen plotësisht.

Çfarë lidhje ka hostimi

Core Web Vitals kryesisht lidhen me si është ndërtuar një faqe, por hostimi vendos nivelin e poshtëm. Një përgjigje e ngadaltë e serverit vonon gjithçka që vjen pas, çka e dëmton LCP drejtpërdrejt. Serverët e mbipopulluar, versionet e vjetruara PHP dhe mungesa e caching në anën e serverit shtojnë kohë para se shfletuesi të marrë bajtin e parë. Puna e mirë në front-end nuk mund ta kompensojë plotësisht një back-end të ngadaltë.

Një pritshmëri realiste

Kalimi i të tri metrikave është qëllim që ia vlen, por nuk është çelës magjik renditjeje. Rëndësia e përmbajtjes ka ende shumë më tepër peshë. Mendoji Core Web Vitals si heqje fërkimi: nuk do ta bëjnë një faqe të dobët të renditet, por një faqe e ngadaltë e kërcyese e bën më të vështirë mbajtjen e vizitorëve që i ke fituar tashmë.

Gabime të zakonshme të pronarëve të faqeve

  • Ndjekja e një rezultati të përsosur Lighthouse. Një rezultat 100 në një test laboratorik nuk është qëllimi. Qëllimi është kalimi i tri pragjeve për vizitorët realë.
  • Testimi vetëm në desktop. Pjesa më e madhe e vlerësimit bëhet në mobil, dhe pajisjet mobile kanë procesorë e lidhje më të ngadalta.
  • Instalimi i një shtese shpejtësie dhe ndalimi aty. Shtesat mund të ndihmojnë me caching dhe trajtimin e imazheve, por nuk mund të heqin një imazh hero 3 MB ose një duzinë skriptesh marketingu.
  • Injorimi i shablloneve. Faqet e ndërtuara nga i njëjti shabllon zakonisht ndajnë të njëjtat probleme, ndaj rregullimi i shablonit rregullon shumë faqe njëherësh. Search Console i grupon URL-të e ngjashme pikërisht për këtë arsye.

Mbaj një ditar të thjeshtë të asaj që ndryshove dhe rezultatit para e pas. Kursen hamendësimin kur diçka regresohet pas një përditësimi shtese.

Faqet e shpejta fillojnë me serverin

Te Zebra Hosting Cloud, çdo plan përfshin panelin e kontrollit Plesk, ku mund të zgjedhësh versione aktuale PHP, dhe Cloudflare CDN ofrohet në faqet e hostuara për t'u shërbyer skedarët statikë më afër vizitorëve. Së bashku mbulojnë anën e serverit të ekuacionit, që ti të përqendrohesh te vetë faqja. Shih çfarë ofron secili plan te pasqyra e hostimit.