🌞

Hướng dẫn kiểm tra performace với Chrome DevTools

Sửa bài viết này

Bước 1: Cài đặt DevTools

Giả sử bạn nhận được phàn nàn từ user là trang nào đó trên site load quá chậm. Bạn cần check theo các bước

  1. Mở trang này trong cửa sổ private mới
  2. Ấn tổ hợp phím Ctrl + Shift + I để mở DevTools
  3. Click tab Network

Figure 1. The Chrome DevTools Network panel, opened next to the slow page that you're going to diagnose.

  1. Click nút Capture Screenshots Capture Screenshots, nó chuyển sang xanh, để capture screenshot trong suốt quá trình trang được load

Bước 2: Giả lập mobile

Sử dụng web trên máy tính thì ít có vấn đề, vì tốc độ mạng ngày nay được cải thiện nhiều, nếu máy tính mà vẫn chậm thì bạn xem lại nhé, giả lập xem trải nghiệm trên mobile thế nào

  1. Check vào ô Disable Cache để quá trình kiểm tra chính xác hơn
  2. Từ dropdown menu đang có giá trị No throttling chọn xuống Regular 2G. DevTools sẽ giả lập tốc độ mạng xuống 2G

Figure 2. The Chrome DevTools Network panel, set up to emulate a mobile user's experience. Screenshots, cache disabling, and throttling are outlined in blue, from left to right, respectively.

Bước 3: Đánh giá kết quả

Tìm xem đâu là nguyên nhân làm chậm page load bằng cách reload lại trang và xem xét kết quả.

Tìm các đoạn script block render

Khi trình duyệt gặp tag <script>, nó sau pause việc render, thực thi đoạn script ngay lập tức. 1. Tìm các đoạn script không thật sự cần chạy ngay lập tức, đánh dấu async hoặc defer Ấn tổ hợp Ctrl + R để load lại trang.

Figure 3. The Chrome DevTools Network panel, after reloading the page.

  1. Để ý giá trị của DOMContentLoaded trong tab Summary, phía dưới tab Network. Bạn sẽ thấy 4 giây.
  2. Click file main.js để xem, nó mở ra một tab mới show chi tiết hơn
  3. Click vào tab Preview để xem source code. Đoạn script này đợi 4000ms, đánh dấu nó là async và chuyển xuống dưới <body>

Figure 4. Viewing the source code for main.js in the Preview pane.

Đọc thêm Parser-blocking vs. async Javascript để tìm hiểu thêm về script block render

Tìm các request lớn

Trong source ví dụ, bạn thấy cái logo sẽ load rất chậm, mặc dù nó không hề block render

  1. Mở lại tab Network
  2. Double click lên hình screenshot
  3. Click mũi tên để di chuyển qua lại giữa các screenshot. Bên dưới screenshot là thời gian nó được chụp
  4. Hover lên Waterfall cho request logo-1024.png. Phần lớn thời gian tiêu tốn cho việc download hình này.

Figure 5. The waterfall for logo-1024px.png.

Xác nhận lại các thay đổi đã fix

Chúng ta đã thực hiện 2 thay đổi

  • Chuyển <script> xuống dưới body, đánh dấu thành async
  • Đổi logo sang SVG

Giờ chúng ta chạy test lại một lần nữa để xem nó cải thiện được phần nào chưa

  1. Mở trang đã sữa trên tab private mới
  2. Setup DevTools tương tự như lúc trước
  3. Reload lại trang

Figure 6. A recording of the page's load, after applying the fixes. The page used to take about 10 seconds to appear visually complete. Now it only takes about 1 second.

Đọc thêm

https://developers.google.com/web/tools/chrome-devtools/network-performance/

Initializing...