Tối ưu Blogspot - #2 Tối ưu CSS3

Chào các bạn tiếp tục với chuyên mục tối ưu blogspot hôm nay mình sẽ hướng dẫn các bạn cách Tối ưu CSS3


Vậy "Tối ưu CSS3" để làm gì?
Website chuẩn CSS3 sẽ giúp trình duyệt web giải mã code nhanh hơn -> website load nhanh hơn -> Hơn nữa sẽ giúp con bọ Google đọc và index dễ dàng hơn. Hơn hết là tối ưu được với người dùng khi người dùng trải nghiệm load website trong tích tắc.
Bạn có thể kiểm tra bằng công cụ jigsaw.w3.org để thử xem website của bạn đã chuẩn CSS3 hay chưa?
Sau vài quá trình tối ưu blog của mình đã chuẩn CSS3 100% hoàn toàn.
Đi vào vấn đề chính luôn nhé, bây giờ mình sẽ hướng dẫn các bạn cách làm

1. TỐI ƯU CSS3 CHO FONT-AWESOME VÀ FONT GOOGLE

Font-Awesome là tiện ích giúp bạn có thể tạo ra các icon trong blogger thường sử dụng cho menu và các khai báo thông tin website.
Khi sử dụng Font Awesome bạn sẽ thấy khá nhiều lỗi xuất phát là tiện tích này với hơn 70 lỗi và để sửa lỗi CSS3 xuất phát từ file này bạn sẽ dùng đoạn code sau đây để thay thế nó:
(tìm đoạn tương tự nha, vì mỗi template thiết kế khác nhau)

<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Ruda:400,700' rel='stylesheet' type='text/css'/><link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Và thay thế nó thành:

<script type='text/javascript'>//<![CDATA[function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Droid+Sans|Ruda:400,700");//]]></script>

Đoạn script trên để thay thế cho link Font Awesome và link Google Fonts nên bạn có thể xóa 2 link này trong code luôn.
Lưu mẫu và test CSS3 lại bạn sẽ fix được hơn 70 lỗi liên quan đến thằng Font-Awesome này.

2. TỐI ƯU CSS MẶC ĐỊNH CỦA BLOGGER

CSS mặc định của blogger thường có dạng: 

https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css 

đôi lúc sẽ được ẩn đi nhưng test CSS3 sẽ thấy mặt nó. Nếu bạn muốn xoá bỏ có 2 cách làm như sau:
Cách 1: Xem cách xoá bỏ tại đây
Cách 2: Bạn copy code sau 

<link href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' rel='stylesheet' type='text/css'/>

Và sửa thành: 

 <script type='text/javascript'>//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css");
//]]>
</script>

3. CÁC LỖI CẤU TRÚC CSS3 VẶT KHÁC

Thông thường jigsaw.w3.org nó sẽ báo lỗi CSS ngay phần phía dưới phần báo lỗi dưới địa chỉ tên miền. Bạn chỉ cần xóa các CSS dư thừa không hợp với chuẩn CSS3 được đề xuất là sẽ được thôi phần này chủ yếu là xóa bớt thôi.
Nếu bạn có vướng mắc chỗ này thì hãy để lại bình luận phía dưới mình sẽ hỗ trợ
Cuối cùng lưu lại và tận hưởng 1 màu xanh chuẩn CSS3 nào! 

Nguồn: Blog chia sẻ thủ thuật