1. Preload font hoặc ảnh quan trọng
Dùng <link rel="preload"> cho các file cần tải sớm (như font, ảnh đầu trang…)
<link rel="preload" href="/fonts/jetbrains.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/banner.webp" as="image">
Lưu ý: dùng đúng as và có crossorigin nếu là font.
2. Lazy load ảnh không cần thiết lúc đầu
Thêm thuộc tính loading="lazy" cho tất cả ảnh dưới màn hình đầu:
<img src="/img/post.jpg" alt="..." loading="lazy">Không cần JS. Trình duyệt sẽ tự trì hoãn ảnh cho đến khi gần cuộn tới.
3. Tối ưu thẻ <meta viewport>
Đảm bảo bạn đã có:
<meta name="viewport" content="width=device-width, initial-scale=1">Nếu thiếu dòng này, site sẽ không responsive chuẩn → Google đánh tụt tốc độ mobile.
4. Tối ưu CSS – tránh render blocking
Nếu CSS rất nhỏ (<5KB), bạn có thể nhúng trực tiếp vào HTML:
<style>
/* css chính */
body { max-width: 720px; margin: auto; ... }
</style>
Nếu dùng file ngoài, hãy dùng preload hoặc defer để đẩy thời gian nạp xuống cuối:
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="style.css"></noscript>5. Minify file HTML, CSS, JS
Không dùng tool? Dưới đây là cách thủ công:
- Dùng site như:
- Hoặc VS Code extension: “Minify All” / “Minify HTML”
- Dành cho blog nhỏ – làm 1 lần trước khi deploy là đủ
6. Dùng định dạng ảnh nhẹ
Chuyển ảnh sang WebP để tiết kiệm ~50% dung lượng:
<img src="/img/post.webp" alt="..." loading="lazy">Dùng tool online: Squoosh.app / TinyPNG / WebP Converter CLI.
7. Dùng CDN nếu có
- Nếu host bằng Cloudflare Pages → đã có CDN tích hợp
- Netlify → cũng dùng CDN
- Đừng lo chuyện server, tập trung vào tối ưu asset là đủ
8. Test bằng PageSpeed / WebPageTest
Sau khi tối ưu, test lại tại:
Blog tĩnh = blog siêu nhanh – nhưng chỉ khi bạn xử lý asset đúng cách.
Hãy giữ blog của bạn luôn nhẹ, luôn sạch, luôn nhanh – vì Google và người đọc đều ghét chờ đợi 😤
Chúc bạn tối ưu site gọn – mượt – max điểm tốc độ mà vẫn thuần HTML!
Bình luận