21 June, 2020
#37: Điểm Performance web - hiểu sao cho đúng?
Thi thoảng thì mình nhận được câu hỏi về việc làm thế nào để tối ưu hóa web thế nào, để cải thiện số điểm Performance trong Chrome Lighthouse (hay PageSpeed)
Vấn đề ở chỗ, số điểm này không nói lên tất cả. Nếu như bạn được điểm thấp (dưới 10 chẳng hạn), thì web của bạn có thể chậm thật, nhưng ngược lại, với 1 số điểm cao (khoảng 70-100) thì cũng chưa chắc là web của bạn chạy nhanh.
Vậy nên hiểu số điểm này như thế nào. Trong bài này, các bạn hãy cùng mình “khám phá” vè “nghịch ngợm” một chút nhé !
Trước hết thì, những gì tác động vào điểm số Performance?
Điểm số này được tính toán dựa trên 6 thông số chính như trong hình:
Tuy nhiên kể cả có giải thích 6 cái thông số này ra thì cũng chưa rõ ràng, vì vậy mình sẽ giải thích theo cách của mình. Trình tự mà 1 trang web khi load sẽ được phân ra thành các khoảng:
- Tải dữ liệu HTML, CSS và JS.
- Đọc – hiểu các dữ liệu này và bắt đầu vẽ lên màn hình.
- Vẽ nội dung lên màn hình. Sau khi vẽ, bạn có thể thấy cơ bản nội dung trang web như text, màu, bố cục… Bước này phản ánh bởi thông số First Contentful Paint
- Tiếp tục load font, ảnh, JS… trong body. Bước này gần như tốn thời gian nhất, vì ảnh thường nặng. Sau khi load xong, có khả năng content của bạn sẽ bị đẩy xuống, trước khi load ảnh thì chưa có chiều cao của ảnh, nên browse không để chỗ trống sẵn cho nó (thông số Cumulative Layout Shift)
- Sau đó sự kiện “onload” của document sẽ được gọi. Thường thì các theme sử dụng $(document).load để setup thêm râu ria, ví dụ slider hay gallery chẳng hạn.
- Nếu như ngay sau sự kiện “onload” mà JS vẫn chỉnh sửa DOM, hay tệ hơn là thêm 1 vài ảnh vào, thì nó vẫn sẽ được tính khi đo bằng Lighthouse.
- Phải khi mức dùng CPU về gần bằng 0% thì Lighthouse mới có thể kết thúc bài test. Thông số Time to Interactive sẽ thể hiện điều này.
Tuy nhiên, nếu sau bước 7 một lúc mà bạn thêm DOM, ví dụ <img> hay thậm chí <script> vào chẳng hạn, thì dù browser vẫn mất thời gian load, nhưng nó không ảnh hưởng đến điểm số.
Như vậy dễ thấy, để cải thiện điểm số này thì có một vài cách sau:
- Dùng CDN (cache thì càng tốt, nhưng cache không có tác dụng với lần đầu load trang => không ảnh hưởng đến điểm số)
- Nén ảnh để nó được tải nhanh hơn (định dạng JPEG 80% hoặc WebP)
- Minify JS => giảm tải, tránh browser phải đọc – hiểu quá nhiều code
- Giảm số lượng DOM / img trong HTML (có thể thêm trở lại bằng JS, sau sự kiện “load”) => ví dụ như lazyload có thể làm việc này
OK hiểu rồi, vậy ta có thể dùng chính hiểu biết này để “gian lận” số điểm?
“Gian lận” ở đây tức là web của bạn thực tế không chạy nhanh hơn, thậm chí chậm đi, nhưng số điểm Performance vẫn cao. Mục đích của phần này là để cho các bạn hiểu rằng không nên “cả tin” hoàn toàn vào nó. Còn về việc tối ưu thực tế, hãy đợi bài viết tiếp theo của mình nhé !
Để thử thì mình có làm 1 trang web nho nhỏ, với vài hình ảnh khá “nặng” nhưng đẹp mắt: https://pagespeed-test.netlify.app/normal.html
Và điểm số khi chạy PageSpeed Insight:
Đầu tiên, mình xác định rõ được rằng điểm mấu chốt làm web chạy chậm là do ảnh khá nặng. Như vậy, mình làm một cách gần giống lazyload, đó là đợi page load xong xuôi rồi mới lắp “src” vào <img>: https://pagespeed-test.netlify.app/loader-img.html
Như mong đợi, điểm số được cải thiện thật, dù thực tế user phải đợi thêm 2 giây:
Hay là giờ chơi lớn, load toàn bộ cả web bằng JS thì sao nhỉ? Trong test tiếp theo, mình lưu toàn bộ nội dung trong <body> vào 1 file TXT. Khi mở file HTML, bạn sẽ được nhìn màn hình loading 2 giây (trong lúc này web chẳng làm gì cả), và sau đó có AJAX lấy dữ liệu từ file TXT, rồi lắp vào <body>: https://pagespeed-test.netlify.app/loader.html
Trên cả mong đợi, mình được tận 99 điểm, cho dù thực tế user cũng phải đợi thêm 2 giây:
Nhưng tất nhiên thực tế không ai làm vậy cả, vì không những cách này bắt user đợi thêm, mà còn ảnh hưởng đến SEO nữa.
Lời kết
Để đo tốc độ thực của trang web, bạn không nên chỉ dựa vào số điểm của Lighthouse. Hãy nhìn vào cả những gợi ý mà Lighthouse đưa ra cho bạn. Ngoài ra, mình cũng có một vài gợi ý để bạn đo performance chính xác hơn:
- webpagetest.org: cái này cho phép test ở nhiều địa điểm khác nhau, cũng như hiển thị report chi tiết như waterfall, filmstrip => bạn có thể biết chính xác phần nào làm page bị load chậm
- Firebase Performance Monitoring: đây là một dạng analytics gắn vào web, cho phép đo tốc độ trực tiếp luôn. Tất nhiên chính cái script để đo tốc độ này cũng chiếm một ít thời gian khi load page (nhưng chắc là không đáng kể)
Vậy nếu bạn cảm thấy web của bạn chậm thật? Hãy đón xem số blog sau, mình sẽ chia sẻ một câu chuyện có thật khi mình tối ưu trang một web nhé!
