Tối ưu HTML/CSS

😎 Đôi khi việc xem nhẹ html/css, xem nhẹ công lực của css đơ. Dù đơn giản nhưng nó là mảnh ghép không thể thiếu của 1 website, nếu biết tối ưu, tổ chức code thì pagespeed, tốc độ load trang cải thiện đáng kể.
Xin chia sẻ đôi chút về dự án của 24h, eva mình đã làm.

⚽ Mục tiêu
– Sau khi import css tổng dung lượng css < 50kb
– Sau khi tối ưu tối èo, chuẩn lên chuẩn xuống( SEO, W3C) -> pagespeed html/css đo được 100đ
– Sử dụng các thẻ html5 để chuẩn với anh em ngoại quốc không nó biết nó khinh quê mùa, gặp mấy anh Grab chửi cho vì google nó bảo các anh thế 😉

💡Cách thực hiện
– 100đ đơn giản như ăn kẹo
+ Làm theo chuẩn https://validator.w3.org/, html5
+ Không dùng các icon riêng mà gom vào sử dụng kiểu Images Sprites sau đó nén ảnh cho nó chất
+ Đặc biệt không được dùng fw CSS(Bootstrap, Foundation vân vân và mây mây) vì nó quá nhiều css thừa
+ Sau khi đáp ứng các chuẩn thì css để inline( Tức là gom html/css vào 1 file) và minify html/css 
-> 100đ quá đơn giản
– Để dung lượng css sau khi import < 50kb thì cần làm:
+ Tách thành 2 file(1 common và 1 file theo module) tuỳ ý hiểu và project thực tế tách file cho đẹp mặt 😉
+ Ứng dụng lối chơi đẹp mắt nhưng đầy hiệu quả của Sass(Mixins, Nesting, Extend/Inheritance) giống như áp dụng JQKK của Bát Sa vào cho đội tuyển Việt Nam nhưng cũng đầy hiệu quả.

Thực ra html/css chỉ có vậy
Tóm lại là không dùng fw CSS, viết HTML/CSS tối ưu từ thẻ HTML đến class của CSS là 100đ

Trang thegioididong.com viết html/css rất chuẩn ae có thể tham khảo

Write: JackLe

Leave a Reply

Your email address will not be published. Required fields are marked *