Tối ưu tốc độ load file CSS với function loadCSS cho blogspot

Xin chào các bạn hôm nay chúng ta lại gặp nhau trong chuyên mục tăng tốc blogspot toàn tập. Trong bài viết trước tôi có hướng dẫn các bạn cách Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên và sau khi thực hiện thì việc tải trang đã được cải thiện đáng kế. Trong bài viết ngày hôm nay longanit.com sẽ tiếp tục hướng dẫn các bạn cách tối ưu tốc độ load file css  với function loadCSS dạng font icon hay dẫn link.

Tối ưu tốc độ load file CSS với function loadCSS cho blogspot

Khi sử dụng blogspot tôi chắc rằng bạn nào cũng có sử dụng font load từ google có thể kể đến font Roboto và thêm một font nữa khá nặng là Font awesome icon. Tuy nhiên việc nhúng 2 font này theo cách thuần túy làm cho blogspot load khá là nặng. Để giảm thiểu tối đa tốc độ load cho nó bạn có thể sử dụng đoạn Script bên dưới mà tôi cung cấp.

 <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("link file CSS 1");loadCSS("link file CSS 2");
//]]>
</script>

 Bạn thay thế 2 link màu đỏ thành link file CSS cần load nhé. Tôi lấy thí dụ như hình bên dưới

<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("//fonts.googleapis.com/css?family=Roboto:400,500,700")
//]]>
</script>

Lời khuyên từ kinh nghiệm

1. Để tốt nhất cho việc tải trang nhanh chóng bạn chỉ nên sử dụng hình ảnh định dạng jpg và hạn chế sử dụng các hình ảnh như png,..
2. Hình ảnh không cần thiết phải quá nét, quá chi tiết do đó bạn cần giảm dung lượng của ảnh bớt đi. Theo kinh nghiệm bạn nên để kích thước dưới 150kb dưới 100kb càng tốt cho hình ảnh
3. Về sử dụng font bạn có thể dùng font Helvetica co sẵn thay cho font Roboto về bản chất font này có sẵn load nhanh không qua server google lại khá là đẹp. 

Ngoài ra để nén hình ảnh bạn có thể truy cập vào 2 link bên dưới nếu bạn nào không rành về Photoshop hoặc các công cụ chỉnh sửa ảnh để giảm kích thước của ảnh.

• Để nén ảnh định dạng png bạn sử dụng công cụ sau: https://tinypng.com/
• Để nén ảnh định dạng jpg bạn sử dụng công cụ sau đây: http://compressnow.com/fr/
• Bạn có thể sử dụng link nén CSS tôi cung cấp: https://www.longanit.com/p/css.html

Kết luận: Như vậy qua bài này tôi đã hướng dẫn các bạn thêm một cách tối ưu tốc độ tải trang cho blogspot nữa hi vọng sẽ giúp được các bạn phần nào trong việc làm chủ blogspot. Kính mời các bạn theo dõi trong phần tiếp theo vào ký tới nhé. Chúc các bạn thành công và SEO nhanh lên top nhé.