Tối ưu hoá việc mã hoá và kích thước chuyển của thành phần dựa trên văn bản

Ilya Grigorik

Jeremy Wagner

Bên cạnh việc loại bỏ các tải xuống 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 101

Khi bạn đã thiết lập trang web để tránh tải bất kỳ tài nguyên nào 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 có để 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. — có nhiều kỹ thuật khác nhau để lựa chọn: các công cụ chung có thể được bật trên máy chủ web, tối ưu hoá xử lý trước cho nội dung cụ thể và các phương pháp tối ưu hoá dành riêng cho tài nguyên yêu cầu dữ liệu đầu vào từ nhà phát triển.

Để có hiệu suất tốt nhất đòi hỏi sự kết hợp của tất cả các yếu tố sau đây kỹ thuật:

• 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 đã các thuật toán, kỹ thuật và tối ưu hoá đóng góp để cải thiện quá trình nén tỷ lệ, tốc độ nén và bộ nhớ mà các quá trình nén khác nhau các thuật toá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, điều quan trọng là phải hiểu ở cấp độ cao về cách thức hoạt động của nén, và những kỹ thuật bạn có thể dùng để giảm kích thước của nhiều tài sản mà 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á định dạng tin nhắn văn bản đơn giản được phát minh chỉ 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

1. Thông báo có thể chứa các chú thích tuỳ ý, đôi khi được gọi là nhận xét—được biểu thị bằng "#" tiền tố. Chú thích không ảnh hưởng ý nghĩa hay hành vi của thông điệp.
2. Tin nhắn 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.
3. Tin nhắn chứa các gói dữ liệu văn bản.

Những việc có thể làm để giảm kích thước của thông báo trước đó, bắt đầu từ 200 ký tự?

1. Nhận xét này rất thú vị nhưng không ảnh hưởng đến ý nghĩa của tin nhắn. Hãy loại bỏ yếu tố này khi truyền thông báo.
2. Có những kỹ thuật tốt để mã hoá tiêu đề một cách hiệu quả. Cho ví dụ: nếu bạn biết rằng tất cả thông báo đều có "định dạng" và "ngày" bạn có thể chuyển đổi chúng thành các mã nhận dạng số nguyên ngắn và chỉ gửi các mã đó. Tuy nhiên, điều đó có thể là không đúng, vì vậy, tốt nhất là bạn nên giữ nguyên điều này ngay bây giờ.
3. Tải trọng chỉ là văn bản. Mặc dù chúng tôi không biết thực sự nội dung gì (rõ ràng, nó đang sử dụng "secret-cipher"), chỉ xem văn bản cho thấy có rất nhiều nguyên tắc dư thừa trong đó. Có lẽ thay vì gửi các chữ cái lặp lại, bạn chỉ cần đếm số lượng chữ cái lặp lại và mã hoá quảng cáo hiệu quả hơn. Ví dụ: "AAA" trở thành "3A", biểu thị một chuỗi gồm ba chữ A.

Kết hợp các kỹ thuật này tạo ra kết quả sau:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Tin nhắn mới dài 56 ký tự, nghĩa là bạn đã nén tin nhắn gốc tăng 72%. Đó là một mức giảm đáng kể!

Đây là một ví dụ minh hoạ về cách thuật toán nén có thể có hiệu quả tại giảm kích thước chuyển của tài nguyên dựa trên văn bản. Trong thực tế, việc nén các thuật toán phức tạp hơn nhiều so với minh hoạ trong ví dụ trước, và trên web, thuật toán nén có thể được dùng để giảm đáng kể số lượt tải xuống dành cho tài nguyên. Bằng cách áp dụng phương thức nén đối với các thành phần dạng văn bản, một trang web có thể giảm bớt thời gian tải tài nguyên để người dùng có thể thấy được tác động của những tài nguyên đó sớm hơn so với khi không nén.

Giảm thiểu: 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à rút gọn. Mặc dù tính năng rút gọn không thực sự là một thuật toán nén, đó là một cách để loại bỏ ký tự thừa được sử dụng trong mã nguồn để làm cho tài nguyên dễ đọc hơn cho con người. Tuy nhiên, bạn không cần phải dễ đọc để duy trì chức năng này của mã nguồn đó trên các trang web sản xuất và có thể làm chậm việc tải trên web.

Giảm thiểu là loại tối ưu hoá theo nội dung cụ thể có thể giảm dung lượng tài nguyên được phân phối và là biện pháp tối ưu hoá hiệu quả nhất trong quá trình xây dựng và triển khai. Ví dụ: trình 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 trước khi triển khai mã sản xuất mới lên 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 tôi có kiến thức nội dung cụ thể về định dạng dữ liệu và các thuộc tính của 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ế.

<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 chứa:

1. Đánh dấu HTML.
2. CSS để tuỳ chỉnh bản trình bày của trang.
3. JavaScript để hỗ trợ 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 khác nhau về những yếu tố cấu thành hợp lệ nội dung, các quy tắc khác nhau để chỉ định nhận xét, v.v. Câu hỏi câu còn lại là "làm thế nào để giảm kích thước của trang này?"

• Ghi chú 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 không nhất thiết phải họ! Xoá CSS (/* ... */), HTML (<!-- ... -->) và JavaScript (// ...) nhận xét làm giảm tổng kích thước chuyển của trang và các nguồn phụ.
• Một "người thông minh" Trình nén CSS có thể nhận thấy rằng chúng tôi đang sử dụng một phương pháp không hiệu quả xác định các quy tắc cho .awesome-container và thu gọn hai nội dung 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. Trên khoảng lớn bộ quy tắc CSS, việc loại bỏ phần thừa này có thể cộng lại, nhưng nó không thể là giá trị có thể được áp dụng linh hoạt, vì bộ chọn thường trùng lặp một cách cần thiết trong các ngữ cảnh khác nhau, chẳng hạn như trong các truy vấn phương tiện.
• Không gian và thẻ là các tiện ích dành cho nhà phát triển trong HTML, CSS và JavaScript. Trình nén bổ sung có thể tách tất cả thẻ và dấu cách. Không giống như kỹ thuật loại bỏ trùng lặp, nên loại tối ưu hoá này có thể được áp dụng công bằng nhiều lần, miễn là các dấu cách hoặc tab như vậy không cần thiết cho phần bản trình bày—ví dụ: bạn muốn duy trì dấu cách trong các lần chạy trong tài liệu HTML vì chúng đảm bảo khả năng đọc được nội dung mà người dùng sẽ thực sự 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ên, trang chuyển từ 516 đến 204 ký tự, điều này tương ứng với mức tiết kiệm khoảng 60%. Chắc chắn là nội dung này không dễ đọc lắm, nhưng thì không cần phải sử dụng được mã đó. Các phương pháp phát triển hiện đại cũng cho phép bạn giữ các phiên bản mã nguồn được định dạng tốt và dễ đọc tách biệt với mã được tối ưu hoá tốt mà bạn gửi đến phiên bản sản xuất. Kết hợp với bản đồ nguồn—cung cấp bản trình bày dễ đọc của bản đồ đã được biến đổi mã phát hành công khai giúp bạn khắc phục lỗi dễ dàng hơn trong phiên bản phát hành công khai. Bạn có thể vừa mang đến trải nghiệm tốt cho nhà phát triển, vừa có thể tối ưu hoá hiệu suất vì lợi ích này trải nghiệm người dùng.

Ví dụ trước minh hoạ một điểm quan trọng: mục đích chung bộ nén – giả sử một trình nén được thiết kế để nén văn bản tùy ý – có thể làm rất tốt như trong ví dụ trước, nhưng nó sẽ không bao giờ biết được xoá nhận xét, thu gọn quy tắc CSS hoặc hàng chục nội dung cụ thể khác tối ưu hoá. Đây là lý do khiến việc xử lý trước, giảm kích thước và các nhận biết theo bối cảnh khác tối ưu hoá là rất 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 việc chỉ dựa trên văn bản thành phần. Hình ảnh, video và các loại nội dung khác đều chứa các dạng nội dung riêng siêu dữ liệu và nhiều tải trọng khác nhau. Ví dụ: bất cứ khi nào bạn chụp ảnh bằng camera, tệp này thường nhúng nhiều thông tin bổ sung: 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ể đóng vai trò quan trọng (ví dụ: trang web chia sẻ ảnh) hoặc có thể hoàn toàn vô ích. 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 lên đến 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 quả của thành phần là tạo kho hàng gồm nhiều loại nội dung và cân nhắc xem loại nội dung nào tối ưu hoá theo nội dung cụ thể mà bạn có thể áp dụng để giảm kích thước của chúng. Thì—sau bạn đã biết chúng là gì, hãy tự động hoá những phương thức tối ưu hoá này bằng cách thêm chúng vào các bước tạo bản dựng và phát hành để đảm bảo rằng các tính năng 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 ra mắt.

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 thành phần văn bản là áp dụng các thuật toán nén cho chúng. Điều này tiến thêm một bước nữa bằng cách tích hợp tìm kiếm các mẫu có thể lặp lại trong các tải trọng dựa trên văn bản trước khi gửi chúng tới người dùng và giải nén các tệp đó khi chúng truy cập vào trình duyệt của người dùng. Chiến lược phát hành đĩa đơn dẫn đến việc giảm đáng kể và nhiều tài nguyên đó, sau đó để rút ngắn thời gian tải xuống.

• gzip và Brotli là các thuật toán nén thông dụng có hiệu suất tốt nhất trên thành phần dựa trên văn bản: CSS, JavaScript, HTML.
• Mọi trình duyệt hiện đại đều hỗ trợ nén gzip và Brotli, đồng thời sẽ quảng cáo cho phép cả hai trong tiêu đề 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 sẽ 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.
• 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 phạm vi 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, với 11 là người giỏi nhất. Tuy nhiên, chế độ cài đặt nén cao hơn sẽ cần nhiều thời gian hơn. Cho những tài nguyên được nén động – tức là vào thời điểm yêu cầu—các cài đặt ở giữa phạm vi có xu hướng mang lại kết quả tốt nhất giữa tỷ số nén và tốc độ. Tuy nhiên, thao tác nén tĩnh lại đó là khi phản hồi được nén trước và có thể do đó, hãy sử dụng 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ý tính năng nén động và tĩnh cho bạn, giúp bạn bớt phải lo lắng về một vấn đề nén.

gzip và Brotli là các trình nén phổ biến có thể áp dụng cho mọi luồng byte. Nâng cao kỹ năng này, họ ghi nhớ một số nội dung đã xem xét trước đó của một tệp và sau đó cố gắng tìm và thay thế các mảnh dữ liệu trùng lặp trong một cách hiệu quả.

Trên 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 cao tới 70-90% đối với các tệp lớn hơn. Tuy nhiên, việc chạy tài sản thuật toán đã được nén bằng thuật toán thay thế, chẳng hạn như vì 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, tạo ra kết quả có ít hoặc không có cải thiện.

Tất cả các trình duyệt hiện đại đều quảng cáo 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ữ trách nhiệm đảm bảo rằng máy chủ web được định cấu hình đúng để cung cấp tài nguyên được nén khi ứng dụng yêu cầu.

Bảng trên hiển thị mức tiết kiệm mà cả nén Brotli và gzip có thể cung cấp 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, tối đa mức nén được áp dụng cho mỗi tệp đối với cả Brotli và gzip. Bất cứ nơi nào 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 được điều này, bạn đang bỏ lỡ cơ hội lớn để cải thiện hiệu suất cho người dùng. May mắn là nhiều trang web các máy chủ cung cấp cấu hình mặc định cho phép tối ưu hoá quan trọng này, và CDN nói riêng rất hiệu quả trong việc triển khai theo cách cân bằng giữa tốc độ và tỷ số nén.

Bạn có thể nhanh chóng xem cách hoạt động của tính năng nén bằng cách mở Công cụ của Chrome cho nhà phát triển, Network (Mạng), hãy tải một trang mà bạn chọn và quan sát phía 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 như sau:

• Số yêu cầu, là số lượng tài nguyên được tải cho .
• Kích thước chuyển của tất cả các yêu cầu. Điều này phản ánh hiệu quả của nén được áp dụng cho bất kỳ tài nguyên nào trên một trang.
• Kích thước tài nguyên của tất cả yêu cầu. Điều này phản ánh lượng tài nguyên dành cho trang sau khi được giải nén.

Ảnh hưởng đến Chỉ số quan trọng chính của trang web

Không thể đo lường mức độ cải thiện hiệu suất trừ phi có các chỉ số phản ánh những cải tiến đó. Sáng kiến Chỉ số quan trọng chính của trang web để tạo ra 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ố (ví dụ: thời gian tải trang đơn giản) mà 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á được nêu trong hướng dẫn này cho các tài nguyên trên của trang web của bạn, tác động đối với Chỉ số quan trọng chính của trang web có thể khác nhau tuỳ theo tài nguyên tối ưu hoá và(các) chỉ số có liên quan. Tuy nhiên, dưới đây là một số trường hợp việc áp dụng những cách tối ưu hoá này có thể cải thiện Chỉ số quan trọng chính của trang web:

• Các 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ác tài nguyên phụ, từ đó cải thiện tải trong số 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 trên trang (LCP). Mặc dù các gợi ý về tài nguyên như rel="preload" có thể được dùng để tác động đến khả năng phát hiện các tài nguyên, việc sử dụng quá nhiều tài nguyên có thể gây ra sự cố với tranh chấp băng thông. Đảm bảo phản hồi HTML cho một yêu cầu điều hướng được nén, tài nguyên trong đó có thể được khám phá sớm nhất có thể bởi trình quét tải trước.
• 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 chức năng nén. Cho ví dụ: hình ảnh SVG là ứng viên LCP có thể tải tài nguyên do tính năng nén dựa trên văn bản. Khác với tối ưu hoá nào đối với các loại hình ảnh khác, về bản chất được nén thông qua các phương thức nén khác, chẳng hạn như cách JPEG sử dụ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 các 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 trang web của bạn. Nếu bạn đang sử dụng phông chữ trên web, thì cách tối ưu hoá phông chữ trên web tốt nhất áp dụng. Tuy nhiên, nếu bạn không sử dụng phông chữ trên web mà thay vào đó là sử dụng hệ thống phông chữ hiển thị mà không làm mất thời lượng tải tài nguyên—giảm thiểu và việc nén CSS làm giảm thời lượng này, có nghĩa là việc hiển thị 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 tài sản dựa trên văn bản là một cơ sở về hiệu suất, nhưng đó là khái niệm có tác động lớn. Hãy đảm bảo rằng bạn làm tất cả những gì có thể để đảm bảo rằng các tài nguyên đủ điều kiện để giảm thiểu nén đang được hưởng lợi từ nhữ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á. Cho giảm kích thước, sử dụng trình gói để áp dụng việc giảm kích thước 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ợ nén, nhưng hơn thế nữa, hãy sử dụng định dạng nén hiệu quả nhất hiện có. Để làm cho điều này trở nên đơn giản nhất có thể, sử dụng CDN để tự động nén cho bạn, vì chúng không chỉ có thể nén cho bạn, nhưng chúng cũng có thể làm như vậy rất nhanh.

Bằng cách củng cố các khái niệm về hiệu suất cơ sở này vào cấu trúc cụ thể, bạn có thể đảm bảo rằng nỗ lực tối ưu hoá hiệu suất của mình đang trên đặt chân chính đáng và rằng các hoạt động tối ưu hoá sau này có thể dựa vào một nền tảng vững chắc của các phương pháp cơ sở hay.