Cách sử dụng Công cụ dành cho nhà phát triển của Chrome để tìm điểm nghẽn về hiệu suất
Khi một người tiến bộ trong sự nghiệp phát triển phần mềm, những mối quan tâm ngoài việc viết mã có thể hoạt động có thể nảy sinh. Trong thế giới phát triển web, không chỉ xây dựng phần mềm chức năng mà còn phải làm cho nó có hiệu suất cao để có thể liên tục mang lại trải nghiệm mong muốn trong khi sử dụng tài nguyên tối thiểu.Thông thường, đây sẽ là một nhiệm vụ khá lớn vì người ta không thể đưa ra dự đoán về các thuộc tính tiêu thụ tài nguyên của một ứng dụng mà không có các công cụ để mô phỏng và đo lường các tham số khác nhau.
Trong bài viết này, bạn sẽ khám phá một trong những công cụ sau: Công cụ dành cho nhà phát triển Chrome. Cụ thể, bạn sẽ kiểm tra tính tiện dụng b Kiểm tra và Hiệu suất trong việc đánh giá các ứng dụng web và phát hiện các vấn đề về hiệu suất.
Để coi đây là một bài kiểm tra thực tế, bạn sẽ thử nghiệm các kỹ thuật khác nhau để tìm ra các vấn đề về hiệu suất trên một trang web và giải quyết chúng. Hướng dẫn này khám phá trang web Scotch.io , nhưng các bước này có thể áp dụng cho bất kỳ trang web nào.
Yêu cầu
Để làm theo hướng dẫn này, hãy cài đặt trình duyệt Google Chrome trên máy tính của bạn.
Bước 1 - Chuẩn bị trình duyệt
Khi cải thiện hiệu suất của một trang web hoặc ứng dụng web, có hai khía cạnh chính cần xem xét:
- Hiệu suất tải
- Hiệu suất thời gian chạy
Hướng dẫn này sẽ tập trung nhiều hơn vào Hiệu suất tải. Hiệu suất tải đề cập đến hiệu suất của trang khi nó đang tải. Mục tiêu chính là xác định các vấn đề về hiệu suất ảnh hưởng đến tốc độ ứng dụng và trải nghiệm user tổng thể.
Để bắt đầu kiểm tra Hiệu suất tải, bạn sẽ bắt đầu bằng cách cài đặt kiểm tra.
Chạy trình duyệt Chrome của bạn và mở một tab ở chế độ Ẩn danh bằng cách nhấn COMMAND + SHIFT + N trên macOS hoặc CTRL + SHIFT + N trên Windows hoặc Linux. Khi trình duyệt Ẩn danh được mở, hãy chuyển đến trang web mà bạn muốn kiểm tra.
Tiếp theo, mở DevTools bằng cách nhấn COMMAND + OPTION + I trên macOS hoặc CTRL + SHIFT + I trên Windows hoặc Linux. Nếu bạn muốn thay đổi vị trí của console DevTools, hãy nhấp vào ba dấu chấm dọc trên thanh công cụ và thực hiện lựa chọn từ tùy chọn Dock Side .
Khi thấy ổn với vị trí console , hãy chuyển sang tab Kiểm tra . Với sự trợ giúp của công cụ này, bạn sẽ tạo đường cơ sở để đo lường các thay đổi ứng dụng tiếp theo, cũng như nhận được thông tin chi tiết về những thay đổi nào sẽ cải thiện ứng dụng.
Lưu ý: Tab Kiểm tra có thể bị ẩn sau nút mũi tên Bảng khác .
Mục tiêu chính của bạn ở đây là xác định các tắc nghẽn về hiệu suất trên Scotch và tối ưu hóa để có hiệu suất tốt hơn. Một nút cổ chai, trong kỹ thuật phần mềm, mô tả tình huống mà dung lượng của một ứng dụng bị giới hạn bởi một thành phần duy nhất.
Trong bước tiếp theo, bạn sẽ thực hiện kiểm tra để tìm các node thắt về hiệu suất.
Bước 2 - Thực hiện Kiểm tra
Khi thực hiện kiểm tra, bạn sẽ sử dụng một công cụ có tên là Lighthouse . Lighthouse là một công cụ tự động open-souce để cải thiện chất lượng của bất kỳ trang web nào trong các lĩnh vực hiệu suất, khả năng truy cập, các tính năng web tiến bộ và hơn thế nữa.
Trong tab Kiểm tra của Chrome DevTools, hãy cấu hình công cụ kiểm tra. Ta có các cài đặt sau được trình bày trước ta :
Thiết bị
Điều này cung cấp cho ta tùy chọn chuyển đổi tác nhân user giữa các tùy chọn Di động và Máy tính để bàn . Hơn một nửa lưu lượng truy cập web tính đến quý 3 năm 2018 là do Thiết bị di động tạo ra, vì vậy ta sẽ kiểm tra Scotch.io trên Di động .
Kiểm toán
Cài đặt này cho phép ta chọn chất lượng của ứng dụng mà ta muốn đánh giá và cải thiện. Trong trường hợp này, hiệu suất là mối quan tâm chính, vì vậy bạn có thể bỏ chọn mọi tùy chọn khác.
Throttling
Tùy chọn này cho phép bạn mô phỏng các điều kiện duyệt web trên thiết bị di động. Bạn sẽ sử dụng tùy chọn Sim Simulated Fast 3G, 4x CPU Slowdown . Điều này thực sự sẽ không hiệu quả trong quá trình kiểm tra, nhưng nó sẽ giúp tính toán thời gian tải trang trong điều kiện thiết bị di động.
Lưu trữ rõ ràng
Điều này cho phép bạn xóa tất cả dữ liệu được lưu trong bộ nhớ cache và tài nguyên cho trang được thử nghiệm để kiểm tra cách khách truy cập lần đầu trải nghiệm trang web, vì vậy hãy chọn tùy chọn này nếu nó chưa được chọn.
Sau khi cấu hình kiểm tra như đã chỉ định ở trên, hãy nhấp vào Tạo báo cáo và đợi trong khi nó chuẩn bị báo cáo chi tiết về hiệu suất của trang web.
Bước 3 - Phân tích Báo cáo Kiểm toán
Sau khi hoàn thành kiểm toán, báo cáo sẽ có dạng như sau:
Con số trong vòng tròn ở trên cùng bên phải cho biết điểm hiệu suất tổng thể của trang web trên thang điểm từ 1–100. Ta hiện có 55 , cho thấy rằng có cơ hội cải thiện cùng với các đề xuất được cung cấp để tăng điểm số và hiệu suất. Hãy chia báo cáo thành các phần và phân tích chúng riêng lẻ.
Trong phần Chỉ số , bạn sẽ tìm thấy thông tin chi tiết định lượng về các khía cạnh khác nhau của hiệu suất trang web:
Ngay bên dưới phần Chỉ số là một group ảnh chụp màn hình hiển thị các trạng thái giao diện user khác nhau của trang từ thời điểm truy vấn ban đầu cho đến khi tải hoàn toàn:
Phần Chẩn đoán cung cấp cho bạn thông tin bổ sung về hiệu suất thường chỉ ra các yếu tố xác định thời gian tải của trang web:
Cuối cùng, phần Kiểm tra đạt yêu cầu nêu bật các kiểm tra hiệu suất đã được trang web thông qua:
Đến đây bạn đã phân tích cuộc kiểm toán, bạn biết những vấn đề nào có thể cần được giải quyết.
Bước 4 - Giải quyết vấn đề trong phần Chỉ số
Trong ví dụ này, năm vấn đề về hiệu suất đã được đánh dấu. Trong bước này, ta sẽ khám phá các bản sửa lỗi có thể có:
Bức tranh có ý nghĩa đầu tiên
Bức tranh có ý nghĩa đầu tiên cho bạn biết khi nào nội dung chính của trang trở nên khả dụng trực quan. Theo kiểm toán, bạn phải mất khoảng 3,4 giây trước khi xem nội dung chính. Điều này có thể được xác nhận bằng cách nhấp vào nút Xem dấu vết . Thao tác này sẽ đưa bạn đến tab Hiệu suất nơi bạn có thể xem qua các trạng thái giao diện user khác nhau trong thời gian tải để xác nhận điều gì xảy ra tại từng thời điểm cụ thể.
Lưu ý đó là lúc nội dung trang được hiển thị.
Để cải thiện điều này, ta phải tối ưu hóa đường dẫn hiển thị quan trọng của trang / ứng dụng tổng thể. Điều này nghĩa là ta ưu tiên hiển thị nội dung theo mong muốn của user nhằm tạo ra trải nghiệm tốt hơn và cải thiện hiệu suất. Điều này có thể được thực hiện bằng cách giảm số lượng tài nguyên quan trọng, độ dài đường dẫn quan trọng và số byte quan trọng.
Chỉ số tốc độ
Chỉ số Tốc độ cho biết nội dung trang được phổ biến nhanh như thế nào. Quá trình này mất khoảng 7,2 giây như được hiển thị trên tab hiệu suất:
Một cách để khắc phục điều này, giống như trong số liệu đã kiểm tra trước đó, là tối ưu hóa đường dẫn hiển thị quan trọng. Cách thứ hai là tối ưu hóa hiệu quả nội dung. Điều này liên quan đến việc loại bỏ các bản download không cần thiết theo cách thủ công, tối ưu hóa mã hóa truyền tải thông qua nén và lưu vào bộ nhớ đệm khi nào có thể để ngăn reload các tài nguyên không thay đổi.
CPU đầu tiên không hoạt động
Còn gọi là Tương tác đầu tiên , Chế độ chờ CPU đầu tiên cho bạn biết khi nào trang trở nên tương tác tối thiểu (CPU không hoạt động đủ để xử lý thông tin nhập của user , như nhấp chuột, swipe , v.v.). Từ quá trình kiểm tra, quá trình này mất khoảng 6,5 giây . Việc giảm giá trị này xuống mức tối thiểu luôn là một chiến thắng:
Để giải quyết vấn đề này, bạn cần thực hiện các bước tương tự như với Chỉ số tốc độ .
Thời gian tương tác
Thời gian tương tác cho biết thời gian cần thiết để trang trở nên tương tác hoàn toàn. Kiểm tra trong ví dụ này cho thấy 6,9 giây cho số liệu này. Tương tác trong ngữ cảnh này mô tả điểm mà:
- Trang đã hiển thị nội dung hữu ích.
- Trình xử lý sự kiện được đăng ký cho hầu hết các phần tử hiển thị trên trang.
- Trang phản hồi các tương tác của user trong vòng 50 mili giây.
Để khắc phục điều này, bạn cần hoãn lại hoặc loại bỏ công việc JavaScript không cần thiết xảy ra trong quá trình tải trang. Điều này thường có thể đạt được bằng cách chỉ gửi mã mà user cần thông qua tách mã và tải chậm, nén, rút gọn và bằng cách xóa mã và bộ nhớ đệm không sử dụng. Bạn có thể tìm hiểu thêm về cách tối ưu hóa mã tại đây .
Độ trễ đầu vào ước tính
Độ trễ đầu vào ước tính mô tả khả năng đáp ứng của ứng dụng đối với đầu vào của user . Quá trình kiểm tra ghi lại khoảng 170 mili giây trên số liệu này. Các ứng dụng thường có 100 mili giây để phản hồi thông tin nhập của user , tuy nhiên, mục tiêu cho Lighthouse là 50 mili giây. Lý do cho sự chênh lệch này là do Lighthouse sử dụng chỉ số proxy , là tính khả dụng của stream chính để đánh giá chỉ số này thay vì đo lường trực tiếp.
Sau khi mất nhiều thời gian hơn thời gian quy định, ứng dụng có thể bị coi là chậm. Bạn có thể tìm hiểu thêm về độ trễ đầu vào ước tính tại đây .
Để cải thiện số liệu này, bạn có thể sử dụng service worker để thực hiện một số tính toán, do đó giải phóng stream chính. Một biện pháp hữu ích khác là cấu trúc lại bộ chọn CSS đảm bảo chúng thực hiện ít phép tính hơn.
Bước 5 - Giải quyết các vấn đề trong phần Cơ hội
Phần Cơ hội liệt kê các tối ưu hóa có thể cải thiện hiệu suất:
Thông thường, khi các trang web tải, chúng sẽ kết nối với các nguồn khác để nhận hoặc gửi dữ liệu.Để cải thiện hiệu suất như trong trường hợp này, cách tốt nhất là thông báo cho trình duyệt để cài đặt kết nối với nguồn root như vậy sớm hơn trong quá trình hiển thị, do đó cắt giảm lượng thời gian chờ giải quyết các tra cứu DNS, chuyển hướng và một số lần quay lại và hơn thế nữa cho đến khi khách hàng nhận được phản hồi.
Để khắc phục điều này, bạn có thể thông báo cho trình duyệt về ý định sử dụng các tài nguyên đó bằng cách thêm thuộc tính rel vào các thẻ liên kết như hình dưới đây:
<link rel="preconnect" href="https://scotchresources.com"> Trên các kết nối an toàn, quá trình này vẫn có thể mất một chút thời gian, vì vậy nó phải được sử dụng trong vòng 10 giây nếu không trình duyệt sẽ tự động đóng kết nối và tất cả công việc kết nối ban đầu sẽ trở nên lãng phí.
Kết luận
Hiện ta đã nhận được thành công báo cáo hiệu suất trên Scotch.io bằng cách sử dụng công cụ Kiểm tra , cũng như kiểm tra các giải pháp tiềm năng cho các điểm nghẽn đã xác định.
Tải không phải là một khoảnh khắc duy nhất trong thời gian - đó là một trải nghiệm mà không một số liệu nào có thể nắm bắt đầy đủ. Có nhiều khoảnh khắc trong trải nghiệm tải có thể ảnh hưởng đến việc user cảm nhận nó là “nhanh” hay “chậm”.
Hiệu suất giống như một chuyến tàu dài, với nhiều huấn luyện viên riêng biệt nhưng giống nhau và thống nhất về mục đích. Trong quá trình thử nghiệm, người ta phải chú ý đến những chiến thắng nhỏ giúp tăng tích lũy tốc độ ứng dụng và mang lại trải nghiệm tốt hơn cho user cuối.
Để đọc thêm, phần Cơ bản về Web trên trang web Nhà phát triển của Google là một tài nguyên tuyệt vời.
Các tin liên quan
