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

Tổng quan

Sử dụng bảng điều khiển Lighthouse để chạy quy trình kiểm tra toàn diện trang web của bạn. Bảng điều khiển Lighthouse sẽ tạo một báo cáo cung cấp cho bạn thông tin chi tiết về những khía cạnh sau của trang web:

• Hiệu suất
• Hỗ trợ tiếp cận
• Các phương pháp hay nhất
• SEO

... và nhiều chỉ số khác.

Phần hướng dẫn sau đây sẽ giúp bạn bắt đầu sử dụng Lighthouse trong Chrome DevTools.

Để tìm hiểu thêm về những cách khác mà Lighthouse có thể cải thiện chất lượng trang web của bạn, hãy xem tài liệu về Lighthouse.

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

Bài viết này hướng dẫn 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.

Hãy đọ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 nên 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 học 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 cộng đồng 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 mà anh yêu thích. Người hâm mộ của Tony rất thích trang web này, nhưng Tony liên tục nhận được 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 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 bằng một quy trình kiểm tra. Quy trình kiểm tra có hai chức năng quan trọng:

• Tính năng này tạo một đường cơ sở để bạn đo lường các thay đổi tiếp theo.
• Báo cáo này cung cấp cho bạn 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 để có thể chỉnh sửa trang web đó sau này:

1. Phối lại dự án của trang web trên Glitch. Dự án mới của bạn sẽ mở trong một thẻ. Thẻ này sẽ đượ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 số tên được tạo ngẫu nhiên. Giờ đây, bạn đã có bản sao mã có thể chỉnh sửa của riêng mình. Sau này, bạn sẽ thay đổi mã này.

2. Ở cuối thẻ trình chỉnh sửa, hãy nhấp vào Xem trước > Xem trước trong một cửa sổ mới. Bản minh hoạ sẽ mở trong một thẻ mới. Thẻ này sẽ được gọi là thẻ minh hoạ. Có thể mất chút thời gian để trang web tải xong.

   

3. Mở DevTools cùng với bản minh hoạ.

   

Thiết lập đường cơ sở

Đường cơ sở là bản ghi hiệu suất của trang web trước khi bạn cải thiện hiệu suất.

1. Mở bảng điều khiển Lighthouse. Thẻ này có thể bị ẩn sau double_arrow More panels (Thêm bảng điều khiển).

   

2. So khớp chế độ cài đặt cấu hình báo cáo Lighthouse với 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:

   • check_box Xoá bộ nhớ. Khi bạn bật hộp đánh dấu này, tất cả bộ nhớ liên kết với trang sẽ bị xoá 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 trải nghiệm của khách truy cập lần đầu trên trang web của mình. Tắt chế độ cài đặt này khi bạn muốn trải nghiệm lượt truy cập lại.
   • check_box Bật tính năng lấy mẫu JS. Tuỳ chọn này bị tắt theo mặc định. Khi bật, tính năng này sẽ thêm ngăn xếp lệnh gọi JavaScript chi tiết vào dấu vết hiệu suất nhưng có thể làm chậm quá trình tạo báo cáo. Dấu vết có trong more_vert Trình đơn công cụ > Xem dấu vết không bị điều tiết sau khi báo cáo Lighthouse được tạo.
   • Điều tiết mô phỏng (mặc định) arrow_drop_down. Tuỳ chọn này mô phỏng các điều kiện duyệt web thông thường trên thiết bị di động. Loại 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 đó, chỉ cần dự đoán thời gian tải trang trong điều kiện thiết bị di động. Mặt khác, chế độ cài đặt Chế độ điều tiết trong Công cụ cho nhà phát triển (nâng cao) thực sự điều tiết CPU và mạng của bạn, với sự đánh đổi là quy trình kiểm tra lâu hơn.
   • Mode (Chế độ) > radio_button_checked Navigation (Default) (Đ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ị > radio_button_checked Thiết bị di động. Tuỳ chọn dành 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. Tuỳ chọn máy tính để bàn hầu như chỉ vô hiệu hoá các thay đổi trên thiết bị di động.
   • Categories (Danh mục) > check_box Performance (Hiệu suất). Khi bạn bật một danh mục, Lighthouse sẽ chỉ tạo báo cáo có bộ 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à chúng cung cấp. Việc tắt các danh mục không liên quan sẽ giúp đẩy nhanh một chút quá trình kiểm tra.

3. Nhấp vào Phân tích tốc độ 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 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 mà không mở thẻ nào khác. Điều này đảm bảo rằng bạn đang chạy Chrome ở trạng thái sạch. Cụ thể, Tiện ích của Chrome có thể can thiệp vào quy trình kiểm tra.

Tìm hiểu báo cáo của bạn

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

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 này cung cấp số liệu đị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ụ: Lần sơn nội dung đầu tiên cho bạn biết thời điểm nội dung được sơn lên màn hình lần đầu tiên. Đây là một mốc quan trọng trong nhận thức của người dùng về quá trình tải trang, trong khi Thời gian phản hồi đánh dấu thời điểm trang đủ sẵn sàng để xử lý các lượt tương tác của người dùng.

Ảnh chụp màn hình

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

Cơ hội

Tiếp theo là phần 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.

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

Nhấp vào Tìm hiểu thêm... để xem tài liệu về lý do khiến một cơ hội trở nên quan trọng và các đề xuất cụ thể về cách khắc phục.

Chẩn đoán

Phần Chẩn đoán cung cấp thêm thông tin về các yếu tố góp phần vào thời gian tải trang.

Đã vượt qua quy trình kiểm tra

Phần Kiểm tra đã vượt qua cho bạn biết những việc mà trang web đang làm đúng cách. Nhấp để mở rộng phần này.

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 các thay đổi được đề 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 các 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 rằng 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 tệp văn bản trước khi gửi tệp đó qua mạng. Tương tự như cách bạn có thể nén một thư mục trước khi gửi qua email để giảm kích thước của thư mục đó.

Trước khi bật tính năng nén, sau đây là một số cách 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 Network (Mạng) rồi đánh dấu vào settings Settings (Cài đặt) > check_box Use large request rows (Sử dụng 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 đã 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 hai giá trị này 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 tính năng nén bằng cách kiểm tra tiêu đề HTTP của tài nguyên:

1. Nhấp vào bundle.js rồi mở thẻ Headers (Tiêu đề).

   

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

Đủ lời giải thích. Đã đế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ã:

1. Trong thẻ trình chỉnh sửa, hãy mở server.js và thêm hai dòng (được làm nổi bật) sau:

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. Hãy nhớ đặt app.use(compression()) trước app.use(express.static('build')).

   

3. 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 bên trái cho biết quá trình triển khai đã thành công.

Sử dụng quy trình làm việc mà bạn đã tìm hiểu trước đó để kiểm tra thủ công xem tính năng nén có hoạt động hay không:

1. Quay lại thẻ minh hoạ và tải lại trang.

   Giờ đây, cột 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.

   

2. Phần Tiêu đề phản hồi cho bundle.js hiện phải 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:

1. Mở bảng điều khiển Lighthouse rồi nhấp vào biểu tượng Thực hiện kiểm tra... trên thanh thao tác ở trên cùng.

   

2. Giữ nguyên chế độ cài đặt như trước và nhấp vào Phân tích tốc độ tải trang.

   

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

Nén văn bản trong thế giới thực

Hầu hết các máy chủ đều có các biện pháp khắc phục đơn giản như thế này để bật tính năng nén! Bạn chỉ cần tìm kiếm cách định cấu hình bất kỳ máy chủ nào 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 cho thấy việc định cỡ hình ảnh đúng cách 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 của hình ảnh. Nếu người dùng đang xem hình ảnh trên màn hình thiết bị di động có chiều rộng 500 pixel, thì việc gửi hình ảnh có chiều rộng 1500 pixel là không cần thiết. Tốt nhất là bạn nên gửi hình ảnh có chiều rộng tối đa là 500 pixel.

1. Trong báo cáo, hãy nhấp vào Điều chỉnh kích thước hình ảnh cho phù hợp để xem những hình ảnh cần điều chỉnh kích thước. Có vẻ như cả 4 hình ảnh đều lớn hơn mức cần thiết.

   

2. Quay lại thẻ trình chỉnh sửa, hãy mở src/model.js.

3. Thay thế const dir = 'big' với const dir = 'small'. Thư mục này chứa các bản sao của cùng một hình ảnh đã được đổi kích thước.

4. Kiểm tra lại trang để xem thay đổi này ảnh hưởng như thế nào đến hiệu suất tải.

   

Có vẻ như thay đổi này chỉ ảnh hưởng nhỏ đến điểm hiệu suất tổng thể. Tuy nhiên, điểm số không cho biết rõ một điều là bạn đang tiết kiệm cho người dùng bao nhiêu dữ liệu mạng. Tổng kích thước của các bức ảnh cũ là 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 thông tin này trên thanh trạng thái ở cuối bảng điều khiển Mạng.

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

Đối với một ứng dụng nhỏ, việc đổi kích thước một lần như thế này có thể là đủ. Nhưng đối với một ứng dụng lớn, rõ ràng là cách này không thể mở rộng quy mô. Sau đâ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 tạo bản dựng.
• Tạo nhiều kích thước cho mỗi hình ảnh trong quá trình tạo bản dựng, sau đó sử dụng srcset trong mã. Trong thời gian chạy, trình duyệt sẽ chọn kích thước phù hợp nhất cho thiết bị đang chạy. Xem phần Hình ảnh có kích thước tương đối.
• Sử dụng CDN hình ảnh cho phép bạn tự động đổ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 hình ảnh thông qua một chương trình đặc biệt giúp giảm kích thước tệp hình ảnh. Hãy xem bài viết Tối ưu hoá hình ảnh cần thiết để biết thêm các 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.

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

1. 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.

   

2. Tuỳ thuộc vào hệ điều hành, hãy nhấn tổ hợp phím sau để mở Trình đơn lệnh:

   • Trên máy Mac, Command+Shift+P
   • Trên Windows, Linux hoặc ChromeOS, Ctrl+Shift+P

3. Bắt đầu nhập Coverage rồi chọn Hiện phạm vi.

   

   Thẻ Mức độ phù hợp sẽ mở trong Ngăn.

   

4. Nhấp vào làm mới Tải lại. Thẻ Coverage (Phạm vi) cung cấp thông tin tổng quan về lượng mã trong bundle.js, jquery.js và lodash.js đang được thực thi trong khi trang tải.

   

   Ảnh chụp màn hình này cho biết khoảng 74% và 30% tệp jQuery và Lodash tương ứng không được sử dụng.

5. Nhấp vào hàng jquery.js. DevTools sẽ mở tệp trong bảng điều khiển Sources (Nguồn). Một dòng mã đã được thực thi nếu dòng mã đó 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à dòng mã đó chưa được thực thi và chắc chắn không cần thiết khi tải trang.

   

6. Xem qua một chút mã jQuery. Một số dòng được "thực thi" thực ra chỉ là các nhận xét. Chạy mã này thông qua một trình rút gọn để loại bỏ các 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 làm việc với mã của riêng mình, thẻ Coverage (Mức độ sử dụng) 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ẻ 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.

1. Nhấp vào thẻ Network (Mạng) rồi mở lại Command Menu (Trình đơn lệnh).

2. Bắt đầu nhập blocking rồi chọn Hiện tính năng Chặn yêu cầu. Thẻ Chặn yêu cầu sẽ mở ra.

   

3. Nhấp vào Thêm mẫu, nhập /libs/* vào hộp văn bản rồi nhấn Enter để xác nhận.

   

4. Tải lại trang. Các yêu cầu jQuery và Lodash có màu đỏ, nghĩa là các yêu cầu này đã bị chặn. Trang vẫn tải và có thể tương tác, vì vậy có vẻ như bạn không cần đến các tài nguyên này!

   

5. Nhấp vào Xoá tất cả mẫu để xoá mẫu chặn /libs/*.

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

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

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

2. 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>
   

3. Chờ trang web tạo lại và triển khai lại.

4. Kiểm tra lại trang trong bảng điều khiển Lighthouse. Điểm số tổng thể của bạn sẽ được 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 kết xuất quan trọng đề cập đến 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ỉ phân phối mã quan trọng trong quá trình tải trang, sau đó tải lười mọi nội dung khác.

• Bạn khó có thể tìm thấy các tập lệnh mà bạn có thể xoá ngay lập tức, nhưng 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 và có thể được yêu cầu không đồng bộ. Xem phần Sử dụng 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ế độ phát hành công khai hay không. Chế độ này có thể sử dụng một tính năng như loại bỏ mã không cần thiết để loại bỏ mã không cần thiết đang chặn quá trình kết xuất quan trọng.

Giảm bớt công việc của luồng chính

Báo cáo mới nhất của bạn cho thấy một số khoản tiết kiệm nhỏ tiềm năng trong mục Cơ hội, nhưng nếu bạn di chuyển xuống mục Chẩn đoán, có vẻ như nút thắt cổ chai lớn nhất là 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ô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 Hiệu suất để phân tích công việc mà luồng chính đang thực hiện trong khi trang tải và tìm cách trì hoãn hoặc xoá công việc không cần thiết.

1. Mở Hiệu suất > Cài đặt chụp rồi đặt Mạng thành Mạng 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 so với máy tính xách tay hoặc máy tính để bàn. Vì vậy, các chế độ cài đặt này cho phép bạn trải nghiệm việc tải trang như thể bạn đang sử dụng một thiết bị kém mạnh hơn.

2. Nhấp vào làm mới Tải lại. Công cụ cho nhà phát triển sẽ tải lại trang rồi tạo hình ảnh trực quan về tất cả những việc cần làm để tải trang. Hình ảnh trực quan này sẽ được gọi là dấu vết.

   

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ề số khung hình/giây, hoạt động của CPU và hoạt động mạng.

Màu vàng mà bạn thấy trong phần Tổng quan có nghĩa là CPU đã hoàn toàn bận rộn với hoạt động 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 giảm bớt công việc JavaScript.

Hãy điều tra dấu vết để tìm cách giảm công việc JavaScript:

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

   

   Có một loạt các biện pháp Thời gian của người dùng từ 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ế độ phát hành của React có thể mang lại một số lợi ích về hiệu suất một cách dễ dàng.

2. Nhấp lại vào Timings (Thời gian) để thu gọn phần đó.

3. Duyệt qua phần Chính. Phần này hiển thị nhật ký theo trình tự thời gian của hoạt động 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 sự kiện xảy ra.

   

   Trong ví dụ này, sự kiện Evaluate Script đã khiến hàm (anonymous) thực thi, khiến __webpack__require__ thực thi, khiến ./src/index.jsx thực thi, v.v.

4. Di chuyển xuống cuối phần Chính. Khi bạn sử dụng một khung, phần lớn hoạt động cấp trên là do khung gây ra và 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ư một 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 có thể đang sử dụng thiết bị của người hâm mộ để khai thác tiền mã hoá...

5. Mở thẻ Dưới lên ở dưới cùng. Thẻ này trình bày chi tiết những hoạt động chiếm nhiều thời gian nhất. Nếu bạn không thấy mục nào trong mục Dưới lên, hãy nhấp vào nhãn cho mục Chính.

   

   Mục Từ dưới lên chỉ hiển thị thông tin về 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 Dưới lên sẽ chỉ hiển thị thông tin cho hoạt động đó.

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

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

1. Trong thẻ trình chỉnh sửa, hãy mở webpack.config.js.
2. Thay đổi "mode":"development" thành "mode":"production".
3. Chờ bản dựng mới được triển khai.

4. Kiểm tra lại trang.

   

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

1. Trong thẻ trình chỉnh sửa, hãy mở src/App.jsx.
2. Chú thích lệnh gọi đến this.mineBitcoin(1500) trong constructor.
3. Chờ bản dựng mới được triển khai.
4. Kiểm tra lại trang.

Như mọi khi, bạn vẫn còn 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à Mức thay đổi bố cục tích luỹ.

Giảm bớt công việc của luồng chính trong thế giới thực

Nhìn chung, bảng điều khiển 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 một phương pháp giống với console.log() hơn, API User Timing (Thời gian của người dùng) cho phép bạn đánh dấu tuỳ ý một số giai đoạn nhất định trong vòng đời của ứng dụng để theo dõi thời lượng của từng giai đoạn đó.

Tóm tắt

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

Các bước tiếp theo

Hãy chạy quy trình kiểm tra trên trang web của riêng bạn! Nếu bạn cần được trợ giúp để 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 để được cộng đồng DevTools trợ giúp:

• 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 DevTools tại Lỗi Chromium.
• Thảo luận về các tính năng và thay đổi trên Danh sách gửi thư. Vui lòng không sử dụng danh sách gửi thư để đặt câu hỏi hỗ trợ. Thay vào đó, hãy sử dụng Stack Overflow.
• Yêu cầu trợ giúp chung về cách sử dụng Công cụ của Chrome cho nhà phát triển trên Stack Overflow. Để gửi yêu cầu về lỗi, hãy luôn sử dụng trang Lỗi Chromium.
• Gửi tweet cho chúng tôi theo địa chỉ @ChromeDevTools.