- [Morten] Most aspects of web performance

- [Morten]網絡性能的大部分方面

can be measured in a consistent way

可以用一致的方式來衡量

for comparison and analysis and iteration.

用於比較和分析以及迭代。

There are a myriad of tools out there for this purpose,

有無數的工具可以達到這個目的。

including tools built into your browser

包括瀏覽器中內置的工具

and online tools you can use either for free

和在線工具，你可以免費使用

or for a fee.

或收取費用。

Different tools give you different types of feedback,

不同的工具給你不同類型的反饋。

and because they exist in different locations

並且因為它們存在於不同的地點

on different stacks and provide different types of services,

在不同的堆棧上，提供不同類型的服務。

they also give you slightly different results compared

他們也會給你帶來略微不同的結果，相比之下

to one another.

彼此之間的關係。

For this reason, the best practice

出於這個原因，最佳做法是

is to use several different performance monitoring tools,

是使用幾個不同的性能監測工具。

collect the data from all of them

收集所有的數據

and then compare, contrast and analyze when possible.

然後在可能的情況下進行比較、對比和分析。

These tools fall under two main categories:

這些工具主要分為兩類。

browser tools and hosted third-party tools.

瀏覽器工具和託管的第三方工具。

Let's look at the browser tools first.

我們先來看看瀏覽器工具。

There are two main types of tools here.

這裡主要有兩種類型的工具。

The first one exists inside the Chrome browser.

第一個存在於Chrome瀏覽器內部。

If you open the Developer Tools for Chrome,

如果你打開Chrome的開發者工具。

and go to the far right-hand side

並轉到最右邊的位置

of the Developer Tools,

的開發工具。

there's a button called Lighthouse.

有一個叫Lighthouse的按鈕。

This tool generates a performance report

該工具可生成一份性能報告

for your site and it also gives you a long list

為你的網站，它也給你一個長長的列表

of suggestions on how to improve the performance

關於如何改進性能的建議

of your site.

你的網站的。

It also tests for other things,

它還測試其他東西。

Progressive Web Apps, best practices,

漸進式網絡應用程序，最佳實踐。

accessibility and SEO.

可訪問性和SEO。

And you can choose whether you want

而且你可以選擇是否要

to test on a mobile device or a desktop device.

以在移動設備或桌面設備上進行測試。

If you choose mobile,

如果你選擇移動。

then the browser will mimic a mobile device,

則瀏覽器將模仿移動設備。

so small screen, slower load times and all that.

是以，小螢幕、較慢的加載時間和所有這些。

So I'm going to generate a report

是以，我將生成一份報告

just to see what's going on on this site

只是想看看這個網站上發生了什麼事

that I'm running right now.

我現在正在運行的。

This is a site that lives somewhere on the web

這是一個住在網絡上某處的網站

but you can also run Lighthouse on a locally hosted site

但你也可以在一個在地託管的網站上運行Lighthouse

on your computer if you want to.

如果你想的話，可以在你的電腦上進行。

What I get in response here

我在這裡得到的迴應是

is a performance score of 84.

是一個84分的表現。

This is good but not great.

這很好，但不是很好。

Ideally, I want to get as close as possible to 100.

理想情況下，我希望儘可能地接近100。

I want it to at least be in the green, so over 90.

我希望它至少是綠色的，所以超過90。

To fix that, I can now scroll down

為了解決這個問題，我現在可以向下滾動

and see what's slowing my site down.

並看看是什麼拖累了我的網站。

Well, first off, I can see there's some issues.

嗯，首先，我可以看到有一些問題。

First Contentful Paint is too slow.

首先Contentful Paint太慢了。

Largest Contentful Paint is too slow

最大的Contentful Paint太慢了

and there's too much cumulative layout shift,

而且有太多的累積性佈局轉變。

meaning things are moving too much around

意思是說，事物的運動量太大

as the page is loaded.

隨著頁面的加載。

Scrolling further down,

再往下滾動。

we get a list here of opportunities, and diagnostics.

我們在這裡得到了一個機會的清單，以及診斷方法。

So the opportunities here

是以，這裡的機會

include eliminate render-blocking resources.

包括消除阻礙渲染的資源。

If I open that,

如果我打開那個。

I can see the render-blocking resource in question

我可以看到問題中的阻斷渲染的資源

is Google Fonts.

是谷歌字體。

You can also see it says server images in next-gen formats.

你也可以看到它說的是下一代格式的服務器影像。

And if we open up, it'll say image formats

如果我們打開，它將顯示圖像格式

like JPEG 2000, JPEG XR,

如JPEG 2000，JPEG XR。

and WebP often provide better compression

和WebP通常提供更好的壓縮

than PNGs and JPEGs.

比起PNG和JPEG來，它更有優勢。

And finally at the bottom here,

最後在這裡的底部。

we have remove unused JavaScript.

我們已經刪除了未使用的JavaScript。

And that just means somewhere in the site,

而這只是意味著在網站的某個地方。

there's JavaScript being loaded that isn't being used,

有的JavaScript正在加載，但沒有被使用。

which is a waste of resources.

這是對資源的浪費。

So the Lighthouse report is really good

所以燈塔的報告真的很好

at seeing at a glance where the performance enhancements

一目瞭然地看到性能提升的地方。

of your site can be.

你的網站可以。

It gives you good recommendations on what to do.

它給你提供了很好的建議，告訴你該怎麼做。

If you want to dig further into exactly

如果你想進一步挖掘究竟

what is going on in your site,

在你的網站上發生了什麼。

you can also run the network monitor.

你也可以運行網絡監視器。

You open the network monitor,

你打開網絡監視器。

make sure you click disable cache

確保你點擊禁用緩存

so that you are downloading the site from scratch

以便於你從頭開始下載網站

and then you just reload the page.

然後你就重新加載頁面。

What you get here is a waterfall

你在這裡得到的是一個瀑布

of every single resource

的每一項資源

that's being downloaded from the site

正在從網站上下載的

and you can see right away

而且你可以馬上看到

how it's been downloaded.

它是如何被下載的。

On this case, the site is running HTTP/2,

在這種情況下，該網站正在運行HTTP/2。

meaning it's multiplexing and loading resources

意味著它正在複用和加載資源

as fast as they become available.

一旦有了這些資訊，就會很快得到。

And we can see here

而我們在這裡可以看到

that it takes quite a bit of time

它需要相當多的時間

for everything to load.

為所有的東西加載。

For example, we have this file here called vendor.js.

例如，我們這裡有這個文件，叫做vendor.js。

Now, this is the file that Lighthouse said has a lot

現在，這個文件是Lighthouse說的，有很多

of unused code.

的未使用的代碼。

And we can see it takes quite a while to load,

我們可以看到它需要相當長的時間來加載。

and there's a lot of execution going on here too.

而且這裡也有很多執行力的問題。

Further down, we have main.js.

再往下，我們有main.js。

If you hover over any of these,

如果你將鼠標懸停在其中任何一個地方。

you get a breakdown of how long it takes

你會得到一份所需時間的明細表

for queuing, how long it was stalled,

對於排隊，它被停滯了多長時間。

how long it took for the request to be sent

發送請求所需的時間

and how much wait time happened before it came back,

以及在它回來之前發生了多少等待時間。

how long it take to download.

下載需要多長時間。

So here you see, for example,

是以，在這裡你看到，比如說。

it took 237.99 milliseconds

花了237.99毫秒

between the request was sent to the server

請求被髮送到服務器之間

and the response came back.

並得到了迴應。

And then the actual download

然後是實際下載

was only 1.49 milliseconds.

僅為1.49毫秒。

If we look at the top one here,

如果我們看一下這裡最上面的一個。

this is the HTML document,

這就是HTML文檔。

you can also see there's a very slow start

你也可以看到有一個非常緩慢的開始

on the server.

在服務器上。

So the server waited for 1.48 milliseconds

是以，服務器等待了1.48毫秒

before anything happened,

在任何事情發生之前。

and then we waited 151 milliseconds

然後我們等待了151毫秒的時間

before the file actually got downloaded.

在文件真正被下載之前。

So the total execution of this was 153.9 milliseconds,

是以，這個的總執行時間是153.9毫秒。

which is a very long time.

這是一個非常長的時間。

That means that the server that it's running on

這意味著，它所運行的服務器

is not all that fast.

並不是那麼快。

If you want to go even deeper

如果你想更深入地瞭解

into what's going on,

到發生的事情。

you can also go to the performance monitor.

你也可以進入性能監控。

Now, the performance monitor tells you

現在，性能監視器告訴你

about how the scripts and everything else on the site

關於網站上的腳本和其他東西是怎樣的

are actually performing

實際正在執行

but it's worth knowing about

但值得了解的是

because it gives you a lot of details

因為它給了你很多的細節

about what's going on in your site.

關於你的網站正在發生的事情。

Again, to run it, you need to go over here,

同樣，要運行它，你需要到這裡來。

clear everything and then click on start profiling

清除一切，然後點擊開始分析

and reload page.

並重新加載頁面。

Now the page will be reloaded into the browser

現在，該頁面將被重新加載到瀏覽器中

and the profiler starts.

並啟動剖析器。

Now, the profiler's a fairly advanced tool,

現在，分析器是一個相當先進的工具。

and you can use it to do things

而且你可以用它來做事情

like profile existing behaviors,

像簡介現有的行為。

so you can go in and mess around with the site

這樣你就可以進入並在網站上搗亂了。

and then see what is happening.

然後看看正在發生什麼。

But what you get here is now very detailed information

但現在你在這裡得到的是非常詳細的資訊

about how the page is loaded

關於頁面的加載方式

and what kind of activity happens as it's loaded.

以及當它被加載時，會發生什麼樣的活動。

So you can see, there's 20 milliseconds for loading,

所以你可以看到，有20毫秒的加載時間。

then 83 for scripting

然後，83個用於編寫腳本

and 38 for rendering and 12 for painting.

和38個用於渲染，12個用於繪畫。

And you can see here in the breakdown exactly

而你可以在這裡看到，在細目中確切地看到

when different things happen

當不同的事情發生時

and what is happening, and so on.

以及正在發生的事情，等等。

So there's a lot of information here.

所以這裡有很多資訊。

Lighthouse exists in Chrome,

Lighthouse存在於Chrome中。

network monitor and performance monitor exist

存在網絡監視器和性能監視器

in all modern browsers, including Firefox,

在所有現代瀏覽器中，包括Firefox。

Edge and so on.

邊緣等等。

The second category of performance monitoring tools

第二類性能監測工具

is hosted third-party tools.

是託管的第三方工具。

The most used example here is PageSpeed Insights.

這裡使用最多的例子是PageSpeed Insights。

Now, if we go to PageSpeed Insights,

現在，如果我們轉到PageSpeed Insights。

you'll notice, it looks exactly the same

你會發現，它看起來完全一樣

as Lighthouse, just that it's on the web.

與Lighthouse一樣，只是它在網上。

That's because it is.

那是因為它是。

The difference is Lighthouse runs on your computer.

不同的是，Lighthouse在你的電腦上運行。

PageSpeed Insights runs on some server

PageSpeed Insights在一些服務器上運行

that Google has.

這就是谷歌所擁有的。

So you get slightly different data

所以你得到的數據略有不同

and you get slightly more reliable data

而你得到的數據稍微可靠一些

because it's also compared to other data that they have.

因為這也是與他們擁有的其他數據相比較。

But this is a way you can run Lighthouse

但這是一種你可以運行燈塔的方式

on any website, even if you don't have Chrome

在任何網站上，即使你沒有使用Chrome瀏覽器

and you get the same type of breakdown,

而你得到的是相同類型的故障。

same type of tips and everything else.

同一類型的提示和其他一切。

One cool thing is the PageSpeed Insights screenshots

一個很酷的事情是PageSpeed Insights的截圖

are not reliant on the browser window.

是不依賴於瀏覽器窗口的。

You may have noticed in my Lighthouse output here

你可能已經注意到在我這裡的燈塔輸出中

that the screenshots are based

這些截圖是基於

on the size of my browser window,

在我的瀏覽器窗口的大小上。

so right now, we're just getting the hamburger menu.

所以現在，我們只是得到了漢堡包的菜單。

Well, in PageSpeed Insights,

嗯，在PageSpeed Insights。

you get the actual screens.

你會得到實際的螢幕。

You can see what's going on.

你可以看到發生了什麼事。

Another popular tool is the WebPageTest website.

另一個流行的工具是WebPageTest網站。

Again, here you just enter the website you want to test,

同樣，在這裡你只需輸入你要測試的網站。

and you get a report and return,

而你得到的是一份報告和回報。

and you get a full breakdown of the waterfall,

你就會得到瀑布的全部細節。

you get different runs

你得到不同的運行

so you can run the same site against different browsers,

所以你可以在不同的瀏覽器上運行同一個網站。

different configurations, different locations

不同的配置，不同的地點

to see how it differs.

來看看它有什麼不同。

So the difference between run one and run two here

是以，這裡的運行一和運行二之間的區別是

is run one is the first load.

是運行一個是第一個負載。

Run two is the cached load,

運行二是緩存的負載。

so the website is already being cached inside the system.

所以該網站已經在系統中被緩存了。

And you get a ton of information.

而且你會得到大量的資訊。

Regardless of what testing procedure you use,

無論你使用什麼測試程序。

browser tools, hosted third-party tools

瀏覽器工具，託管的第三方工具

or something else,

或其他東西。

the actual test results always include page speeds scores

實際的測試結果總是包括頁面速度的分數

and other details.

和其他細節。

They also show you key indicators,

他們還向你展示關鍵指標。

describing the user experience,

描述了用戶體驗。

most important of which are First Paint,

其中最重要的是First Paint。

the time it takes before the users sees changes happening

用戶看到變化發生前的時間

in the browser.

在瀏覽器中。

Largest Contentful Paint,

最大的內容豐富的油漆。

the time it takes before the user sees content,

用戶看到內容之前所需的時間。

so text, images, something else in the browser.

是以，文本、影像、瀏覽器中的其他東西。

First Meaningful Paint,

第一次有意義的繪畫。

the time it takes before the user sees content

用戶看到內容之前所需的時間

that is actually meaningful.

這實際上是有意義的。

So when above the full content

是以，當上面的全部內容

and web fonts are loaded

和網絡字體被加載

and the user can derive meaning from what they are seeing.

而用戶可以從他們所看到的東西中獲得意義。

And finally, Time to Interactive,

最後是 "互動時間"。

the time it takes before the content has finished loading

內容加載完畢前所需的時間

and the UI can be interacted with,

和用戶界面可以進行交互。

so the user can actually click on buttons,

所以用戶可以真正點擊按鈕。

fill forms or do whatever else is going to happen on the site.

填寫表格或做其他任何將在網站上發生的事情。

The longer it takes for a site to hit each of these points,

一個網站達到上述每一點所需的時間越長。

the higher the chance of the user either getting annoyed

的機會就越大，用戶要麼感到厭煩

or abandoning the user experience all together.

或完全放棄用戶體驗。

As an example, I'm sure you've experienced visiting a site

作為一個例子，我相信你有過訪問一個網站的經歷

on your computer or mobile device

在你的電腦或移動設備上

and experiencing not being able

並體驗到無法

to click on a button or interact with an input field.

點擊一個按鈕或與一個輸入字段互動。

In that circumstance,

在這種情況下。

you're still waiting for TTI or Time to Interactive,

你還在等待TTI或Time to Interactive。

and that wait can be extremely infuriating.

而這種等待可能是非常令人氣憤的。

When it comes to reliable automated testing,

當涉及到可靠的自動化測試時。

Lighthouse is currently the industry standard

Lighthouse是目前的工業標準

and it's even integrated in other hosted solutions,

而且它甚至被整合到其他託管解決方案中。

like GTmetrix and PageSpeed Insights.

如GTmetrix和PageSpeed Insights。

Lighthouse also gives you other important feedback,

Lighthouse還為你提供其他重要的反饋。

like accessibility testing and recommendations

像無障礙測試和建議

on more performant JavaScript libraries and so on.

在更高性能的JavaScript庫上，等等。

So for ongoing testing during development,

是以，在開發過程中要不斷進行測試。

Lighthouse is by far the quickest

到目前為止，Lighthouse是最快速的

and more reliable route.

和更可靠的路線。

(upbeat music)

(歡快的音樂)