Dark Mode, Font Inter, và Triết Lý 13KB
Cách chúng tôi tối ưu một blog tiếng Việt để tải tức thì — từ di chuyển font, đến ảnh SVG, đến nút chuyển theme.
Khi chúng tôi chuyển tamthe.com từ template tạm sang blog sản xuất, mục tiêu không chỉ là làm nó đẹp. Mà là làm nó nhanh.
Điểm Xuất Phát
Template Astro blog mặc định thì ổn, nhưng có ba vấn đề với đối tượng độc giả Việt Nam:
- Font Atkinson — đẹp, nhưng thiếu dấu tiếng Việt (ắ, ế, ơ, ư…)
- Ảnh JPG mẫu — 150KB ảnh stock không liên quan đến nội dung
- Không có dark mode — một tính năng không thể thiếu năm 2026
Các Bước Sửa
Font: Atkinson → Inter
Inter có bộ ký tự tiếng Việt chuyên dụng bao phủ dải unicode U+0102-0103 (ĂÂ), U+01A0-01A1 (ƠƯ), U+1EA0-1EF9 (ạảãáà…), và tất cả dấu tổ hợp. Một lần cài @fontsource/inter, 70 file font trải trên 4 độ đậm, phục vụ dưới dạng woff2 tối ưu qua pipeline build của Astro.
Ảnh: JPG → SVG
Chúng tôi thay 5 ảnh JPG mẫu (~150KB tổng) bằng 4 ảnh SVG theo chủ đề (~5.5KB tổng). Mỗi SVG là một minh họa tùy chỉnh khớp với chủ đề bài viết:
- Âm dương + cột Hy Lạp cho Khắc Kỷ & Đạo
- Hoa sen + gợn nước cho Chánh Niệm
- Tre + thư pháp cho Tu Thân
- Núi + mặt trời cho ảnh hero mặc định
Kết quả: nhẹ hơn 27 lần, phù hợp chủ đề, co giãn vô hạn.
Dark Mode: Nút Chuyển Nhận Biết Hệ Thống
Bộ phát hiện system preference bằng CSS thuần (prefers-color-scheme: dark) với nút ghi đè thủ công lưu trong localStorage. Script inline trong <head> ngăn flash sai theme. Bảng màu chuyển từ kem/xanh ấm sang than/mint — cả hai đều được thiết kế cho đọc văn bản dài.
Chỉ Số Đáng Kể
| Trang | Dung lượng |
|---|---|
| Trang chủ | 12.3 KB |
| Danh sách blog | 7.0 KB |
| Bài viết | 7.5 KB |
| Giới thiệu | 6.7 KB |
Mỗi trang tải trong một lần request duy nhất. Không JavaScript chặn render. Không video hero 5MB. Chỉ có văn bản, font, và vector.
Hiệu năng không nằm ở những tối ưu thông minh. Nó nằm ở việc không gửi đi những thứ bạn không cần ngay từ đầu.