Cách tối ưu hóa CSS giao hàng

Tối ưu hóa CSS giao hàng là cách thao tác CSS của chủ web site giúp tăng tốc độ tải trang một cách nhanh chóng. Trong một website, thông thường mặc định các mẫu CSS được lấy từ bên ngoài rất nhiều. Tùy theo nền tảng Blogger hay Wordpress mà số lượng CSS khác nhau. Khi tải một trang có CSS bên ngoài lớn, máy chủ sẽ thực hiện lệnh gọi các CSS trong cùng một thời điểm nên tốc độ tải trang sẽ rất chậm. Bây giờ công việc của chúng ta là tháo gỡ vấn đề này bằng các phương pháp nội tuyến CSS hay không đồng bộ CSS để giúp website tải nhanh hơn. Bài này sẽ hướng dẫn cách xử lý tối ưu hóa CSS giao hàng đối với Blogger. Bây giờ hãy làm theo tôi các bước sau:

                                    Đọc thêm: Lưu trữ CSS và Javascript trên Google Drive

Cách tối ưu hóa CSS giao hàng

Khi màn hình PageSpeed ​​Insights hiển thị kết quả các render chặn JavaScript trong màn hình đầu tiên và phía dưới cũng hiễn thị các CSS nguồn của blogger được lấy từ bên ngoài vào đó là các file bundle.css và authorization.css. Đây là 2 mã nguồn CSS chính của hệ thống mà làm giảm sức tải trang rỏ rệt. Với file bundle.css có 2 loại là bundle.css của màn hình destop và bundle.css của di động.

• https://www.blogger.com/static/v1/widgets/1708208307-widget_css_bundle.css
• https://www.blogger.com/dyn-css/authorization.css?targetBlogID=9146670704416122528&zx=4f5f4765-0576-4367-a947-9af7bb04836f

Bây giờ chúng ta sẽ tối ưu hóa giao hàng nó theo cách đơn giản sau kể cả màn hình Destop và Di động

Với màn hình Destop (ký hiệu là bundle.css Destop) hãy mở link sau ở một tab mới

https://www.blogger.com/static/v1/widgets/1708208307-widget_css_bundle.css sau đó copy toàn bộ mã CSS dài loằng ngoằng sang Notepad và lưu tên bundle.css Destop.

Với điện thoại di động  (ký hiệu là bundle.css Mobile) hãy mở link sau ở một tab mới 

https://www.blogger.com/static/v1/widgets/3075532872-widget_css_mobile_2_bundle.css và copy toàn bộ mã CSS sang Notepad và lưu tên bundle.css Mobile. 

Tiếp theo, đăng nhập vào Blogger, vào phần Mẫu(Template) và chọn Chỉnh sửa HTML. Sau đó tìm đến thẻ <b:skin>....</b:skin> và dán lên phía trên nó đoạn mã sau.

Mã để dán vào

<b:if cond='data:blog.isMobile'>
<style type='text/css'>
Dán bundle.css Mobile vào đây
</style>
<b:else/>
<style type='text/css'>
Dán bundle.css Destop vào đây
</style>
</b:if>

Bundle.css Mobile và bundle.css Destop là 2 file được lưu ở bước đầu tiên, bây giờ mở 2 file đó ra và dán đoạn mã dài loằng ngoằng vào 2 địa điểm Moblie và Destop thích hợp. Cuối cùng ấn Lưu Mẫu là xong. Bây giờ hãy vào PageSpeed ​​Insights để kiểm tra lại xem 2 đường link này đã niến mất chưa. Thật tuyệt vời, vậy là nó đã biến mất và tốc độ chắc chắn sẽ tăng trên 90 rồi.

                                 Đọc thêm: Cách nén JavaScript và CSS stylesheet trong Blogger?