Tối ưu tốc độ tải trang

Hãy nhớ lần mèo con mở một trang mà nó cứ quay vòng mãi không hiện. Bực chứ? Đa số người dùng sẽ bỏ đi nếu trang lâu hiện. Tốc độ không phải thứ xa xỉ - nó là một phần của trải nghiệm, và công cụ tìm kiếm cũng tính tốc độ khi xếp hạng. Nói gọn: nhanh cũng là một tính năng.

Tin vui là phần lớn việc tối ưu nằm trong tầm tay người viết HTML, và mèo con đã học kha khá rồi. Bài này gom các thủ thuật còn lại mà site thật hay dùng.

• ▸Trang chậm thì người dùng bỏ đi - tốc độ là một phần trải nghiệm.
• ▸Công cụ tìm kiếm cũng tính tốc độ khi xếp hạng (SEO).
• ▸Phần lớn việc tối ưu nằm trong tầm tay người viết HTML.

Trình duyệt sẽ nhanh hơn nếu được báo trước về tài nguyên sắp cần. Ta báo bằng thẻ <link rel="…"> đặt trong head. Mỗi giá trị rel là một kiểu gợi ý khác nhau:

Hai gợi ý "dọn đường" tới một domain khác (nơi chứa font, ảnh…): dns-prefetch tra cứu DNS sớm, còn preconnect mở sẵn cả kết nối (mạnh hơn, nên chỉ dùng cho vài domain quan trọng).

<link rel="preconnect" href="https://fonts.example.com" />
<link rel="dns-prefetch" href="https://anh.example.com" />

• ▸Resource hints là thẻ <link rel="…"> trong head, báo trước cho trình duyệt.
• ▸dns-prefetch: tra cứu DNS sớm tới domain khác.
• ▸preconnect: mở sẵn cả kết nối - mạnh hơn, chỉ dùng cho domain quan trọng.

Hai gợi ý còn lại tải hẳn tài nguyên về trước. Khác nhau ở thời điểm cần: preload cho thứ trang HIỆN TẠI cần sớm và chắc chắn dùng (font chữ chính, ảnh lớn đầu trang) - kéo lên ưu tiên cao. prefetch cho thứ CÓ THỂ cần ở trang sau (tài nguyên của trang người dùng dễ bấm tới), tải lúc rảnh.

<!-- cần NGAY ở trang này -->
<link rel="preload" href="/fonts/chinh.woff2" as="font" crossorigin />

<!-- CÓ THỂ cần ở trang sau -->
<link rel="prefetch" href="/trang-sau.html" />

Chiều ngược lại với "tải sớm" là hoãn tải thứ chưa cần. Mèo con đã gặp loading="lazy" cho ảnh ở bài Liên kết, ảnh & đa phương tiện; nó cũng dùng được cho iframe (bản đồ, video nhúng) nằm xa phía dưới.

<iframe src="ban-do.html" loading="lazy" title="Bản đồ cửa hàng"></iframe>

Quan trọng hơn mọi gợi ý: phần lớn tốc độ đến từ những nền mèo con đã học - như chuyện nạp script không chặn ở bài Thẻ script: defer & async. Nhắc lại nhanh:

• ▸Ảnh đúng cỡ bằng srcset (bài Liên kết, ảnh) - điện thoại không tải ảnh khổng lồ.
• ▸Script không chặn bằng defer/async (bài trước) - trang hiện sớm.
• ▸HTML semantic gọn gàng - ít rác, trình duyệt dựng nhanh.
• ▸loading="lazy" cho ảnh/iframe nằm xa phía dưới.

Một cạm bẫy thường gặp: rải hint khắp nơi theo cảm tính rồi tưởng trang đã nhanh. Cách làm đúng là đo trước khi tối ưu - tìm xem chỗ nào thật sự chậm rồi mới sửa đúng chỗ đó. Có sẵn công cụ đo miễn phí ngay trong trình duyệt như Lighthouse (mèo con chỉ cần biết nó tồn tại ở giai đoạn này).