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ễ nhất thứ hai để tăng tốc độ là nén tất cả các tài nguyên mong muốn của nó. Bật 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 cá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? Hãy giải nén!

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

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 bởi các trang web. Tùy thuộc vào kiểu dữ liệu — văn bản, hình ảnh, bảng định kiểu, tập lệnh, phông chữ — có nhiều cách khác nhau để nén dữ liệu.

An illustration of the main components of a webpage
Các thành phần chính của trang web

Ví dụ: rút gọn 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, trình thu nhỏ nén văn bản bằng cách loại bỏ 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ụ bên dưới của 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. Nó lý tưởng để phát triển. Tuy nhiên, trình duyệt không cần thiết phải đọc các bình luận và có các thẻ được thụt lề hoàn hảo. Một 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 giảm xuống chỉ còn 141 ký tự. Đó là tiết kiệm 60,50% số ký tự. Nó không dễ dàng 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 rút gọn tất cả mã trước khi đưa nó vào hoạt động.

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

File size comparison of uncompressed vs minified jQuery
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 thư viện jQuery 3.5.1 lớn hơn 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. Việc cắt 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 của 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ọ, tăng tốc trang web của họ mà không cần nỗ lự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ể làm giảm kích thước của dữ liệu hơn nữa.

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 quan trọng làm cho Internet trở 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ủa các trang HTML, bảng định kiểu và tập lệnh trên trang web của bạn.

Ngoài vai trò 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 được sử dụng để nén / giải nén tệp.

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.

An illustration of how GZIP compression is based on the DEFLATE algorithm
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 (ví dụ: HTML, CSS, JS).

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

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

A rough illustration of how GZIP compression works
Một minh họa sơ bộ về cách nén GZIP hoạt động

Để 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ỏ 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 một 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ộ giá trị để nén dữ liệu thô.

An illustration of the LZ77 encoding algorithm
Hình 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 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 các ký tự xảy ra thường xuyên hơn với số bit ít nhất, trong khi gán các ký tự hiếm có số 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 sẽ có các chuỗi ngắn nhất.

Để hiểu cách hoạt động của thuật toán mã hóa Huffman, hãy xem xét từ BOOKKEEPER . 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 hết tất cả các trang web đều sử dụng mã hóa ký tự UTF-8 để biểu thị 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).

The word “BOOKKEEPER” has many repeating letters
Từ “BOOKKEEPER” có nhiều chữ cái lặp lại

Một chuỗi 10 ký tự như BOOKKEEPER sẽ yêu cầu bộ nhớ 10 byte (80 bit). Bạn có thể thấy rằng nó chứa 1 bản sao của các chữ cái B , P , R , 2 bản sao của chữ OK , và 3 bản sao của chữ E

Thuật toán mã hóa Huffman sử dụng kiến thức này để nén chuỗi một cách dễ dàng. Nó thực hiện điều này bằng cách tạo 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 thấp nhất (ví dụ B , P , R ) sẽ tự tìm thấy mình ở dưới cùng của cây, trong khi những chữ cái xuất hiện thường xuyên (ví dụ: E , O , K ) lý tưởng sẽ tự ở trên cùng.

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

Huffman Tree for the word “BOOKKEEPER”
Cây Huffman cho từ “BOOKKEEPER”

Sau khi tạo cây Huffman, tất cả các mũi tên rẽ nhánh trái và rẽ nhánh phải được cho số tương ứng là 01 . 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 chữ số 01 .

Huffman codes are unique binary codes for every character
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 suất cao nhất có mã Huffman với kích thước bit nhỏ nhất.

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

An 80 bits word encoded as a 25 bits string
Một từ 80 bit được mã hóa dưới dạng chuỗi 25 bit

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

Sử dụng cây Huffman với quy ước 0/1 tạo ra các 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 mã hóa bằng cách sử dụng cây Huffman. Điều này đóng một vai trò quan trọng trong tốc độ giải nén GZIP.

Cũng giống như từ ở trên, máy 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ộ giá trị được tạo ra 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 nội dung dựa trên văn bản lớn hơn.

Comparison of GZIP compression ratios for various CSS and JS libraries
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 được rút gọn bằng GZIP có thể làm giảm kích thước của chúng hơn nữa.

Lưu ý: Bạn có thể nén bất kỳ loại tệp nào bằng GZIP, nhưng đối với nội dung đã được nén bằng các phương pháp khác (ví dụ: hình ảnh, video), nó sẽ không tiết kiệm được. Đô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 tốc độ nén và giải nén dữ liệu nhanh chóng và hiệu quả như thế nào. Đó là nơi GZIP vượt trội trong 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ó rất phù hợp cho các giao thức web nơi tốc độ là cốt lõi. Thêm vào đó, GZIP sử dụng tài nguyên tối thiểu để nén và giải nén dữ liệu, khiến nó trở nên lý tưởng cho cả máy chủ và máy khách.

Compression performance of brotli vs bzip2 vs GZIP vs xz (Source: OpenCPU)
Hiệu suất nén của brotli vs bzip2 vs GZIP vs xz (Nguồn: OpenCPU)

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 , gzipxz . GZIP thua trong bài kiểm tra tỷ lệ nén một chút, nhưng đối với 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à lý tưởng để nén thời gian thực trong các máy chủ HTTP và các luồng dữ liệu khác trên web. Xem xét tất cả những 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 tiêu chuẩn để nén trong HTTP / 1.1.

Lưu ý: Thư viện nén của GZIP được gọi là 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 một tỷ lệ nén thấp

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ủa nó. Nhưng nó cũng không quá xa so với họ. Thông thường, nó có thể giúp bạn giảm kích thước của các tài nguyên dựa trên văn bản xuống 70-90%.

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 là người chiến thắng rõ ràng. Nó rất được mong đợi để nén nhanh trong các máy chủ HTTP và các luồng dữ liệu khác.

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

GZIP để lại bộ nhớ tối thiểu, 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 các trường hợp tồi tệ nhất

Các thuật toán nén dữ liệu không mất dữ liệu như GZIP có một giới hạn nghiêm ngặt mà 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 nó nhỏ và chi phí thêm từ điển GZIP cao hơn mức tiết kiệm nén. Chúng ta có thể gán cho hiện tượng này 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 rất cao.

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

GZIP chủ yếu được tạo ra để 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 đầu tiên. Do đó, nó không bị cản trở bở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.

Được 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 mà 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 toàn bộ 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 độ 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ể thực hiện 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 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 content-encoding: gzip . 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 phân phát các tệp nhỏ hơn cho bạn.

The “content-encoding: gzip” response header
Tiêu đề phản hồi “content-encoding: gzip” trong Chrome DevTools

Nếu trình duyệt không phát hiện tiêu đề phản hồi GZIP, trình duyệt 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ể kéo dài nhiều giây. Do đó, nếu bạn 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 / Lighthouse

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.

Lưu ý: Google PageSpeed Insights và Google Lighthouse là hai công cụ kiểm tra hiệu suất trang web riêng biệt. Họ làm việc độ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 bây giờ là một và giống nhau.

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

“Enable text compression” warning in Google PageSpeed Insights
Cảnh báo “Bật nén văn bản” trong Google PageSpeed Insights

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

Lưu ý: 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 kiểm tra tốc độ trên máy sử dụng máy chủ proxy trung gian hoặc phần mềm bảo mật. Chúng có thể cản trở việc tải xuống các tệp nén từ các máy chủ bên ngoài.

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.

“Enable compression” warning in GTmetrix
Cảnh báo “Bật nén” trong GTmetrix

Lưu ý: GTmetrix đang nâng cấp thuật toán kiểm tra tốc độ để thay thế các thư viện PageSpeed Insights và YSlow cũ bằng các chỉ số 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 Lighthouse.

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

Pingdom Tools đư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.

“Compress components with GZIP” warning in Pingdom Tools
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 số liệu thống kê về tầm quan trọng của GZIP. Đậu nguội!

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 nén nào không được phân phát theo cách tối ưu nhất.

“Use GZIP compression” warning in WebPageTest
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. Ví dụ: nó xếp hạng cảnh báo ở trên là 23/100, có nghĩa là bạn nên sửa nó như một mức độ ưu tiên.

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

Tiêu đề Accept-Encoding: gzip, deflate HTTP đượ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, bao gồm cả Kinsta, cho phép nén GZIP theo mặc định trên tất cả các máy chủ của họ.

Khi 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 dành cho GZIP và phản hồi bằng phản hồi HTTP nén bằng cách sử dụng tiêu đề content-encoding: gzip .

Nhưng nếu bạn đang sử dụng một nhà cung cấp dịch vụ lưu trữ WordPress 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ân phát nội dung nén GZIP đúng cách hay không, hãy luôn kiểm tra xem nó có được bật hay không.

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ể tiết kiệm) 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.

Testing Kinsta’s homepage with the Check GZIP Compression tool
Kiểm tra trang chủ của Kinsta bằng công cụ Kiểm tra GZIP Compression
Testing Kinsta.com with HTTP Compression Test tool
Kiểm tra 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ư bảng định kiểu, tập lệnh và phông chữ. Nếu bạn đang sử dụng CDN để cung cấp các nội dung này, thì bạn cần đảm bảo rằng CDN cũng phân phối chúng với 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 phân phối để nén GZIP bằng cách liên kết trực tiếp với nội dung.

GZIP compression test for assets hosted by a CDN
Kiểm tra nén GZIP cho nội dung được CDN lưu trữ

Trong báo cáo trên, bạn có thể thấy rằng Kinsta CDN sử dụng công cụ KeyCDN, là một CDN kéo truyền thống. Nếu bạn đang sử dụng Kinsta để lưu trữ trang web WordPress của mình, bạn không phải lo lắng về vấn đề nén GZIP vì nó được bật theo mặc định.

2. Tiêu đề phản hồi HTTP “content-encoding: gzip”

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 là xác minh tiêu đề phản hồi HTTP content-encoding: gzip .

Bạn mệt mỏi với việc hỗ trợ lưu trữ WordPress cấp độ 1 mà không có câu trả lời? Hãy thử nhóm hỗ trợ đẳng cấp thế giới của chúng tôi! Kiểm tra các kế hoạch của chúng tôi

Bạn có thể mở Công cụ dành cho nhà phát triển của Chrome hoặc Công cụ dành cho nhà phát triển Firefox và tìm tiêu đề phản hồi này trong phần Mạng .

Tôi đã chỉ ra cách nó trông như thế nào 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.

The “content-encoding: gzip” header in Firefox Developer Tools
Tiêu đề “content-encoding: 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 Công cụ dành cho nhà phát triển của Chrome để xem cả kích thước ban đầu 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,9 KB sau khi nén nó bằng GZIP.

View the compressed vs uncompressed page sizes in Chrome Devtools
Xem kích thước trang được 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 tính nă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 người trong số đó tôi đã thảo luận sâu ở trên.

GZIP warnings in various webpage speed testing tools
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 tính năng nén GZIP trên trang web WordPress của mình chưa.

Cách 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 để bật tính năng này. Phương pháp chính xác phụ 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 trang web và máy chủ của bạn trước khi chỉnh sửa chúng.

Bật GZIP với một Plugin WordPress

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

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 một tùy chọn để bật tính năng nén GZIP trong bảng cài đặt Bộ nhớ cache của trình duyệt .

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 mod_deflate của Apache vào tệp .htaccess.

Enabling GZIP compression in W3 Total Cache
Bật tính năng nén GZIP trong W3 Total Cache

Các plugin WordPress yêu cầu quyền để sửa đổi các 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ẽ thất bại 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.

Lưu ý: 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 việc 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.

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.

Để bật tính năng nén GZIP trên máy chủ Apache, bạn cần sử dụng mô-đun mod_filtermod_deflate của nó và định cấu hình chúng đúng cách với các lệnh phù hợp. Họ sẽ chỉ đạo Apache nén đầu ra của máy chủ trước khi gửi đến các 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 tệp này để định cấu hình Apache vì tệp .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 tệp .htaccess .

Tùy chọn đầu tiên hoàn toàn dành cho sysadmins, 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à lý tưởng cho hầu hết các chủ sở hữu trang web WordPress vì nhiều nhà cung cấp dịch vụ lưu trữ được chia sẻ cho phép bạn chỉnh sửa tệp .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ủ của bạn để tìm tệp .htaccess trong thư mục gốc của trang web WordPress của bạn. Sau đó, thêm đoạn mã bên dưới vào đó.

Quan trọng: Đảm bảo rằng mô-đun mod_filter đang hoạt động trên máy chủ của bạn. Hầu hết các máy chủ web đều bật tính năng này theo mặc định, nhưng nếu không, chỉ thị AddOutputFilterByType 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.

<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for ancient browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>

Chỉ thêm mã ở trên sau các lệnh hiện có của tệp .htaccess của bạn. 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 hay không.

Example of Apache .htaccess file after enabling GZIP compression
Ví dụ về tệp .htaccess của Apache sau khi bật tính năng nén GZIP

Máy chủ web của bạn bây giờ sẽ cung cấp 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ậ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 ảnh hưởng đến quá trình nén GZIP, bạn có thể thay thế đoạn mã trên bằng đoạn mã bên dưới.

<IfModule mod_deflate.c> # ép buộc nén các ứng dụng khách có tiêu đề yêu cầu 'Chấp nhận-Mã hóa' <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X {15} | ~ {15} | - {15}) $ ^ ((gzip | deflate)  s *,?  S *) + | [X ~ -] {4,13} $ CÓ_Accept-Encoding RequestHeader append Accept-Encoding "gzip , deflate "env = Have_Accept-Encoding </IfModule> </IfModule> # nén tất cả đầu ra bằng một trong các phần mở rộng tệp sau <IfModule mod_filter.c> AddOutputFilterByType DEFLATE" application / atom + xml "" application / javascript "" ứng dụng / json "" ứng dụng / ld + json "" ứng dụng / tệp kê khai + json "" ứng dụng / rdf + xml "" ứng dụng / rss + xml "" ứng dụng / lược đồ + json "" ứng dụng / geo + json "" application / vnd.ms-fontobject "" application / wasm "" application / x-font-ttf "" application / x-javascript "" application / x-web-app-manifest + json "  "application / xhtml + xml"  "application / xml"  "font / eot"  "font / opentype"  "font / otf"  "font / ttf"  "image / bmp" "image / svg + xml"  "image / vnd.microsoft.icon"  "text / cache-manifest"  "text / calendar"  "text / css"  "text / html"  "text / javascript"  "text / trơn"  "text / markdown"  "text / vcard"  "text / vnd.rim.location.xloc"  "text / vtt"  "text / x-component"  "text / x-cross -domain-policy "" text / xml "</IfModule> # xác định và ánh xạ các loại phương tiện với kiểu mã hóa thích hợp của chúng # Nên sử dụng định dạng SVG (Đồ họa Vectơ có thể mở rộng) để # tải biểu trưng, biểu tượng, văn bản và hình ảnh đơn giản . Bạn có thể nén thêm tệp .SVG # bằng GZIP để tạo tệp .SVGZ. Tuy nhiên, hầu hết các trình duyệt không # biết rằng họ cần giải nén chúng trước nếu chúng không được phân phát # mà không có tiêu đề phản hồi HTTP 'mã hóa nội dung' thích hợp. Do đó, # những hình ảnh này sẽ không hiển thị trong trình duyệt. Do đó, mô-đun này. <IfModule mod_mime.c> AddType image / svg + xml svg svgz AddEncoding gzip svgz </IfModule> </IfModule>

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 đó.

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 chạy trên 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 các trang web đang hoạt động sử dụng nhiều nhất. Ngay cả Kinsta cũng sử dụng Nginx để cung cấp các giải pháp lưu trữ tối ưu hóa hiệu suất cho WordPress.

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 dưới đây vào tệp nginx.conf của bạn. Thông thường, bạn có thể tìm thấy tệp này ở vị trí /etc/nginx/nginx.conf của máy chủ.

# enables GZIP compression gzip on; # compression level (1-9) # 6 is a good compromise between CPU usage and file size gzip_comp_level 6; # minimum file size limit in bytes to avoid negative compression outcomes gzip_min_length 256; # compress data for clients connecting via proxies gzip_proxied any; # directs proxies to cache both the regular and GZIP versions of an asset gzip_vary on; # disables GZIP compression for ancient browsers that don't support it gzip_disable "msie6"; # compress outputs labeled with the following file extensions or MIME-types # text/html MIME-type is enabled by default and need not be included gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/vnd.ms-fontobject application/wasm application/x-web-app-manifest+json application/xhtml+xml application/xml font/eot font/otf font/ttf image/bmp image/svg+xml text/cache-manifest text/calendar text/css text/javascript text/markdown text/plain text/xml text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy;

Nếu trang web của bạn cung cấp 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 tệp nginx.conf của bạn:

# sets the 'number' and 'size' of buffers for GZIP compression # default buffer size is 4K or 8K depending on the platform gzip_buffers 16 8k;

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

sudo service nginx reload

Cuối cùng, bạn nên kiểm tra xem máy chủ của bạn có bật tính năng nén GZIP hay không. 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ị ngx_http_gzip_module .

Bật GZIP trên Máy chủ Web IIS

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 các máy chủ mạng nội bộ và mạng phụ 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 rơi vào một trong những trường hợp hiếm hoi 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 luồng Stack Overflow này hữu ích.

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

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 nó để làm cho việc truyền dữ liệu qua web hiệu quả hơn.

Increase in page weight size over time (Source: HTTPArchive)
Tăng kích thước trọng lượng trang theo thời gian (Nguồn: HTTPArchive)

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 sau đó nó đã được mở rộng để hỗ trợ nén cho bất kỳ loại dữ liệu nào.

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.

Brotli support across various browsers
Hỗ trợ Brotli trên nhiều trình duyệt khác nhau

Hầu hết các trình duyệt đều hỗ trợ Brotli ngày nay, 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ý đều chưa hỗ trợ nó 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.

Brotli cho thấy nhiều hứa hẹn cho các tài sản tĩnh nén. Akamai đã xuất bản một bài viết chi tiết so sánh Brotli và GZIP. Bạn có thể kiểm tra nó để tìm hiểu thêm về Brotli.

Bản tóm tắt

Một 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 thích giảm phí lưu trữ và các máy chủ lưu trữ 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 bật tính năng này theo mặc định trên tất cả các máy chủ của nó, nhưng đối với những máy chủ khác, bài viết này trình bày nhiều cách để bật tính năng nén GZIP trên các máy chủ web khác nhau.

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


Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:

  • Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
  • Tích hợp Cloudflare Enterprise.
  • Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
  • Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.

Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các 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 ra kế hoạch phù hợp với bạn.