› ›

Mẹo Tăng Tốc Độ Tải Blogspot Không Phải Ai Cũng Biết

By 4/8/18 10 Comments Edit

Bài viết lần này mình sẽ hướng dẫn cho các bạn cách tăng tốc blogger ( blogspot ) một cách tốt nhất không phải ai cũng biết đồng thời đó nó còn tốt cho seo vì nó có tốc độ tải trang rất nhanh.


tăng tốc độ tải blogspot, Tối ưu tăng tốc độ tải cho Blogspot, thủ thuật tăng tốc blogger, cách tăng tốc độ blog, hướng dẫn tối tăng tốc blogger, Tăng tốc Blogspot


Không chỉ là tối ưu HTML, CSS, Javascript mà bài viết này mình cũng hướng dẫn cho các bạn xóa những cái dư thừa mặc định và không cần thiết trong Template của chúng ta đang sử dụng hiện nay.


Nói về tốc độ tải trang của blogger rất có ảnh hưởng đến khách truy cập, nếu blog của bạn có tốc độ loading blogspot nhanh thì khách truy cập cảm thấy rất thoải mái và dễ chịu khi ghé thăm blogger của chúng ta. Mặt xấu nếu blog của chúng ta tải chậm thì nó không thoải mái chút nào khi người dùng truy cập vào blog của chúng ta đồng thời đó ta sẽ mất một lượng traffic đáng kể về việc blog của mình tải chậm.

Để kiếm tra tốc độ blogspot, bạn có thể vào trang phát triển của Google với tên "Google PageSpeed Insights" để xem trang blogspot của bạn nhanh hay chậm đến mức nào. Đồng thời với cách kiểm tra đó trang cũng đưa lên cho chúng ta những thứ ( file ) cần tối ưu hóa một trong số đó là CSS, Javascript, Cache .. IMG.

Vấn đề đầu tiên mình sẽ hướng dẫn các bạn là tối ưu hóa cache và DNS Prefetch

Các vấn đề về Cache và DNS đang rất là vấn đề nan giải bạn có thể khắc phục điều đó bằng đoạn mã này
<!-- DNS Prefetch -->
<link href="//1.bp.blogspot.com" rel="dns-prefetch"></link>
<link href="//2bp.blogspot.com" rel="dns-prefetch"></link>
<link href="//3.bp.blogspot.com" rel="dns-prefetch"></link>
<link href="//4.bp.blogspot.com" rel="dns-prefetch"></link>
<link href="//2.bp.blogspot.com" rel="dns-prefetch"></link>
<link href="//www.blogger.com" rel="dns-prefetch"></link>
<link href="//maxcdn.bootstrapcdn.com" rel="dns-prefetch"></link>
<link href="//fonts.googleapis.com/" rel="dns-prefetch"></link>
<link href="//use.fontawesome.com/" rel="dns-prefetch"></link>
<link href="//ajax.googleapis.com/" rel="dns-prefetch"></link>
<link href="//resources.blogblog.com/" rel="dns-prefetch"></link>
<link href="//www.google-analytics.com/" rel="dns-prefetch"></link>
<link href="//pagead2.googlesyndication.com/" rel="dns-prefetch"></link>
<link href="//googleads.g.doubleclick.net/" rel="dns-prefetch"></link>
<link href="//www.gstatic.com/" rel="preconnect"></link>
<link href="//www.googletagservices.com/" rel="dns-prefetch"></link>
<link href="//static.xx.fbcdn.net/" rel="dns-prefetch"></link>
<link href="//tpc.googlesyndication.com/" rel="dns-prefetch"></link>
<link href="//googletagmanager.com/" rel="dns-prefetch"></link>
<!-- <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.pinterest.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='//www.linkedin.com' rel='dns-prefetch'/> <link href='//www.youtube.com' rel='dns-prefetch'/> <link href='//feedburner.google.com' rel='dns-prefetch'/> <link href='//feeds.feedburner.com' rel='dns-prefetch'/> <link href='//github.com' rel='dns-prefetch'/> <link href='//connect.facebook.net' rel='dns-prefetch'/> <link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/> <link href='//syndication.twitter.com/' rel='dns-prefetch'/> -->
<!--Save Cache-->
<include expiration="7d" path="*.css"></include>
<include expiration="7d" path="*.js"></include>
<include expiration="3d" path="*.gif"></include>
<include expiration="3d" path="*.jpeg"></include>
<include expiration="3d" path="*.jpg"></include>
<include expiration="3d" path="*.png"></include>
<meta content='sat, 02 jun 2020 00:00:00 GMT' http-equiv='expires'/>

Vấn đề thứ 2 là tối ưu Css

Các bước đầu chúng ta tối ưu Font-Awesome và Font Google cũng như css liên kết bên ngoà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("//fonts.googleapis.com/css?family=Roboto:400,400italic,700");loadCSS("//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700");loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css");
//]]>
</script>

Xóa widget_css_bundle.css

Nó là một thiết lập lại css và nó cũng như thư viện css của blogger vậy ( đoán vậy :D ) Tệp được tự động thêm vào dưới đây <head>
<link href='https://www.blogger.com/static/v1/widgets/521441841-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
Chúng ta có thể sử dụng một thuộc tính để xóa cái css mặc định này đi đó là b:css='false' cách thực hiện chúng ta chỉ thìm tới thẻ và thêm nó vào <html> 
<html b:css='false' b:version='2' expr:dir='data:blog.languageDirection'>

Xóa Authorization.css

Tệp css này được chèn tự động trên </head> theo mình biết css này là xác minh quyền quản trị  ( xóa đi cho đỡ phiền )
<link href='../dyn-css/authorization.css' media='none' onload='if(media!="all")media="all"' rel='stylesheet'/> <noscript><link href='../dyn-css/authorization.css' rel='stylesheet'/></noscript>
Sau khi xóa nó sẽ xuất hiện như thế này mình cũng không biết gọi sao là đúng nữa ( Ẩn Đi )
<!--<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5658510043745426056&amp;zx=08841cfc-cb48-460b-be16-b59e445cbc23' media='none' onload='if(media!=&#39;all&#39;)media=&#39;all&#39;' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5658510043745426056&amp;zx=08841cfc-cb48-460b-be16-b59e445cbc23' rel='stylesheet'/></noscript>
Cách xóa nó rất đơn giản chỉ cần thay đổi </head> thành
&lt;!--</head>--&gt;&lt;/head&gt;

Vấn đề thứ 3 là tối ưu javascript

Khi áp dụng kĩ thuật async, trình duyệt sẽ không ưu tiên load JS trước, mà chỉ load JS sau khi quá trình load HTML hoàn tất.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Thay Bằng 
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
Cách 2 : Cũng giống như trên ưu tiên load html trước 
<script type="text/javascript"> 
function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "Link file JS Javasript";
 document.body.appendChild(element);
 }
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>
Cách 3 : Nếu cách 2 bị lỗi
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"Link File JS"></scr" + "ipt>");
}
 //]]>
 </script>
Cách 4 : Mới upload gần đây nhất nên không có lỗi về vấn đề tối ưu js cho blog
<script>//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></scr" + "ipt>");}//]]>
</script><script>window.lazyScripts=[]</script>

Xóa Widget.js

Phần này được chèn ở trên </body> và chứa tệp plusone.js , widget.js và javascript được nhúng. Trước khi tiếp tục xóa, các bạn phải đọc các lưu ý sau đây :
  • plusone.js - Bạn cần sử dụng các tiện ích của Google hoặc bật G + Nhận xét
  • widget.js - Nếu bạn xóa nó, các tiện ích sẽ ngừng hoạt động: Biểu mẫu liên hệ , nguồn cấp dữ liệu, tệp, người theo dõi và thống kê blog.
  • Javascript được nhúng : Đang tìm hiểu ( Hình Như Xóa Nhận Xét Không Được )
Các bạn yên tâm mọi thứ sẽ hoạt đông trơn tru không có vấn đề gì phải lo, để xóa cái JS này các bạn cũng làm theo cá xóa CSS là thêm b:js='false' và <HTML>
<html b:js='false' b:version='2' expr:dir='data:blog.languageDirection'>

Xóa Cookiechoices.js

Nếu bạn muốn xóa mã javascript của thông báo cookie , mã bạn cần sử dụng sẽ như sau
&lt;noscript&gt;
&lt;!--</body>--&gt;
&lt;/noscript&gt;
&lt;/body&gt;
Việc xóa js Cookie này rất tốt cho các blog có đuôi .blogspot.com vì các đuôi này qua nước khác sẽ hiện thì như .ES, .PE, .PW chẳng hạn. Nên các bạn có tên miền riêng thì không nên áp dụng nha.

Vấn đề thứ 4 là tối ưu hóa hình ảnh

Tối ưu hóa hình ảnh để tăng tốc blogspot thì mình cũng không có thủ thuật nào các bạn có thể vào các trang nén ảnh để nén, nhưng định dạng nào tốt nhất để đăng lên blogger thì mình khuyên các bạn nên chọn PNG vì nó nhẹ có thể tăng tốc blog của bạn thêm một phần, còn khi nén ảnh thì được tối ưu tuyệt đối để giảm dung lượng

Một số trang nén ảnh như :
  • tinyjpg.com
  • imageresize.org
  • compresspng.com

Nhận Xét Của Mình

Loại bỏ tất cả các Css hay Js sẽ đạt được một hiệu suất cao hơn để các bạn cải thiện tốc độ blogger của mình . Nếu các bạn muốn xóa các css hay js hoặc mã được nhúng trong mẫu của mình nhưng sử dụng tiện ích Javascript/ HTML có thể ngừng hoạt động, Mình khuyên không làm các bước trên không thôi trách mình. Nếu thìm thấy những cách tốt hơn mình mình khuyên các bạn share để mọi người biết, nếu các thủ thuật trên làm bạn hài lòng thì đừng quên chia sẻ nó trong các mạng xã hội nhé.

TAG : Tăng tốc độ tải blogspot, Tối ưu tăng tốc độ tải cho Blogspot, thủ thuật tăng tốc blogger, cách tăng tốc độ blog, hướng dẫn tối tăng tốc blogger, Tăng tốc Blogspot, Cách tối ưu tăng tốc độ tải trang cho blogspot

10 Bình Luận "Mẹo Tăng Tốc Độ Tải Blogspot Không Phải Ai Cũng Biết"

Đăng ký: Đăng Nhận xét (Atom)