Hiện tại là 9h20p tối và mình mới vật lộn đọc đọc, viết viết và nghiên cứu cái nội dung đang học trên lớp. Giờ đã đến lúc tìm cái gì đó để viết bài cho các bạn thì mới chợt nhớ ra 1 vấn đề hơi nổi bật.
Ví dụ:
Mình nghĩ ở đây chắc sẽ có nhiều bạn muốn SEO thật tốt đúng không? Nếu mà như thế thì ngoài việc viết bài có nội dung phù hợp, thu hút, hot hot thì vấn đề truy cập blog (tức là tải trang) cũng là 1 vấn đề nhức nhối mà blogger nào cũng muốn hướng tới.
Để từ đó làm gì? Để có thể làm cho blog của mình có thể load nhanh hơn trước, tuy là có 1 vài giây thôi nhưng cũng thực sự tốt hơn là không làm gì mà để blog chạy như rùa bò đúng không?
Hãy theo dõi bài viết bên dưới để biết thêm chi tiết nhé!
 |
| Tăng tốc độ tải trang cho blogger/blogspot |
1. Tăng tốc độ tải trang khi dùng Font Awesome và Google Fonts:
Thông thường khi ta muốn chèn thư viện Font Awesome hay Google Fonts vào blog thì sẽ hay sử dụng cú pháp đơn giản và gọn lẹ như ở bài hướng dẫn sử dụng Github để lưu trữ file Javascript và CSS như sau:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Nhưng thay vì thế ta có thể sử dụng đoạn code dưới và chèn trước thẻ
</head> (Quản trị blogger - Chủ đề - Chỉnh sửa HTML)<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("Link CSS");loadCSS("Link CSS");
//]]>
</script>
Với: Link CSS là thư viện bạn cần thêm (hãy xóa những cú pháp thêm thư viện giống hệt trước đó đi trước khi thay bằng code cải thiện loading bên trên nhé). Và để có thể thêm 1 font nào vào nữa thì ta sẽ thêm dòng
loadCSS("Link CSS"); vào đoạn code bên trên.Ví dụ:
<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("//fonts.googleapis.com/css?family=Oswald");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Sau khi hoàn tất thì lưu template lại.
2. Tăng tốc độ tải trang khi dùng Javascript:
a. Đối với những đoạn Javascript ngắn thì các bạn không nên up file lên host và chèn vào. Thay vào đó bạn hãy chèn thẳng đoạn Js đó vào blog trước thẻ
</body> (Quản trị blogger - Chủ đề - Chỉnh sửa HTML) theo mẫu:<script type="text/javascript">
//<![CDATA[
Chèn code JavaScript vào đây
//]]>
</script>
b. Đối với những Javascript dài lê thê thì hãy up lên host nào ổn định (bạn có thể tham khảo qua Github) thì thay vì chèn dòng cơ bản sau:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>
Các bạn hãy chèn thêm thuộc tính
async='async' cho nó. Khi đó đoạn chèn mới sẽ có dạng:<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>
3. Tăng tốc độ tải trang với DNS Prefetch:
Cách này thì nhanh hơn 2 cách trên, bạn chỉ cần chèn toàn bộ đoạn code dưới sau thẻ
<head> (Quản trị blogger - Chủ đề - Chỉnh sửa HTML) rồi lưu template lại là xong.<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
4. Một số cách thông dụng khác:
- Tránh sử dụng quá nhiều Javascript.
- Nén lại những đoạn mã đang sử dụng (ví dụ công cụ nén CSS)
- Giới hạn lại số lượng bài viết xuất hiện trên trang chủ (tại mục Cài đặt - Bài đăng và nhận xét)
- Sử dụng dấu ngắt nhảy (Break Line) với Auto Readmore (ở thanh công cụ hoặc nhờ Jquery)
- Nén ảnh trước khi chèn vào blog (có thể tham khảo tại website nén ảnh này)
- Giảm số lượng widget bạn đang có (chỉnh sửa trong phần Bố cục của blog)
- Bỏ đi ảnh nền (thay vì đó hãy sử dụng màu nền mà vẫn đầy tính chuyên nghiệp)
- Tránh sử dụng quá nhiều mã nhúng CSS.
- Giảm bớt quảng cáo.
- Sử dụng các Template khác tối ưu hơn.
5. Cải thiện nhờ website kiểm tra tốc độ tải trang:
Ngoài 4 cách nêu trên, các bạn có thể dùng 1 số website có chức năng kiểm tra tốc độ tải trang cho blog (cái này ở Google search nhiều lắm, có thể tìm theo từ khóa Testing Blogger Site Speed là ra). Những website này sẽ hiển thị những thứ làm chậm blog của bạn, việc cần làm là bạn chỉ cần đọc kĩ và khắc phục theo dàn ý mà họ đã cung cấp cho thôi.
Công cụ bạn có thể tin tưởng chính từ Google luôn là Google PageSpeed Insights.
Vậy là xong rồi đó. Bạn nào đọc và làm được đến bước cuối này thì mình nghĩ không chỉ cải thiện được 1, 2 giây thôi đâu mà có khi là vài chục giây cũng nên ý :))
Chúc các bạn thành công và đừng quên ghé thăm TSM Blogger thường xuyên nhé ^^
TSM Blogger
4 bình luận Tổng hợp bình luận
Thanks You ! Bài viết veri veri hữu ích :3
:3 Hữu ích mà để cái icon :3 là sao :6)
:v quen tay rồi :3
:A)