Trang này được dịch bởi Cloud Translation API.

Lighthouse: Tối ưu hoá tốc độ trang web

Tiếng Basques Kayce

Twitter GitHub Lỗi

Sofia Emelianova

GitHub

Mục tiêu hướng dẫn

Hướng dẫn này chỉ cho bạn cách sử dụng Công cụ của Chrome cho nhà phát triển để tìm cách giúp trang web tải nhanh hơn.

Đọc tiếp hoặc xem phiên bản video của hướng dẫn này:

Điều kiện tiên quyết

Bạn phải có kinh nghiệm phát triển web cơ bản, tương tự như nội dung được dạy trong lớp Giới thiệu về Phát triển web này.

Bạn không cần biết gì về hiệu suất tải.

Giới thiệu

Tôi là Tony. Tony rất nổi tiếng trong hội mèo. Anh đã xây dựng một trang web để người hâm mộ có thể tìm hiểu những món ăn anh yêu thích. Người hâm mộ của anh yêu thích trang web, nhưng Tony liên tục nghe những lời phàn nàn rằng trang web tải chậm. Tony yêu cầu bạn giúp anh ấy tăng tốc trang web.

Bước 1: Kiểm tra trang web

Bất cứ khi nào bạn muốn cải thiện hiệu suất tải của trang web, hãy luôn bắt đầu với việc kiểm tra. Quá trình kiểm tra có hai chức năng quan trọng:

Tính năng này sẽ tạo đường cơ sở để bạn đo lường những thay đổi sau đó.
Hướng dẫn này cung cấp các mẹo hữu ích về những thay đổi sẽ có tác động lớn nhất.

Thiết lập

Trước tiên, bạn cần thiết lập một môi trường làm việc mới cho trang web của Tony để sau này có thể thay đổi:

Phối lại dự án của trang web trên Glitch. Dự án mới của bạn sẽ mở ra trong một thẻ. Thẻ này được gọi là thẻ Trình chỉnh sửa.

Tên của dự án thay đổi từ tony thành một tên được tạo ngẫu nhiên. Bây giờ, bạn đã có bản sao mã có thể chỉnh sửa của riêng mình. Sau đó, bạn sẽ thay đổi mã này.
Ở cuối thẻ trình chỉnh sửa, hãy nhấp vào Xem trước > Xem trước trong cửa sổ mới. Bản minh hoạ sẽ mở trong một thẻ mới. Thẻ này được gọi là thẻ minh hoạ. Trang web có thể mất chút thời gian để tải.
Mở Công cụ cho nhà phát triển cùng với bản minh hoạ.

Thiết lập các cột mốc cơ bản

Đường cơ sở là bản ghi về hiệu suất của trang web trước khi bạn thực hiện bất kỳ điểm cải thiện nào về hiệu suất.

Mở bảng điều khiển Lighthouse. Bảng điều khiển khác có thể bị ẩn sau Bảng điều khiển khác.

Lưu ý: Bảng điều khiển này sử dụng công nghệ Lighthouse, một công cụ tự động giúp cải thiện chất lượng của các ứng dụng web.
So khớp các chế độ cài đặt cấu hình của báo cáo Lighthouse với các chế độ cài đặt trên ảnh chụp màn hình. Dưới đây là nội dung giải thích về các tuỳ chọn khác nhau:
- Xoá bộ nhớ. Việc bật hộp kiểm này sẽ xoá tất cả bộ nhớ được liên kết với trang trước mỗi lần kiểm tra. Hãy bật chế độ cài đặt này nếu bạn muốn kiểm tra cách khách truy cập lần đầu trải nghiệm trang web của bạn. Hãy tắt chế độ cài đặt này khi bạn muốn trải nghiệm nhiều lần.
- Chế độ điều tiết mô phỏng (mặc định) . Tuỳ chọn này mô phỏng các điều kiện thông thường của hoạt động duyệt web trên thiết bị di động. Phương thức này được gọi là "mô phỏng" vì Lighthouse không thực sự điều tiết trong quá trình kiểm tra. Thay vào đó, công cụ này chỉ ngoại suy thời gian trang sẽ tải trong điều kiện thiết bị di động. Mặt khác, chế độ cài đặt Chế độ điều tiết của DevTools (nâng cao) lại thực sự điều tiết CPU và mạng của bạn, nhưng bạn phải đánh đổi quá trình kiểm tra lâu hơn.
- Chế độ > Điều hướng (Mặc định). Chế độ này phân tích một lượt tải trang và đó là những gì chúng ta cần trong hướng dẫn này. Để biết thêm thông tin, hãy xem phần Ba chế độ.
- Thiết bị > Thiết bị di động. Tuỳ chọn cho thiết bị di động sẽ thay đổi chuỗi tác nhân người dùng và mô phỏng khung nhìn trên thiết bị di động. Tùy chọn trên máy tính để bàn gần như chỉ vô hiệu hóa các thay đổi trên thiết bị di động.
- Danh mục > Hiệu suất. Khi bạn bật một danh mục duy nhất, Lighthouse chỉ tạo báo cáo có tập hợp các yêu cầu kiểm tra tương ứng. Bạn có thể bật các danh mục khác nếu muốn xem các loại đề xuất mà các danh mục đó cung cấp. Việc vô hiệu hoá các danh mục không liên quan sẽ giúp đẩy nhanh quá trình kiểm tra một chút.
Nhấp vào Phân tích tải trang. Sau 10 đến 30 giây, bảng điều khiển Lighthouse sẽ hiển thị cho bạn một báo cáo về hiệu suất của trang web.

Xử lý lỗi trong báo cáo

Nếu bạn gặp lỗi trong báo cáo Lighthouse, hãy thử chạy thẻ minh hoạ trong một cửa sổ ẩn danh (không mở thẻ nào khác). Việc này giúp đảm bảo rằng bạn đang chạy Chrome ở trạng thái sạch. Cụ thể, các Tiện ích của Chrome có thể cản trở quá trình kiểm tra.

Báo cáo có lỗi.

Tìm hiểu báo cáo

Con số ở đầu báo cáo là điểm hiệu suất tổng thể của trang web. Sau đó, khi thực hiện thay đổi đối với mã, bạn sẽ thấy con số này tăng lên. Điểm càng cao thì hiệu suất càng tốt.

Điểm hiệu suất tổng thể.

Chỉ số

Di chuyển xuống mục Chỉ số, rồi nhấp vào Mở rộng chế độ xem. Để đọc tài liệu về một chỉ số, hãy nhấp vào Tìm hiểu thêm....

Phần Chỉ số.

Phần này cung cấp các thông tin đo lường định lượng về hiệu suất của trang web. Mỗi chỉ số cung cấp thông tin chi tiết về một khía cạnh khác nhau của hiệu suất. Ví dụ: Thời điểm hiển thị nội dung đầu tiên cho bạn biết thời điểm nội dung được vẽ lần đầu lên màn hình. Đây là một mốc quan trọng trong nhận thức của người dùng về lượt tải trang, trong khi chỉ số Thời gian tương tác đánh dấu thời điểm trang có vẻ đã sẵn sàng để xử lý hoạt động tương tác của người dùng.

Ảnh chụp màn hình

Tiếp theo là bộ sưu tập ảnh chụp màn hình cho bạn thấy giao diện của trang khi tải.

Ảnh chụp màn hình giao diện trang khi tải.

Cơ hội cải thiện

Tiếp theo là mục Cơ hội cung cấp các mẹo cụ thể về cách cải thiện hiệu suất tải của trang cụ thể này.

Phần Cơ hội.

Nhấp vào một cơ hội để tìm hiểu thêm về cơ hội đó.

$Thông tin khác về cơ hội nén văn bản.$

Hãy nhấp vào Tìm hiểu thêm... để xem tài liệu về lý do tại sao một cơ hội lại quan trọng cũng như các đề xuất cụ thể về cách khắc phục.

Chẩn đoán

Mục Chẩn đoán cung cấp thêm thông tin về các yếu tố ảnh hưởng đến thời gian tải của trang.

Phần Chẩn đoán.

Số lần kiểm tra đạt

Phần Kiểm tra đạt yêu cầu cho bạn biết hiệu quả hoạt động của trang web. Nhấp để mở rộng phần này.

Phần Bài kiểm tra đạt.

Bước 2: Thử nghiệm

Mục Cơ hội trong báo cáo Lighthouse cung cấp cho bạn các mẹo về cách cải thiện hiệu suất của trang. Trong phần này, bạn sẽ triển khai những thay đổi đề xuất đối với cơ sở mã, kiểm tra trang web sau mỗi lần thay đổi để đo lường mức độ ảnh hưởng của thay đổi đó đến tốc độ trang web.

Bật tùy chọn nén văn bản

Báo cáo của bạn cho biết việc bật tính năng nén văn bản là một trong những cơ hội hàng đầu để cải thiện hiệu suất của trang.

Nén văn bản là khi bạn giảm hoặc nén kích thước của một tệp văn bản trước khi gửi qua mạng. Tương tự như vậy, bạn có thể nén thư mục trước khi gửi qua email để giảm kích thước thư mục.

Trước khi bật tính năng nén, bạn có thể kiểm tra theo cách thủ công xem tài nguyên văn bản có được nén hay không.

Mở bảng điều khiển Mạng rồi đánh dấu chọn Cài đặt > Sử dụng hàng yêu cầu lớn.

Cột Kích thước trong bảng điều khiển Mạng hiển thị các hàng yêu cầu lớn.

Mỗi ô Kích thước hiển thị hai giá trị. Giá trị trên cùng là kích thước của tài nguyên được tải xuống. Giá trị dưới cùng là kích thước của tài nguyên chưa nén. Nếu 2 giá trị giống nhau thì tài nguyên sẽ không được nén khi được gửi qua mạng. Trong ví dụ này, giá trị trên cùng và dưới cùng của bundle.js đều là 1.4 MB.

Bạn cũng có thể kiểm tra quá trình nén bằng cách kiểm tra tiêu đề HTTP của tài nguyên:

Nhấp vào bundle.js và mở thẻ Tiêu đề.
Tìm kiếm tiêu đề content-encoding trong phần Tiêu đề phản hồi. Bạn sẽ không thấy mã này, nghĩa là bundle.js chưa được nén. Khi tài nguyên được nén, tiêu đề này thường được đặt thành gzip, deflate hoặc br. Vui lòng xem phần Chỉ thị để biết nội dung giải thích về các giá trị này.

Tôi giải thích như vậy là đủ. Đã đến lúc thực hiện một số thay đổi! Bật tính năng nén văn bản bằng cách thêm một vài dòng mã:

Trong thẻ trình chỉnh sửa, hãy mở server.js và thêm hai dòng (được đánh dấu) sau đây:

...
const fs = require('fs');
const compression = require('compression');

app.use(compression());
app.use(express.static('build'));
...

Nhớ đặt app.use(compression()) trước app.use(express.static('build')).

Lưu ý: Thông thường, bạn phải cài đặt gói compression thông qua npm i -S compression, nhưng việc này đã được thực hiện cho bạn.
Chờ Glitch triển khai bản dựng mới của trang web. Biểu tượng cảm xúc vui vẻ ở góc dưới cùng bên trái biểu thị quá trình triển khai thành công.

Hãy sử dụng quy trình làm việc mà bạn đã tìm hiểu trước đây để kiểm tra xem quá trình nén có đang hoạt động hay không theo cách thủ công:

Quay lại thẻ minh hoạ rồi tải lại trang.

Giờ đây, cột Size (Kích thước) sẽ hiển thị hai giá trị khác nhau cho tài nguyên văn bản như bundle.js. Giá trị trên cùng của 269 KB cho bundle.js là kích thước của tệp được gửi qua mạng và giá trị dưới cùng của 1.4 MB là kích thước tệp chưa nén.
Giờ đây, mục Tiêu đề phản hồi (Response Headers) cho bundle.js sẽ bao gồm tiêu đề content-encoding: gzip.

Chạy lại báo cáo Lighthouse trên trang để đo lường tác động của việc nén văn bản đối với hiệu suất tải của trang:

Mở bảng điều khiển Lighthouse rồi nhấp vào Thực hiện kiểm tra... trên thanh tác vụ ở trên cùng.
Giữ nguyên các chế độ cài đặt như trước, rồi nhấp vào Phân tích tải trang.

Tuyệt vời! Có vẻ như đó là tiến trình. Điểm hiệu suất tổng thể của bạn lẽ ra đã tăng lên, tức là trang web đang tải nhanh hơn.

Nén văn bản trong thực tế

Hầu hết các máy chủ thực sự đều có các bản sửa lỗi đơn giản như thế này để bật tính năng nén! Chỉ cần tìm kiếm cách định cấu hình bất kỳ máy chủ nào mà bạn sử dụng để nén văn bản.

Đổi kích thước hình ảnh

Báo cáo mới của bạn cho thấy rằng việc định kích thước hình ảnh hợp lý là một cơ hội lớn khác.

Việc đổi kích thước hình ảnh giúp tăng tốc thời gian tải bằng cách giảm kích thước tệp hình ảnh. Nếu người dùng đang xem hình ảnh của bạn trên màn hình thiết bị di động rộng 500 pixel thì thực sự không cần gửi hình ảnh có chiều rộng 1500 pixel. Lý tưởng nhất là bạn nên gửi hình ảnh có chiều rộng tối đa là 500 pixel.

Trong báo cáo của bạn, hãy nhấp vào Chọn kích thước hình ảnh phù hợp để xem những hình ảnh nào cần được đổi kích thước. Có vẻ như cả 4 hình ảnh này đều lớn hơn mức cần thiết.
Quay lại thẻ trình chỉnh sửa, mở src/model.js.
Thay thế const dir = 'big' với const dir = 'small'. Thư mục này chứa bản sao của cùng những hình ảnh đã được đổi kích thước.
Kiểm tra lại trang để xem thay đổi này ảnh hưởng đến hiệu suất tải như thế nào.

Có vẻ như thay đổi này chỉ ảnh hưởng một chút đến điểm hiệu suất tổng thể. Tuy nhiên, điểm số này không hiển thị rõ ràng lượng dữ liệu mạng bạn đang tiết kiệm cho người dùng. Tổng kích thước của các ảnh cũ vào khoảng 6,1 MB, trong khi hiện tại chỉ còn khoảng 633 kB. Bạn có thể kiểm tra điều này trên thanh trạng thái ở cuối bảng điều khiển Mạng.

Lượng dữ liệu được chuyển trước và sau khi đổi kích thước hình ảnh.

Đổi kích thước hình ảnh trong thế giới thực

Đối với ứng dụng nhỏ, bạn chỉ cần thay đổi kích thước một lần như thế này là đủ. Nhưng đối với một ứng dụng lớn, rõ ràng điều này là không thể mở rộng. Dưới đây là một số chiến lược để quản lý hình ảnh trong các ứng dụng lớn:

Đổi kích thước hình ảnh trong quá trình xây dựng.
Tạo nhiều kích thước cho mỗi hình ảnh trong quy trình xây dựng rồi sử dụng srcset trong mã. Trong thời gian chạy, trình duyệt sẽ quan tâm đến việc chọn kích thước phù hợp nhất cho thiết bị mà trình duyệt đang chạy. Hãy xem nội dung Hình ảnh có kích thước tương đối.
Sử dụng CDN hình ảnh cho phép bạn linh động thay đổi kích thước hình ảnh khi yêu cầu.
Ít nhất, hãy tối ưu hoá từng hình ảnh. Điều này thường có thể giúp tiết kiệm rất nhiều. Tối ưu hoá là khi bạn chạy một hình ảnh thông qua một chương trình đặc biệt giúp giảm kích thước của tệp hình ảnh. Hãy xem bài viết Tối ưu hoá hình ảnh thiết yếu để biết thêm mẹo.

Loại bỏ các tài nguyên chặn hiển thị

Báo cáo mới nhất của bạn cho biết rằng việc loại bỏ các tài nguyên chặn hiển thị hiện là cơ hội lớn nhất.

Tài nguyên chặn hiển thị là một tệp JavaScript hoặc CSS bên ngoài mà trình duyệt phải tải xuống, phân tích cú pháp và thực thi trước khi có thể hiển thị trang. Mục tiêu là chỉ chạy mã CSS và JavaScript cốt lõi cần thiết để hiển thị trang đúng cách.

Sau đó, nhiệm vụ đầu tiên là tìm mã không cần được thực thi khi tải trang.

Nhấp vào Loại bỏ các tài nguyên chặn hiển thị để xem các tài nguyên đang chặn: lodash.js và jquery.js.
Tuỳ thuộc vào hệ điều hành của bạn, hãy nhấn như sau để mở Trình đơn lệnh:
- Trên máy Mac, hãy Command+Shift+P
- Trên Windows, Linux hoặc ChromeOS, hãy nhấn tổ hợp phím Control+Shift+P
Bắt đầu nhập Coverage và chọn Hiển thị mức độ phù hợp.

Thẻ Phạm vi bao phủ sẽ mở ra trong Ngăn.
Nhấp vào Tải lại. Thẻ Phạm vi bao phủ cung cấp thông tin tổng quan về số lượng mã trong bundle.js, jquery.js và lodash.js đang được thực thi trong khi tải trang.

Ảnh chụp màn hình này cho biết khoảng 74% và 30% tệp jQuery và Lodash không được sử dụng tương ứng.
Nhấp vào hàng jquery.js. Công cụ cho nhà phát triển sẽ mở tệp trong bảng điều khiển Nguồn. Một dòng mã đã được thực thi nếu có thanh màu xanh lục bên cạnh. Thanh màu đỏ bên cạnh một dòng mã có nghĩa là mã đó không được thực thi và chắc chắn không cần thiết khi tải trang.
Cuộn qua mã jQuery một chút. Một số dòng được "thực thi" thực ra chỉ là các nhận xét. Việc chạy mã này thông qua một trình rút gọn giúp loại bỏ nhận xét là một cách khác để giảm kích thước của tệp này.

Tóm lại, khi bạn đang làm việc với mã của riêng mình, thẻ Phạm vi lập chỉ mục có thể giúp bạn phân tích mã theo từng dòng và chỉ gửi mã cần thiết để tải trang.

Các tệp jquery.js và lodash.js có cần thiết để tải trang không? Thẻ Request blocked (Chặn yêu cầu) có thể cho bạn biết điều gì sẽ xảy ra khi không có tài nguyên.

Nhấp vào thẻ Mạng rồi mở lại Trình đơn lệnh.
Bắt đầu nhập blocking rồi chọn Show Request prevent (Hiển thị yêu cầu chặn). Thẻ Yêu cầu chặn sẽ mở ra.
Nhấp vào Thêm hình mở khoá, nhập /libs/* vào hộp văn bản rồi nhấn Enter để xác nhận.
Tải lại trang. Các yêu cầu jQuery và Lodash có màu đỏ, nghĩa là chúng đã bị chặn. Trang vẫn tải và tương tác được, vì vậy, có vẻ như không cần gì thêm đến những tài nguyên này!
Nhấp vào Xoá tất cả các mẫu để xoá mẫu chặn /libs/*.

Nói chung, thẻ Yêu cầu chặn rất hữu ích để mô phỏng cách hoạt động của trang khi không có bất kỳ tài nguyên nào.

Bây giờ, hãy xoá các tham chiếu đến các tệp này khỏi mã và kiểm tra lại trang:

Quay lại thẻ trình chỉnh sửa, mở template.html.

Xoá các thẻ <script> tương ứng:

<head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/libs/lodash.js"></script>
    <script src="/libs/jquery.js"></script>
    <title>Tony's Favorite Foods</title>
</head>

Chờ trang web tạo lại rồi triển khai lại.
Hãy kiểm tra lại trang từ bảng điều khiển Lighthouse. Điểm tổng thể của bạn lẽ ra đã cải thiện trở lại.

Tối ưu hoá đường dẫn kết xuất quan trọng trong thế giới thực

Đường dẫn hiển thị quan trọng đề cập đến mã mà bạn cần tải một trang. Nhìn chung, bạn có thể tăng tốc độ tải trang bằng cách chỉ vận chuyển mã quan trọng trong quá trình tải trang, sau đó tải từng phần mọi nội dung khác.

Rất khó có khả năng bạn sẽ tìm thấy các tập lệnh mà bạn có thể xoá hoàn toàn, nhưng bạn thường sẽ thấy rằng nhiều tập lệnh không cần được yêu cầu trong quá trình tải trang mà có thể được yêu cầu một cách không đồng bộ. Xem phần Sử dụng chế độ không đồng bộ hoặc trì hoãn.
Nếu bạn đang sử dụng một khung, hãy kiểm tra xem khung đó có chế độ sản xuất hay không. Chế độ này có thể sử dụng một tính năng như lắc cây để loại bỏ mã không cần thiết đang chặn lượt hiển thị quan trọng.

Giảm bớt hoạt động của luồng chính

Báo cáo mới nhất của bạn cho thấy một số khả năng tiết kiệm nhỏ trong mục Cơ hội, nhưng nếu bạn cuộn xuống phần Chẩn đoán, thì có vẻ như điểm tắc nghẽn lớn nhất là do quá nhiều hoạt động của luồng chính.

Luồng chính là nơi trình duyệt thực hiện hầu hết các công việc cần thiết để hiển thị một trang, chẳng hạn như phân tích cú pháp và thực thi HTML, CSS và JavaScript.

Mục tiêu là sử dụng bảng điều khiển Performance (Hiệu suất) để phân tích công việc mà luồng chính đang thực hiện trong khi tải trang, đồng thời tìm cách trì hoãn hoặc xoá công việc không cần thiết.

Mở phần Hiệu suất > Cài đặt chụp rồi đặt Mạng thành 3G chậm và CPU thành Giảm tốc độ 6 lần.

Thiết bị di động thường có nhiều hạn chế về phần cứng hơn máy tính xách tay hoặc máy tính để bàn, vì vậy, những cài đặt này cho phép bạn trải nghiệm tải trang như thể bạn đang sử dụng một thiết bị kém mạnh mẽ hơn.
Nhấp vào Tải lại. Công cụ cho nhà phát triển tải lại trang, sau đó tạo hình ảnh về tất cả những việc cần làm để tải trang. Hình ảnh này được gọi là trace.

Dấu vết cho thấy hoạt động theo trình tự thời gian, từ trái sang phải. Các biểu đồ FPS, CPU và NET ở trên cùng cung cấp cho bạn thông tin tổng quan về khung hình/giây, hoạt động của CPU và hoạt động mạng.

Phần Tổng quan của dấu vết.

Bức tường màu vàng mà bạn thấy trong phần Overview (Tổng quan) có nghĩa là CPU đã hoàn toàn bận rộn với hoạt động viết tập lệnh. Đây là một gợi ý cho thấy bạn có thể tăng tốc độ tải trang bằng cách thực hiện ít thao tác JavaScript hơn.

Kiểm tra dấu vết để tìm cách giảm thiểu thao tác trong JavaScript:

Nhấp vào mục Thời gian để mở rộng mục này.

Có một số biện pháp User Timing (Thời gian người dùng) của React, có vẻ như ứng dụng của Tony đang sử dụng chế độ phát triển của React. Việc chuyển sang chế độ sản xuất của React có thể sẽ dễ dàng mang lại một số chiến thắng về hiệu suất.
Nhấp lại vào Thời gian để thu gọn mục đó.
Duyệt qua phần Main (Chính). Phần này hiển thị nhật ký theo thời gian của hoạt động của luồng chính, từ trái sang phải. Trục y (từ trên xuống dưới) cho biết lý do xảy ra sự kiện.

Trong ví dụ này, sự kiện Evaluate Script khiến hàm (anonymous) thực thi, khiến __webpack__require__ phải thực thi, khiến ./src/index.jsx phải thực thi, v.v.
Di chuyển xuống cuối phần Main (Chính). Khi bạn sử dụng một khung, hầu hết hoạt động trên là do khung đó gây ra, thường nằm ngoài tầm kiểm soát của bạn. Hoạt động do ứng dụng của bạn gây ra thường nằm ở dưới cùng.

Trong ứng dụng này, có vẻ như hàm có tên là App đang gây ra nhiều lệnh gọi đến hàm mineBitcoin. Có vẻ như Tony đang dùng thiết bị của người hâm mộ để đào tiền mã hoá...

Lưu ý: Mặc dù các lệnh gọi mà khung thực hiện thường nằm ngoài tầm kiểm soát của bạn, nhưng đôi khi bạn có thể cấu trúc ứng dụng theo cách khiến khung chạy không hiệu quả. Việc sắp xếp lại cấu trúc ứng dụng để sử dụng khung một cách hiệu quả có thể là một cách giảm bớt công việc của luồng chính. Để làm được điều này, bạn cần hiểu rõ về cách khung hoạt động của mình và những loại thay đổi bạn có thể thực hiện trong mã của mình để sử dụng khung hiệu quả hơn.
Mở thẻ Từ dưới lên ở dưới cùng. Thẻ này chia nhỏ những hoạt động chiếm nhiều thời gian nhất. Nếu bạn không thấy gì trong mục Bottom-Up (Từ dưới lên), hãy nhấp vào nhãn cho phần Main.

Phần Bottom-Up (Từ dưới lên) chỉ hiển thị thông tin cho bất kỳ hoạt động hoặc nhóm hoạt động nào mà bạn hiện đã chọn. Ví dụ: nếu bạn nhấp vào một trong các hoạt động mineBitcoin, thì phần Bottom-Up (Từ dưới lên) sẽ chỉ hiển thị thông tin cho một hoạt động đó.

Cột Thời gian tự động cho bạn biết lượng thời gian đã dành trực tiếp cho mỗi hoạt động. Trong trường hợp này, khoảng 82% thời gian luồng chính được dành cho hàm mineBitcoin.

Đã đến lúc xem liệu việc sử dụng chế độ sản xuất và giảm hoạt động JavaScript có tăng tốc độ tải trang hay không. Bắt đầu với chế độ sản xuất:

Trong thẻ trình chỉnh sửa, hãy mở webpack.config.js.
Thay đổi "mode":"development" thành "mode":"production".
Chờ bản dựng mới triển khai.
Kiểm tra lại trang.

Giảm hoạt động JavaScript bằng cách xoá lệnh gọi đến mineBitcoin:

Trong thẻ trình chỉnh sửa, hãy mở src/App.jsx.
Nhận xét về lệnh gọi đến this.mineBitcoin(1500) trong constructor.
Chờ bản dựng mới triển khai.
Kiểm tra lại trang.

Báo cáo Lighthouse sau khi xoá các tác vụ JavaScript không cần thiết.

Như thường lệ, bạn vẫn có một số việc cần làm, chẳng hạn như giảm các chỉ số Thời gian hiển thị nội dung lớn nhất và Điểm số tổng hợp về mức thay đổi bố cục.

Thực hiện ít công việc luồng chính hơn trong thực tế

Nhìn chung, bảng điều khiển Performance (Hiệu suất) là cách phổ biến nhất để tìm hiểu hoạt động mà trang web của bạn thực hiện khi tải và tìm cách xoá hoạt động không cần thiết.

Nếu bạn muốn sử dụng phương pháp giống với console.log(), thì API User Timing cho phép bạn tuỳ ý đánh dấu một số giai đoạn nhất định trong vòng đời của ứng dụng để theo dõi thời gian của từng giai đoạn đó.

Tóm tắt

Bất cứ khi nào bạn muốn tối ưu hoá hiệu suất tải của trang web, hãy luôn bắt đầu bằng việc kiểm tra. Quá trình kiểm tra này thiết lập một đường cơ sở và cung cấp cho bạn các mẹo về cách cải thiện.
Thực hiện từng thay đổi một và kiểm tra trang sau mỗi thay đổi để xem thay đổi riêng biệt đó ảnh hưởng đến hiệu suất như thế nào.

Các bước tiếp theo

Chạy kiểm tra trên trang web của bạn! Nếu bạn cần trợ giúp về việc diễn giải báo cáo hoặc tìm cách cải thiện hiệu suất tải, hãy xem tất cả các cách nhận trợ giúp từ cộng đồng Công cụ cho nhà phát triển:

Gửi lỗi trên tài liệu này trong kho lưu trữ developer.chrome.com.
Gửi báo cáo lỗi trên Công cụ cho nhà phát triển tại Lỗi Chromium.
Thảo luận về các tính năng và thay đổi trong Danh sách gửi thư. Vui lòng không sử dụng danh sách gửi thư cho các câu hỏi hỗ trợ. Thay vào đó, hãy sử dụng Stack Overflow.
Nhận trợ giúp chung về cách sử dụng Công cụ cho nhà phát triển trên Stack Overflow. Để gửi yêu cầu lỗi, hãy luôn sử dụng Lỗi Chromium.
Tweet cho chúng tôi tại @ChromeDevTools.