{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/render-blocking-css-and-chrome-performance-api","result":{"data":{"markdownRemark":{"id":"7a7e1fa0-a034-5ed2-96c3-c6781f8cf258","html":"

CSS được browser xem là 1 trong những render blocking resources - những tài nguyên mà trang của bạn bắt buộc phải tải thì người dùng mới có thể nhìn thấy nội dung được

\n

Tại sao nên tránh Render Blocking CSS

\n\n
\n\n
\nCSS ảnh hưởng rất nhiều đến thời gian hiển thị trang\n
\n

Khi bắt đầu tải trang, browser sẽ luôn tự động tải tất cả các file CSS, không quan tâm đến việc nó có block quá trình render hay không!

\n

Vậy phải làm thế nào để hạn chế được render blocking css ?

\n

Solutions

\n

Nếu như bạn nhận thấy trang của mình có những CSS mà chỉ sử dụng trong 1 vài điều kiện nhất định ví dụ như style cho content bên trong 1 modal mà user phải click để open modal mới thấy, content bên trong tab không hiển thị đầu tiên, hoặc những style chỉ apply riêng cho large monitor hoặc mobile devices…

\n

Thì đây là 1 số cách có thể giúp trang của bạn tải nhanh hơn

\n

Sử dụng media attribute

\n

Khi muốn load css vào web page của mình chúng ta sẽ sử dụng thẻ link như thế này

\n
<link href=\"style.css\" rel=\"stylesheet\">\n<link href=\"print.css\" rel=\"stylesheet\">\n<link href=\"style.mobile.css\" rel=\"stylesheet\">
\n

Browser sau khi load xong HTML sẽ tải thêm 3 file CSS này nữa và chỉ hiển thị nội dung sau khi đã tải xong tất cả

\n

Tuy nhiên print.css chỉ dùng khi in document (Ctrl/Cmd + P) và style.mobile.css là những style chỉ apply trên mobile mà thôi

\n

Trong trường hợp này chúng ta có thể sử dụng media attribute

\n
<link href=\"style.css\" rel=\"stylesheet\">\n<link href=\"print.css\" media=\"print\" rel=\"stylesheet\">\n<link href=\"style.mobile.css\" media=\"(max-width: 568px)\" rel=\"stylesheet\">
\n

Lúc này browser sẽ hiểu rằng chỉ cần tải xong file style.css là ngay lập tức có thể hiển thị nội dung trang cho người dùng mà không cần biết 2 file còn lại đã tải xong hay chưa

\n

Đối với link sử dụng media attribute:

\n\n

Sử dụng media attribute chúng ta có thể điều chỉnh việc hiển thị trang theo các trường hợp cụ thể như: sau khi đã render xong, điều chỉnh kích thước màn hình, thay đổi hướng thiết bị (ngang/dọc)…

\n

Giá trị của media bắt buộc phải là 1 media type hoặc media query, rất hữu ích khi cần load các external stylesheets - nó hỗ trợ browser lựa chọn được những CSS cần thiết nhất cho lần render đầu tiên

\n

Combine css or inline css

\n

1 cách khá hiệu quả là các bạn có thể để trực tiếp CSS vào trong 1 thẻ style trên header của document nếu CSS không quá to, cách này cải thiện performance rất tốt khi chỉ cần DOM load xong là có thể hiển thị ngay được rồi

\n

Hoặc có thể hạn chế tải nhiều file CSS quá. Thông thường khi code các dev sẽ có xu hướng tách ra nhiều file CSS khác nhau theo component, module… để dễ quản lý, tuy nhiên việc load nhiều file CSS sẽ lâu hơn so với chỉ load 1 hoặc 2 file

\n

\"inline-css\"

\n

1 trong những kĩ thuật giúp Gatsby site tải rất nhanh chính là Inline CSS

\n

Performance API

\n

Bây giờ chúng ta hãy thử đo đạc page rendering time sau khi áp dụng 1 số kĩ thuật để tránh Render Blocking CSS với Chrome Perfomance API nhé

\n

Mình có viết 1 ví dụ đơn giản để các bạn có thể hiểu về Render Blocking CSS ở đây: https://hta218.github.io/render-blocking-css-example/

\n

Trong ví dụ mình có load 2 file CSS và so sánh page rendering time với 2 màn hình có device-width lớn hơn và nhỏ hơn 800px

\n
<link rel=\"stylesheet\" href=\"tailwind.css\" media=\"(min-width: 800px)\" />\n<link rel=\"stylesheet\" href=\"bootstrap.css\" media=\"(min-width: 800px)\" />
\n

Để sử dụng Performance API thì cần chú ý kiểm tra kĩ browser compatibility

\n
if (\"PerformanceObserver\" in window) {\n\ttry {\n\t\t// Create PerformanceObserver instance\n\t\tconst perfObsever = new PerformanceObserver(perf => {\n\t\t\tconst perfEntries = perf.getEntriesByType('paint');\n\t\t\tperfEntries.forEach(({ name, startTime }) => {\n\t\t\t\t// Get the result inside this callback\n\t\t\t\tconsole.log(`The time to ${name} was ${startTime} milliseconds.`);\n\t\t\t});\n\t\t})\n\n\t\t// observe \"paint\" event\n\t\tperfObsever.observe({ entryTypes: [\"paint\"] })\n\t} catch (err) {\n\t\tconsole.error(err)\n\t}\n} else {\n\t// Remember to check the browser compatibility before using this API\n\tconsole.log(\"Performance API isn't supported!\")\n}
\n

Có nhiều Performance metric khác nhau, trong trường hợp này mình sử dụng PerformancePaintTiming

\n

Để thấy rõ hơn kết quả các bạn có thể mở chrome devtool lên, throttle internet và CPU speed cho giống với điều kiện ở máy user hơn nhé

\n

Với màn hình >800px (ví dụ cho load tất cả các CSS trước first page render)

\n

\"css-block-render\"

\n

Chúng ta cần hơn 6 giây cho first paint (sau khi tất cả CSS load xong) - tương đương với user phải đợi 6s mới thấy nội dung của page

\n

Với trường hợp chỉ cần load 1 file CSS cho first paint (các file còn lại vẫn được load nhưng không dùng đến hoặc không cần dùng cho lần render đầu tiên)

\n

\"css-not-block-render\"

\n

User nhìn thấy content sớm hơn 2 giây, có thể thấy page render ngay cả khi 2 file CSS còn lại vẫn chưa load xong

\n

Kết quả đo đạc với Performance API được tổng hợp lại

\n

\"render-result\"

\n

Hoặc đơn giản hơn, các bạn có thể sử dụng trực tiếp PerformancePaintTiming API

\n
if (window.performance) {\n\tconst performance = window.performance;\n\tconst perfEntries = performance.getEntriesByType('paint');\n\n\tperfEntries.forEach({ name, startTime } => {\n\t\tconsole.log(`The time to ${name} was ${startTime} milliseconds.`);\n\t});\n} else {\n\tconsole.log(\"Performance timing isn't supported.\");\n}
\n

Kết bài

\n

Có thể thấy sự khác biệt rõ rệt với page rendering time, ảnh hưởng trực tiếp đến user’s experience khi webpage phải tải quá nhiều CSS không cần thiết, vì vậy chúng ta cần phải rất chú ý đến resource này.

\n

Có nhiều biện pháp để tránh Render Blocking CSS như: sử dụng media type hoặc media query, combine CSS, inline CSS, những thay đổi này tuy nhỏ nhưng ảnh hưởng rất tốt đến perfomance

\n

Tham khảo

\n","fields":{"slug":"/posts/render-blocking-css-and-chrome-performance-api","tagSlugs":["/tag/render-blocking-resources/","/tag/render-blocking-css/","/tag/perfomance/","/tag/chrome-performance-api/"]},"frontmatter":{"date":"2020-09-12T02:12:03.284Z","description":"Mỗi file CSS mà website của bạn tải sẽ tăng thêm thời gian vào first-paint của page, có nghĩa là user sẽ phải đợi lâu hơn để nhìn thấy content nếu trang của bạn phải tải nhiều CSS. Vậy phải làm thế nào để hạn chế được render blocking css?","tags":["render-blocking-resources","render-blocking-css","perfomance","chrome-performance-api"],"title":"Tìm hiểu về Render Blocking CSS và đo page rendering time với Chrome Performance API","socialImage":"/media/book-header.jpg","headerImage":"/media/book-header.jpg"},"timeToRead":7}},"pageContext":{"slug":"/posts/render-blocking-css-and-chrome-performance-api"}}}