Cải thiện và tăng tốc độ tải trang cho blogspot-Optimal speed for blogspot/website

Với những người sở hữu hay thường gọi là chơi blog/web thì đều biết tiêu chí thời gian tải trang là không quá 4s vì khi khách truy cập gõ từ khóa tìm kiếm nhấp vào trang của bạn thì sự kiên trì chờ đợi của họ thường không quá 4s nếu vẫn chưa vào được thì họ sẵn sàng nhấp vào trang khác liền kề có nội dung từ khóa tương tự.

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.
Cải thiện tốc độ load cho blogspot-Optimal speed for blogspot/website

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ện
Bạ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 == &quot;item&quot;'>
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 .
Publis: 

9 comments

  1. Cảm ơn Đầu To. Bác ấy chỉ cần blog trang nhã như thế và đừng bị đơ nữa là ổn rồi. Tớ sẽ hỏi xem bác cần thêm gì nha.

    À, tớ không thích chỉ biết cảm ơn bằng bàn phím và mấy ngón tay gõ cọc cạch. Đầu To, địa chỉ cho tớ đi!
  2. DVD sang thăm nhà, chúc HL cuối tuần an lành!
    :)
    1. Lúc nãy em cũng qua nhà bác nhưng các chủ đề của bác em chỉ xem ko biết gì để nhận xét.
      Chúc bác cuối tuần vui vẻ!
      :)
    2. Cảm ơn HL đã sang thăm nhà DVD, chỉ cần HL ghi "sang thăm" vào nhận xét bên nhà của DVD là DVD cũng vui rồi :)

      DVD rất muốn tìm một tiện ích cho blogspot của DVD, tạm gọi là tiện ích "Phản hồi mới nhất của bạn bè", dùng để theo dõi nội dung trả lời của bạn bè, như là HL trả lời cảm nhận của DVD ở trang HL, thì bên trang của DVD, tiện ích này sẽ cho hiện ra tên HL và nội dung trả lời của HL (chỉ vài dòng đầu) giống như tiện ích "cảm nhận mới nhất". HL ơi, có thể tạo được một tiện ích như vậy cho blogspot không? Nếu HL tạo được thì DVD cảm ơn rất nhiều! :)
    3. DVD hiểu rồi, rất cảm ơn HL, chúc HL ngày cuối tuần tràn ngập niềm vui nhé! :)
    4. ;)
  3. bạn ơi mình có một số vấn đề với cái code của blog của mình không biết bạn có thể tư vấn giúp mình tí được không
    1. Có vấn đề gì thế bạn
  4. Cảm ơn rất nhiều vì đã chia sẻ. Phần lớn bài viết dựa trên WordPress. Thật tốt khi biết rằng ai đó viết trên Blogspot. Để cải thiện và tăng tốc độ tải trang cho Blogspot, bạn cũng có thể tận dụng các công cụ web được cung cấp bởi trang web đó url-decode.com/
    Bạn phải kiểm tra nó.
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji