Nếu bạn muốn trang web của mình thân thiện với các công cụ tìm kiếm (chuẩn SEO), bạn cần kết hợp nhiều yếu tố, một trong số đó là tốc độ tải trang. Tăng tốc độ tải trang blogspot sẽ khiến người truy cập hài lòng hơn, giảm tỷ lệ thoát trang và tất nhiên sẽ được Google đánh giá là thân thiện với người dùng, với các công cụ tìm kiếm, dễ dàng index top từ khóa hơn. Với những lợi ích như vậy, ai cũng muốn tăng tốc độ tải trang, nhưng khi bạn thêm trực tiếp Font Awesome, Google Fonts và các thành phần thông dụng JavaScript trên blog / website thì tốc độ load trang sẽ giảm đi rất nhiều.
Để thêm Font Awesome, Google Fonts và JavaScript vào blog / website của bạn mà vẫn cải thiện tốc độ tải trang (load trang nhanh), bạn cần một thủ thuật nhỏ, bài viết này sẽ hướng dẫn bạn thực hiện.
Cách tối ưu Font Awesome, Google Fonts và JavaScript để tăng tốc độ tải trang cho Blogspot
1. Tăng tốc độ tải trang khi sử dụng Font Awesome, Google Fonts
Thông thường khi sử dụng Font Awesome và Google Fonts trong blog / website, chúng ta thường thêm chúng như thế 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'/>
Khi thử nghiệm với Google PageSpeed Insights, điều này tất nhiên sẽ làm chậm tốc độ tải trang của trang web. Bây giờ để cải thiện tốc độ tải trang, chúng tôi sẽ sử dụng đoạn mã 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 thế Liên kết CSS 1, Liên kết CSS 2 bằng các liên kết CSS bạn sử dụng cho trang web của mình (ở đây chúng ta sẽ thay thế các liên kết Font Awesome và Google Fonts). Nếu bạn muốn thêm nhiều liên kết CSS hơn, bạn có thể thêm một dòng loadCSS ("Liên kết CSS"); ở phía sau.
Sau đây là đoạn code trên sau khi thêm 2 liên kết Font Awesome và Google Fonts. Để thêm mã vào blog của bạn, hãy đăng nhập vào Blogger => Đi tới mẫu => Chỉnh sửa HTML => Dán mã bên dưới trước thẻ </head>, sau đó lưu mẫu.
<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 sử dụng JavaScript
- Đối với các đoạn mã JavaScript ngắn, bạn không nên tải lên máy chủ lưu trữ và lấy liên kết để chèn vào blog / trang web mà hãy dán trực tiếp JavaScript vào mẫu, tốt nhất là trước thẻ đóng </body>.
Ví dụ: Có một liên kết đến tệp JavaScript trong mẫu của bạn
<script src='http://tienwiki.com/myScript.js' type='text/javascript'></script>
Để cải thiện tốc độ tải trang, vui lòng sao chép toàn bộ nội dung của tệp JavaScript và dán vào đoạn mã bên dưới, và đặt nó trước thẻ </body>.
<script type="text/javascript"> //<![CDATA[ Chèn code JavaScript vào đây //]]> </script>
- Đối với các tệp JavaScript dài hoặc sử dụng jQuery, bạn sẽ thấy nó được thêm vào trang web như thế này:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>
Bây giờ hãy cung cấp 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 các tài nguyên JavaScript một cách không đồng bộ, để các tệp JavaScript được tải cùng lúc với HTML. Khi bạn kiểm tra tốc độ tải trang trên Google PageSpeed Insights, nó cũng có thể loại bỏ JavaScript ngăn cản việc hiển thị.
Trên đây là một số thủ thuật tăng tốc độ tải trang khi sử dụng Font Awesome, Google Fonts và JavaScript, hi vọng bài viết này có thể giúp bạn cải thiện tốc độ trang web của mình. chúc may mắn !
test