import css non-blocking

Thủ thuật import css non-blocking cho web page

Hi các bạn,

Như các bạn đã biết, chúng ta import css thì thông thường toàn chơi cách này, nhanh gọn lẹ:

<link rel="stylesheet" type="text/css" href="<url>" />

Nhưng cách này, nó sẽ blocking việc render HTML của bạn. Bởi vì khi browser đọc tới đoạn này, nó sẽ bắt đầu get file đó, execute file xong mới bắt đầu chạy tiếp.

Thì nếu chúng ta import theo kiểu đó nó sẽ slow việc render HTML của browser, việc này thì Google Pagespeed nó trừ điểm rất nặng :v

Tuy nhiên cũng có cái lợi là nếu ta import kiểu đó, render xong kiểu gì page hiện ra cũng 100% full, mà cái giá fải trả là trải render lâu :v.

Vậy nên chúng ta cũng sẽ có 1 số tricks để load css lên web page tránh blocking render HTML, mình sẽ giới thiệu ở bài viết này 😀

1/ Trick Number 1

Obviously, đây là cách đầu tiên mà ai cũng sẽ nghĩ tới. Vâng, cách này thì đa phần ta sẽ bắt trên sự kiện onload của page.

Đơn giản là vầy:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Giải thích: “print” là một kiểu style dành cho cái trang web page mà mình muốn in. Tất nhiên là mình muốn css của mình sẽ apply cho toàn webpage chứ ko fải mỗi in không. Nhưng mà nó có 1 điểm nổi trội là browser sẽ load cái css async, ko block lại quá trình render web page của bạn. Và khi CSS nó load xong, mình bắt trên event onload và đổi media thành all => Apply vào web page ngay sau khi load CSS xong.

2/ Trick Number 2

Dùng rel=preload như sau:

<link rel="preload" href="/path/to/my.css" as="style">

Cons: Đây là một trong những cách modern dành cho modern browsers, và ko phải browser nào cũng support. Các bạn nên lưu ý khi sử dụng

View browsers support info: https://caniuse.com/#feat=link-rel-preload

3/ loadCSS

Một library cũng khá ok hiện tại, loadCSS bằng JS đơn giản như:

loadCSS("/path/to/my.css")

Link: https://github.com/filamentgroup/loadCSS

Tuy nhiên loadCSS thì nó cũng như 2 cách ở trên đó, nếu bạn đã dùng loadCSS hay preload thì thôi ko cần switch qua cái Number 1. Cách nào cũng ok cả :v

4/ Kết luận

Mong rằng với bài viết này, các bạn có thể apply dc thủ thuật load css async (non-blocking render) cho web page của bạn và đạt dc điểm cao hơn trong Google Test nhé :v

Cám ơn các bạn đã theo dõi.

facebook
Seth Phát

Seth Phát

Mình là Phát - biệt danh Seth Phát. Hiện đang là một Sr. Full-Stack Engineer. Mình là một người yêu thích và đam mê lập trình và hiện tại đang theo về phần Web là chủ yếu. Mạnh Back-end và khá Front-end, vẫn đang theo đều cả 2 :v. Còn gì bằng khi được làm những thứ mà mình yêu thích, đam mê ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

Bình luận qua Facebook