Extract critical CSS
TIL
720
Web
30
White

Hà Phạm viết ngày 06/06/2016

Bây giờ chỗ nào chúng nó cũng đòi hỏi load async async. FIle css thì càng lúc càng to, vứt hết vào trong head thì quá trình render page sẽ bị block, làm thằng người dùng cảm giác trang web chậm rất khó chịu, rồi chúng nó chửi dev không ra gì. Vậy nên mấy thằng dev lại phải nghĩ ra cách là inline các CSS quan trọng, còn cái file css thì dùng javascript để load sau. Trong bài viết này (#), @KawaiNT cũng có nhắc ở khổ thơ cuối. Có điều ngồi phân tích xem CSS nào quan trọng thì mất công hơn việc trông ảnh hồ sơ mà đoán được đại biểu nào đủ đức đủ tài. May thay có anh @addyosmani đã viết một cái tool để extract hộ chúng ta, tên là critical.

Sử dụng rất đơn giản, chỉ việc cài đặt qua npm

npm i critical

Rồi viết 1 script js nhỏ, chỉ đến file html cần bóc tách

const critical = require('critical');

critical.generate({
    inline: true,
    base: 'test/',
    src: 'index.html',
    dest: 'index-critical.html',
    width: 1300,
    height: 900
});

Chạy script đó

node extract.js

Thế là xong, file out put sẽ được inline đoạn css đó, kèm theo luôn hàm loadCss tiện dụng. Quá nhanh, quá nguy hiểm.

mahpahh 07-06-2016


NOTE:

  • Critical CSS thường là đoạn css tối thiểu để hiển thị phần đầu tiên mà người dùng trông thấy, góp phần tạo ảo tưởng về tốc độ tải trang web của chúng ta.

  • Tool này còn nhiều config khác, xin tham khảo README

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hà Phạm

25 bài viết.
69 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
44 8
Xin chào, đây là lần đầu tiên mình post bài ở đây. Nhiều vấn đề mình cũng không rành lắm, có gì sai mọi người góp ý nhé. Xin cảm ơn :D Bài này gi...
Hà Phạm viết 4 năm trước
44 8
White
36 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết gần 4 năm trước
36 8
White
32 3
Đây là một trong các concept mới đối tượng mới được đưa vào ECMAScript 6. Việc sử dụng chúng rất dễ nhưng để hiểu được thì (đối với tôi) cũng cần k...
Hà Phạm viết 4 năm trước
32 3
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 7 tháng trước
2 0
White
22 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 3 năm trước
22 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
25 bài viết.
69 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!