Nagbibigay ang Page Performance ng instant na pangkalahatang-ideya ng performance ng anumang webpage — load timing metrics (FCP, DOMContentLoaded, full load, TTI), DOM statistics (bilang ng elemento, lalim ng nesting, event listeners), at isang resource breakdown na nagpapakita ng bilang at laki ng JavaScript, CSS, images, fonts, at iba pang assets. Ang isang color-coded na performance score ay nagbibigay ng mabilis na health indicator.
Ang performance profiling gamit ang Lighthouse o WebPageTest ay nagbibigay ng malalim na pagsusuri ngunit nangangailangan ng oras at gumagawa ng napakaraming ulat. Minsan kailangan mo lang ng mabilis na sagot: "Mabilis ba o mabagal ang pahinang ito? Ano ang pinakamalaking problema?" Ibinibigay ng Page Performance ang instant na pangkalahatang-ideya na iyon. Binabasa nito ang timing data mula sa Performance API at Navigation Timing API ng browser (data na nakolekta na — hindi na kailangan ng karagdagang page load) at ipinipresenta ito sa isang malinis, visual na dashboard. Ipinapakita ng itaas na seksyon ang mga pangunahing timing metric: First Contentful Paint (kung kailan lumabas ang unang nilalaman), DOMContentLoaded (kung kailan natapos ang pag-parse ng HTML), Full Load (kung kailan natapos ang lahat ng resources), at Time to Interactive (kung kailan naging matutugunang ang pahina). Ang bawat metric ay may kulay — berde para sa mabilis, dilaw para sa katamtaman, pula para sa mabagal — batay sa mga threshold ng Web Vitals. Sa ibaba nito, ang isang resource breakdown ay nagpapakita kung gaano karaming bandwidth ang ginagastos sa JavaScript, CSS, images, fonts, at iba pang uri ng resource, na may visual bar charts para sa madaling paghahambing. Ipinapakita ng seksyon ng DOM statistics ang kabuuang bilang ng elemento, maximum na lalim ng nesting, at bilang ng event listener — mga tagapagpahiwatig ng kumplikasyon ng DOM na nakakaapekto sa rendering performance.
Ipinapakita ang First Contentful Paint (FCP), DOMContentLoaded, Full Page Load, at Time to Interactive (TTI) — ang apat na pinakamahalagang performance metric. Ang bawat isa ay may kulay: berde (mabilis), dilaw (katamtaman), pula (mabagal) batay sa mga itinakdang threshold ng Web Vitals.
Visual bar chart na nagpapakita ng bilang at kabuuang laki ng bawat uri ng resource: JavaScript files, CSS stylesheets, images, fonts, at iba pang assets. Agad na makita kung aling uri ng resource ang pinaka-malaking kontribusyon sa bigat ng pahina.
Ipinapakita ang kabuuang bilang ng DOM element, maximum na lalim ng nesting, at kabuuang bilang ng event listener. Ang malalaking DOM (2000+ na elemento) at malalim na nesting (15+ na antas) ay naka-flag bilang mga potensyal na performance bottleneck.
Ang isang score na 0-100 ay nagbubuod ng kalusugan ng performance ng pahina, na may kulay na berde (85+), dilaw (50-84), o pula (0-49). Batay sa weighted na kombinasyon ng mga timing metric at kahusayan ng resource.
Ipinapakita ang pinagsamang laki ng lahat ng na-download na resource sa MB. Hinahati ayon sa kategorya para makita mo na 842 KB ay JavaScript, 245 KB ay images, at 128 KB ay CSS — na tinutukoy ang mga pinakamabigat na kontribyutor.
Binabasa ang performance data mula sa Performance API ng browser — data na nakolekta na sa panahon ng normal na page load. Walang synthetic na muling pagsusuri, walang karagdagang network request, at walang epekto sa performance mula sa pagpapatakbo ng tool.
Buksan ang anumang pahina at makakuha ng instant na pangkalahatang-ideya ng performance. Mabilis ba (berdeng score), katamtaman (dilaw), o mabagal (pula)? Sinasagot ng dashboard ito sa loob ng wala pang isang segundo — hindi na kailangang hintayin ang Lighthouse.
Kung mabagal ang pahina, ipinapakita ng resource breakdown kung bakit. 1.2 MB ng JavaScript? Iyon ang bottleneck. 800 KB ng mga hindi na-optimize na larawan? Iyon ang solusyon. Ginagawang malinaw ng visual breakdown ang mga pinakamabigat na kontribyutor.
Patakbuhin ang Page Performance bago gumawa ng mga optimization, itala ang mga metric. Gumawa ng mga pagbabago, i-reload, at patakbuhin muli. Ihambing ang FCP, load time, at kabuuang bigat ng pahina para tiyakin na ang iyong mga optimization ay nagkaroon ng inaasahang epekto.
Patakbuhin ang Page Performance sa iyong site at sa mga site ng iyong mga kakumpitensya. Ihambing ang mga load time, bigat ng pahina, at distribusyon ng resource. Nagpapadala ba ang mga kakumpitensya ng mas kaunting JavaScript? Mas maayos ba ang pag-optimize ng kanilang mga larawan?
Patakbuhin ang tool sa mga pangunahing pahina nang regular sa panahon ng development. Kung bumaba ang performance score o biglang tumaas ang bigat ng pahina, nagdagdag ka ng regression — huwag hayaang makarating ito sa production.
Buksan ang DevSuite Pro floating dock at i-click ang icon ng Page Performance. Agad na lumalabas ang dashboard na may performance data para sa kasalukuyang page load.
Suriin ang apat na pangunahing timing metric sa itaas: FCP, DOMContentLoaded, Full Load, at TTI. Ang mga berdeng halaga ay mabilis, ang dilaw ay katamtaman, ang pula ay nangangailangan ng pagpapabuti.
Tingnan ang resource bar chart para makita kung aling uri ng asset ang pinakamabigat. Ang JavaScript ay madalas ang pinakamalaking kontribyutor — kung ang JS ay higit sa 500 KB, maaaring sulit ang code-splitting o lazy-loading.
Suriin ang mga DOM statistics. Kung ang bilang ng elemento ay higit sa 1500 o ang lalim ng nesting ay higit sa 15, isaalang-alang ang pagpapasimple ng markup para mapabuti ang rendering performance.
Ang pangkalahatang score ay nagbibigay ng mabilis na benchmark. Patakbuhin ang tool bago at pagkatapos ng mga optimization para sukatin ang pagpapabuti.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
