Chào tất cả mọi người, chào mừng tất cả mọi người đã quay lại blogs kimidev của mình nha. Và hôm này thì mình xin chia sẽ cho anh em một cái code giúp cho anh em có thể tối ưu website của chúng ta hiệu quả nhá.
 |
| Cách tăng tốc độ tải trang khi dùng Font Awesome, Google Fonts và JavaScript |
code mà mình share trong ngày hôm nay thì nó có tác dụng giúp cho chúng ta tăng tốc độ load css lên gấp nhiều lần, từ website với khả loadweb chậm như rùa cho đến load nhanh chỉ 0.1s :>>> mình bóc phốt tí thui nha hahah.
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 js
- Đố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>.
<script src='http://www.kimidev.site/myScript.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
Chèn code JavaScript vào đây
//]]>
</script>
- Đố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>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>
