Cách Tối ưu Website Của Bạn Với Nén Gzip - Bizfly Cloud

• Techblog
• CDN

Cách tối ưu Website của bạn với nén GzipNguyễn Trọng Nhân149928-05-2018

Nén là một phương pháp đơn giản, hiệu quả để tiết kiệm băng thông và tăng tốc trang web của bạn. Một trình duyệt tiên tiến cần được tận hưởng nội dung và tốc độ của một website hiện đại. Do vậy hãy sử dụng gzip. Bài viết sau đây Bizfly Cloud sẽ hướng dẫn bạn cách cài đặt nén Gzip.

Trước tiên, hãy tìm hiểu tại sao chúng ta lại làm điều này?

Bạn cần hiểu tổng quan về mã hóa là gì?

Cụ thể như sau, khi bạn yêu cầu một file, ví dụ như http://www.yahoo.com/index.html, trình duyệt của bạn nói chuyện với một web server. Đoạn hội thoại sẽ diễn ra kiểu như sau:

Trình duyệt của bạn nói chuyện với một web server

- Trình duyệt: Này, GET cho tôi/index.html

- Server: Ok, để tôi tìm xem index.html có không?

- Server: Tìm thấy rồi! Mã phản hồi của anh đây (200 OK) và tôi đang gửi file.

- Trình duyệt: 100KB? Ôi... chờ tí, chờ tí... ok, tải được rồi nhé.

Dĩ nhiên, header và giao thức thực tế sẽ hình thức hơn nhiều (để quan sát đầy đủ quá trình, hãy sử dụng Live HTTP Headers nếu bạn muốn).

Quá trình hoàn tất, và bạn nhận được file.

Vậy vấn đề được đặt ra ở đây là gì?

Hệ thống hoạt động, nhưng không hiệu quả. 100KB là một đống text, và thành thật thì, HTML khá là trùng lặp. Mỗi thẻ đều có một thẻ đóng gần như tương tự. Các từ lặp đi lặp lại trong cả document. Bạn chia nó ra như thế nào thì HTML (và người anh em mạnh mẽ của nó, XML) đều không tinh gọn.

Xử lý thế nào với một file quá lớn?

Xử lý thế nào với một file quá lớn?

Hãy nén file!

Nếu chúng ta có thể gửi một file .zip đến trình duyệt (index.html.zip) thay vì index.html thông thường, chúng ta sẽ tiết kiệm được băng thông và thời gian tải. Trình duyệt có thể tải file đã nén, giải nén nó, và sau đó hiển thị cho người dùng, người dùng sẽ cảm thấy hài lòng hơn vì trang tải nhanh.

Lúc này, đoạn hội thoại giữa trình duyệt và server sẽ trông như sau:

Trình duyệt có thể tải file đã nén, giải nén nó, và sau đó hiển thị cho người dùng

- Trình duyệt: Này, tôi có thể GET index.html không? Tôi sẽ lấy phiên bản nén của nó nếu anh có.

- Server: Để tôi tìm... ừ, có đây. Và anh sẽ lấy bản nén? Tuyệt.

- Server: Ok, tôi tìm thấy index.html (200 OK), và tôi đang nén và gửi nó qua cho anh.

- Trình duyệt: Tuyệt! Chỉ có mỗi 10KB. Tôi sẽ giải nén và hiển thị cho người dùng.

Công thức rất đơn giản: File nhỏ hơn = tải nhanh hơn = người dùng hạnh phúc hơn.

Bạn vẫn không tin?

Vậy thì hãy kiểm nghiệm thực tế bằng dẫn chứng sau đây nhé:

Phần HTML của trang chủ của Yahoo giảm từ 101KB xuống còn 15KB sau khi nén:

101KB xuống còn 15KB sau khi nén

Phần khó trong quá trình trao đổi này là trình duyệt và server phải biết rằng việc gửi nhận file nén là được chấp nhận. Việc đồng ý này bao gồm 2 phần:

- Trình duyệt gửi một header nói với server rằng nó chấp nhận nội dung được nén (gzip và deflate là 2 cách nén): Accept-Encoding: gzip, deflate

- Server gửi một phản hồi nếu nội dung thực sự được nén: Content-Encoding: gzip

Nếu server không gửi content-encoding trong header của phản hồi, điều đó có nghĩa là file không được nén (điều mặc định ở nhiều server). Header "Accept-Encoding" chỉ là một yêu cầu từ trình duyệt, không phải mệnh lệnh. Nếu server không muốn gửi về nội dung được nén, trình duyệt sẽ phải tải về phiên bản nặng nề thông thường.

Thiết lập server

"Tin tốt" là chúng ta không thể kiểm soát được trình duyệt. Nó sẽ gửi header Accept-Encoding: gzip, deflate hoặc là không.

Công việc của chúng ta là cấu hình server để nó trả về nội dung được nén nếu trình duyệt có thể xử lý, tiết kiệm băng thông cho mọi người (và đem lại sự hài lòng cho trải nghiệm của người dùng).

- Đối với IIS, bật cấu hình nén ở trong cài đặt.

- Trong Apache, bật cấu hình nén nội dung xuất khá là đơn giản. Thêm các dòng sau vào file .htaccess:

# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml xml AddOutputFilterByType DEFLATE application/rss xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension: SetOutputFilter DEFLATE

Apache có 2 tùy chọn nén:

mod_deflate dễ dàng cài đặt và là chuẩn.

mod_gzip có vẻ mạnh hơn: bạn có thể nén trước nội dung.

Deflate nhanh và hoạt động được, nên tôi sử dụng nó; dùng mod_gzip nếu bạn thấy thích.

Trong cả 2 trường hợp, Apache đều kiểm tra xem trình duyệt có gửi header "Accept-Encoding" không và gửi lại phiên bản nén hoặc phiên bản thường của file. Tuy nhiên, một số trình duyệt cũ sẽ phát sinh vấn đề (chi tiết bên dưới) và có một số chỉ lệnh đặc biệt mà bạn có thể thêm vào để sửa.

Nếu bạn không thể thay đổi file .htaccess, bạn có thể dùng PHP để trả về nội dung nén. Thêm phần mở rộng .php vào file html của bạn và thêm đoạn code này ở đầu file:

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip'))ob_start("ob_gzhandler"); else ob_start(); ?>

Chúng ta kiểm tra header "Accept-Encoding" và trả về phiên bản nén gzip của file (ngược lại là phiên bản thường). Việc này gần như là tự xây dựng webserver của bạn (rất thú vị!). Nhưng thực sự thì, hãy thử sử dụng Apache để nén nội dung trả về nến bạn có thể. Bạn sẽ không muốn nghịch ngợm các file của mình đâu.

Xác minh nội dung nén của bạn

Khi bạn đã cấu hình xong server của mình, hãy kiểm tra để đảm bảo rằng bạn thực sự trả về nội dung nén.

Online: sử dụng công cụ kiểm tra gzip online để kiểm tra liệu trang của bạn có được nén không.

Trên trình duyệt: trong Chrome, mở Developer Tools > Network (Firefox/IE sẽ tương tự). Tải lại trang, và nhấn vào dòng network tương ứng với trang (ví dụ www.google.com). Header "Content-Encoding: gzip" nghĩa là nội dung trả về đã được nén.

Xác minh nội dung nén của bạn

Nhấn biểu tượng "Use large rows" để hiển thị thêm thông tin, bao gồm cả kích cỡ file nén và kích cõ thực.

Hãy chuẩn bị cho điều kỳ diệu ở kết quả. Trang chủ của instacalc thu lại từ 36k xuống còn 10k, giảm 75% kích cỡ.

Thử một số ví dụ

Tôi đã làm một số trang và một ví dụ cho phép tải về:

index.html - không nén (trên server này, tôi mặc định sử dụng nén)

index.htm - nén với Apache .htaccess sử dụng luật *.htm

index.php - nén sử dụng PHP header

Cứ thoải mái tải file, để chúng trong server của bạn và chỉnh sửa các cài đặt.

Lưu ý

Dù khá thú vị nhưng HTTP Compression cũng chứa một số vấn đề. Dưới đây là những điều bạn phải đặc biệt để tâm:

Trình duyệt cũ

Một số trình duyệt vẫn còn có rắc rối với nội dung nén (chúng nói rằng có thể chấp nhận nội dung nén, nhưng thực sự thì không thể). Nếu trang của bạn bắt buộc phải hoạt động với Netscape 1.0 trên Windows 95, bạn có lẽ sẽ không muốn dùng HTTP Compression. Apache mod_deflate có một số luật cho phép tránh việc nén trên một số trình duyệt cũ.

Nội dung đã nén

Hầu hết ảnh, nhạc và video đều đã được nén. Đừng tốn thời gian nén chúng lần nữa. Trên thực tế, bạn sẽ chỉ muốn nén "big 3" (HTML, CSS và Javascript).

CPU-load

Nén nội dung khi nhận được yêu cầu sẽ tiêu tốn thời gian của CPU và tiết kiệm băng thông. Thường thì đây là sự đánh đổi tốt nếu biết tốc độ nén. Có nhiều cách để nén trước các nội dung tĩnh và gửi các bản nén này. Việc này cần được cấu hình thêm; cho dù không thể thì việc nén nội dung trả về vẫn là điều tốt. Sử dụng CPU cho người dùng có trải nghiệm nhanh hơn cũng khá là đáng, khi sự chú ý không đáng kể.

Nén là một trong những cách nhanh nhất để cải thiện hiệu năng cho trang web của bạn. Hãy cài đặt và sử dụng chúng, khiến cho người dùng của bạn hưởng lợi ích nó mang lại, tăng cao sự hài lòng trong trải nghiệm website.

Bài viết được dịch từ How To Optimize Your Site With GZIP Compression của website Better Explained.

Theo Bizfly Cloud chia sẻ

>>> Có thể bạn quan tâm: 10 lý do không thể bỏ qua CDN khi tối ưu website

SHAREFacebookTwitter