Vấn đề éo le ở đây là: tốc độ tải trang và sự hoành tráng của blog nó tỷ lệ nghịch với nhau.Có nghĩa là một blogspot có giao diện đẹp với nhiều tiện ích và hình ảnh thì tốc độ load càng chậm vì các tiện ích cũng như giao diện có nhiều label thì cần dùng nhiều javascript và hình ảnh cũng là thủ phạm gần như là chính làm chậm blogspot.
Khi gõ tìm kiếm người dùng nhấp vào một đường link dẫn tới bài viết trên blog của bạn mà cứ phải thưởng thức giai điệu:Cùng quay nào,cùng quay nào sao mãi không vô thì nội dung có hay,hấp dẫn và tạo được sự sung sướng đến mấy thì cũng vứt.
Vậy phải làm gì để tăng tốc độ tải trang(load) cho blogspot việc này cũng không quá phức tạp mà bạn chỉ cần bỏ chút thời giàn cùng với chịu hy sinh đi một chút là được.
Bài này sẽ liệt kê các việc cần làm ngay để tăng tốc độ load của blogspot nhưng với khả năng của từng người bạn làm được bước nào thì làm trên tinh thần làm được càng nhiều bước càng tốt.
Những công việc cần làm để tối ưu tốc độ load cho blogspot/website.
1- Xóa bỏ css mặc định của blogspot
Với công việc này bạn có thể xem hướng dẫn ở ĐÂY
2- Giải quyết các link javascript,css và jquery trong mẫu.
A- Với những link javascript(js) hay jquery để tạo các tiện ích hoặc là hỗ trợ giao diện trang chủ(Các link đặt trong mẫu) v v v bạn có thể giải quyết bằng cách;
- Thêm async theo mẫu:
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>Lưu ý: Với phương pháp này có thể có một số tiện ích cần hỗ trợ từ jquery không hoạt động,nếu gặp trường hợp như vậy thì dùng cách sau.- Post trực tiếp vào trong mẫu theo công thức
<script type='text/javascript'> //<![CDATA[ Nội dung file javascript //]]> </script>- Nén file thành 1 dòng hay còn gọi là siêu nén tại ĐÂY
B- Với file css dạng dẫn link như font chữ hay font icon bạn sử dụng đoạn javascript sau:
<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>Ví dụ có 2 link là font chữ và icon<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("http://fonts.googleapis.com/css?family=Segoe UI|Arial|Open+Sans:400,300,300italic,400italic,600|Segoe UI:400,300,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css");
//]]>
</script>C- Sử dụng thẻ điều kiệnBạn có thể sử dụng thẻ điều kiện để tách những file javascript nào chỉ sử dụng ở trang chủ hoặc chỉ sử dụng ở trang bài viết để blog không phải vừa kéo cả 2 tại trang mà nó chỉ cần có 1.
Nếu chỉ dùng ở trang chủ dùng code:
<b:if cond='data:blog.url == data:blog.homepageUrl'> File javascript </b:if>Nếu chỉ dùng cho trang bài viết:
<b:if cond='data:blog.pageType == "item"'> File javascript </b:if>Ở trên là css dẫn link còn với css không dẫn link thì các bạn tiến hành nén chúng lại tại ĐÂY
d- Cải thiện chỉ số PageSpeed Insights khi kết nối với Google adsense, analytics và facebook cho blogspot
Với blogspot thì chỉ số PageSpeed Insights không hẳn là thước đo tốc độ load nhanh hay chậm của một blogspot, nhưng nếu ta cải thiện được chỉ số này thì dù sao cũng góp phần giúp tốc độ load của một blog được tốt hơn nhất là trên thiết bị di động thông minh.
Xem Tại ĐÂY
3- Giải quyết vấn đề hình ảnh
Hình ảnh là thủ phạm không nhất thì cũng là nhì làm chậm tốc độ load của blogspot mà blogspot thì không thể không có hình ảnh.Do vậy bạn nên hạn chế dùng hình ảnh và việc phải dùng thì nên dùng hình ảnh có chiều rộng khoảng dưới 600px với đuôi JPG không nên dùng PNG chỉ khi bắt buộc.
Trong khi post bài bạn nên theo trình tự:
- Ảnh đại diện(ảnh đầu tiên)
- Đoạn nội dung(text) đủ để tiện ích read more show ra trang chủ.
- Dấu ngắt nhẩy
<!--more-->- Sau đó post gì thì post.
Và cũng đừng bao giờ quên công đoạn nén ảnh trước khi dùng dù ai cũng muốn post ngay và luôn.
* Nén ảnh JPG tại ĐÂY
Bạn nên chỉnh ở 50%
* Nén ảnh PNG tại ĐÂY
4- Giải quyết HTML
Vấn đề này không làm gì được nhiều ngoài việc không nên sử dụng nhiều tiện ích không cần thiết và không quá phức tạp hóa các tiện ích ví dụ menu tích hợp hình ảnh...
Bạn có thể nén HTML tại ĐÂY
Tối ưu hóa tốc độ load cho blogspot rồi thì bạn có thể vào các trang sau để kiểm tra:
- PageSpeed Insights
- Pingdom Website Speed Test
Và nhiều web khác nữa
Tạm thời làm bằng đó việc blog của bạn cũng đã đỡ ì ạch nếu nhà có điều kiện thì các bạn có thể thực hiện thêm vài công đoạn phức tạp hơn .
