?? Frontend Performance - Blocking Resource

Tài nguyên ch?n (blocking resources) là các t?p ng?n trình duy?t hi?n th? n?i dung trang web cho ??n khi chúng ???c t?i v?, phan tích và th?c thi hoàn toàn. Nh?ng tài nguyên này có tác ??ng ?áng k? ??n hi?u su?t trang web c?ng nh? tr?i nghi?m ng??i dùng, gay ra ch?m tr? trong quá trình hi?n th? và làm gi?m m?c ?? t??ng tác trên trang.

Có hai lo?i tài nguyên ch?n chính:

1. Render Blocking
2. Parser Blocking

Anh em h?y cùng mình tìm hi?u chi ti?t ngay d??i ?ay nhé.

1. Render Blocking

Khái ni?m: Là nh?ng tài nguyên ng?n ch?n trình duy?t th?c hi?n render giao di?n.

CSS ???c coi là Render Blocking. ?? t?i ?u hi?n th? h?y cung c?p file CSS nhanh nh?t có th? ??n client.

Nguyên nhan là do trình duy?t c?n xác ??nh các style s? ???c áp d?ng cho các ph?n t? HTML tr??c khi v? chúng lên màn hình.

Trong bài CRP, chúng ta th?y r?ng mu?n trang web ???c hi?n th?, DOM và CSSDOM ph?i ???c xay d?ng xong. ?i?u này có ngh?a Trình duy?t s? kh?ng hi?n th? b?t k? n?i dung nào cho ??n khi CSSOM ???c xay d?ng xong.

Tuy nhiên, Render blocking l?i có tác d?ng Ng?n ch?n hi?n t??ng FOUC (Flash of Unstyled Content), hi?u n?m na là hi?n t??ng hi?n th? n?i dung v?i style m?c ??nh c?a trình duy?t tr??c khi có CSSDOM, s? gay ra tr?i nghi?m kh?ng t?t cho ng??i dùng.

2. Parser Blocking

Khái ni?m: Là nh?ng tài nguyên ng?n ch?n trình duy?t th?c hi?n vi?c parseHTML.

Th? script (kh?ng ch?a async, defer) ???c coi là Parser Blocking. ?? t?i ?u hi?n th?, h?y trì ho?n các script kh?ng c?n thi?t.

Khi g?p th? script (kh?ng ch?a async, defer), trình duy?t s? t?m d?ng vi?c parse HTML (xay d?ng DOM) cho ??n khi t?i và th?c thi xong script ?ó.

Nguyên nhan là do script có th? truy c?p và thay ??i DOM nên trình duy?t s? d?ng vi?c parseHTML. ?ay chính là ly do chúng ta th??ng nghe th?y l?i khuyên nên ??t th? script vào cu?i trong th? body.

Cau h?i ??t ra ? ?ay là n?u sau th? script app.js còn r?t nhi?u các th? script khác thì li?u trình duy?t có ph?i ch? script app.js th?c thi xong m?i ti?p t?c t?i và th?c thi các script phía sau m?t cách tu?n t? hay kh?ng ?

R?t may m?n, cau tr? l?i là KH?NG. Trình duy?t s? s? d?ng c? ch? Preload Scanner ?? giúp gi?i quy?t bài toán trên.

3. Preload Scanner

Các trình duy?t hi?n ??i s? d?ng c? ch? Preload Scanner ?? gi?m thi?u tác ??ng c?a Blocking Resources. Preload Scanner ch?y ? ch? ?? n?n (ch?y ng?m), nó s? quét toàn b? file HTML ?? tìm các liên k?t (các tài nguyên quan tr?ng nh? hình ?nh, CSS, và JavaScript) và t?i xu?ng s?m các tài nguyên ?ó d?a trên m?c ?? ?u tiên, giúp gi?m th?i gian ch? ??i cho vi?c t?i tài nguyên và c?i thi?n t?c ?? t?i trang.

Nh? có Preload Scanner, trình duy?t s? th?c hi?n vi?c t?i liên ti?p 2 file app.js và timing.js

4. M?t vài chi?n l??c giúp t?i ?u Blocking Resources

1. Gi?m kích th??c file CSS và JavaScript:B? các ?o?n m? kh?ng c?n thi?t.Minify và Compress.Code-split.Tree-shaking.
2. Inline CSS quan tr?ng: ??i v?i n?i dung hi?n th? trên màn hình ngay khi vào trang, xem xét vi?c inline CSS quan tr?ng tr?c ti?p vào HTML ?? gi?m thi?u request.
3. Preload tài nguyên quan tr?ng: S? d?ng th? link preload ?? ch? ??nh các tài nguyên quan tr?ng nên ???c t?i s?m trong quá trình t?i trang.
4. Async và Defer cho th? script: Cho phép trình duy?t ti?p t?c parse HTML trong khi t?i và th?c thi script.
5. Gi?m size image: S? d?ng ??nh d?ng WebP ?? gi?m kích th??c file.

K?t

Bài vi?t này s? giúp cho anh em n?m r? khái ni?m và m?t s? chi?n l??c t?i ?u Blocking Resource. T? ?ó, anh em s? t? tin b?t tay vào vi?c t?i ?u hi?u n?ng Frontend.

R?t c?m ?n anh em ?? ??c bài vi?t. Trong các bài vi?t ti?p theo, mình s? chia s? t?i anh em chi ti?t các chi?n l??c t?i ?u Frontend. Hi v?ng bài vi?t s? giúp ích cho anh em và ??ng quên ?ón ch? nh?ng bài vi?t ti?p theo c?a mình nha.

Anh em h?y k?t n?i v?i mình qua Viblo ?? ??c nhi?u bài vi?t hay khác nhé: https://viblo.asia/u/pdthien

Tham kh?o

1. https://web.dev/articles/critical-rendering-path/render-blocking-css
2. https://web.dev/articles/critical-rendering-path/adding-interactivity-with-javascript
3. https://web.dev/articles/preload-scanner