Thư viện nén chuỗi javascript

Cách dễ nhất để tăng tốc trang web WordPress của bạn là loại bỏ tất cả các tài nguyên không mong muốn của nó. Cách dễ thứ hai để tăng tốc nó là nén tất cả các tài nguyên mong muốn của nó. Kích hoạt tính năng nén GZIP trên máy chủ web của bạn là một trong những cách đơn giản và hiệu quả nhất để đạt được điều đó

Tất cả các trình duyệt hiện đại đều có hỗ trợ nén GZIP theo mặc định. Tuy nhiên, để cung cấp tài nguyên nén cho người dùng của bạn mà không gặp trục trặc, bạn phải định cấu hình máy chủ của mình đúng cách

Trong bài đăng này, bạn sẽ tìm hiểu kiến ​​thức cơ bản về nén dữ liệu trên web, nén GZIP là gì, các lợi ích khác nhau của nó và cách bạn có thể sử dụng nó để tăng tốc trang web WordPress của mình trên các thiết lập máy chủ khác nhau

Bị kích thích?

Thích xem phiên bản video?

Cách dễ nhất để tăng tốc trang web #WordPress của bạn. loại bỏ các tài nguyên không mong muốn ✅ Cách dễ thứ 2. Nén tất cả các tài nguyên mong muốn ✅ Tìm hiểu cách thực hiện việc này nhanh chóng với tính năng nén GZIP 👇Nhấp để Tweet

Khái niệm cơ bản về nén dữ liệu trên web

Nén dữ liệu trên web là quá trình giảm kích thước dữ liệu được truyền tải bởi các trang web. Tùy thuộc vào loại dữ liệu—văn bản, hình ảnh, biểu định kiểu, tập lệnh, phông chữ—có nhiều cách khác nhau để nén dữ liệu

Kinsta chiều chuộng tôi đến mức bây giờ tôi yêu cầu mức độ dịch vụ đó từ mọi nhà cung cấp. Chúng tôi cũng cố gắng đạt được mức đó với sự hỗ trợ của công cụ SaaS

Thư viện nén chuỗi javascript
Suganthan Mohanadasan từ @Suganthanmn
Xem kế hoạch

Thư viện nén chuỗi javascript
Các thành phần chính của một trang web

Chẳng hạn, giảm thiểu HTML, CSS và JavaScript là một cách đơn giản để giảm lượng dữ liệu được gửi bởi các trình duyệt. Ở đây, công cụ khai thác nén văn bản bằng cách xóa các ký tự không cần thiết như nhận xét và khoảng trắng khỏi mã nguồn

Trong ví dụ dưới đây về một tài liệu HTML đơn giản, có ba loại nội dung. Đánh dấu HTML, kiểu CSS và mã JavaScript

Mỗi loại nội dung có cú pháp và ngữ nghĩa duy nhất. Nhìn chung, tài liệu HTML này có tổng cộng 357 ký tự

<html>
<head>
    <style>
    /* kinsta-banner is used on the homepage only */
    .kinsta-banner { font-size: 150% }
    .kinsta-banner { width: 75% }
</style>
</head>
<body>
    <!-- kinsta banner START -->
    <div>...</div>
    <!-- kinsta banner END -->
    <script>
    kinstaScripts(); // random scripts used on the page
    </script>
</body>
</html>

Đoạn mã trên rất dễ đọc và làm theo. Đó là lý tưởng cho sự phát triển. Tuy nhiên, trình duyệt không cần đọc bình luận và có các thẻ được thụt lề hoàn hảo. Máy nén thông minh có thể phân tích tài liệu này và loại bỏ tất cả các bit không cần thiết khỏi nó

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>

Sau khi rút gọn, tài liệu HTML chỉ còn 141 ký tự. Đó là 60. Tiết kiệm 50% số ký tự. Nó không dễ nhìn bằng mắt, nhưng điều đó không quan trọng đối với trình duyệt. Nó sẽ vẫn hiển thị cùng một trang cho người dùng

Để tận dụng lợi thế của cả hai phiên bản, bạn có thể duy trì tài liệu gốc dưới dạng "phiên bản phát triển", nhưng hãy thu nhỏ tất cả mã trước khi đưa tài liệu vào hoạt động

Hầu hết các plugin hiệu suất WordPress sẽ tự động xử lý việc này cho bạn

Thư viện nén chuỗi javascript
Nén kích thước tệp của jQuery không nén và rút gọn

Ví dụ, phiên bản không nén của jQuery 3. 5. 1 thư viện lớn hơn gấp 3 lần so với phiên bản rút gọn của cùng một tệp

Tương tự như vậy, các kỹ thuật nén tương tự được mô tả ở trên có thể tối ưu hóa các loại nội dung khác như hình ảnh, video, phông chữ, v.v. Giảm nội dung cụ thể như thế này là bước đầu tiên trong việc tối ưu hóa kích thước nội dung dựa trên văn bản trên trang web của bạn

Những lợi ích rõ ràng này là lý do tại sao Kinsta đưa tính năng thu nhỏ mã vào bảng điều khiển MyKinsta. Khách hàng có thể chọn tham gia rút gọn mã tự động cho các tệp CSS và JavaScript của họ, giúp tăng tốc trang web của họ mà không tốn công sức thủ công

Nhưng có nhiều thứ để nén dữ liệu hơn là chỉ thu nhỏ. Sử dụng các kỹ thuật toán học nâng cao, các thuật toán nén dữ liệu có thể giảm thêm kích thước của dữ liệu

Một trong những ví dụ phổ biến nhất của phương pháp nén dữ liệu như vậy là GZIP. Nó cho phép truyền dữ liệu hiệu quả và đã góp phần đáng kể để biến internet thành một phương tiện truyền thông toàn cầu khả thi

Nén GZIP là gì?

GZIP, viết tắt của GNU Zip, là phương pháp nén dữ liệu không mất dữ liệu phổ biến nhất trên web. Nó cho phép bạn giảm kích thước các trang HTML, biểu định kiểu và tập lệnh của trang web của bạn

Ngoài việc là một thuật toán nén dữ liệu, GZIP còn là một phần mở rộng tệp (. gz) và một phần mềm dùng để nén/giải nén tập tin

Nó dựa trên thuật toán DEFLATE, là sự kết hợp giữa mã hóa LZ77 và thuật toán mã hóa Huffman

Thư viện nén chuỗi javascript
Nén GZIP dựa trên thuật toán DEFLATE

Máy nén GZIP lấy một tập hợp dữ liệu thô và nén nó một cách dễ dàng. Dữ liệu thô có thể từ bất kỳ loại tệp nào, nhưng GZIP hoạt động tốt nhất với nội dung dựa trên văn bản (e. g. HTML, CSS, JS)

Phần tiếp theo trình bày sâu về cách hoạt động của tính năng nén GZIP

Cách GZIP nén dữ liệu

Thư viện nén chuỗi javascript
Minh họa sơ bộ về cách hoạt động của tính năng nén GZIP

Để bắt đầu, máy nén GZIP chạy thuật toán nén LZ77 trên dữ liệu thô để loại bỏ các phần dư thừa. Thuật toán này hoạt động bằng cách tìm các mẫu lặp lại trong cửa sổ trượt được xác định trước (một phần nhỏ của dữ liệu thô)

Sau đó, nó thay thế tất cả các chuỗi lặp lại bằng các bộ dữ liệu để nén dữ liệu thô

Thư viện nén chuỗi javascript
Minh họa thuật toán mã hóa LZ77

Trong ví dụ trên, kích thước cửa sổ trượt chỉ dài 13 ký tự (13 byte). Tuy nhiên, nén GZIP có thể sử dụng kích thước cửa sổ trượt tối đa là 32 KB (32.768 byte). Kích thước của cửa sổ trượt đóng một vai trò quan trọng trong hiệu suất nén của LZ77

Sau khi nén dữ liệu thô bằng thuật toán LZ77, máy nén GZIP sau đó sử dụng thuật toán mã hóa Huffman để nén thêm. Nó thực hiện điều này bằng cách gán cho các ký tự xuất hiện thường xuyên hơn với số lượng bit ít nhất, trong khi gán cho các ký tự hiếm có số lượng bit cao nhất

Kỹ thuật này giống như kỹ thuật được sử dụng trong mã Morse, trong đó các chữ cái xuất hiện thường xuyên hơn trong ngôn ngữ tiếng Anh có trình tự ngắn nhất

Để hiểu thuật toán mã hóa Huffman hoạt động như thế nào, hãy xem xét từ

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
2. Nó dài 10 ký tự, nhưng nó chỉ có 6 ký tự duy nhất. Từ này có sự kết hợp tốt giữa các chữ cái đơn, đôi và ba

Hầu như tất cả các trang web đều sử dụng mã hóa ký tự UTF-8 để thể hiện các chữ cái và ký hiệu. Mỗi ký tự ASCII trong UTF-8, cũng bao gồm bảng chữ cái tiếng Anh, sử dụng 1 byte (8 bit)

Thư viện nén chuỗi javascript
Từ “BOOKKEEPER” có nhiều chữ cái lặp lại

Một chuỗi 10 ký tự như

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
2 sẽ yêu cầu 10 byte (80 bit) bộ nhớ. Bạn có thể thấy rằng nó chứa 1 trường hợp của các chữ cái
<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
4, 2 trường hợp của các chữ cái
<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
0 và
<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
1, và 3 trường hợp của chữ cái
<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
2

Thuật toán mã hóa Huffman sử dụng kiến ​​thức này để nén không mất dữ liệu chuỗi. Nó thực hiện điều này bằng cách tạo ra một cây nhị phân với mỗi chữ cái duy nhất là một lá

Các chữ cái có tần suất xuất hiện thấp nhất (e. g. B, P, R) sẽ nằm ở dưới cùng của cây, trong khi những cái xuất hiện thường xuyên (e. g. E, O, K) lý tưởng nhất là sẽ đứng đầu

Nút trên cùng trong cây là gốc và giá trị của nó bằng tổng số ký tự trong chuỗi

Thư viện nén chuỗi javascript
Cây Huffman cho từ “BOOKKEEPER”

Sau khi tạo cây Huffman, tất cả các mũi tên phân nhánh trái và phân nhánh phải lần lượt được cho các số 0 và 1. Sau đó, bạn có thể tạo mã Huffman cho bất kỳ ký tự nào bằng cách lần theo đường dẫn từ gốc đến lá và nối tất cả các số 0 và 1

Thư viện nén chuỗi javascript
Mã Huffman là mã nhị phân duy nhất cho mọi ký tự

Bạn có thể nhận thấy rằng các chữ cái có tần số xuất hiện cao nhất có mã Huffman với kích thước bit nhỏ nhất

Ghi chú. Thuật toán mã hóa Huffman có thể tạo mã nhị phân thay thế bằng cách sử dụng chiến lược sắp xếp thứ tự khác cho các ký tự có cùng tần số. Tuy nhiên, tổng kích thước của chuỗi được mã hóa sẽ không thay đổi

Thư viện nén chuỗi javascript
Một từ 80 bit được mã hóa thành một chuỗi 25 bit

Đó là 68. Giảm 75% bộ nhớ cần thiết để lưu trữ từ gốc

Sử dụng cây Huffman với quy ước 0/1 tạo mã nhị phân thỏa mãn thuộc tính tiền tố. Nó đảm bảo rằng mã Huffman của bất kỳ ký tự cụ thể nào không phải là tiền tố của mã của bất kỳ ký tự nào khác, giúp dễ dàng giải mã chuỗi được mã hóa bằng cây Huffman. Điều này đóng vai trò chính trong tốc độ giải nén GZIP

Cũng giống như từ trên, trình nén GZIP sử dụng thuật toán mã hóa Huffman để tối ưu hóa hơn nữa các bộ dữ liệu được tạo bởi thuật toán LZ77. Điều này dẫn đến các tệp được nén cao với. phần mở rộng gz

Nếu bạn muốn tìm hiểu thêm về cách hoạt động của GZIP, hãy tham khảo video này để biết tổng quan nhanh

Nén GZIP tốt như thế nào?

Thông thường, GZIP đạt được tỷ lệ nén khoảng 70% đối với các tệp nhỏ, nhưng nó có thể đạt tới 90% đối với các nội dung dựa trên văn bản lớn hơn

Thư viện nén chuỗi javascript
Tỷ lệ nén GZIP cho một số thư viện CSS và JS phổ biến

Trong bảng trên, bạn có thể thấy rằng việc nén các tệp đã thu nhỏ bằng GZIP có thể giảm kích thước của chúng hơn nữa

Ghi chú. Bạn có thể nén bất kỳ loại tệp nào bằng GZIP, nhưng đối với các nội dung đã được nén bằng các phương pháp khác (e. g. hình ảnh, video), nó sẽ không tiết kiệm được gì. Đôi khi, nó thậm chí có thể làm tăng kích thước tệp

Sức mạnh của thuật toán nén không chỉ phụ thuộc vào tỷ lệ nén của nó mà còn phụ thuộc vào mức độ nhanh chóng và hiệu quả mà nó có thể nén và giải nén dữ liệu. Đó là điểm vượt trội của GZIP đối với hầu hết các trường hợp sử dụng

Vì GZIP giải nén nhanh chóng bằng cách sử dụng thuật toán phát trực tuyến nên nó rất phù hợp với các giao thức web trong đó tốc độ là điều cốt yếu. Ngoài ra, GZIP sử dụng tài nguyên tối thiểu để nén và giải nén dữ liệu, làm cho nó trở nên lý tưởng cho cả máy chủ và máy khách

Thư viện nén chuỗi javascript
Hiệu suất nén của brotli vs bzip2 vs GZIP vs xz (Nguồn. mởCPU)

Các biểu đồ trên so sánh hiệu suất nén của các thuật toán nén brotli, bzip2, gzip và xz. GZIP thua một chút trong bài kiểm tra tỷ lệ nén, nhưng về tốc độ nén và giải nén, nó hoàn toàn đánh bại đối thủ

Nhìn vào biểu đồ tốc độ nén, chúng ta có thể kết luận rằng GZIP lý tưởng cho việc nén thời gian thực trong máy chủ HTTP và các luồng dữ liệu khác trên web. Xem xét tất cả các mặt tích cực của nó trong việc phát triển web, IETF đã phê chuẩn GZIP là một trong ba định dạng chuẩn để nén trong HTTP/1. 1

Ghi chú. Một bản tóm tắt thư viện nén của GZIP có tên zlib được sử dụng trong nhiều hệ điều hành phổ biến (Linux, macOS, iOS) và máy chơi game hiện đại (PlayStation 4, Wii U, Xbox One). Nó cũng được sử dụng ở định dạng tệp PNG không mất dữ liệu để nén hình ảnh

6 Ưu điểm của Nén GZIP

Chúng ta hãy xem xét kỹ hơn những ưu điểm quan trọng nhất của nén GZIP

Cung cấp tỷ lệ nén Decent

Như đã thảo luận trước đây, GZIP không có tỷ lệ nén tốt nhất so với đối thủ cạnh tranh của nó. Nhưng nó cũng không xa họ lắm. Thông thường, nó có thể giúp bạn giảm 70-90% kích thước của tài nguyên dựa trên văn bản

Nén và giải nén siêu nhanh

Đối với tốc độ nén và giải nén dữ liệu, GZIP rõ ràng là người chiến thắng. Nó rất được ưa chuộng để nén nhanh chóng trong các máy chủ HTTP và các luồng dữ liệu khác

Yêu cầu rất ít bộ nhớ

GZIP để lại dung lượng bộ nhớ tối thiểu, làm cho nó phù hợp với các máy chủ và hệ thống có dung lượng bộ nhớ hạn chế. Do đó, bạn sẽ thấy nó được hỗ trợ bởi ngay cả những nhà cung cấp dịch vụ lưu trữ web rẻ nhất

Không mở rộng nhiều ngay cả trong trường hợp xấu nhất

Các thuật toán nén dữ liệu không mất dữ liệu như GZIP có giới hạn nghiêm ngặt mà vượt quá giới hạn đó chúng không thể nén dữ liệu

Thông thường, điều này xảy ra khi tài nguyên đã được nén tốt hoặc nếu tài nguyên nhỏ và chi phí bổ sung từ điển GZIP cao hơn mức tiết kiệm nén. Chúng ta có thể gán hiện tượng này cho một khái niệm gọi là mã hóa entropy. GZIP có khả năng chống lại hiệu ứng này cao

Miễn phí sử dụng và mã nguồn mở

GZIP chủ yếu được tạo ra dưới dạng thay thế mã nguồn mở, miễn phí cho chương trình nén đã được cấp bằng sáng chế được sử dụng trong các hệ thống Unix đời đầu. Do đó, nó không vướng mắc với bất kỳ bằng sáng chế nào và có thể được sử dụng tự do bởi bất kỳ ai

Thích hỗ trợ toàn cầu

Theo W3Techs, nén GZIP được sử dụng bởi 82% tất cả các trang web họ theo dõi, khiến nó trở thành thuật toán nén được sử dụng rộng rãi nhất trên web

GZIP được hỗ trợ bởi hầu hết các máy chủ và máy khách. Bất kể bạn lưu trữ trang web của mình trên máy chủ nào, bạn có thể tăng tốc trang web bằng cách bật GZIP trên đó

Cảnh báo GZIP trong Công cụ kiểm tra tốc độ trang web

Bên cạnh việc thu nhỏ, bật GZIP là một trong những cách tối ưu hóa tốc độ đơn giản và hiệu quả nhất mà bạn có thể triển khai trên trang web của mình

Đây cũng là một trong những cách dễ nhất để tối ưu hóa WordPress. Mặc dù vậy, nhiều trang web WordPress vẫn không sử dụng nó

Khi bạn truy cập một trang web, trình duyệt của bạn sẽ kiểm tra xem máy chủ web có bật GZIP hay không bằng cách kiểm tra tiêu đề phản hồi

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
3. Nếu tiêu đề tồn tại, nó sẽ truy xuất các tệp nén, giải nén chúng và sau đó tự động cung cấp các tệp nhỏ hơn cho bạn

Thư viện nén chuỗi javascript
“Mã hóa nội dung. tiêu đề phản hồi gzip” trong Chrome DevTools

Nếu trình duyệt không phát hiện tiêu đề phản hồi GZIP, nó sẽ tải xuống các tệp không nén. Trong hầu hết các trường hợp, sự khác biệt về tốc độ tải trang có thể là nhiều giây. Do đó, nếu chưa bật GZIP, bạn sẽ thấy cảnh báo trong các công cụ kiểm tra tốc độ trang web

Cảnh báo GZIP trong Google PageSpeed ​​Insights/Ngọn hải đăng

Google PageSpeed ​​​​Insights đưa ra cảnh báo khi bạn không bật bất kỳ tính năng nén văn bản nào trên trang web của mình

Ghi chú. Google PageSpeed ​​Insights và Google Lighthouse là hai công cụ kiểm tra hiệu suất trang web riêng biệt. Chúng hoạt động độc lập với nhau cho đến năm 2018, khi Google nâng cấp PageSpeed ​​Insights để sử dụng Lighthouse làm công cụ phân tích. Do đó, PageSpeed ​​Insights và Lighthouse là một và giống nhau

Thư viện nén chuỗi javascript
Cảnh báo "Bật tính năng nén văn bản" trong Google PageSpeed ​​​​Insights

Trong trang web ví dụ ở trên, việc nén tài nguyên dựa trên văn bản có thể giảm hơn 78% trọng lượng trang và tăng tốc thời gian tải trang lên 2. 1 giây

Ghi chú. PageSpeed ​​Insights dựa trên các tiêu đề phản hồi được máy chủ trả lại cho trình duyệt của bạn. Đôi khi, nó có thể hiển thị cảnh báo sai ngay cả khi bạn đã bật tính năng nén GZIP. Có thể do chạy speed test trên máy dùng proxy server trung gian hoặc phần mềm bảo mật. Họ có thể can thiệp vào việc tải xuống các tệp nén từ các máy chủ bên ngoài

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

Theo dõi ngay

Cảnh báo GZIP trong GTmetrix

GTmetrix hiển thị cảnh báo nếu trang web của bạn không cung cấp tài nguyên dựa trên văn bản nén. Giống như Google PageSpeed ​​Insights, nó cũng sẽ cho bạn thấy những khoản tiết kiệm tiềm năng mà bạn có thể đạt được

Thư viện nén chuỗi javascript
Cảnh báo "Bật tính năng nén" trong GTmetrix

Ghi chú. GTmetrix đang nâng cấp thuật toán kiểm tra tốc độ của mình để thay thế các thư viện PageSpeed ​​Insights và YSlow cũ bằng các số liệu Google Lighthouse mới nhất. Bạn có thể mong đợi cảnh báo nén GZIP của nó tương tự như cảnh báo được hiển thị bởi Ngọn hải đăng

Cảnh báo GZIP trong Công cụ Pingdom

Công cụ Pingdom đưa ra một cảnh báo đơn giản để nén các thành phần trang web của bạn bằng GZIP

Thư viện nén chuỗi javascript
Cảnh báo “Nén các thành phần bằng GZIP” trong Công cụ Pingdom

Trong phần mô tả, Pingdom Tools cũng cung cấp cho bạn một vài thống kê về tầm quan trọng của GZIP. đậu mát

Cảnh báo GZIP trong WebPageTest

WebPageTest hiển thị cảnh báo trong tab Đánh giá hiệu suất nếu phát hiện thấy bất kỳ phản hồi có thể nén nào không được phục vụ theo cách tối ưu nhất

Thư viện nén chuỗi javascript
Cảnh báo "Sử dụng nén GZIP" trong WebPageTest

WebPageTest cũng sẽ cho điểm được phân loại để cho biết mức độ nghiêm trọng của cảnh báo. Chẳng hạn, nó xếp hạng cảnh báo ở trên là 23 trên 100, điều đó có nghĩa là bạn nên ưu tiên khắc phục nó

Làm cách nào để kiểm tra xem tính năng nén GZIP có được bật hay không?

Tiêu đề HTTP

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
4 được hỗ trợ hiệu quả bởi tất cả các trình duyệt hiện đại. Do đó, hầu hết các máy chủ web đều bật tính năng nén GZIP (hoặc nén Brotli) theo mặc định trên tất cả các máy chủ của họ

Khi các máy chủ web nhìn thấy tiêu đề này được gửi bởi trình duyệt, chúng sẽ nhận ra sự hỗ trợ của trình duyệt cho GZIP và phản hồi bằng phản hồi HTTP được nén bằng tiêu đề

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
3

Nhưng nếu bạn đang sử dụng một nhà cung cấp dịch vụ lưu trữ khác hoặc nếu bạn chỉ muốn xác nhận xem trang web của mình có đang phục vụ đúng nội dung nén GZIP hay không, hãy luôn kiểm tra xem nó đã được bật chưa

Dưới đây là một số cách đơn giản để kiểm tra nén GZIP

1. Công cụ kiểm tra nén GZIP trực tuyến

Sử dụng công cụ trực tuyến là cách dễ nhất để kiểm tra xem tính năng nén GZIP có được bật trên trang web của bạn hay không. Tôi khuyên bạn nên sử dụng các công cụ Kiểm tra nén GZIP hoặc Kiểm tra nén HTTP miễn phí. Chỉ cần nhập URL trang web của bạn và nhấn nút Kiểm tra hoặc Kiểm tra

Cả hai công cụ trực tuyến này sẽ hiển thị cho bạn một báo cáo ngắn gọn về việc GZIP có được bật hay không và lượng truyền dữ liệu bạn đã lưu (hoặc có thể lưu) bằng cách cung cấp URL thử nghiệm có bật tính năng nén GZIP

Công cụ đầu tiên cũng sẽ hiển thị cho bạn các thông tin liên quan khác như loại máy chủ, loại nội dung và thời gian nén của trang web của bạn

Thư viện nén chuỗi javascript
Kiểm tra trang chủ của Kinsta bằng công cụ Kiểm tra nén GZIP

Ghi chú. Kể từ ngày 5 tháng 11 năm 2021, Kinsta đã nâng cấp lên nén Brotli qua Cloudflare cho tất cả các yêu cầu HTTPS. Bạn có thể kiểm tra tính năng nén Brotli bằng cách kiểm tra

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
6 trong tiêu đề phản hồi của yêu cầu

Thư viện nén chuỗi javascript
Thử nghiệm Kinsta. com bằng công cụ Kiểm tra nén HTTP

Bạn nên lưu ý rằng tối ưu hóa GZIP không chỉ dừng lại ở trang web của bạn mà còn bao gồm các nội dung dựa trên văn bản tĩnh như biểu định kiểu, tập lệnh và phông chữ. Nếu bạn đang sử dụng CDN để phân phát các nội dung này, thì bạn cần đảm bảo rằng CDN cũng phân phát chúng khi bật tính năng nén GZIP

Hầu hết các CDN hiện đại như Cloudflare, Kinsta CDN, KeyCDN và CloudFront đều hỗ trợ nén GZIP. Bạn có thể kiểm tra nội dung do CDN cung cấp để nén GZIP bằng cách liên kết trực tiếp với nội dung

Thư viện nén chuỗi javascript
Thử nghiệm nén GZIP cho nội dung được lưu trữ bởi CDN

Trong báo cáo trên, bạn có thể thấy rằng Kinsta CDN sử dụng công cụ KeyCDN, đây là một CDN kéo truyền thống

Ghi chú. Kinsta đã chuyển sang Cloudflare với tư cách là đối tác CDN của mình để tăng tốc và bảo mật các trang web của khách hàng của chúng tôi. Bạn có thể đọc thêm về nó ở đây

Nếu bạn đang sử dụng Kinsta để lưu trữ trang web của mình, bạn không phải lo lắng về nén GZIP vì chúng tôi bật nén Brotli — một giải pháp thay thế nhanh hơn cho nén GZIP — theo mặc định

Thông tin

Tất cả các gói lưu trữ tại Kinsta đều bao gồm hỗ trợ miễn phí cho Kinsta CDN

2. “Mã hóa nội dung. gzip” Tiêu đề phản hồi HTTP

Cách thứ hai để xác minh xem một trang web có cung cấp nội dung nén GZIP hay không bằng cách xác minh tiêu đề phản hồi HTTP

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
3

Mệt mỏi với hỗ trợ lưu trữ WordPress cấp 1 mà không có câu trả lời? . Kiểm tra kế hoạch của chúng tôi

Bạn có thể mở Chrome DevTools hoặc Firefox Developer Tools và tìm tiêu đề phản hồi này trong phần Mạng

Tôi đã chỉ ra giao diện của nó trong Chrome DevTools trước đó. Đây là giao diện của nó trong Công cụ dành cho nhà phát triển Firefox

Thư viện nén chuỗi javascript
“Mã hóa nội dung. tiêu đề gzip” trong Công cụ dành cho nhà phát triển Firefox

Bạn cũng có thể bật tùy chọn “Sử dụng hàng yêu cầu lớn” trong bảng cài đặt Chrome DevTools để xem cả kích thước gốc và kích thước nén của trang. Như bạn có thể thấy bên dưới, kích thước của trang gốc đã giảm từ 118 KB xuống chỉ còn 22 KB. 9 KB sau khi nén bằng GZIP

Thư viện nén chuỗi javascript
Xem kích thước trang nén và không nén trong Chrome Devtools

3. Công cụ kiểm tra tốc độ trang web

Hầu hết các công cụ kiểm tra tốc độ trang web sẽ cảnh báo bạn không sử dụng nén như GZIP để phục vụ các trang web của bạn. Nhiều độc giả đến với bài viết này có lẽ đến vì chính xác những cảnh báo GZIP này, nhiều trong số đó tôi đã thảo luận sâu ở trên

Thư viện nén chuỗi javascript
Cảnh báo GZIP trong các công cụ kiểm tra tốc độ trang web khác nhau

Bạn có thể sử dụng các công cụ như PageSPeed Insights, GTmetrix, Pingdom Tools và WebPageTest để kiểm tra xem bạn đã bật nén GZIP trên trang web WordPress của mình chưa

Làm cách nào để bật tính năng nén GZIP?

Nếu bạn chưa bật tính năng nén GZIP trên máy chủ web của mình, có nhiều cách để kích hoạt tính năng này. Phương pháp chính xác tùy thuộc vào máy chủ web bạn đang sử dụng để lưu trữ trang web của mình

Quan trọng. Như mọi khi, hãy sao lưu các tệp cấu hình máy chủ và trang web của bạn trước khi chỉnh sửa chúng

1. Kích hoạt GZIP bằng Plugin WordPress

Cách dễ nhất để bật tính năng nén GZIP trên trang web WordPress của bạn là sử dụng plugin tối ưu hóa hiệu suất hoặc bộ nhớ đệm

Ví dụ: nếu bạn lưu trữ trang web WordPress của mình trên máy chủ web Apache, W3 Total Cache bao gồm tùy chọn bật tính năng nén GZIP trong bảng cài đặt Bộ đệm ẩn trình duyệt của nó

Tương tự như vậy, WP Rocket cho phép bạn tự động thêm các quy tắc nén GZIP. Các plugin này cho phép nén GZIP bằng cách thêm mô-đun

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
8 của Apache vào. tập tin htaccess

Thư viện nén chuỗi javascript
Kích hoạt tính năng nén GZIP trong W3 Total Cache

Plugin WordPress yêu cầu quyền sửa đổi tệp trên máy chủ web của bạn. Nếu họ không có quyền phù hợp thì họ sẽ không thành công hoặc hiển thị lỗi cho bạn

Trong những trường hợp như vậy, bạn cần liên hệ với nhà cung cấp dịch vụ lưu trữ của mình hoặc sửa đổi các tệp cấu hình của máy chủ web theo cách thủ công bằng cách sử dụng các đoạn mã bên dưới

Ghi chú. Kinsta đã tối ưu hóa nền tảng của mình để có hiệu suất cao, độ tin cậy và bảo mật. Điều này cũng bao gồm bật tính năng nén GZIP theo mặc định cho tất cả các gói lưu trữ của nó

Vì các plugin bộ nhớ đệm của bên thứ ba có thể gây ra xung đột với các tối ưu hóa hiệu suất nội bộ của Kinsta, nên Kinsta không cho phép hầu hết chúng trên các máy chủ của mình. Để biết thêm thông tin, bạn có thể xem danh sách đầy đủ các plugin bị cấm của Kinsta

2. Bật GZIP trên Máy chủ web Apache

Theo Netcraft, Apache phục vụ nhiều trang web đang hoạt động hơn bất kỳ máy chủ web nào khác đang được sử dụng hiện nay. Nó cũng là một trong hai máy chủ web được đề xuất bởi WordPress

Để kích hoạt tính năng nén GZIP trên các máy chủ Apache, bạn cần sử dụng các mô-đun

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
9 và
<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
8 của nó và định cấu hình chúng đúng cách với các chỉ thị phù hợp. Họ sẽ chỉ đạo Apache nén đầu ra của máy chủ trước khi gửi cho máy khách qua mạng

Bạn có hai tùy chọn để chỉnh sửa cấu hình máy chủ của Apache dựa trên cấp độ truy cập mà bạn có

  1. Nếu bạn có thể truy cập tệp cấu hình máy chủ chính (thường được gọi là httpd. conf), bạn nên sử dụng nó để cấu hình Apache như. htaccess có thể làm chậm Apache
  2. Nếu bạn không thể truy cập tệp cấu hình máy chủ chính, điều này thường xảy ra với hầu hết các nhà cung cấp dịch vụ lưu trữ chia sẻ WordPress, thì bạn cần định cấu hình Apache bằng cách sử dụng. tập tin htaccess

Tùy chọn đầu tiên hoàn toàn dành cho quản trị viên hệ thống, vì các nhà cung cấp dịch vụ lưu trữ hiếm khi cho phép bạn chỉnh sửa tệp cấu hình máy chủ chính. Giải thích cách thực hiện theo cách này nằm ngoài phạm vi của bài viết này. Bạn có thể tham khảo Cấu hình máy chủ Apache mẫu được chia sẻ bởi dự án HTML5 Boilerplate và tài liệu Apache để bắt đầu

Tùy chọn thứ hai lý tưởng cho hầu hết chủ sở hữu trang web WordPress vì nhiều nhà cung cấp dịch vụ lưu trữ chia sẻ cho phép bạn chỉnh sửa. tập tin htaccess

Để bắt đầu, hãy sử dụng SFTP hoặc trình quản lý tệp trực tuyến của máy chủ lưu trữ của bạn để tìm. htaccess trong thư mục gốc của trang web WordPress của bạn. Sau đó thêm đoạn mã dưới đây vào nó

Quan trọng. Đảm bảo rằng mô-đun

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
9 đang hoạt động trên máy chủ của bạn. Hầu hết các máy chủ web đều được bật theo mặc định, nhưng nếu không, lệnh
<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
42 sẽ không hoạt động và có thể gây ra lỗi HTTP 500. Bạn có thể kiểm tra nhật ký lỗi của máy chủ nếu gặp bất kỳ sự cố nào sau khi thêm đoạn mã bên dưới

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
4

Chỉ thêm mã ở trên sau các chỉ thị hiện có của bạn. tập tin htaccess. Lưu tệp và sau đó kiểm tra xem nó có bật tính năng nén GZIP trên máy chủ của bạn không

Thư viện nén chuỗi javascript
Ví dụ về Apache. htaccess sau khi bật tính năng nén GZIP

Máy chủ web của bạn bây giờ sẽ phục vụ các tệp nén cho tất cả các phần mở rộng tệp được liệt kê ở trên. Bạn có thể xác nhận điều này bằng cách sử dụng bất kỳ phương pháp nào được đề cập trước đây

Nếu bạn muốn đảm bảo rằng proxy và phần mềm bảo mật ở phía máy khách không can thiệp vào quá trình nén GZIP, bạn có thể thay thế đoạn mã trên bằng đoạn mã dưới đây

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
6

Bạn có thể tìm hiểu thêm về tất cả các lệnh được sử dụng tại đây bằng cách truy cập kho lưu trữ mã của nó và theo dõi tất cả các tài nguyên được liên kết trong đó

3. Bật GZIP trên Máy chủ web Nginx

Theo Netcraft, Nginx là máy chủ web được sử dụng nhiều nhất bởi các máy tính truy cập web. Nếu xu hướng hiện tại tiếp tục, nó sẽ sớm vượt qua Apache để trở thành máy chủ web được sử dụng nhiều nhất bởi các trang web đang hoạt động. Ngay cả Kinsta cũng sử dụng Nginx để cung cấp năng lượng cho các giải pháp lưu trữ được tối ưu hóa hiệu suất của mình

Bạn có thể bật tính năng nén GZIP trên máy chủ web Nginx của mình bằng cách sử dụng các lệnh được xác định trong ngx_http_gzip_module

Để bắt đầu, hãy thêm các lệnh được cung cấp bên dưới vào nginx của bạn. tập tin conf. Thông thường, bạn có thể tìm thấy tệp này ở vị trí

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
43 của máy chủ

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
8

Nếu trang web của bạn phục vụ các tệp JS và CSS lớn, thì bạn có thể tăng kích thước bộ đệm được sử dụng để nén bằng cách thêm lệnh sau vào nginx của mình. tập tin conf

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
9

Đừng quên tải lại Nginx sau khi lưu nginx của bạn. tập tin conf

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
0

Cuối cùng, bạn nên kiểm tra xem máy chủ của bạn đã bật tính năng nén GZIP chưa. Bạn có thể tham khảo tài liệu Nginx để biết danh sách cập nhật tất cả các chỉ thị

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>
44

4. Kích hoạt GZIP trên IIS Web Server

Dịch vụ thông tin Internet (IIS) của Microsoft là máy chủ web phổ biến thứ ba được sử dụng hiện nay. IIS chủ yếu được triển khai trong môi trường doanh nghiệp chạy trên Windows, đặc biệt là để thiết lập máy chủ mạng nội bộ và mạng bên ngoài dành riêng cho công ty

Nó hiếm khi được sử dụng để lưu trữ các trang web WordPress do các vấn đề tương thích khác nhau

Tuy nhiên, nếu bạn thấy mình rơi vào một trong những tình huống hiếm gặp khi cần bật tính năng nén GZIP trên IIS, bạn có thể tham khảo tài liệu của Microsoft để bắt đầu. Bạn cũng có thể thấy chủ đề Stack Overflow này hữu ích

Các lựa chọn thay thế cho Nén GZIP

Thế giới nén dữ liệu trên web luôn phát triển. Với kích thước trọng lượng trang trung bình không ngừng tăng lên, công nghệ web cũng đang cố gắng bắt kịp để giúp việc truyền dữ liệu qua web hiệu quả hơn

Thư viện nén chuỗi javascript
Tăng kích thước trọng lượng trang theo thời gian (Nguồn. Lưu trữ HTTP)

Một thuật toán nén mới đã trở nên phổ biến rộng rãi trong vài năm qua. Brotli. Nén phông chữ web WOFF2 ban đầu là trọng tâm chính của Brotli, nhưng kể từ đó, nó đã được mở rộng để hỗ trợ nén cho mọi loại dữ liệu

Brotli nén dữ liệu tốt hơn GZIP, nhưng nó đòi hỏi nhiều thời gian và tài nguyên hơn để nén dữ liệu. Tuy nhiên, thời gian giải nén của nó tương đương với GZIP, mặc dù nó vẫn chậm hơn một chút

Thư viện nén chuỗi javascript
Hỗ trợ Brotli trên các trình duyệt khác nhau

Hầu hết các trình duyệt hiện nay đều hỗ trợ Brotli, nhưng việc sử dụng nó trên các trang WordPress vẫn còn hơi phức tạp. Bạn phải lưu trữ trang web của mình với nhà cung cấp dịch vụ lưu trữ hỗ trợ Brotli hoặc cho phép bạn cài đặt thư viện Brotli. Hầu hết các máy chủ WordPress được quản lý chưa hỗ trợ hoàn toàn, nhưng nếu bạn sử dụng CDN như Cloudflare hoặc KeyCDN, bạn có thể kích hoạt nó một cách dễ dàng

Thông tin

Nhờ tích hợp Cloudflare của chúng tôi, tất cả các trang web được lưu trữ tại Kinsta đều được bật tính năng nén Brotli theo mặc định

Bạn đã sẵn sàng tăng tốc trang web của mình chưa? . Tìm hiểu cách thực hiện với hướng dẫn từng bước này ⬆️Nhấp để Tweet

Tóm lược

Một trang web được tối ưu hóa tốt là điều tuyệt vời cho tất cả mọi người. Người dùng yêu thích các trang web nhanh hơn, chủ sở hữu trang web yêu thích việc giảm phí lưu trữ và các máy chủ web yêu thích sự tối ưu hóa đạt được trên máy chủ của họ. Các kỹ thuật nén như GZIP là một trong những cách tốt nhất để tăng tốc thời gian tải trang cho khách truy cập của bạn

Chủ sở hữu trang web WordPress có thể tăng tốc trang web của họ ngay lập tức bằng cách bật tính năng nén GZIP. Kinsta kích hoạt nó theo mặc định trên tất cả các máy chủ của nó, nhưng đối với những người khác, bài viết này đề cập đến nhiều cách để kích hoạt tính năng nén GZIP trên các máy chủ web khác nhau

Tốc độ là rất quan trọng đối với bất kỳ trang web nào. Chỉ cần nén


Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

  • Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
  • Hỗ trợ chuyên gia 24/7
  • Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
  • Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
  • Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn