Two ways to measure your assets loading speed
March 31, 2019 #performance
Many of you may know how to measure your site loading speed. For example, you can use chrome devtools’ performance, lighthouse or GTmetrix. What if you have to measure some specified resources loading speed, what will you do?
First, you can use chrome devtools and choose “Network” panel and apply some filter (e.g. domain filter or keyword filter) to measure the loading speed.
Second, you can use Performance API to get the raw data of page load information. Then you can use
getEntriesByType("resources") to get resources’ information (array of PerformanceEntry). PerformanceEntry contains
For example, I have to measure the average of product image loading speed which URL pathname contains
/products/image/. I can write below script and paste and exec it in the console.
resources = window.performance.getEntriesByType("resource") images = resources.filter( r => r.initiatorType === "img" && /products\/image/.test(r.name) ) total = images.reduce((acc, r) => acc + r.duration, 0) avg = total / images.length console.log(avg)
As you can see, the average product image loading speed is 223.9ms.