Shiny

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.

1RinUlRusZ1GDsDmqFdHJsQ

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 name, entryType, startTime and duration.

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.

1ZWxzLRVedAbOufl I8FWtg


Shiny

Experienced JavaScript / Node.js engineer & team lead.
Twitter Facebook Medium LinkedIn GitHub Email