Libreng tool para sa Performance
Libreng Website Speed Test sa Mobile
Nilo-load namin ang iyong page na parang mid-range na phone sa mabagal na 4G na koneksyon, sinusukat kung gaano kabilis lumabas ang pangunahing content at kung gaano kalaki ang paggalaw ng page, at ipinapakita kung ano ang nagpapabigat dito. Kapag may real-user data ang Google para sa iyong site, makikita mo rin iyon.
Libre. Karaniwang tapos sa loob ng wala pang isang minuto.
Ano ang sinusuri ng tool na ito
Phone sa mabagal na 4G
Nilo-load ang page sa Chromium bilang phone na kauri ng Moto G Power (412 × 823) na may 150 ms na latency, mga 1.6 Mbps na download at 750 Kbps na upload, at CPU na 4× na mas mabagal. Ito ang profile na ginagamit ng Lighthouse para sa mga mobile test.
Largest Contentful Paint
Kung kailan natapos mag-render ang pinakamalaking larawan o bloke ng text sa unang screen, at kung aling elemento iyon.
Cumulative Layout Shift
Kung gaano kalaki ang hindi inaasahang paggalaw ng nakikitang content habang naglo-load ang page.
Total Blocking Time
Kung gaano katagal pinanatiling abala ng mga script ang browser kaya hindi ito makatugon sa isang tap: ang bahagi ng bawat mahabang task na lampas sa 50 ms, pinagsama-sama. Ito ang panghalili sa lab para sa Interaction to Next Paint.
Ano ang dina-download ng page
Kabuuang bytes at requests, hinati sa mga larawan, script, CSS at font, at ang bahaging galing sa mga third party.
Mabibigat na larawan at render-blocking na file
Mga larawang lampas sa 150 KB o mas malapad nang husto kaysa sa espasyong pinagpapakitaan nito, at ang mga CSS at script file na nakakaantala sa unang render.
Real-user data mula sa Chrome
Ang Chrome UX Report ng Google para sa iyong origin sa mga phone sa ika-75 percentile: LCP, INP at CLS, kapag may sapat na traffic ang Google para sa site.
Ano ang hindi nito kayang suriin
- Magbigay ng parehong numero sa bawat pagsubok. Nag-iiba ang mga lab result depende sa network, load ng server at mga third-party script, kaya ihambing ang mga trend sa halip na iisang pagsubok.
- Eksaktong tumugma sa PageSpeed Insights. Parehong gumagamit ang dalawa ng magkahawig na phone profile pero tumatakbo sa magkaibang makina at network.
- Sukatin ang INP sa lab. Kailangan ng INP ng totoong interaction, kaya TBT ang ipinapakita ng lab test at INP naman ang ipinapakita ng field data kapag mayroon.
- Magpakita ng field data para sa bawat site. Sinasaklaw ng Chrome UX Report ang huling 28 araw at ang mga origin lang na may sapat na Chrome traffic.
- Sumubok ng higit sa iisang page na inilagay mo. Ang bayad na Ulat sa Bilis ng Website ay sumusubok ng 3 pangunahing page at niraranggo ang mga sanhi kasama ang mga solusyon.
Bakit ito mahalaga
Ang page na parang instant sa Wi-Fi ng opisina at sa mabilis na laptop ay maaaring umabot nang ilang segundo sa mid-range na phone na mahina ang signal. Iyan ang sitwasyong ginagaya ng test na ito, dahil dito pinakamalaki ang pinsala ng mabibigat na larawan at script.
Ang Core Web Vitals ang mga sukatan ng Google para sa karanasang iyon: loading (LCP), pagtugon (INP) at visual na katatagan (CLS). Ginagamit ito ng Google sa ranking, pero sinasabi nitong hindi nangingibabaw ang magandang page experience sa may-kaugnayang content. Mas malaki ang epekto nito sa mga tao: nawawalan ng bisita ang mabagal o gumagalaw-galaw na page bago pa sila makabasa ng kahit ano.
Kadalasang konkreto ang mga sanhi: isang hindi naka-compress na hero image na ilang megabyte, isang chat widget na naglo-load bago ang content, isang web font na nagtatago ng text, o isang banner na isiningit sa itaas ng page pagkatapos itong lumabas. Pinapangalanan ng test ang LCP element at ang pinakamabibigat na file para makita mo kung alin sa mga ito ang naaangkop.
Paano basahin ang mga resulta
- Largest Contentful Paint (LCP)
- Maganda (good) kapag wala pang 2.5 s, mahina (poor) kapag lampas sa 4 s. Kung larawan ang LCP element, ang laki at loading priority nito ang pinakamahalaga; kung text, tingnan ang mga web font at render-blocking na CSS.
- Cumulative Layout Shift (CLS)
- Maganda (good) kapag wala pang 0.1, mahina (poor) kapag lampas sa 0.25. Isang score na walang unit na pinagsasama kung gaano kalaking bahagi ng screen ang gumalaw at kung gaano kalayo.
- Total Blocking Time (TBT)
- Maganda (good) kapag wala pang 200 ms, mahina (poor) kapag lampas sa 600 ms. Ang mataas na TBT ay hudyat ng mabagal na pagtugon sa mga tap para sa mga totoong user.
- Bytes at requests
- Walang opisyal na limit; tingnan kung aling uri ang nangingibabaw. Kadalasang mga larawan ang pinakamalaking bahagi, at ang malaking bahagi ng third party ay tumuturo sa mga app, tag at widget.
- Mabibigat na larawan
- Bawat larawang lampas sa 150 KB, o dina-download nang mas malapad nang husto kaysa sa pagkakapakita nito, kasama ang laki ng file at dimensyon nito.
- Mga render-blocking na file (Render-blocking files)
- CSS at mga synchronous na script na kailangang i-download ng browser bago ito makapagpakita ng anuman.
- Field data (ika-75 percentile)
- Mga totoong user ng Chrome sa mga phone sa nakaraang 28 araw. Ang ika-75 percentile ay nangangahulugang tatlo sa bawat apat na page load ang hindi bababa sa ganito kabilis. Maganda (good) ang INP kapag wala pang 200 ms at mahina (poor) kapag lampas sa 500 ms.
- Walang field data
- Walang sapat na Chrome traffic ang Google para sa iyong origin. Wala itong sinasabi tungkol sa iyong bilis; umasa sa mga lab result.
Paano ayusin ang mga pinakakaraniwang problema
Mabagal na LCP image
I-serve ang hero image sa laki kung paano ito ipinapakita, gamit ang srcset, sa WebP o AVIF. Huwag itong i-lazy-load, idagdag ang fetchpriority="high", at ilagay ito sa HTML bilang img element sa halip na i-load mula sa script o CSS background.
Content na gumagalaw habang naglo-load
Bigyan ang mga larawan, video at embed ng width at height attribute o CSS aspect-ratio. Maglaan ng espasyo para sa mga banner, cookie notice at ad, o ipakita ang mga ito bilang overlay na hindi nagtutulak pababa sa content. Para sa mga web font, gamitin ang font-display: optional o fallback font na kapareho ang laki.
Mataas na Total Blocking Time
Unahing alisin ang mga app, tag at plugin na hindi mo na ginagamit; madalas naiiwan ang kanilang mga script kahit tumigil ka nang gumamit sa mga ito. I-load ang chat, reviews at analytics gamit ang defer o pagkatapos maging interactive ang page. Sa Shopify, i-check ang Online Store › Themes › Customize › App embeds.
Render-blocking na CSS at mga script
Idagdag ang defer sa mga script na hindi kailangang tumakbo bago ang unang paint, i-inline ang kaunting CSS na kailangan ng unang screen, at alisin ang mga stylesheet para sa mga feature na hindi ginagamit ng page.
Mga larawang masyadong mabigat
I-resize ang mga larawan bago i-upload (sapat na ang mga 2000 px na lapad para sa full-width na banner) at i-compress ang mga ito. Kayang mag-serve ng Shopify at WordPress ng mas maliliit na bersyon nang kusa kapag hiningi ito ng theme, kaya i-check kung gumagamit ang iyong theme ng responsive na laki ng larawan.
Mga tanong tungkol sa tool na ito
Bakit iba ang mga resulta ko sa PageSpeed Insights?
Nakadepende ang mga lab test sa makina, sa network at sa sandali ng pagsubok. Pinapatakbo ng PageSpeed Insights ang Lighthouse sa mga server ng Google at ginagaya ang mabagal na koneksyon, samantalang inilalapat namin ang throttling sa isang totoong browser. Asahan ang magkakahawig na saklaw, hindi magkaparehong numero.
Ano ang magandang LCP?
2.5 segundo o mas mababa para sa hindi bababa sa 75% ng mga page load, ayon sa web.dev. Mahina na ang lampas sa 4 segundo.
Bakit walang real-user data para sa site ko?
Kasama lang sa Chrome UX Report ang mga origin na pampublikong natutuklasan at may sapat na bisita mula sa mga user ng Chrome na nagbabahagi ng usage statistics. Maraming maliit na site ang hindi umaabot sa antas na iyon; ipinapakita pa rin ng lab test kung ano ang dapat ayusin.
Bakit sa mabagal na phone sumusubok sa halip na sa desktop?
Dahil doon unang lumilitaw ang mga problema. Itinatago ng mabilis na laptop ang mabibigat na larawan at script na nagkakahalaga ng ilang segundo sa mid-range na phone, at ginagamit ng Lighthouse ang parehong phone profile para sa mga mobile test nito.
Ano ang nangyari sa First Input Delay?
Pinalitan ng Interaction to Next Paint (INP) ang First Input Delay bilang Core Web Vital noong Marso 2024. Tinitingnan ng INP ang pagkaantala ng mga interaction sa buong pagbisita, hindi lang ang una.
Mga sanggunian
- web.dev: Web Vitals(magbubukas sa bagong tab)
- web.dev: Largest Contentful Paint (LCP)(magbubukas sa bagong tab)
- web.dev: Cumulative Layout Shift (CLS)(magbubukas sa bagong tab)
- web.dev: Interaction to Next Paint (INP)(magbubukas sa bagong tab)
- web.dev: Total Blocking Time (TBT)(magbubukas sa bagong tab)
- Chrome for Developers: Chrome UX Report(magbubukas sa bagong tab)
- Lighthouse: Network throttling (paglilimita sa bilis ng network)(magbubukas sa bagong tab)
Mga kaugnay na tool
- TeknikalLibreng Website AuditIsang scan para sa accessibility, SEO, bilis, conversion, seguridad at email setup, kasama ang pinakamahahalagang natuklasan sa bawat bahagi.Buksan ang tool
- SEOSEO Checker ng WebsiteHanapin sa iyong mga pangunahing page ang mga technical SEO na problema na pumipigil sa paglabas nila sa search o nagpapapangit sa itsura nila sa mga resulta.Buksan ang tool
- SEOMeta Tag CheckerMakita ang title, meta description, canonical, robots, Open Graph at iba pang head tag ng anumang page, kasama ang preview sa search at sa social media.Buksan ang tool
Kailangan mo ba ang mga solusyon, hindi lang ang mga natuklasan?
Nagsisimula ang Ulat sa Bilis ng Website ($55, isahang bayad) sa buong libreng scan at nagdadagdag ng mas maraming page, ng pagbabagong gagawin para sa bawat natuklasan, ng PDF at ng mga re-test para matiyak ang mga inayos mo.