Name: 網站開發教程 - 衡量性能 (Web Development Tutorial - Measuring performance)
Uploaded: 2023-01-25T18:00:45.000Z
Duration: 9 min 13 s

- [Morten] Most aspects of web performance

for comparison and analysis and iteration.

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

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

and online tools you can use either for free

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

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

is to use several different performance monitoring tools,

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

and then compare, contrast and analyze when possible.

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

These tools fall under two main categories:

browser tools and hosted third-party tools.

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

The first one exists inside the Chrome browser.

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

If you open the Developer Tools for Chrome,

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

for your site and it also gives you a long list

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

of suggestions on how to improve the performance

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

to test on a mobile device or a desktop device.

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

then the browser will mimic a mobile device,

so small screen, slower load times and all that.

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

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

This is a site that lives somewhere on the web

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

but you can also run Lighthouse on a locally hosted site

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

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

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。

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

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

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

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

and there's too much cumulative layout shift,

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

meaning things are moving too much around

we get a list here of opportunities, and diagnostics.

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

include eliminate render-blocking resources.

I can see the render-blocking resource in question

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

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

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

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

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

and WebP often provide better compression

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

And that just means somewhere in the site,

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

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

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

at seeing at a glance where the performance enhancements

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

It gives you good recommendations on what to do.

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

so that you are downloading the site from scratch

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

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

meaning it's multiplexing and loading resources

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

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

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

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

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

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

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

字幕列表影片播放

網站開發教程 - 衡量性能 (Web Development Tutorial - Measuring performance)

content

slightly

interact

scratch