Một trong những lý do khiến một website có quá nhiều tập tin CSS là cấu trúc quá phức tạp, sử dụng themes có thiết kế sidebar, folder chứa quá nhiều tập tin CSS và thêm vào quá nhiều widget không cần thiết. Vậy để giải quyết vấn đề này, chúng ta sẽ gộp tất cả các tập tin CSS bên ngoài vào một tập tin để làm giảm thời gian tải trang.
Đọc thêm: Cách tối ưu hóa CSS giao hàng
Làm sao để gộp các CSS bên ngoài?
Để gộp các tập tin CSS bên ngoài chúng ta chỉ cần sao chép và dán nội dung của mỗi tập tin CSS riêng lẻ bên ngoài với nhau để tạo thành một tập tin CSS chính. Có thể có từ 2 đến 3 tập tin CSS được gọi bên ngoài, hãy dán các tập tin đó thành một tập tin. Sau đó chỉnh sửa lại file HTML để gọi chỉ một tập tin mới đã cộng gộp các tập tin trên, và loại bỏ tất cả các link của tập tin củ. Cách làm như sau:
Ví dụ: Bạn có 1 website sử dụng 3 tập tin CSS được gọi từ bên ngoài bao gồm CSS chính, sidebar CSS, folder CSS. Ở mỗi CSS có link thứ tự như sau:
http://yourdomain.com/main.CSS
http://yourdomain.com/sidebar CSS
http://yourdomain.com/folder CSS
Bây giờ hãy mở 3 đường link này ra để copy mã CSS dài loằng ngoằng của 3 file đó và chép chúng vào thành một file CSS. Lưu nó bằng Notepad và đặt tên main.css. Bây giờ file main.css mới này sẽ là file cộng gộp của 3 file trên. Bây giờ, hãy upload file main.css này lên hosting để tạo link main.css mới. Lưu ý: Nếu sử dụng blogger thì nên lưu CSS trên Google Drive để tạo link. Sau khi đã tạo link main.css thành công, bây giờ hãy xóa bỏ tất cả các link gọi CSS bên ngoài củ trên HTML đi. Thay vào đó là một link gọi CSS mới (main.css) được đặt trong cặp thẻ <head></head>. Cụ thể đặt link này sau thẻ <head> với cú pháp sau:
<link href='link CSS mới' rel='stylesheet' type='text/css'/>
Thay link CSS mới bằng link của file CSS mới được lưu trên Google Drive. Sau khi gộp các file CSS thành một file, lúc này sức tải web thay đổi rất nhiều. Thay vì máy chủ phải kêu gọi 3 file CSS từ bên ngoài, bây giờ chỉ 1 file duy nhất. Ngoài phương pháp gộp CSS, nếu các tập tin CSS bên ngoài nhỏ gọn chiếm ít dung lượng thì có thể nội tuyến CSS trong HTML website sẽ tăng tốc nhanh hơn.
Đọc thêm: Cách loại bỏ render chặn JavaScript
No comments:
Post a Comment