18 tháng 11, 2019

Tăng tốc độ tải trang Bloggerr khi dùng Font Awesome, Javascript

Tăng tốc độ tải trang Blogger khi dùng Font Awesome, Javascript

Tốc độ tải trang blogger thường được admin blog đo bằng phần mềm miễn phí Pagespeed Insight và các tools khác. Có nhiều thủ thuật để tăng tốc độ tải trang cho blogger, trong đó thủ thuật với Font Awesome, Javascript và Google font là thủ thuật quan trọng, vì nó liên quan tới dịch vụ lưu trữ của bên thứ ba.


Bài liên quanThủ thuật Tối ưu PageSpeed Insights

Mục lục

  1. Tăng tốc trang có sử dụng Font Awesome, Fonts Google
  2. Tăng tốc trang có sử dụng Javascript
  3. Giản lược code CSS
  4. Giản lược code Javascript

1. Tăng tốc trang có sử dụng Font Awesome, Fonts Google 


Ai từng lập trình web cũng biết để trỏ tham chiếu tới Font Awesome và Font Google như dưới này rồi nhỉ

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>

Việc này khiến khi render, trình duyệt sẽ block lại tất cả nội dung HTML, chờ cho load xong hai thư viện trên mới xử lý HTML, làm chậm rất nhiều tốc độ tải trang. Để cải thiện, ta sử dụng cách sau (bằng Javascript)

-------------code------------


<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("URL1");loadCSS("URL2");
//]]>
</script>

Thay URL1URL2 bằng những link ref ở trên. Ví dụ: đây là code mà blog IT Bình Dân đang dùng


Có thể bạn quan tâmCác đoạn HTML và CSS code thông dụng


2. Tăng tốc trang có sử dụng Javascript


Thường với Javascript các bạn thấy web admin sẽ nhét vào một file js, rồi up lên một host nào đó để tham chiếu tới. Lúc này sẽ có hai trường hợp:

Code Javascript ngắn, rời rạc

Ta nên đóng luôn các đoạn code này vào template của blogger luôn, trước thẻ </body>
Ví dụ, lúc trước bạn hay trỏ tham chiếu tới file js như sau:

<script src='https://www.itbinhdan.com/javascript.js' type='text/javascript'></script>

Thì nay trong file javascript.js có nội dung gì thì bạn copy rồi dán nó vào dòng Chèn code JavaScript vào đây phía dướ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("URL1");loadCSS("URL2");
Chèn code JavaScript vào đây
//]]>
</script>

Code Javascript dài, hoặc jQuery

Với code Javascript dài thì lúc này ta buộc phải lưu trên host để phân tải load trang, cũng như làm gọn code template, tương tự với jQuery. Ta thường trỏ về chúng bằng lệnh

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Bây giờ bạn chỉ cần chèn thêm đoạn code async='async'

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Chỉ thị async sẽ báo cho trình duyệt web tải không đồng thời (đồng bộ) giúp cho việc tải trang được phân tải, đặc biệt không bị tình trạng Javascript chặn trình duyệt hiển thị HTML của trang (render blocking).

Bài liên quan : Bộ công cụ Kiểm tra Giao diện/Hiển thị cho Blog/Website

3. Giản lược code CSS

Thủ thuật này về cơ bản là bạn sẽ tối ưu hóa lại file CSS, như nhiều code trùng lặp, các cú pháp, câu lệnh rườm rà. Giờ ta sẽ dùng một tool để tối ưu file CSS, gom tất cả đoạn code về thành một dòng duy nhất (và không có khoảng trắng - chỉ máy đọc mới hiểu thôi).

Tool giản lược code CSS thông dụng là Minify your CSS (với file kết quả sẽ có dạng tên.min.css)

Khi tinh giản rồi thì code CSS sẽ rất khó chỉnh sửa, thay đổi vì nó không còn dấu ngắt nào cả. Bạn hãy sao lưu trước một bản thường, để có gì sau này cần thì chỉnh sửa trên đó, rồi lại Minify CSS lại.

Xem thêm : Phân loại Pages trong Blogger bằng code

4. Giản lược code Javascript

Với Javascript thì bạn cũng thực hiện như giản lược với CSS. Bạn vào trang Minify Javascript
Trang này còn có các tools để tối ưu hình ảnh cho trang blog/web.


Chúc các bạn thành công.

Bài liên quan:




Related Posts