Hướng dẫn nén CSS và cách xử lý CSS cho blogspot

[blog]
Hướng dẫn nén CSS và cách xử lý CSS giúp tăng tốc độ load trang cho blogspot.

CSS trong blog được hiển thị theo 3 kiểu:

- CSS hiển thị đẹp
- CSS nén thường
- CSS nén siêu gọn

Công cụ để nén CSS: https://css.giaodienblog.net

Mình sẽ phân tích ưu điểm và nhược điểm của từng kiểu hiển thị:

1. CSS hiển thị đẹp: Là CSS hiển thị ngay ngắn, theo hàng, theo lối

- Ưu điểm: Nhìn đẹp, thoáng, dễ chỉnh sửa CSS, không bị lag trong quá trình sửa.
- Nhược điểm: Tốn nhiều không gian khoảng trống của blog. Tốc độ tải trang chậm. Nếu 1 blog mà để CSS đẹp như trên thì các dòng html khi view source trên trình duyệt lên tới 20,000 dòng, rất nặng nề khi load trang.

Ví dụ CSS không được tối ưu

2. Nén CSS thường: Là CSS các class hoặc id được nén nằm trên 1 hàng xóa hết dấu chấm phẩy cuối cùng, cứ hết 1 class hoặc id thì sẽ xuống hàng tiếp tục class hoặc id khác.

- Ưu điểm: Giúp tiết được không gian trên blog, tăng tốc độ tải trang, dễ chỉnh sửa CSS, cũng không bị lag trong quá trình sửa html, sửa css, đa số nên dùng loại nén CSS thường này.
- Nhược điểm: Không có nhược điểm, gọi là trung bình

3. Nén siêu gọn: Xóa hết dấu chấm phẩy cuối cùng, tất cả class, id nằm trên 1 dòng

- Ưu điểm: Tiết kiệm tối đa không gian trên blog, tăng tốc độ tối đa tải trang cho blog
- Nhược điểm: Đây gọi là siêu nén, rất khó để chỉnh sửa css, ví dụ nếu bạn sửa chỗ A thì chỗ Z nó bị thay đổi.

Như vậy thì CSS loại nào cũng có ưu điểm và nhược điểm khác nhau.

Câu hỏi: Tại sao không lưu tất cả CSS ra host khác rồi trỏ về blog, như vậy lại gọn? Ví dụ như link //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.

Trả lời: Thứ nhất là làm blog load chậm, bị cảnh báo tốc độ PageSpeed Insights không nên để link CSS bên ngoài rồi trỏ về blog.

Như vậy trong 3 cách nén CSS thì cách nén thường là đa số được dùng.

Sau đây mình hướng dẫn các bạn cách nén CSS tối ưu nhất là Nén siêu gọn CSS và không bị lag, dễ sửa nhất trong quá trình sửa CSS.

Công cụ để nén CSS: https://css.giaodienblog.net

CSS bạn chia ra làm nhiều đoạn như đoạn 1, đoạn 2, đoạn 3 đoạn 4, sau đó Siêu nén nó lại.

Giữa các đoạn các bạn enter khoảng trống 1 - 2 hàng để cách nó ra.

Làm như vậy thì khi bạn sửa CSS sẽ không bị lag, vẫn chỉnh sửa bình thường. Tiết kiệm được không gian cho blogspot của bạn, tối ưu css tăng tốc độ tải trang.

Ví dụ trang mình: www.giaodienblog.net sau khi view source trên trình duyệt view-source:https://www.giaodienblog.net/ chỉ vọn vẹn 590 dòng, rất là nhẹ.

Blog tối ưu tốt nhất là tốc độ tải trang < 1 giây Very Fast

Bài viết mang tính tham khảo cho các bạn, bạn nào có ý kiến vui lòng comment bên dưới.

Công cụ để nén CSS: https://css.giaodienblog.net

[/blog]