Để khắc phục vấn đề về kích thước tài liệu HTML là 89 Kb, vượt quá mức trung bình 33 Kb và khuyến nghị của chúng tôi là 50 Kb, bạn có thể thực hiện các biện pháp sau:
1. Thu nhỏ (Minify) mã HTML
Loại bỏ các khoảng trắng, thẻ chú thích và dòng trống không cần thiết trong mã HTML. Việc này giúp giảm kích thước tài liệu mà không làm ảnh hưởng đến nội dung. Bạn có thể sử dụng các công cụ như HTMLMinifier để thực hiện việc này.
2. Loại bỏ mã không sử dụng
Kiểm tra và loại bỏ các đoạn mã HTML, CSS và JavaScript không cần thiết hoặc không sử dụng. Các công cụ như PurgeCSS có thể giúp bạn loại bỏ các lớp CSS không còn sử dụng, và unused-js giúp loại bỏ các đoạn mã JavaScript thừa.
3. Tối ưu hóa hình ảnh và phương tiện
Kiểm tra tất cả các hình ảnh và tệp phương tiện khác (như video) có trong tài liệu. Đảm bảo chúng được nén và sử dụng các định dạng hiện đại như WebP hoặc AVIF, giúp giảm dung lượng mà vẫn giữ chất lượng tốt.
4. Trì hoãn hoặc tải JavaScript không đồng bộ
Đảm bảo các tệp JavaScript không cần thiết cho việc tải trang ban đầu được tải không đồng bộ (sử dụng thuộc tính async) hoặc trì hoãn (sử dụng thuộc tính defer). Điều này giúp giảm thời gian tải trang ban đầu.
5. Chuyển mã nguồn bên ngoài
Chuyển các mã CSS và JavaScript sang các tệp bên ngoài thay vì nhúng trực tiếp vào trong HTML. Điều này giúp giảm kích thước của tài liệu HTML và tăng khả năng lưu trữ bộ nhớ đệm (caching) cho các tệp này.
6. Lazy Loading (Tải chậm)
Áp dụng kỹ thuật lazy loading cho hình ảnh và các tài nguyên không cần thiết phải tải ngay khi trang được mở. Chỉ tải các tài nguyên khi người dùng cuộn đến chúng, giúp giảm tải tài nguyên ban đầu.
7. Giảm số lượng thư viện bên ngoài
Các thư viện bên ngoài (như jQuery, Bootstrap, v.v.) nếu không cần thiết có thể thêm vào kích thước tài liệu. Xem xét sử dụng các thư viện nhẹ hơn hoặc loại bỏ những thư viện không cần thiết.
Bằng cách thực hiện các bước trên, bạn có thể giảm kích thước tài liệu HTML về mức khuyến nghị 50 Kb hoặc thấp hơn, giúp cải thiện hiệu suất và tốc độ tải trang.
1. Thu nhỏ (Minify) mã HTML
Loại bỏ các khoảng trắng, thẻ chú thích và dòng trống không cần thiết trong mã HTML. Việc này giúp giảm kích thước tài liệu mà không làm ảnh hưởng đến nội dung. Bạn có thể sử dụng các công cụ như HTMLMinifier để thực hiện việc này.
2. Loại bỏ mã không sử dụng
Kiểm tra và loại bỏ các đoạn mã HTML, CSS và JavaScript không cần thiết hoặc không sử dụng. Các công cụ như PurgeCSS có thể giúp bạn loại bỏ các lớp CSS không còn sử dụng, và unused-js giúp loại bỏ các đoạn mã JavaScript thừa.
3. Tối ưu hóa hình ảnh và phương tiện
Kiểm tra tất cả các hình ảnh và tệp phương tiện khác (như video) có trong tài liệu. Đảm bảo chúng được nén và sử dụng các định dạng hiện đại như WebP hoặc AVIF, giúp giảm dung lượng mà vẫn giữ chất lượng tốt.
4. Trì hoãn hoặc tải JavaScript không đồng bộ
Đảm bảo các tệp JavaScript không cần thiết cho việc tải trang ban đầu được tải không đồng bộ (sử dụng thuộc tính async) hoặc trì hoãn (sử dụng thuộc tính defer). Điều này giúp giảm thời gian tải trang ban đầu.
5. Chuyển mã nguồn bên ngoài
Chuyển các mã CSS và JavaScript sang các tệp bên ngoài thay vì nhúng trực tiếp vào trong HTML. Điều này giúp giảm kích thước của tài liệu HTML và tăng khả năng lưu trữ bộ nhớ đệm (caching) cho các tệp này.
6. Lazy Loading (Tải chậm)
Áp dụng kỹ thuật lazy loading cho hình ảnh và các tài nguyên không cần thiết phải tải ngay khi trang được mở. Chỉ tải các tài nguyên khi người dùng cuộn đến chúng, giúp giảm tải tài nguyên ban đầu.
7. Giảm số lượng thư viện bên ngoài
Các thư viện bên ngoài (như jQuery, Bootstrap, v.v.) nếu không cần thiết có thể thêm vào kích thước tài liệu. Xem xét sử dụng các thư viện nhẹ hơn hoặc loại bỏ những thư viện không cần thiết.
Bằng cách thực hiện các bước trên, bạn có thể giảm kích thước tài liệu HTML về mức khuyến nghị 50 Kb hoặc thấp hơn, giúp cải thiện hiệu suất và tốc độ tải trang.