Ngoài việc loại bỏ các lượt tải tài nguyên không cần thiết, điều tốt nhất bạn có thể làm để cải thiện tốc độ tải trang là giảm thiểu kích thước tải xuống tổng thể bằng cách tối ưu hoá và nén các tài nguyên còn lại.
Nén dữ liệu cơ bản
Sau khi thiết lập trang web để tránh tải xuống mọi tài nguyên không dùng đến, bước tiếp theo là nén mọi tài nguyên đủ điều kiện còn lại mà trình duyệt phải tải xuống. Tuỳ thuộc vào loại tài nguyên (văn bản, hình ảnh, phông chữ, v.v.), bạn có thể chọn trong số nhiều kỹ thuật: các công cụ chung có thể được bật trên máy chủ web, các chế độ tối ưu hoá tiền xử lý cho các loại nội dung cụ thể và các chế độ tối ưu hoá dành riêng cho tài nguyên yêu cầu thông tin đầu vào từ nhà phát triển.
Để mang lại hiệu suất cao nhất, bạn cần kết hợp tất cả các kỹ thuật sau:
- Nén là quá trình mã hoá thông tin bằng cách sử dụng ít bit hơn.
- Việc loại bỏ dữ liệu không cần thiết luôn mang lại kết quả tốt nhất.
- Có nhiều kỹ thuật và thuật toán nén khác nhau.
- Bạn sẽ cần nhiều kỹ thuật để đạt được mức nén tốt nhất.
Quá trình giảm kích thước dữ liệu được gọi là nén dữ liệu. Nhiều người đã đóng góp các thuật toán, kỹ thuật và phương pháp tối ưu hoá để cải thiện tỷ lệ nén, tốc độ nén và bộ nhớ mà các thuật toán nén khác nhau yêu cầu.
Việc thảo luận đầy đủ về tính năng nén dữ liệu nằm ngoài phạm vi của hướng dẫn này. Tuy nhiên, bạn cần hiểu (ở mức độ tổng quan) cách thức hoạt động của tính năng nén và các kỹ thuật mà bạn có thể sử dụng để giảm kích thước của nhiều thành phần mà các trang của bạn yêu cầu.
Để minh hoạ các nguyên tắc cốt lõi của những kỹ thuật này, hãy xem xét quy trình tối ưu hoá một định dạng tin nhắn văn bản đơn giản được phát minh chỉ cho ví dụ này:
# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA
- Thông báo có thể chứa chú thích tuỳ ý (đôi khi được gọi là bình luận) được biểu thị bằng tiền tố "#". Chú thích không ảnh hưởng đến ý nghĩa của thông báo hoặc hành vi của thông báo.
- Thông báo có thể chứa tiêu đề, là các cặp khoá-giá trị (được phân tách bằng
":"trong ví dụ trước) xuất hiện ở đầu thông báo. - Các thông báo mang tải trọng văn bản.
Bạn có thể làm gì để giảm kích thước của thông báo trước đó, bắt đầu từ 200 ký tự?
- Bình luận này thú vị nhưng không ảnh hưởng đến ý nghĩa của thông điệp. Loại bỏ nó khi truyền tin nhắn.
- Có những kỹ thuật hiệu quả để mã hoá các tiêu đề một cách hiệu quả. Ví dụ: nếu biết rằng tất cả các thông báo đều có "định dạng" và "ngày", bạn có thể chuyển đổi những thông báo đó thành mã nhận dạng số nguyên ngắn và chỉ gửi những thông báo đó. Tuy nhiên, điều đó có thể không đúng, vì vậy, tốt nhất là bạn nên để nguyên như vậy.
- Tải trọng chỉ có văn bản. Mặc dù chúng tôi không biết nội dung thực sự của tệp này là gì (rõ ràng là tệp này đang sử dụng
"secret-cipher"), nhưng chỉ cần nhìn vào văn bản, chúng ta có thể thấy rằng có rất nhiều nội dung dư thừa trong đó. Thay vì gửi các chữ cái lặp lại, bạn có thể chỉ cần đếm số lượng chữ cái lặp lại và mã hoá chúng một cách hiệu quả hơn. Ví dụ:"AAA"trở thành"3A", biểu thị một chuỗi gồm 3 chữ A.
Việc kết hợp các kỹ thuật này sẽ mang lại kết quả sau:
format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A
Thông báo mới có độ dài 56 ký tự, tức là bạn đã nén thông báo ban đầu xuống 72%. Đó là một mức giảm đáng kể!
Đây là một ví dụ minh hoạ về cách các thuật toán nén có thể hiệu quả trong việc giảm kích thước truyền của các tài nguyên dựa trên văn bản. Trên thực tế, các thuật toán nén phức tạp hơn nhiều so với ví dụ minh hoạ trước đó và trên web, các thuật toán nén có thể được dùng để giảm đáng kể thời gian tải xuống cho các tài nguyên. Bằng cách áp dụng tính năng nén cho các thành phần dựa trên văn bản, một trang web có thể mất ít thời gian hơn để tải tài nguyên, nhờ đó người dùng có thể thấy hiệu ứng của những tài nguyên đó sớm hơn so với khi không có tính năng nén.
Giảm thiểu: tiền xử lý và tối ưu hoá theo bối cảnh cụ thể
Kỹ thuật đầu tiên được thảo luận ở đây là giảm thiểu. Mặc dù rút gọn không phải là một thuật toán nén theo đúng nghĩa, nhưng đây là một cách để xoá các ký tự không cần thiết và dư thừa được dùng trong mã nguồn để giúp con người đọc tài nguyên dễ dàng hơn. Tuy nhiên, khả năng đọc đó không cần thiết để duy trì chức năng của mã nguồn đó trên các trang web sản xuất và có thể làm chậm quá trình tải tài nguyên trên web.
Giảm thiểu là một loại hoạt động tối ưu hoá dành riêng cho nội dung, có thể giảm đáng kể kích thước của các tài nguyên được phân phối và các hoạt động tối ưu hoá này được áp dụng tốt nhất trong quá trình tạo và triển khai. Ví dụ: trình đóng gói là một loại phần mềm thường dùng có thể tự động giảm thiểu tài nguyên ngay trước khi triển khai mã sản xuất mới cho một trang web.
Cách tốt nhất để nén dữ liệu thừa hoặc không cần thiết là loại bỏ dữ liệu đó. Tuy nhiên, bạn không thể chỉ xoá dữ liệu tuỳ ý. Tuy nhiên, trong một số bối cảnh mà chúng ta có kiến thức cụ thể về nội dung của định dạng dữ liệu và các thuộc tính của định dạng đó, bạn có thể giảm đáng kể kích thước của tải trọng mà không ảnh hưởng đến ý nghĩa hoặc khả năng thực tế của tải trọng.
<html>
<head>
<style>
/* awesome-container is only used on the landing page */
.awesome-container {
font-size: 120%;
}
.awesome-container {
width: 50%;
}
</style>
</head>
<body>
<!-- awesome container content: START -->
<div>
This is my awesome container, and it is <em>so</em> awesome.
</div>
<!-- awesome container content: END -->
<script>
awesomeAnalytics(); // Beacon conversion metrics
</script>
</body>
</html>
Hãy xem xét đoạn mã HTML trước đó và 3 loại nội dung mà đoạn mã này chứa:
- Ngôn ngữ đánh dấu HTML.
- CSS để tuỳ chỉnh cách trình bày của một trang.
- JavaScript để hỗ trợ các lượt tương tác và các chức năng nâng cao khác của trang.
Mỗi loại nội dung này có các quy tắc riêng về nội dung hợp lệ, các quy tắc riêng về việc chỉ định nhận xét, v.v. Tuy nhiên, câu hỏi vẫn còn bỏ ngỏ là "làm cách nào để giảm kích thước của trang này?"
- Chú thích mã là trợ thủ đắc lực của nhà phát triển, nhưng trình duyệt không cần đến chúng! Việc loại bỏ các nhận xét CSS (
/* ... */), HTML (<!-- ... -->) và JavaScript (// ...) sẽ làm giảm tổng kích thước truyền của trang và các tài nguyên phụ của trang. - Trình nén CSS "thông minh" có thể nhận thấy rằng chúng ta đang sử dụng một cách không hiệu quả để xác định các quy tắc cho
.awesome-containervà thu gọn hai khai báo thành một mà không ảnh hưởng đến bất kỳ kiểu nào khác, giúp tiết kiệm nhiều byte hơn. Đối với một nhóm lớn các quy tắc CSS, việc loại bỏ loại nội dung dư thừa này có thể tăng lên, nhưng có thể không phải là điều có thể áp dụng một cách mạnh mẽ, vì bộ chọn thường được sao chép một cách cần thiết trong các bối cảnh khác nhau, chẳng hạn như trong các truy vấn phương tiện. - Khoảng trắng và thẻ tab là những tiện ích dành cho nhà phát triển trong HTML, CSS và JavaScript. Một trình nén bổ sung có thể loại bỏ tất cả các thẻ và khoảng trắng. Không giống như các kỹ thuật loại bỏ dữ liệu trùng lặp khác, bạn có thể áp dụng loại tối ưu hoá này một cách khá mạnh mẽ, miễn là những khoảng trống hoặc thẻ như vậy không cần thiết cho việc trình bày trang. Ví dụ: bạn nên giữ lại các khoảng trống trong các đoạn văn bản trong tài liệu HTML, vì chúng đảm bảo khả năng đọc nội dung mà người dùng sẽ thực sự nhìn thấy.
<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>
Sau khi áp dụng các bước trước, trang này sẽ chuyển từ 516 ký tự xuống còn 204 ký tự, tức là tiết kiệm được khoảng 60%. Mặc dù không dễ đọc, nhưng bạn không cần phải sắp xếp theo thứ tự để có thể sử dụng. Các phương pháp phát triển hiện đại cũng cho phép bạn tách riêng các phiên bản có định dạng rõ ràng và dễ đọc của mã nguồn với mã được tối ưu hoá mà bạn gửi đến bản phát hành công khai. Kết hợp với bản đồ nguồn (cung cấp thông tin dễ đọc về mã sản xuất đã chuyển đổi của bạn, giúp bạn dễ dàng khắc phục lỗi trong quá trình sản xuất hơn), bạn có thể có cả trải nghiệm tốt cho nhà phát triển trong khi tối ưu hoá hiệu suất vì lợi ích của trải nghiệm người dùng.
Ví dụ trước minh hoạ một điểm quan trọng: một trình nén đa năng (chẳng hạn như trình nén được thiết kế để nén văn bản tuỳ ý) có thể thực hiện khá tốt việc nén trang trong ví dụ trước, nhưng trình nén đó sẽ không bao giờ biết cách loại bỏ các nhận xét, thu gọn các quy tắc CSS hoặc hàng chục nội dung tối ưu hoá khác theo từng nội dung cụ thể. Đó là lý do tại sao việc xử lý trước, giảm thiểu và các hoạt động tối ưu hoá khác dựa trên bối cảnh lại quan trọng.
Tương tự, bạn có thể mở rộng các kỹ thuật được mô tả ở trên, không chỉ giới hạn ở các thành phần dựa trên văn bản. Hình ảnh, video và các loại nội dung khác đều chứa các dạng siêu dữ liệu và nhiều tải trọng riêng. Ví dụ: mỗi khi bạn chụp ảnh bằng camera, tệp ảnh thường nhúng nhiều thông tin bổ sung: chế độ cài đặt camera, vị trí, v.v. Tuỳ thuộc vào ứng dụng của bạn, dữ liệu này có thể rất quan trọng (ví dụ: một trang web chia sẻ ảnh) hoặc hoàn toàn vô dụng. Bạn nên cân nhắc xem có nên xoá hay không. Trên thực tế, siêu dữ liệu này có thể thêm tối đa hàng chục kilobyte cho mỗi hình ảnh.
Nói tóm lại, bước đầu tiên để tối ưu hoá hiệu suất của các thành phần là tạo một danh sách các loại nội dung khác nhau và cân nhắc những loại nội dung tối ưu hoá cụ thể mà bạn có thể áp dụng để giảm kích thước của chúng. Sau đó, sau khi bạn đã xác định được những điểm cần tối ưu hoá, hãy tự động hoá các hoạt động tối ưu hoá này bằng cách thêm chúng vào các bước tạo và phát hành để đảm bảo rằng các hoạt động tối ưu hoá được áp dụng nhất quán cho mọi bản phát hành mới cho bản phát hành công khai.
Nén văn bản bằng thuật toán nén
Bước tiếp theo để giảm kích thước của các thành phần dựa trên văn bản là áp dụng một thuật toán nén cho các thành phần đó. Điều này tiến thêm một bước bằng cách tích cực tìm kiếm các mẫu lặp lại trong tải trọng dựa trên văn bản trước khi gửi chúng đến người dùng và giải nén chúng khi chúng đến trình duyệt của người dùng. Kết quả là những tài nguyên đó sẽ giảm đáng kể hơn nữa và thời gian tải xuống sau đó sẽ nhanh hơn.
- gzip và Brotli là những thuật toán nén thường được dùng và hoạt động hiệu quả nhất trên các tài sản dựa trên văn bản: CSS, JavaScript, HTML.
- Tất cả trình duyệt hiện đại đều hỗ trợ tính năng nén gzip và Brotli, đồng thời sẽ quảng cáo hỗ trợ cả hai trong tiêu đề của yêu cầu HTTP
Accept-Encoding. - Bạn phải định cấu hình máy chủ để bật tính năng nén. Phần mềm máy chủ web thường cho phép các mô-đun nén tài nguyên dựa trên văn bản theo mặc định.
- Bạn có thể tinh chỉnh cả gzip và Brotli để cải thiện tỷ lệ nén bằng cách điều chỉnh mức độ nén. Đối với gzip, chế độ cài đặt nén có phạm vi từ 1 đến 9, trong đó 9 là chế độ tốt nhất. Đối với Brotli, phạm vi này là từ 0 đến 11, trong đó 11 là giá trị tốt nhất. Tuy nhiên, chế độ cài đặt nén cao hơn sẽ cần nhiều thời gian hơn. Đối với những tài nguyên được nén linh động (tức là tại thời điểm yêu cầu), các chế độ cài đặt ở giữa dải thường mang lại sự cân bằng tốt nhất giữa tỷ lệ nén và tốc độ. Tuy nhiên, bạn có thể sử dụng phương pháp nén tĩnh. Đây là phương pháp nén phản hồi trước thời gian và do đó có thể sử dụng chế độ cài đặt nén mạnh nhất hiện có cho từng thuật toán nén.
- Mạng phân phối nội dung (CDN) thường cung cấp tính năng tự động nén các tài nguyên đủ điều kiện. CDN cũng có thể quản lý hoạt động nén động và nén tĩnh cho bạn, giúp bạn bớt đi một khía cạnh cần lo lắng về việc nén.
gzip và Brotli là những trình nén phổ biến có thể áp dụng cho mọi luồng byte. Về cơ bản, chúng ghi nhớ một số nội dung đã được kiểm tra trước đó của một tệp, sau đó cố gắng tìm và thay thế các đoạn dữ liệu trùng lặp một cách hiệu quả.
Trên thực tế, cả gzip và Brotli đều hoạt động hiệu quả nhất trên nội dung dựa trên văn bản, thường đạt được tỷ lệ nén cao tới 70-90% đối với các tệp lớn hơn. Tuy nhiên, việc chạy các thành phần thuật toán này đã được nén bằng các thuật toán thay thế (chẳng hạn như hầu hết các định dạng hình ảnh sử dụng kỹ thuật nén không tổn hao hoặc có tổn hao) sẽ không mang lại nhiều cải tiến.
Tất cả trình duyệt hiện đại đều quảng cáo khả năng hỗ trợ gzip và Brotli trong tiêu đề của yêu cầu HTTP Accept-Encoding. Tuy nhiên, nhà cung cấp dịch vụ lưu trữ có trách nhiệm đảm bảo rằng máy chủ web được định cấu hình đúng cách để phân phát tài nguyên đã nén khi máy khách yêu cầu.
| Tệp | Thuật toán | Kích thước chưa nén | Kích thước nén | Tỷ số nén |
|---|---|---|---|---|
| angular-1.8.3.js | Brotli | 1.346 KiB | 256 KiB | 81% |
| angular-1.8.3.js | gzip | 1.346 KiB | 329 KiB | 76% |
| angular-1.8.3.min.js | Brotli | 173 KiB | 53 KiB | 69% |
| angular-1.8.3.min.js | gzip | 173 KiB | 60 KiB | 65% |
| jquery-3.7.1.js | Brotli | 302 KiB | 69 KiB | 77% |
| jquery-3.7.1.js | gzip | 302 KiB | 83 KiB | 73% |
| jquery-3.7.1.min.js | Brotli | 85 KiB | 27 KiB | 68% |
| jquery-3.7.1.min.js | gzip | 85 KiB | 30 KiB | 65% |
| lodash-4.17.21.js | Brotli | 531 KiB | 73 KiB | 86% |
| lodash-4.17.21.js | gzip | 531 KiB | 94 KiB | Tăng 82% |
| lodash-4.17.21.min.js | Brotli | 71 KiB | 23 KiB | 68% |
| lodash-4.17.21.min.js | gzip | 71 KiB | 25 KiB | 65% |
Bảng trên cho thấy mức tiết kiệm mà cả phương thức nén Brotli và gzip có thể mang lại cho một số thư viện JavaScript nổi tiếng. Mức tiết kiệm từ 65% đến 86% tuỳ thuộc vào tệp và thuật toán. Để tham khảo, mức nén tối đa đã được áp dụng cho từng tệp cho cả Brotli và gzip. Nếu có thể, hãy ưu tiên Brotli hơn gzip.
Bật tính năng nén là một trong những cách tối ưu hoá đơn giản và hiệu quả nhất để triển khai. Nếu trang web của bạn không tận dụng tính năng này, bạn đang bỏ lỡ một cơ hội lớn để cải thiện hiệu suất cho người dùng. Rất may, nhiều máy chủ web cung cấp cấu hình mặc định cho phép tối ưu hoá quan trọng này, đặc biệt là CDN rất hiệu quả trong việc triển khai cấu hình này theo cách cân bằng tốc độ và tỷ lệ nén.
Một cách nhanh chóng để xem hoạt động nén là mở Chrome DevTools, mở bảng điều khiển Mạng, tải một trang mà bạn chọn và quan sát phần dưới cùng của bảng điều khiển mạng.
Giống như hình ảnh trước đó, bạn sẽ thấy thông tin chi tiết về:
- Số lượng yêu cầu, tức là số lượng tài nguyên được tải cho trang.
- Kích thước chuyển của tất cả các yêu cầu. Chỉ số này phản ánh mức độ hiệu quả của việc nén được áp dụng cho bất kỳ tài nguyên nào của một trang.
- Kích thước tài nguyên của tất cả các yêu cầu. Chỉ số này phản ánh kích thước của các tài nguyên cho trang sau khi chúng được giải nén.
Ảnh hưởng đến Core Web Vitals
Bạn không thể đo lường mức độ cải thiện hiệu suất nếu không có các chỉ số phản ánh những điểm cải thiện đó. Sáng kiến Core Web Vitals ra đời nhằm tạo ra và nâng cao nhận thức về những chỉ số phản ánh trải nghiệm thực tế của người dùng. Điều này trái ngược với các chỉ số (chẳng hạn như thời gian tải trang đơn giản) không phản ánh rõ ràng chất lượng trải nghiệm người dùng.
Khi bạn áp dụng các phương pháp tối ưu hoá được nêu trong hướng dẫn này cho các tài nguyên trên trang web của mình, hiệu ứng đối với Core Web Vitals có thể khác nhau, tuỳ thuộc vào tài nguyên được tối ưu hoá và(các) chỉ số liên quan. Tuy nhiên, đây là một số trường hợp mà việc áp dụng các biện pháp tối ưu hoá này có thể cải thiện Core Web Vitals của trang web:
- Các tài nguyên HTML được rút gọn và nén có thể cải thiện quá trình tải HTML đó, khả năng khám phá các tài nguyên phụ của HTML và do đó cải thiện quá trình tải các tài nguyên phụ. Điều này có thể mang lại lợi ích cho Nội dung lớn nhất hiển thị (LCP) của một trang. Mặc dù bạn có thể sử dụng các gợi ý về tài nguyên như
rel="preload"để ảnh hưởng đến khả năng khám phá tài nguyên, nhưng việc sử dụng quá nhiều gợi ý có thể gây ra vấn đề về tranh chấp băng thông. Bằng cách đảm bảo phản hồi HTML cho một yêu cầu điều hướng được nén, trình quét tải trước có thể phát hiện các tài nguyên trong đó càng sớm càng tốt. - Một số ứng viên LCP cũng có thể được tải sớm hơn bằng cách sử dụng tính năng nén. Ví dụ: hình ảnh SVG là các ứng cử viên LCP có thể giảm thời lượng tải tài nguyên thông qua tính năng nén dựa trên văn bản. Điều này khác với những điểm tối ưu hoá mà bạn sẽ thực hiện cho các loại hình ảnh khác (vốn được nén một cách tự nhiên thông qua các phương pháp nén khác), chẳng hạn như cách hình ảnh JPEG sử dụng phương pháp nén có tổn hao.
- Ngoài ra, các nút văn bản cũng có thể là ứng cử viên LCP. Cách sử dụng các kỹ thuật được mô tả trong hướng dẫn này tuỳ thuộc vào việc bạn có đang sử dụng phông chữ web cho văn bản trên các trang web của mình hay không. Nếu bạn đang sử dụng một phông chữ trên web, thì các phương pháp hay nhất để tối ưu hoá phông chữ trên web sẽ được áp dụng. Tuy nhiên, nếu bạn không sử dụng phông chữ trên web mà sử dụng phông chữ hệ thống hiển thị mà không làm phát sinh bất kỳ khoảng thời gian tải tài nguyên nào, thì việc giảm thiểu và nén CSS sẽ làm giảm khoảng thời gian này, tức là quá trình kết xuất các nút văn bản LCP tiềm năng có thể diễn ra sớm hơn.
Kết luận
Cách bạn tối ưu hoá việc mã hoá và chuyển các thành phần dựa trên văn bản là một khái niệm cơ bản về hiệu suất, nhưng lại có tác động lớn. Hãy đảm bảo rằng bạn đang làm mọi thứ có thể để đảm bảo những tài nguyên đủ điều kiện để giảm thiểu và nén đều được hưởng lợi từ những hoạt động tối ưu hoá đó.
Quan trọng hơn, hãy đảm bảo rằng các quy trình này đang được tự động hoá. Để giảm thiểu, hãy sử dụng một trình đóng gói để áp dụng việc giảm thiểu cho các tài nguyên đủ điều kiện. Đảm bảo rằng cấu hình máy chủ web của bạn hỗ trợ tính năng nén, nhưng quan trọng hơn là hãy sử dụng phương pháp nén hiệu quả nhất có thể. Để giảm thiểu điều này, hãy sử dụng CDN để tự động nén cho bạn, vì CDN không chỉ có thể nén tài nguyên cho bạn mà còn có thể làm như vậy rất nhanh.
Bằng cách củng cố những khái niệm cơ bản về hiệu suất này vào cấu trúc trang web của mình, bạn có thể đảm bảo rằng nỗ lực tối ưu hoá hiệu suất của bạn đang đi đúng hướng và các hoạt động tối ưu hoá tiếp theo có thể dựa trên nền tảng vững chắc của các phương pháp cơ bản hiệu quả.