Mục tiêu của hướng dẫn
Hướng dẫn này chỉ 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ư những gì được dạy trong Giới thiệu về lớp Phát triển web.
Bạn không cần phải 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 ấy đã xây dựng một trang web để người hâm mộ có thể tìm hiểu xem anh ấy yêu thích điều gì thực phẩm. Người hâm mộ của anh rất thích trang web này, nhưng vẫn tiếp tục nghe được những lời phàn nàn rằng trang web tải chậm. Tony đã nhờ bạn giúp anh tăng tốc trang web.
![](https://developer.chrome.com/static/docs/devtools/lighthouse/image/tony-cat-e1c9e37033804.jpg?hl=vi)
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 kiểm tra. Quy trình kiểm tra có hai chức năng quan trọng:
- Dữ liệu này sẽ tạo cơ sở để bạn đo lường các thay đổi tiếp theo.
- Trang này cung cấp cho bạn các mẹo thiết thực để biết những thay đổi sẽ có tác động nhiều nhất.
Thiết lập
Trước tiên, bạn cần thiết lập môi trường làm việc mới cho trang web của Tom để bạn có thể thực hiện các thay đổi vào phần sau:
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 còn được gọi là thẻ người chỉnh sửa.
Tên dự án thay đổi từ sắc thái thành 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ạ. Có thể mất chút thời gian để tải trang web.
Mở Công cụ cho nhà phát triển cùng với bản minh hoạ.
Thiết lập đường cơ sở
Đườ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ỳ cải thiện nào về hiệu suất.
Mở bảng điều khiển Lighthouse. Biểu tượng này có thể bị ẩn sau
Bảng điều khiển khác.So khớp các chế độ cài đặt cấu hình báo cáo Lighthouse với các chế độ trên ảnh chụp màn hình. Dưới đây là phần giải thích về tuỳ chọn khác nhau:
- check_box Xoá bộ nhớ. Việc bật hộp kiểm này sẽ xóa tất cả bộ nhớ được liên kết với trang trước mỗi lần kiểm tra. Bật chế độ cài đặt này nếu bạn muốn kiểm tra xem khách truy cập lần đầu trải nghiệm trang web của bạn như thế nào. Tắt chế độ cài đặt này khi bạn muốn xem nhiều lần.
- check_box Bật tính năng lấy mẫu JS. Lựa chọn này bị tắt theo mặc định. Khi được bật, tính năng này sẽ thêm các 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. Bạn có thể xem dấu vết trong trình đơn Công cụ của more_vert > Xem dấu vết không được điều tiết sau khi báo cáo Lighthouse được tạo.
- 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 duyệt web thông thường trên thiết bị di động. Quá trình này được gọi là "được 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 tải trang trong điều kiện thiết bị di động. Mặt khác, chế độ cài đặt điều tiết DevTools (nâng cao) thực sự điều tiết CPU và mạng của bạn, đổi lại bạn sẽ phải đánh đổi quá trình kiểm tra lâu hơn.
- Chế độ > 3 chế độ. Điều hướng (Mặc định). Chế độ này phân tích một lần tải trang và đó là điều chúng tôi cần trong hướng dẫn này. Để biết thêm thông tin, hãy xem phần
- Thiết bị > Thiết bị di động. Tuỳ chọn thiết bị di động thay đổi chuỗi tác nhân người dùng và mô phỏng thiết bị di động khung nhìn. Tuỳ chọn máy tính chỉ vô hiệu hoá các thay đổi trên thiết bị di động.
- Danh mục > check_box Hiệu suất. Việc bật một danh mục duy nhất khiến Lighthouse chỉ tạo báo cáo với nhóm hoạt động 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 tắt các danh mục không liên quan sẽ đẩ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 Lighthouse sẽ hiển thị cho bạn 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ạ từ cửa sổ ẩn danh không có tab nào khác đang mở. Điều này đảm bảo rằng bạn chạy Chrome ở trạng thái mới. Cụ thể, các Tiện ích của Chrome có thể can thiệp vào quá trình kiểm tra.
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 này, khi bạn 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 cao hơn nghĩa là hiệu suất tốt hơn.
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 các số liệu đ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ề hiệu suất ở khía cạnh khác nhau. Ví dụ: Nội dung đầu tiên hiển thị cho bạn biết thời điểm nội dung được hiển thị lần đầu tiên trên màn hình, đây là một mốc quan trọng trong nhận thức về tải trang, trong khi Thời gian tương tác đánh dấu thời điểm mà trang xuất hiện đủ sẵn sàng để xử lý 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.
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 tải của trang cụ thể này hiệu suất.
Nhấp vào một cơ hội để tìm hiểu thêm.
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 lại quan trọng và xem tài liệu 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 dẫn đến thời gian tải.
Số lần kiểm tra đạt
Phần Kiểm tra đã vượt qua cho bạn thấy những gì trang web đang làm đúng. Nhấp để mở rộng .
Bước 2: Thử nghiệm
Mục Cơ hội của 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. Trong phần này, bạn triển khai các thay đổi được đề xuất đối với cơ sở mã, kiểm tra trang web sau mỗi 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 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 qua mạng. Giống như cách bạn có thể nén thư mục trước khi gửi email để giảm kích thước thư mục.
Trước khi bật chức năng nén, sau đây là một số cách bạn có thể tự kiểm tra xem văn bản được nén.
Mở bảng điều khiển Mạng rồi chọn Sử dụng các hàng yêu cầu lớn.
Cài đặt >Mỗi ô Size (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. Chiến lược phát hành đĩa đơn
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ì hàm
tài nguyên không được nén khi được gửi qua mạng. Trong ví dụ này, phương thức
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 khả năng 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 quảng cáo nào như vậy. tức làbundle.js
không được nén. Khi một tài nguyên được nén, tiêu đề này sẽ thường được đặt thànhgzip
,deflate
hoặcbr
. Vui lòng xem phần Chỉ dẫn để được giải thích về những nội dung này giá trị.
Giải thích như thế là đủ rồi. Đã đế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')); ...
Hãy nhớ đặt
app.use(compression())
trướcapp.use(express.static('build'))
.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 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ó đang hoạt động hay khô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 các tài nguyên văn bản như
bundle.js
. Giá trị cao nhất của269 KB
đối vớibundle.js
là kích thước của tệp được gửi qua mạng và giá trị dưới cùng của1.4 MB
là kích thước tệp không nén.Giờ đây, phần Tiêu đề phản hồi cho
bundle.js
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 tải trang hiệu suất:
Mở bảng điều khiển Lighthouse và nhấp vào
Thực hiện kiểm tra... trên thanh tác vụ ở trên cùng.
Giữ nguyên chế độ cài đặt như trước rồi nhấp vào Analyze page load (Phân tích lượt tải trang).
Thật 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 sẽ tăng, nghĩa là trang web đang hoạt động nhanh hơn.
Nén văn bản trong thực tế
Hầu hết máy chủ thực sự đều có các bản sửa lỗi đơn giản như thế này để cho phép 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 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 cho biết rằng một cơ hội lớn khác để định cỡ hình ảnh phù hợp là.
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 của bạn xem hình ảnh của mình trên màn hình thiết bị di động rộng 500 pixel thì thực sự không ích gì gửi hình ảnh rộng 1500 pixel. 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.
Trong báo cáo của bạn, hãy nhấp vào Thay đổi kích thước hình ảnh cho phù hợp để xem bạn nên đổi kích thước hình ảnh nào. Có vẻ như cả 4 hình ảnh đề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ớiconst dir = 'small'
. Thư mục này chứa bản sao của cùng một hình ảnh đã được đổi kích thước.Hãy kiểm tra trang một lần nữa để 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, có một điều điểm số không hiển thị rõ ràng là bạn đang tiết kiệm bao nhiêu dữ liệu mạng cho người dùng của mình. Tổng kích thước của các bức ảnh cũ là khoảng 6,1 MB, trong khi bây giờ chỉ 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 Mạng.
Đổi kích thước hình ảnh trong thế giới thực
Đối với ứng dụng nhỏ, việc thay đổi kích thước một lần như thế này có thể là đủ. Tuy nhiên, đối với một ứng dụng lớn, việc này rõ ràng là không thể mở rộng. 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 xây dựng.
- Tạo nhiều kích thước cho mỗi hình ảnh trong quá trình tạo và sau đó sử dụng
srcset
trong mã của bạn. Trong thời gian chạy, trình duyệt sẽ đảm nhận việc chọn kích thước phù hợp nhất cho thiết bị đang chạy. Xem 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, bạn nên tối ưu hoá từng hình ảnh. Giải pháp này thường giúp bạn tiết kiệm rất nhiều. Tối ưu hoá khi bạn chạy hình ảnh thông qua một chương trình đặc biệt để giảm kích thước của tệp hình ảnh. Xem phần Thông tin cơ bản Tối ưu hoá hình ảnh để 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à 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 CSS và JavaScript chính bắt buộc để hiển thị trang chính xác.
Sau đó, nhiệm vụ đầu tiên là tìm mã không cần thực thi khi tải trang.
Nhấp vào Loại bỏ 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 các nút 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
rồi 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 làm mới 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 rằng 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à đoạn mã đó chưa được thực thi và chắc chắn là không cần thiết khi tải trang.
Cuộn qua mã jQuery một chút. Một số dòng bị "thực thi" thực ra chỉ là nhận xét. Chạy mã này thông qua 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 làm việc với mã của riêng mình, thẻ Phạm vi bao phủ có thể giúp bạn phân tích mã, từng dòng và chỉ gửi mã cần cho tải trang.
Các tệp jquery.js
và lodash.js
có cần để tải trang không? Thẻ Yêu cầu chặn 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ẻ Network (Mạng) rồi mở lại Command Menu (Trình đơn lệnh).
Bắt đầu nhập
blocking
rồi chọn Show Request Blocking (Hiện tính năng chặn yêu cầu). 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. Yêu cầu jQuery và Lodash có màu đỏ, nghĩa là chúng đã bị chặn. Chiến lược phát hành đĩa đơn vẫn tải và có tính tương tác, vì vậy có vẻ như các tài nguyên này không cần thiết!
Nhấp vào
Xoá tất cả mẫu để xoá mẫu chặn
/libs/*
.
Nói chung, thẻ Yêu cầu chặn rất hữu ích trong việc mô phỏng cách trang của bạn hoạt động khi có tài nguyên không có sẵn.
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>
Đợi tạo lại và triển khai lại trang web.
Kiểm tra lại trang từ bảng điều khiển Lighthouse. Tổng điểm của bạn chắc hẳn đã 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 là mã bạn cần để tải trang. Nhìn chung, bạn có thể tăng tốc độ tải trang bằng cách chỉ vận chuyển đoạn mã quan trọng trong quá trình tải trang, rồi sau đó tải từng phần mọi thứ khác.
- Bạn ít có khả năng sẽ tìm thấy các tập lệnh mà bạn có thể loại bỏ ngay lập tức, 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ộ. Hãy 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ư dưới dạng hiệu ứng rung cây để 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 thao tác trên luồng chính
Báo cáo mới nhất của bạn hiển thị một số khoản tiết kiệm tiềm năng nhỏ trong phần Cơ hội, nhưng nếu bạn cuộn đến phần Chẩn đoán, có vẻ như nút thắt cổ chai lớn nhất là quá nhiều luồng chính của bạn.
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ị 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 tải trang và tìm cách trì hoãn hoặc xoá các công việc không cần thiết.
Mở Hiệu suất >
Capture Settings (Cài đặt chụp) rồi đặt Network (Mạng) thành Low 3G (3G chậm) và CPU (CPU) ở Tốc độ chậm gấp 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 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 thiết bị kém mạnh mẽ hơn.
Nhấp vào làm mới Tải lại. Công cụ cho nhà phát triển tải lại trang, sau đó tạo hình ảnh trực quan về tất cả những việc mà công cụ này phải làm để tải trang. Hình ảnh này sẽ được gọi là dấu vết.
Dấu vết hiển thị các hoạt động theo trình tự thời gian, từ trái sang phải. 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.
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 đang hoàn toàn bận rộn với hoạt động viết tập lệnh. Đây là một dấu hiệu cho thấy bạn có thể tăng tốc độ tải trang bằng cách giảm bớt JavaScript.
Kiểm tra dấu vết để tìm cách giảm bớt thao tác cho JavaScript:
Nhấp vào mục Thời gian để mở rộng mục này.
Có một loạt chỉ số User Timing đo lường của React, có vẻ như ứng dụng của Tony đang 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 đạt được hiệu suất cao.
Nhấp vào Thời gian một lần nữa để thu gọn mục đó.
Duyệt qua mục Chính. Phần này hiển thị nhật ký theo thứ tự thời gian về 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 nguyên nhân khiến 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à cứ tiếp tục như vậy.Di chuyển xuống cuối mục Chính. Khi dùng một khung, hầu hết hoạt động phía trên là do khung này, thường nằm ngoài quyền 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 tạo ra nhiều lệnh gọi đến một hàmmineBitcoin
. Có vẻ như Tony đang dùng thiết bị của người hâm mộ để đào tiền mã hoá...Mở thẻ Bottom-Up (Từ dưới lên) ở dưới cùng. Thẻ này phân tích 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 phần Từ dưới lên, hãy nhấp vào nhãn cho phần Chính.
Phần 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 có hiện được chọn. Ví dụ: nếu bạn nhấp vào một trong các hoạt động
mineBitcoin
, Phần Từ dưới lên sẽ chỉ hiển thị thông tin của 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 từng 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 có sử dụng chế độ sản xuất và giảm hoạt động JavaScript hay không tăng tốc độ tải trang. Bắt đầu với chế độ phát hành công khai:
- 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 được triển khai.
Hãy 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 lệnh gọi đến
this.mineBitcoin(1500)
trongconstructor
. - Chờ bản dựng mới được triển khai.
- Hãy kiểm tra lại trang.
Như thường lệ, bạn vẫn cần phải làm một số việc, chẳng hạn như giảm các chỉ số Nội dung lớn nhất hiển thị và Điểm số thay đổi bố cục tích luỹ.
Giảm bớt thao tác của luồng chính trong thực tế
Nhìn chung, bảng Hiệu suất là cách phổ biến nhất để biết được hoạt động của trang web của bạn khi tải và tìm cách xoá hoạt động không cần thiết.
Nếu bạn thích một cách tiếp cận giống như console.log()
, thì API User Timing sẽ giúp bạn
Bạn có thể tự ý đá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 lượng mỗi giai đoạn
sẽ trải qua nhiều giai đoạn.
Tóm tắt
- Bất cứ khi nào bạn bắt đầu tối ưu hóa hiệu suất tải của trang web, hãy luôn bắt đầu bằng một bài kiểm tra. Quá trình kiểm tra thiết lập đườ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 quy trình kiểm tra trên trang web của bạn! Nếu bạn cần trợ giúp trong 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:
- Báo cáo 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 trên 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 cần được 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 Chromium Bugs.
- Hãy tweet cho chúng tôi tại @ChromeDevTools.