Bên cạnh việc loại bỏ các lượt tải tài nguyên không cần thiết xuống, đ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 (101)
Sau khi bạn đã thiết lập trang web của mình để tránh tải các tài nguyên không sử dụng xuống, 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 sẽ có nhiều kỹ thuật để lựa chọn: các công cụ chung có thể bật trên máy chủ web, tối ưu hoá cho quá trình xử lý trước đối với các loại nội dung cụ thể và các hoạt động tối ưu hoá dành riêng cho tài nguyên cần nhà phát triển nhập thông tin đầu vào.
Để mang lại hiệu suất tốt nhất, bạn cần kết hợp tất cả kỹ thuật sau đây:
- 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 để nén tốt nhất.
Quá trình giảm kích thước dữ liệu là quá trình nén dữ liệu. Nhiều người đã đóng góp các thuật toán, kỹ thuật và tính năng tối ưu hoá để cải thiện tỷ lệ nén, tốc độ nén và bộ nhớ cần thiết cho các thuật toán nén.
Một cuộc thảo luận đầy đủ về nén dữ liệu nằm ngoài phạm vi của hướng dẫn này. Tuy nhiên, ở cấp độ cao, bạn cần nắm được cách hoạt động của tính năng nén và các kỹ thuật bạn có thể dùng để giảm kích thước của nhiều thành phần mà trang của bạn yêu cầu.
Để minh hoạ nguyên tắc cốt lõi của các kỹ thuật này, hãy xem xét quá trình tối ưu hoá một định dạng tin nhắn văn bản đơn giản chỉ phát minh cho ví dụ sau:
# 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
- Tin nhắn có thể chứa các chú thích tuỳ ý (đôi khi được gọi là nhận xét) và đượ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.
- Tin nhắn có thể chứa headers, là các cặp khoá-giá trị (phân tách bằng
":"trong ví dụ trước) xuất hiện ở đầu thông báo. - Tin nhắn chứa các gói dữ liệu vă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ự)?
- Nhận xét rất thú vị, nhưng không ảnh hưởng đến ý nghĩa của tin nhắn. Loại bỏ nó khi truyền tin nhắn.
- Có những kỹ thuật tốt để mã hoá tiêu đề một cách hiệu quả. Ví dụ: nếu biết rằng tất cả tin nhắn đều có "định dạng" và "ngày", bạn có thể chuyển đổi các tin nhắn đó thành mã số nguyên ngắn và chỉ cần gửi các mã đó. Tuy nhiên, điều đó có thể không đúng, vì vậy, hiện tại bạn nên để yên.
- Tải trọng chỉ là văn bản. Mặc dù chúng ta không biết nội dung thực sự của văn bản này là gì (rõ ràng là phiên bản này đang sử dụng
"secret-cipher"), nhưng chỉ cần xem văn bản là chúng ta thấy có rất nhiều phần thừa. Có lẽ thay vì gửi các chữ cái lặp đi lặp lại, bạn có thể chỉ cần đếm số chữ cái lặp lại và mã hoá các chữ cái đó hiệu quả hơn. Ví dụ:"AAA"trở thành"3A", đại diện cho một chuỗi gồm ba chữ A.
Kết hợp các kỹ thuật này sẽ tạo ra kết quả sau:
format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A
Thông báo mới dài 56 ký tự, có nghĩa là bạn đã nén thông điệp gốc đi 72%. Như vậy là giảm đáng kể!
Đây là một ví dụ đồ chơi 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 chuyển của các tài nguyên dựa trên văn bản. Trong thực tế, các thuật toán nén phức tạp hơn nhiều so với ví dụ trước minh hoạ 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, trang web có thể tốn ít thời gian hơn để tải tài nguyên để người dùng có thể thấy tác động của các tài nguyên đó sớm hơn so với khi không nén.
Rút gọn: xử lý trước và tối ưu hoá theo ngữ 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à thuật toán nén nghiêm ngặt, nhưng đây là cách xoá các ký tự không cần thiết và dư thừa được sử dụng trong mã nguồn để giúp con người dễ đọc tài nguyên hơn. Tuy nhiên, khả năng đọc đó là không cần thiết để duy trì chức năng của mã nguồn đó trên trang web chính thức và có thể trì hoãn việc tải tài nguyên trên web.
Giảm thiểu là một loại 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. Đây là phương pháp tối ưu hoá được áp dụng hiệu quả nhất trong quá trình xây dựng và triển khai. Ví dụ: trình đóng gói là 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ã phát hành chính thức mới cho 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ố ngữ cảnh mà chúng tôi có kiến thức cụ thể về nội dung định dạng và các thuộc tính của định dạng dữ liệu đó, có thể giảm đáng kể kích thước tải trọng mà không ảnh hưởng đến ý nghĩa hoặc khả năng thực tế của định dạ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>
Xem xét đoạn mã HTML trước và ba loại nội dung khác nhau trong đó:
- mã đánh dấu HTML.
- CSS để tuỳ chỉnh bản trình bày của trang.
- JavaScript để hỗ trợ các lượt tương tác và các tính năng nâng cao khác của trang.
Mỗi loại nội dung trong số này có các quy tắc riêng để tạo thành nội dung hợp lệ, các quy tắc khác nhau để chỉ định chú thích, v.v. Tuy nhiên, câu hỏi vẫn còn đó là "làm cách nào để giảm kích thước của trang này?"
- Nhận xét mã là người bạn thân thiết nhất của nhà phát triển, nhưng trình duyệt thì không cần chúng! Việc xoá các nhận xét CSS (
/* ... */), HTML (<!-- ... -->) và JavaScript (// ...) làm giảm tổng kích thước chuyển của trang và các tài nguyên phụ của trang. - Một trình nén CSS "thông minh" có thể nhận thấy rằng chúng ta đang sử dụng cách xác định các quy tắc không hiệu quả cho
.awesome-containervà thu gọn hai phần 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. Trong một tập hợp lớn các quy tắc CSS, việc loại bỏ loại phần thừa này có thể tăng thêm, nhưng có thể không áp dụng được một cách linh hoạt, vì các bộ chọn thường cần được sao chép trong các ngữ cảnh khác nhau, chẳng hạn như trong truy vấn đa phương tiện. - Không gian và thẻ là những tiện lợi 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ỏ trùng lặp khác, cách tối ưu hoá này có thể được áp dụng khá linh hoạt, miễn là các dấu cách hoặc thẻ như vậy không cần thiết cho việc trình bày trang (ví dụ: bạn sẽ muốn duy trì các dấu cách trong các dòng văn bản trong tài liệu HTML, vì chúng đảm bảo tính dễ đọc của 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 sẽ có từ 516 thành 204 ký tự, tương ứng với mức tiết kiệm được khoảng 60%. Đúng là khó đọc nhưng không nhất thiết phải sử dụng được. Các phương pháp phát triển hiện đại cũng cho phép bạn tách biệt các phiên bản mã nguồn có định dạng tốt và dễ đọc với mã được tối ưu hoá tốt mà bạn chuyển đến phiên bản chính thức. Khi kết hợp với bản đồ nguồn (cung cấp bản trình bày dễ đọc của mã chính thức đã chuyển đổi), bạn có thể dễ dàng khắc phục lỗi trong bản phát hành công khai hơn – bạn vừa có trải nghiệm tốt cho nhà phát triển, vừa tối ưu hoá hiệu suất vì trải nghiệm người dùng.
Ví dụ trên minh hoạ một điểm quan trọng: một trình nén đa năng (chẳng hạn như một trình nén được thiết kế để nén văn bản tuỳ ý) có thể nén trang trong ví dụ trước, nhưng sẽ không bao giờ biết cách loại bỏ các chú thích, thu gọn các quy tắc CSS hoặc hàng chục tính năng tối ưu hoá khác dành riêng cho nội dung. Đây là lý do tại sao việc xử lý trước, giảm kích thước và các hoạt động tối ưu hoá khác theo bối cảnh lại quan trọng.
Tương tự, các kỹ thuật được mô tả ở trên có thể được mở rộng ra ngoài 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 riêng và nhiều tải trọng. Ví dụ: bất cứ khi nào bạn chụp ảnh bằng máy ảnh, tệp trên tệp đó thường nhúng nhiều thông tin bổ sung: chế độ cài đặt của máy ảnh, 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ụ: trang web chia sẻ ảnh) hoặc có thể hoàn toàn vô dụng. Bạn nên cân nhắc xem có nên xoá mã đó hay không. Trong thực tế, siêu dữ liệu này có thể thêm tới hàng chục kilobyte cho mỗi hình ảnh.
Tóm lại, bước đầu tiên để tối ưu hoá hiệu suất của tài sản là tạo một khoảng không quảng cáo gồm nhiều loại nội dung và cân nhắc những kiểu tối ưu hoá dành riêng cho nội dung mà bạn có thể áp dụng để giảm dung lượng. Sau khi xác định được các đặc điểm đó, hãy tự động hoá những hoạt động tối ưu hoá này bằng cách thêm chúng vào các bước xây dựng và phát hành để đảm bảo rằng các chế độ tối ưu hoá được áp dụng một cách nhất quán cho mọi bản phát hành mới sang phiên bản chính thức.
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 có thể lặp lại trong tải trọng dựa trên văn bản trước khi gửi tới 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à các tài nguyên đó sẽ giảm đáng kể và kéo theo thời gian tải xuống nhanh hơn.
- gzip và Brotli là các thuật toán nén thường dùng và hoạt động hiệu quả nhất đối với các thành phần dựa trên văn bản: CSS, JavaScript, HTML.
- Tất cả các trình duyệt hiện đại đều hỗ trợ gzip và nén Brotli, đồng thời sẽ quảng cáo tính năng hỗ trợ cho cả hai trong tiêu đề yêu cầu HTTP
Accept-Encoding. - Máy chủ của bạn phải được định cấu hình để 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 các 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, cài đặt nén nằm trong khoảng từ 1 đến 9, trong đó 9 là tốt nhất. Đối với Brotli, phạm vi này là từ 0 đến 11, trong đó 11 là 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 các tài nguyên được nén động (tức là tại thời điểm yêu cầu), các chế độ cài đặt ở giữa phạm vi 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, có thể nén tĩnh, tức là phản hồi được nén trước, do đó, có thể sử dụng chế độ cài đặt nén linh hoạt nhất có sẵn cho mỗi 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 nén tự động các tài nguyên đủ điều kiện. CDN cũng có thể quản lý quá trình nén động và tĩnh cho bạn, giúp bạn giảm bớt một phần vấn đề nén dữ liệu.
gzip và Brotli là các trình nén phổ biến có thể áp dụng cho bất kỳ luồng byte nào. Trong trường hợp này, họ sẽ ghi nhớ một số nội dung đã kiểm tra trước đó của một tệp, sau đó cố gắng tìm và thay thế các mảnh dữ liệu trùng lặp một cách hiệu quả.
Trong thực tế, cả gzip và Brotli đều hoạt động tốt nhất đối với nội dung dựa trên văn bản, thường đạt được tốc độ nén lên tới 70-90% đối với các tệp lớn hơn. Tuy nhiên, việc chạy những tài sản thuật toán đã được nén bằng thuật toán thay thế này (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) nên rất ít cải thiện.
Tất cả các trình duyệt hiện đại đều quảng cáo khả năng hỗ trợ gzip và Brotli trong tiêu đề 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 không nén | Kích thước nén | Tỷ số nén |
|---|---|---|---|---|
| angular-1.8.3.js | Brotli | 1.346 KiB | 256 KiB | Tăng 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 | Tăng 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 | Tăng 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 trình bày mức tiết kiệm mà cả phương thức nén Brotli và gzip có thể cung cấp cho một số thư viện JavaScript phổ biến. Mức tiết kiệm dao động 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 đối với cả Brotli và gzip. Nếu có thể, hãy ưu tiên Brotli hơn gzip.
Việc 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 được lợi thế này, thì bạn sẽ bỏ lỡ một cơ hội lớn để cải thiện hiệu suất cho người dùng. May mắn là 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, và đặc biệt CDN rất hiệu quả trong việc triển khai theo cách cân bằng giữa tốc độ và tỷ lệ nén.
Một cách nhanh chóng để xem tính năng nén trong thực tế là mở Công cụ của Chrome cho nhà phát triển, 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 bảng chi tiết về:
- Số lượng yêu cầu, là số lượng tài nguyên được tải cho trang.
- Kích thước chuyển của tất cả yêu cầu. Điều này phản ánh mức độ hiệu quả của việc nén được áp dụng cho mọi tài nguyên trên trang.
- Kích thước tài nguyên của tất cả yêu cầu. Biểu đồ này cho biết dung lượng của các tài nguyên dành cho trang sau khi các tài nguyên đó được giải nén.
Ảnh hưởng đến Các chỉ số quan trọng về trang web
Bạn không thể đo lường mức độ cải thiện về hiệu suất trừ phi có chỉ số phản ánh những cải tiến đó. Sáng kiến Các chỉ số quan trọng về trang web được đưa ra để tạo và nâng cao mức độ nhận biết về các 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 thể hiện rõ chất lượng trải nghiệm người dùng.
Khi bạn áp dụng các biện pháp tối ưu hoá nêu trong hướng dẫn này cho các tài nguyên trên trang web của mình, mức tác động đối với Các chỉ số quan trọng về trang web có thể khác nhau, tuỳ vào tài nguyên được tối ưu hoá và(các) chỉ số liên quan. Tuy nhiên, dưới đây là một số trường hợp mà trong đó việc áp dụng các biện pháp tối ưu hoá này có thể cải thiện Các chỉ số quan trọng về trang web của trang web:
- Tài nguyên HTML được giảm thiểu và nén có thể cải thiện việc tải HTML đó, khả năng phát hiện các tài nguyên phụ và do đó cải thiện việc tải chúng. Điều này có thể giúp ích cho Thời gian hiển thị nội dung lớn nhất (LCP) của trang. Mặc dù các gợi ý về tài nguyên như
rel="preload"có thể được dùng để ảnh hưởng đến khả năng khám phá các tài nguyên, nhưng việc sử dụng quá nhiều gợi ý trong số đó có thể gây ra các sự cố tranh chấp băng thông. Bằng cách đảm bảo nén phản hồi HTML cho một yêu cầu điều hướng, trình quét tải trước có thể phát hiện thấy các tài nguyên trong đó sớm nhất có thể. - Một số đề xuất 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à ứng cử viên LCP có thể giảm thời gian tải tài nguyên thông qua quá trình nén dựa trên văn bản. Điều này khác với các tính năng 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 thông qua các phương thức nén khác), chẳng hạn như cách hình ảnh JPEG sử dụng tính năng nén có tổn hao.
- Ngoài ra, nút văn bản cũng có thể là đề xuất LCP. Cách những kỹ thuật được mô tả trong hướng dẫn này phụ thuộc vào việc bạn có đang sử dụng phông chữ trên 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 phông chữ trên web, thì các phương pháp hay nhất về tối ưu hoá phông chữ trên web sẽ áp dụng. Tuy nhiên, nếu bạn không sử dụng phông chữ web mà thay vào đó là phông chữ hệ thống hiển thị mà không làm phát sinh thời gian tải tài nguyên, thì việc giảm và nén CSS sẽ làm giảm thời gian tải. Điều này có nghĩa là việc hiển thị các nút văn bản LCP tiềm năng có thể xảy 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à khái niệm cơ sở về hiệu suất, nhưng là yếu tố có tác động lớn. Hãy chắc chắn rằng bạn sẽ làm mọi việc có thể để đảm bảo rằng các tài nguyên đủ điều kiện để giảm kích thước và nén sẽ đượ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 kích thước, hãy sử dụng trình đóng gói để áp dụng phương pháp giảm thiểu cho các tài nguyên đủ điều kiện. Hãy đảm bảo rằng cấu hình máy chủ web của bạn hỗ trợ nén, nhưng trên hết, hãy sử dụng phương thức nén hiệu quả nhất hiện có. Để đơn giản hoá việc này, hãy sử dụng CDN để tự động nén cho bạn, vì các mạng này không chỉ có thể nén tài nguyên cho bạn mà còn có thể nén rất nhanh.
Bằng cách gắn các khái niệm hiệu suất cơ sở này vào cấu trúc trang web của mình, bạn có thể đảm bảo rằng các nỗ lực tối ưu hoá hiệu suất của mình đang ở tình trạng tốt 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ơ sở tốt.