{"id":4736,"date":"2024-04-29T10:30:40","date_gmt":"2024-04-29T03:30:40","guid":{"rendered":"https:\/\/dev.artru.net\/?p=4736"},"modified":"2024-04-29T10:30:40","modified_gmt":"2024-04-29T03:30:40","slug":"cach-ma-toi-kiem-tra-toc-do-website","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/cach-ma-toi-kiem-tra-toc-do-website\/","title":{"rendered":"How I test website speed"},"content":{"rendered":"<p>I guess most people use Lighthouse or Google PageSpeed Insights to evaluate the performance speed of their website.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1007\" height=\"774\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Blank-ARTRU.png\" alt=\"Blank ARTRU\" class=\"wp-image-4755\"\/><figcaption class=\"wp-element-caption\">Blank ARTRU<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Looking green is nice, isn&#039;t it? But wait, stop for about 5 seconds. Is the index given by Lighthouse really accurate?<\/p>\n\n\n\n<p>At the above website though there are scores <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">100<\/mark> Absolutely but it&#039;s just a website without any content or images except a single line of text. So why do people rely on that score to judge that it affects SEO?<\/p>\n\n\n\n<p>The next example that I measured shows the results of 2 websites FPTShop and Lazada. Do you think website number 1 or 2 is better?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1901\" height=\"917\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/FPTShop-Lazada-PageSpeed-Insights.png\" alt=\"FPTShop Lazada PageSpeed Insights\" class=\"wp-image-4748\"\/><figcaption class=\"wp-element-caption\">FPTShop Lazada PageSpeed Insights<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Although FPTShop&#039;s left web performance score is up to 97 points, Core Vitals is <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color artru-notranslate has-vivid-red-color\" data-no-translation=\"\" data-no-auto-translation=\"\">\"Failed\"<\/mark>. And Lazada only has 33 points <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color artru-notranslate has-vivid-green-cyan-color\" data-no-translation=\"\" data-no-auto-translation=\"\">\"Passed\"<\/mark> new or good.<\/p>\n\n\n\n<p>In short, in my opinion, a low performance score does not mean the website is slow. But Core Vitals points <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color artru-notranslate has-vivid-green-cyan-color\" data-no-translation=\"\" data-no-auto-translation=\"\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color artru-notranslate has-vivid-red-color\" data-no-translation=\"\" data-no-auto-translation=\"\">\"Failed\"<\/mark><\/mark> then the website is definitely having problems.<\/p>\n\n\n\n<p>Since Google updated the Core Vitals index, the way to test website speed has also changed. I&#039;m not sure my measurement method is 100% accurate, but in my personal opinion, it gives quite relative results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Download the Core Vitals utility<\/h2>\n\n\n\n<p>Instead of waiting for the amount of traffic to be large enough, parameters will appear on PageSpeed Insights. We can use a few utilities on the Chrome app store to proactively check Core Vitals scores.<\/p>\n\n\n\n<p>Currently I am using these 2 utilities<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/chromewebstore.google.com\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\" target=\"_blank\" rel=\"noreferrer noopener\">Web Vitals<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/chromewebstore.google.com\/detail\/core-web-vitals-visualize\/mcffmgagphgpgkdclllnilokablhjcge\" target=\"_blank\" rel=\"noreferrer noopener\">Core Web Vitals Visualizer<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-vivid-red-color has-black-background-color has-text-color has-background has-link-color wp-elements-ba7698c9f19dde73b88dd0b471c0da7e\">A small note: enable the option for these 2 extensions to operate in &quot;incognito mode&quot;.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"781\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Cho-phep-Extension-chay-o-che-do-an-danh.png\" alt=\"Allow Extension to run in incognito mode\" class=\"wp-image-4801\"\/><figcaption class=\"wp-element-caption\">Allow Extension to run in incognito mode<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 2: Use Developer tools (F12)<\/h2>\n\n\n\n<p>Developer tools is a fairly powerful tool built into the Chrome browser. Here you can check Lighthouse directly without having to go to the PageSpeed Insights website.<\/p>\n\n\n\n<p>Additionally, you can change the screen size to resemble the actual device. Or change network bandwidth parameters. Applying the two things mentioned above, I will customize both Mobile and Desktop devices to look like a bot that PageSpeed Insights is using.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Customize 2 screen sizes for Mobile and Desktop<\/h3>\n\n\n\n<p>At the Developer tools interface, click on the icon <code data-no-translation=\"\" data-no-auto-translation=\"\">Toggle device toolbar<\/code> or press the keyboard shortcut <code data-no-translation=\"\" data-no-auto-translation=\"\">Ctrl+Shift+M<\/code> to open the device screen size customization toolbar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1266\" height=\"861\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Toggle-device-toolbar.png\" alt=\"Toggle device toolbar\" class=\"wp-image-4769\"\/><figcaption class=\"wp-element-caption\">Toggle device toolbar<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Click on the bar <code data-no-translation=\"\" data-no-auto-translation=\"\">Dimensions<\/code> \u2192 <code data-no-translation=\"\" data-no-auto-translation=\"\">Edit<\/code><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"157\" height=\"209\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Edit-Dimensions.png\" alt=\"Edit Dimensions\" class=\"wp-image-4771\"\/><figcaption class=\"wp-element-caption\">Edit Dimensions<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Find and check the box <code data-no-translation=\"\" data-no-auto-translation=\"\">Moto G Power<\/code> to set up for Mobile screen.<\/p>\n\n\n\n<p>Click the button <code data-no-translation=\"\" data-no-auto-translation=\"\">Add custom device<\/code> \u2192 Fill in the device name <code data-no-translation=\"\" data-no-auto-translation=\"\">Desktop<\/code> \u2192 fill screen size at 1350x940 ratio \u2192 item <code data-no-translation=\"\" data-no-auto-translation=\"\">User agent string<\/code> select <code data-no-translation=\"\" data-no-auto-translation=\"\">Desktop<\/code> \u2192 then press <code data-no-translation=\"\" data-no-auto-translation=\"\">Save<\/code>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"489\" height=\"744\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Emulated-Devices.png\" alt=\"Emulated Devices\" class=\"wp-image-4773\"\/><figcaption class=\"wp-element-caption\">Emulated Devices<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Customize network speed for Mobile and Desktop<\/h3>\n\n\n\n<p>Also on the Developer tools interface, click on the item <code data-no-translation=\"\" data-no-auto-translation=\"\">Network<\/code> in the top bar \u2192 click <code data-no-translation=\"\" data-no-auto-translation=\"\">No throttling<\/code> \u2192 <code data-no-translation=\"\" data-no-auto-translation=\"\">Add<\/code> \u2192 <code data-no-translation=\"\" data-no-auto-translation=\"\">Add custom profile...<\/code><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"452\" height=\"226\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Network-Developer-tools.png\" alt=\"Network Developer tools\" class=\"wp-image-4775\"\/><figcaption class=\"wp-element-caption\">Network Developer tools<\/figcaption><\/figure>\n<\/div>\n\n\n<p><code data-no-translation=\"\" data-no-auto-translation=\"\">MOBILE download: 1638 kbit\/s, Upload: 1638 kbit\/s, Latency: 150ms<\/code><\/p>\n\n\n\n<p><code data-no-translation=\"\" data-no-auto-translation=\"\">DESKTOP download: 10240 kbit\/s, Upload: 10240 kbit\/s, Latency: 40ms<\/code><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"264\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Network-Throttling-Profiles.png\" alt=\"Network Throttling Profiles\" class=\"wp-image-4777\"\/><figcaption class=\"wp-element-caption\">Network Throttling Profiles<\/figcaption><\/figure>\n<\/div>\n\n\n<p>At this step, you will wonder where you got the size and network speed parameters. Then my answer is from the PageSpeed Insights tool itself. It&#039;s here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"141\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Network-Throttling-PageSpeed-Insights.png\" alt=\"Network Throttling PageSpeed Insights\" class=\"wp-image-4780\"\/><figcaption class=\"wp-element-caption\">Network Throttling PageSpeed Insights<\/figcaption><\/figure>\n<\/div>\n\n\n<p>These parameters will certainly change in the future, so you need to update according to Google to get the most accurate results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Check parameters<\/h2>\n\n\n\n<p>To bring the most accurate results, I will divide into 2 cases: Mobile and Desktop. Based on the parameters set above, we will choose to synchronize according to each separate device type.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open an incognito tab to test the website like a real user.<\/li>\n\n\n\n<li>Choose Mobile + network screen size, also from Mobile. Similar setup for Desktop case.<\/li>\n\n\n\n<li>Once setup is complete, you can visit the website to see how your website actually loads.<\/li>\n\n\n\n<li>If the utility installed in step 1 appears green, your website has met the requirements.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1040\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2024\/04\/Kiem-tra-thong-so-website.gif\" alt=\"Check website parameters\" class=\"wp-image-4793\"\/><figcaption class=\"wp-element-caption\">Check website parameters<\/figcaption><\/figure>\n<\/div>\n\n\n<p>In addition, you also need to check your load time <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color artru-notranslate has-luminous-vivid-orange-color\" data-no-translation=\"\" data-no-auto-translation=\"\">DOMContentLoaded<\/mark> and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color artru-notranslate has-pale-cyan-blue-color\" data-no-translation=\"\" data-no-auto-translation=\"\">Load<\/mark> at the bottom. I don&#039;t know what this parameter is. I usually take 3 seconds as the standard, however if the website contains large images or a complex layout it will definitely take longer, as long as it&#039;s not too long.<\/p>\n\n\n\n<p>So will PageSpeed Insights be abandoned now? No, although it cannot measure website loading speed, it can tell you where the website is having errors. Combining both PageSpeed Insights and Core Vitals helps you overcome loading speed problems without affecting user experience.<\/p>","protected":false},"excerpt":{"rendered":"<p>M\u00ecnh \u0111o\u00e1n h\u1ea7u h\u1ebft m\u1ecdi ng\u01b0\u1eddi \u0111\u1ec1u s\u1eed d\u1ee5ng Lighthouse hay Google PageSpeed Insights \u0111\u1ec3 \u0111\u00e1nh gi\u00e1 t\u1ed1c \u0111\u1ed9 hi\u1ec7u su\u1ea5t c\u1ee7a website. Nh\u00ecn xanh xanh l\u00e0 kho\u00e1i r\u1ed3i \u0111\u00fang [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4804,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-4736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/4736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=4736"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/4736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/4804"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=4736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=4736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=4736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}