Danh sách kiểm tra HTML cho tốc độ trang

Dán HTML của trang để tìm script chặn hiển thị, ảnh thiếu kích thước hoặc lazy loading, thiếu viewport, @import, document.write và nhiều vấn đề khác.

Mở trang, chọn "Xem nguồn trang" (Ctrl+U), sao chép toàn bộ rồi dán vào đây.

Dung lượng HTML 0.4 KB · 11 phần tử · 2 script · 1 stylesheet · 3 hình ảnh
Điểm có thể cải thiện: 8
Ảnh hưởng lớn1 script chặn hiển thị trong <head>

Thêm defer (hoặc async cho script độc lập) để trình duyệt hiển thị trang trước khi tải xong script.

<script src="https://cdn.example.com/analytics.js">
Ảnh hưởng vừa1 hình ảnh thiếu width và height

Đặt width và height (hoặc aspect-ratio trong CSS) để trình duyệt giữ chỗ và bố cục không bị xô lệch (CLS).

<img src="/hero.jpg" alt="Hero">
Ảnh hưởng nhỏ1 hình ảnh dưới màn hình đầu tiên thiếu loading="lazy"

Thêm loading="lazy" cho hình ảnh không hiển thị ở màn hình đầu tiên.

<img src="/b.png" alt="B" width="300" height="200">
Ảnh hưởng nhỏ3 hình ảnh dạng JPEG/PNG/GIF

Dùng WebP hoặc AVIF (ví dụ qua <picture>) – thường nhẹ hơn 25–50% với cùng chất lượng.

<img src="/hero.jpg" alt="Hero">
<img src="/a.png" alt="A" width="300" height="200">
<img src="/b.png" alt="B" width="300" height="200">
Ảnh hưởng nhỏ1 iframe thiếu loading="lazy"

Thêm loading="lazy" cho nội dung nhúng như video, bản đồ.

<iframe src="https://www.youtube.com/embed/xyz">
Ảnh hưởng lớnThiếu thẻ meta viewport

Thêm <meta name="viewport" content="width=device-width, initial-scale=1"> để hiển thị đúng trên điện thoại.

<meta name="viewport">
Ảnh hưởng nhỏChưa khai báo charset trong <head>

Thêm <meta charset="UTF-8"> làm phần tử đầu tiên trong <head>.

<meta charset="UTF-8">
Ảnh hưởng nhỏ1 nguồn bên thứ ba chưa có preconnect

Thêm <link rel="preconnect"> cho các nguồn bên thứ ba quan trọng để mở kết nối sớm.

cdn.example.com
Các kiểm tra đã đạt (8)
  • ✓ Ít stylesheet chặn hiển thị
  • ✓ Không dùng CSS @import
  • ✓ Các quy tắc @font-face inline đã có font-display
  • ✓ Hình ảnh đầu tiên không bị tải lười
  • ✓ Không dùng document.write()
  • ✓ Mã inline nhỏ gọn
  • ✓ Kích thước DOM hợp lý
  • ✓ Dung lượng HTML hợp lý
Đây là danh sách kiểm tra tĩnh cho đoạn HTML bạn dán – không tải trang, không chạy JavaScript và không đo tốc độ thực. Hãy dùng Lighthouse hoặc PageSpeed Insights để có số liệu phòng thí nghiệm và thực tế (Core Web Vitals).

Danh sách kiểm tra tốc độ trang là gì?

Công cụ này rà soát mã nguồn HTML của trang theo danh sách các vấn đề hiệu năng front-end thường gặp và giải thích cách khắc phục từng vấn đề: script và stylesheet chặn hiển thị, CSS @import, @font-face thiếu font-display, ảnh thiếu kích thước hoặc lazy loading, ảnh hero bị tải lười, định dạng ảnh cũ, iframe thiếu lazy loading, thiếu viewport hoặc charset, document.write, mã inline quá lớn, thiếu preconnect và DOM hay HTML quá lớn.

Cách sử dụng Danh sách kiểm tra tốc độ trang

  1. Mở trang của bạn, chọn Xem nguồn trang (Ctrl+U), sao chép toàn bộ.
  2. Dán HTML và nhấn Phân tích.
  3. Xem các phát hiện được sắp xếp theo mức ảnh hưởng, kèm mẫu các thẻ gây vấn đề.
  4. Mở rộng mục "Các kiểm tra đã đạt" để xem những gì đã ổn.

Ví dụ

Đầu vào
The sample page (analytics.js without defer, hero.jpg without size, iframe without lazy, no viewport)
Đầu ra
8 possible improvements: 1 render-blocking script, 1 image without width/height, 1 below-the-fold image without lazy loading, 3 JPEG/PNG images, 1 iframe without lazy loading, no viewport, no charset, 1 third-party origin without preconnect

Khi nào nên dùng Danh sách kiểm tra tốc độ trang

Dùng công cụ để rà soát tĩnh nhanh các template hoặc trang, hoặc khi bạn không chạy được Lighthouse. Công cụ không đo thời gian tải thực hay Core Web Vitals và không thấy được tài nguyên do JavaScript thêm vào; hãy dùng Lighthouse hoặc PageSpeed Insights để có dữ liệu phòng thí nghiệm và dữ liệu thực tế.

Danh sách kiểm tra tốc độ trang hoạt động như thế nào

HTML được quét trong trình duyệt bằng một bộ phân tích thẻ gọn nhẹ sau khi loại bỏ comment. Mỗi quy tắc kiểm tra những thẻ và thuộc tính cụ thể – ví dụ thẻ <script> bên ngoài trong <head> không có async, defer hoặc type=module, <img> không có đủ cả width và height, ảnh sau hai ảnh đầu tiên không có loading="lazy", hoặc tổng số phần tử vượt quá 1.500. Nguồn bên thứ ba của script và stylesheet được đối chiếu với các liên kết preconnect và dns-prefetch. Không có trang nào được tải và không có JavaScript nào chạy.

Các Trường Hợp Sử Dụng Phổ Biến

  • Tìm script chặn hiển thị trong phần header của theme.
  • Phát hiện ảnh gây xô lệch bố cục vì thiếu width và height.
  • Kiểm tra ảnh hero không bị tải lười (ảnh hưởng xấu đến LCP).
  • Rà soát template email HTML hoặc landing page trước khi ra mắt.

Câu Hỏi Thường Gặp

Công cụ này có giống Google PageSpeed Insights không?

Không. PageSpeed Insights tải trang và đo đạc. Công cụ này chỉ đọc HTML bạn dán vào, nên cho kết quả tức thì và riêng tư nhưng không đo được tốc độ.

Vì sao ảnh đầu tiên không nên tải lười?

Ảnh lớn nhất ở màn hình đầu thường là phần tử Largest Contentful Paint. Tải lười làm nó bị trì hoãn đến khi tính bố cục, gây ảnh hưởng xấu đến LCP.

Có nên dùng defer cho mọi script không?

Script cần DOM và chạy theo thứ tự nên dùng defer; script độc lập như analytics có thể dùng async. Mã quan trọng viết inline nên giữ thật nhỏ.

Khám phá thêm danh mục

CRC
Thuật toán kiểm tra dư thừa vòng để phát hiện lỗi
MD
Thuật toán tóm tắt thông điệp (MD2, MD4, MD5)
SHA-1
Thuật toán băm an toàn 1 - hàm băm 160-bit
SHA-2
Họ thuật toán băm an toàn 2 (SHA-224, SHA-256, SHA-384, SHA-512)