Cách cải thiện hiệu suất website (tối ưu hình ảnh)
Sau khi thực hiện một số thay đổi về thiết kế cho blog này, tôi đã quyết định kiểm tra nó bằng PageSpeed Insight (một quyết định khá hiển nhiên đối với một developer). Thật bất ngờ, kết quả lại khác xa so với những gì tôi mong đợi.
Khi sửa lỗi, tôi tiếp cận theo ý tưởng “tiếp xúc đầu tiên”. Điều đó có nghĩa là gì — hãy tối ưu lần truy cập đầu tiên trước. Không có ý nghĩa gì khi tối ưu cho người dùng quay lại trước, bởi vì nếu trải nghiệm tệ đối với những người chỉ ghé thăm một lần, thì nó cũng sẽ tệ đối với những người ghé thăm nhiều lần. Vậy nên hãy cùng đi qua từng bước.
Xác định vấn đề
Như có thể thấy từ kết quả, PageSpeed Insight cho biết tôi có thể giảm tổng dung lượng hình ảnh đi 1171 KiB. Tôi không đồng ý với điều này ở thời điểm hiện tại, vì nó giả định rằng tôi đang dùng jpeg với chất lượng 100% (thực tế là 70%, nhưng tôi sẽ so sánh dựa trên jpeg đã tối ưu và chưa tối ưu), nhưng dù sao tôi cũng cho rằng mình có thể đạt được mức giảm 500 KiB (lạc quan hơn thì hy vọng là 700 KiB).
Vậy nên trước tiên tôi cần hiểu vấn đề của mình ở đây là gì, và vì đây là hình ảnh, nhiều khả năng nó sẽ là:
- Định dạng
- Độ phân giải
- Lazy loading
Định dạng hình ảnh
Vậy điều đầu tiên tôi sẽ làm ở đây là đổi định dạng. PageSpeed khuyến nghị WebP và AVIF. Tôi sẽ không phải là tôi nếu không thực hiện một phép so sánh ở bước này.
Kiểm tra khả năng hỗ trợ
Hãy cùng kiểm tra mức độ hỗ trợ của cả hai định dạng ở bước này, và để làm điều đó tôi sẽ dùng Can I Use, và ở đây tôi có thể thấy rằng hầu hết các nền tảng tôi cần đều được hỗ trợ. IE11 không hỗ trợ định dạng nào trong hai, nhưng điều đó chẳng có ý nghĩa gì với tôi vì tôi hoàn toàn không có ý định hỗ trợ một thứ đã bị khai tử. Vậy nên sự khác biệt thực sự chỉ nằm ở: trình duyệt KaiOS, Opera Mini và QQ Browser. Vì vậy ở thời điểm này không có lý do rõ ràng nào để chọn định dạng này thay vì định dạng kia (đúng vậy — hỗ trợ nhiều hơn không có nghĩa là tốt hơn đối với tôi lúc này).
Thay đổi định dạng
Bây giờ tôi muốn kiểm tra sự khác biệt về dung lượng file của 5 hình ảnh có trên website, chỉ dựa trên định dạng.
Để chuyển đổi hình ảnh sang WebP, tôi chạy 3 lệnh (một lệnh để đổi định dạng và giữ nguyên chất lượng, hai lệnh còn lại để đổi định dạng và giảm chất lượng (nén))
mogrify -format webp -quality 100 *.jpg
mogrify -format webp -quality 90 *.jpg
mogrify -format webp -quality 70 *.jpg
Dung lượng file được ghi lại riêng sau mỗi lệnh. Sau đó, ba lệnh tiếp theo đã được thực thi:
mogrify -format avif -quality 100 *.jpg
mogrify -format avif -quality 900 *.jpg
mogrify -format avif -quality 70 *.jpg
Và sau khi nhận được kết quả đầu ra, các con số lại được ghi lại một lần nữa.
So sánh kết quả
Vậy đây là bảng kết quả tôi thu được (tất cả dung lượng file đều tính bằng KiB).
| Hình ảnh gốc | Dung lượng gốc | Dung lượng WebP | WebP 90% | WebP 70% | Dung lượng AVIF | AVIF 90% | AVIF 70% |
|---|---|---|---|---|---|---|---|
| Hình ảnh 1 (chất lượng 100%) | 297 | 385 | 44 | 28 | 291 | 50 | 26 |
| Hình ảnh 2 (chất lượng 100%) | 894 | 1331 | 232 | 82 | 770 | 335 | 114 |
| Hình ảnh 3 (chất lượng 100%) | 740 | 1228 | 127 | 59 | 546 | 187 | 69 |
| Hình ảnh 4 (chất lượng 100%) | 1228 | 1740 | 420 | 208 | 991 | 513 | 280 |
| Hình ảnh 5 (chất lượng 100%) | 2457 | 4270 | 547 | 125 | 2048 | 807 | 204 |
| Hình ảnh 1 (chất lượng 70%) | 82 | 227 | 47 | 28 | 197 | 54 | 27 |
| Hình ảnh 2 (chất lượng 70%) | 228 | 833 | 190 | 81 | 619 | 205 | 110 |
| Hình ảnh 3 (chất lượng 70%) | 159 | 513 | 113 | 58 | 343 | 123 | 70 |
| Hình ảnh 4 (chất lượng 70%) | 411 | 1433 | 395 | 205 | 925 | 383 | 259 |
| Hình ảnh 5 (chất lượng 70%) | 390 | 2836 | 377 | 132 | 1433 | 358 | 183 |
Và kết quả khá thú vị:
- Tôi khá bất ngờ khi việc chuyển đổi hình ảnh sang WebP lại làm tăng dung lượng file — có lúc tăng tới 627% (Hình ảnh 2 ở chất lượng 70%), hay nói theo con số làm tròn — thêm tới 2,3 MiB!
- Việc chuyển đổi thuần túy sang WebP không mang lại lợi ích nào (thực tế còn gây hại nhiều hơn)
- Việc chuyển đổi thuần túy sang AVIF chỉ mang lại lợi ích so với các file JPEG và WebP chưa nén (vì vậy đối với các tác vụ tự động, tôi sẽ thực sự tránh cách này, bởi vì rất nhiều hình ảnh trên internet đã được tối ưu sẵn, nên nó chỉ gây hại thêm)
- Giảm 10% chất lượng mang lại lợi ích rất lớn cho WebP và AVIF so với JPEG
- WebP, dù là định dạng cũ hơn, vẫn cho hiệu suất tốt hơn so với AVIF
- PageSpeed Insight đã “sai” — dung lượng giảm 768 KiB (đúng vậy, con số đó có thể tăng lên 850 KiB hoặc thậm chí 950 KiB, nhưng liệu có thực sự đáng không?)