Blog DX

Cách tăng tốc độ tải trang khi dùng Font Awesome, Google Fonts và JavaScript

11 tháng 1, 2016
Muốn trang web của bạn chuẩn SEO thì cần hội tụ nhiều yếu tố, và một trong những yếu tố đó là tốc độ tải trang. Việc tăng tốc độ tải trang sẽ giúp người truy cập hài lòng hơn, làm giảm tỉ lệ thoát trang và tất nhiên sẽ được google đánh giá trang web là thân thiện với người sử dụng. Với những lợi ích như vậy thì ai cũng muốn tăng tốc độ tải trang rồi, tuy nhiên khi bạn thêm trực tiếp Font Awesome, Google Fonts và JavaScript - những thành phần được sử dụng phổ biến trên blog/website thì nó sẽ làm giảm đáng kể tốc độ tải trang của bạn xuống.
Để thêm Font Awesome, Google Fonts và JavaScript vào blog/website mà vẫn cải thiện được tốc độ tải trang thì các bạn cần một mẹo nhỏ, bài viết này sẽ hướng dẫn bạn làm điều đó.

Tăng tốc độ tải trang khi dùng Font Awesome, Google Fonts và JavaScript
Cách tăng tốc độ tải trang khi dùng Font Awesome, Google Fonts và JavaScript

1. Tăng tốc độ tải trang khi dùng Font Awesome, Google Fonts

Bình thường khi sử dụng Font Awesome và Google Fonts cho blog/website thì chúng ta thường thêm như này
<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'/>

Việc làm này tất nhiên sẽ làm giảm tốc độ tải trang của trang web khi kiểm tra bằng Google PageSpeed Insights. Giờ để cải thiện tốc độ tải trang, chúng ta sẽ dùng đoạn code JavaScript sau
<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 1");loadCSS("Link CSS 2");
//]]>
</script>

Thay Link CSS 1, Link CSS 2 bằng các link CSS mà bạn dùng cho trang web (ở đây ta sẽ thay link Font Awesome và Google Fonts vào). Nếu muốn thêm nhiều link CSS khác vào nữa thì bạn hoàn toàn có thể thêm dòng loadCSS("Link CSS"); vào phía sau.
Dưới đây là đoạn code trên sau khi đã thêm 2 link Font Awesome và Google Fonts. Để thêm đoạn code vào blog, các bạn đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML ~> Dán đoạn code dưới vào trước thẻ </head> rồi Lưu mẫu lại
<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("http://fonts.googleapis.com/css?family=Oswald");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

2. Tăng tốc độ tải trang khi dùng JavaScript

a, Đối với những đoạn JavaScript ngắn, các bạn không nên up lên host rồi lấy link chèn vào blog/website mà hãy dán trực tiếp đoạn JavaScript đó vào Template và tốt nhất là để nó ở trước thẻ đóng </body>.
Ví dụ: Trong template của bạn có link dẫn đến file JavaScript
<script src='http://dxoan.com/myScript.js' type='text/javascript'></script>

Để cải thiện tốc độ tải trang, các bạn sao chép toàn bộ nội dung trong file JavaScript đó rồi dán vào code sau và đặt nó trước thẻ </body>
<script type="text/javascript">
//<![CDATA[
    Chèn code JavaScript vào đây
//]]>
</script>

b, Đối với những file JavaScript dài hay với jQuery, bạn sẽ thấy nó được thêm vào trang web như này
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>

Giờ các bạn hãy thêm cho nó thuộc tính async
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>

Thuộc tính async cho phép bạn tải không đồng bộ các tài nguyên JavaScript, giúp file JavaScript được tải cùng lúc với HTML. Và nó cũng giúp loại bỏ JavaScript chặn hiển thị khi bạn kiểm tra tốc độ tải trang trên Google PageSpeed Insights.

Lời kết

Trên đây là một số mẹo tăng tốc độ tải trang khi dùng Font Awesome, Google Fonts và JavaScript, hy vọng bài viết này sẽ giúp bạn cải thiện tốc độ cho trang web. Chúc các bạn thành công !

9 nhận xét:

  1. klq nhưng chúc mừng bác có GA :3

    Trả lờiXóa
    Trả lời
    1. GA reg bằng tut :))

      Xóa
    2. Reg bằng tut là sao bác, site mình xây dựng nội dung khá tốt, mà do nội dung site là crack, keygen soft nên thằng GA khắt khe từ chối mấy lần, giờ làm sao bác tư vấn đc không?

      Xóa
    3. @Văn Nhựt: site crack thì không đăng ký được GA đâu, giờ thử đặt con GA reg bằng tut vào xem có chết không, nếu được pay thì ngon rồi.
      Bạn xem cách reg GA content thành công, không có mail chúc mừng ở đây nhé: http://www.tekzoom.net/2015/12/huong-dan-cach-ang-ky-thanh-cong-tai.html

      Xóa
  2. Cảm ơn nhiều. Mình cũng đang lo lắng về tốc độ tải trang, blog chưa quảng cáo gì hết mà load đến hơn 3s, đặt quảng cáo vào chắc khách thoát ra ngay lập tức luôn.

    Trả lờiXóa
  3. Mình cài plugin Async JS & CSS vào web: http://logonambac.com xong rồi kiểm tra trên http://developers.google.com thì thấy tốc độ load web bị chậm hơn. Web của mình có cả plugin Autoptimize, không biết 2 plugin này có bị xung đột không ?

    Trả lờiXóa
    Trả lời
    1. Bạn thử cài thêm mấy plugin này vào nữa xem sao http://vnwebmaster.com/wordpress-plugins/14868-gioi-thieu-3-plugin-toi-uu-toc-do-wordpress.html

      Xóa
  4. Bạn chỉ nên cài một plugin thôi
    http://www.mythuat24h.com/thiet-ke-bao-bi.html

    Trả lờiXóa
  5. Wordpress hỗ trợ rất nhiều plugin

    Trả lờiXóa