Cách xác định JavaScript của bên thứ ba làm chậm website

bởi Duc Anh Nguyen
xác định JavaScript của bên thứ ba làm chậm trang

Ghi chú của người dịch: Bài viết này là một hướng dẫn thực hành quan trọng giúp bạn xác định được JavaScript cụ thể nào đang làm trang tải chậm. Sau một tá lý thuyết về cách cải thiện tốc độ website thì rút cục bạn cũng phải đi đến công việc trên thực địa. Thực hành thì vốn phụ thuộc vào công cụ, bài này sẽ chỉ cho bạn cách sử dụng công cụ. Nhưng nó sẽ vẫn là lý thuyết nếu bạn không tự thực hành trên chính trang web của bạn! OK, bắt đầu thôi.

Phát triển các kỹ năng phát hiện vấn đề về hiệu suất, tốc độ với công cụ Lighthouse và Chrome DevTools.

Là người lập trình, bạn thường không có khả năng làm chủ cách đoạn mã của bên thứ ba tải về. Trước khi bạn có thể tối ưu hóa nội dung thuộc bên thứ ba, bạn phải thực hiện một số công việc để phát hiện ra cái gì đang làm chậm website của bạn.

Trong bài viết này, bạn sẽ được học cách sử dụng Lighthouse và Chrome DevTools để xác định các nguồn của bên thứ ba làm chậm trang. Bài viết tìm hiểu các kỹ thuật ngày càng mạnh mẽ, đem lại kết quả tốt nhất khi kết hợp với nhau.

Nếu bạn chỉ có 5 phút

Công cụ kiểm tra hiệu suất của Lighthouse giúp bạn khám phá các cơ hội để tăng tốc độ trang. Các đoạn mã chậm chạp của bên thứ ba có khả năng xuất hiện nhiều nhất trong khu vực Diagnostics/Chẩn đoán và các kiểm tra Reduce JavaScript excution time/Giảm thời gian thực thi JavaSciptAvoid enormous netword payloads/Tránh tải trọng mạng lớn.

Để chạy kiểm tra, bạn làm như sau:

  1. Nhấn Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở DevTools.
  2. Click vào tab Audits.
  3. Click vào Mobile.
  4. Chọn checkbox Performance (Bạn có thể bỏ chọn tất cả phần checkbox còn lại trong phần Audits.)
  5. Click vào Simulated Fast 3G, 4x CPU Slowdown (Giả lập mạng 3G nhanh, làm chậm CPU 4 lần)
  6. Chọn checkbox Clear Storage.
  7. Click Chạy audits.
chạy kiểm tra Audits

Sử dụng tài nguyên của bên thứ ba

Phần kiểm tra sử dụng tài nguyên của bên thứ ba của Lighthouse cho thấy một danh sách các nhà cung cấp của bên thứ ba mà trang đang sử dụng. Cái nhìn tổng quan này có thể giúp bạn hiểu rõ hơn bức tranh toàn cảnh và xác định mã của bên thứ ba bị dư thừa (redundant). Kiểm tra có sẵn trong các extension (phần mở rộng) của Lighthouse và sẽ sớm được thêm vào DevTools trong Chrome 77.

Sử dụng tài nguyên của bên thứ ba
Tên các nhà cung cấp của bên thứ ba được tạo ra bằng chức năng Startup generator.

Giảm thời gian thực thi JavaScript

Kiểm tra Giảm thời gian thực thi JavaScript / Reduce JavaScript execution time của Lighthouse làm nổi bật các mã của bên thứ ba mất nhiều thời gian để phân tích cú pháp (parse), biên dịch (compile) hoặc đánh giá (evaluate). Chọn checkbox Show 3rd-party resources (hiển thị các tài nguyên của bên thứ ba) để phát hiện các đoạn mã của bên thứ ba gây áp lực thời gian lên CPU.

hiển thị mã bên thứ ba

Tránh tải trọng mạng lớn

Kiểm tra Avoid enormous network payloads / Tránh tải trọng mạng lớn xác định các yêu cầu mạng-bao gồm những tài nguyên từ bên thứ ba-cái có thể làm chậm thời gian tải của trang. Kiểm tra sẽ đưa ra các cảnh báo khi tải trọng mạng vượt quá 4000 KB.

tải trọng mạng

Nếu bạn chỉ có 15 phút

Kiểm tra của Lighthouse chỉ phát hiện các vấn đề nghiêm trọng nhất về tốc độ, vì thế bạn có thể có những cải tiến thêm nữa ngay cả khi trang của bạn vượt qua tất cả các bài kiểm tra. Các panel Chrome DevTools Network và Performance có thể giúp bạn xác định các đoạn mã gây chậm.

Chrome DevTools badging (gắn huy hiệu biểu tượng) mã từ bên thứ ba

DevTools có thể highlight (làm nổi bật) các đoạn mã từ bên thứ ba theo tên của nhà cung cấp trong panel Network. Chức năng này có thể giúp bạn xác định mã từ bên thứ ba nào tạo ra yêu cầu trên trang và biết họ đang làm điều gì.

Để bật tính năng badge cho bên thứ ba, bạn làm như sau:

  1. Nhấn Control+Shift+J (hoặc Command+Option+J trên Mac) để mở DevTools.
  2. Nhấn Control+Shift+P (hoặc Command+Shift+P trên Mac) để bật menu Command.
  3. Nhập Show third party badges vào box

Giờ bạn có thể thấy badges của bên thứ ba trên bất kỳ trang nào bạn ghé thăm. Để kiểm tra điều này, hãy thử truy cập trang https://developers.google.com/web/

  1. Nhấn Control+Shift+J (hoặc Command+Option+J trên Mac) để mở DevTools
  2. Click vào tab Network.
  3. Chọn checkbok Disable cache (vô hiệu hóa cache).
  4. Tải lại trang.

Giờ bạn sẽ thấy một badge bên cạnh từng mã của bên thứ ba. Click vào badge để hiển thị nhiều thông tin hơn về đoạn mã đó.

hiển thị badge

Để có thêm thông tin về ảnh hưởng của JavaScript bên thứ ba lên hiệu suất, bạn hãy truy cập vào trang: https://www.thirdpartyweb.today/. Nó sử dụng dữ liệu HTTP Archive để đưa ra cái nhìn tổng quan về các nhà cung cấp của bên thứ ba và ảnh hưởng của chúng lên web.

Panel hiệu suất của Chrome DevTools

Một khi được bật, badge mã của bên thứ ba cũng xuất hiện trong panel Performance DevTools. Panel Performance ghi lại một bảng waterfall đại diện, cho biết trang của bạn đang tiêu tốn thời gian ở những phần nào và cách giúp bạn quan sát hiệu suất một cách chi tiết.

Để ghi lại cách trang tải, bạn làm như sau:

  1. Nhấn Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở DevTools.
  2. Click vào tab Performance.
  3. Click vào nút Start profiling and reload page.

Để xem các hoạt động xuất hiện trong luồng chính của trang, bạn hãy kiểm tra khu vực Main. Các tác vụ dài (long task) được gán nhãn bằng cảnh báo cờ màu đỏ, để biết chi tiết hơn về thời gian thực thi, bạn hãy hover qua chúng.

Thuật ngữ quan trọng: Một tác vụ dài là một đoạn mã JavaScript chiếm luồng chính từ 50 ms trở lên, điều này tác động lên nhận thức của người truy cập rằng UI (giao diện người dùng) bị đơ (freeze).

tác vụ dài

Bạn cũng có thể sắp xếp các tác vụ JavaScript theo thời gian thực thi để xác định tài nguyên bên thứ ba nào là chậm nhất:

  1. Tại vị trí cuối cùng của panel Performance, click vào tab Bottom-Up.
  2. Trong danh sách xổ xuống đã được nhóm lại, bạn chọn Group by Product (nhóm theo sản phẩm)

Nếu bạn chỉ có 30 phút

Chrome DevTools với tính năng chặn các yêu cầu mạng (network request blocking) cho phép bạn quan sát hành vi của trang khi một đoạn JavaScript, CSS hoặc một nguồn cụ thể khác không được tải về. Sau khi bạn đã xác định được JavaScript của bên thứ ba mà bạn nghi ngờ ảnh hưởng đến hiệu suất, bạn cần tiến hành kiểm tra xem thời gian tải sẽ thay đổi như thế nào bằng cách chặn các yêu cầu của những đoạn JavaScript đó.

Để bật tính năng chặn yêu cầu (request blocking), hãy làm như sau:

  1. Nhấn Control+Shift+J hoặc (Command+Option+J trên máy Mac) để mở DevTools.
  2. Click vào tab Network.
  3. Chuột phải vào bất cứ yêu cầu nào trong panel Network.
  4. Chọn Block request URL (chặn URL yêu cầu).
chặn yêu cầu

Tab Request blocking sẽ xuất hiện trong DevTools drawer. Bạn có thể quản lý các yêu cầu đã bị chặn ở đó.

Để đo đạc ảnh hưởng của JavaScript bên thứ ba:

  1. Đo đạc lượng thời gian trang bạn cần để tải về bằng cách sử dụng panel Network. Để giả lập các điều kiện của thế giới thực, hãy bật network throttling (điều chỉnh mạng) và CPU throttling (điều chỉnh CPU). Trên các kết nối nhanh và phần cứng của máy bàn, ảnh hưởng của các JavaScript nặng nề có thể hoàn toàn khác trên thiết bị di động.)
  2. Chặn các URL hoặc tên miền đại diện cho JavaScript của bên thứ bạn mà bạn tin rằng nó là vấn đề.
  3. Tải lại trang và đo đạc lại thời gian nó cần để tải mà không cần các JavaScript của bên thứ ba bị chặn.

Bạn chắc hẳn hy vọng thấy tốc độ được cải thiện, nhưng thi thoảng việc chặn tệp lệnh của bên thứ ba có thể không có được ảnh hưởng như bạn mong chờ. Nếu bạn rơi vào trường hợp đó, hãy giảm danh sách các URL bị chặn cho đến khi bạn cô lập được một cái là nguyên nhân gây chậm chạp.

Lưu ý rằng bạn cần thức hiện ít nhất là ba lần chạy để đo đạc và xem xét giá trị trung bình, điều đó sẽ cho ra giá trị ổn định hơn. Các nội dung của bên thứ ba thỉnh thoảng sẽ kéo các tài nguyên khác nhau mỗi khi tải trang, cách tiếp cận này cho phép bạn có được ước tính thực tế hơn. DevTools giờ hỗ trợ cùng lúc nhiều bản ghi trong panel Performance, giúp bạn làm điều này dễ dàng hơn một chút.

(Dịch từ bài viết: Identify slow third-party JavaScript, tác giả: Milica Mihajlija, trang web[.]dev)

0 bình luận

Để lại bình luận