Tìm hiểu cách tăng tốc trang web bằng mô-đun Nginx và Gzip

Trong bài viết này, chúng ta sẽ thảo luận về cách tăng tốc độ web, truyền dữ liệu bằng cách giảm kích thước tệp thông qua nén. Phương pháp này mang lại lợi ích bổ sung bằng việc giảm lượng băng thông được sử dụng trong quá trình này, và làm cho việc trả tiền cho chủ sở hữu trang web trở nên rẻ hơn.

Để đạt được mục tiêu được nêu ở đoạn trên, chúng ta sẽ sử dụng Nginx và module tích hợp sẵn gzip trong bài viết này. Theo tài liệu chính thức, module này là một bộ lọc nén phản hồi bằng cách sử dụng phương pháp nén gzip nổi tiếng. Điều này đảm bảo kích thước dữ liệu truyền sẽ được nén đi một nửa hoặc hơn thế.

Đến khi bạn đọc tới cuối bài viết này, bạn sẽ có một lý do nữa để xem xét việc sử dụng Nginx để phục vụ các trang web và ứng dụng của bạn.

Install Nginx Web Server

Nginx có sẵn cho tất cả các bản phân phối hiện đại chính. Mặc dù chúng ta sẽ sử dụng một máy ảo CentOS 7 (IP 192.168.0.29) trong bài viết này.

Các hướng dẫn cung cấp dưới đây sẽ hoạt động với ít (nếu có) sửa đổi trên các bản phân phối khác. Giả sử máy ảo của bạn là một cài đặt sạch; nếu không, bạn phải đảm bảo rằng không có bất kỳ máy chủ web khác (như Apache) đang chạy trên máy của bạn.

Để cài đặt Nginx cùng với các phụ thuộc cần thiết, sử dụng lệnh sau:

----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
# yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
# apt update && apt install nginx

Để xác minh rằng quá trình cài đặt đã hoàn thành thành công và rằng Nginx có thể phục vụ các tệp, khởi động máy chủ web:

# systemctl start nginx
# systemctl enable nginx

rồi mở trình duyệt web và truy cập vào http://192.168.0.29 (đừng quên thay thế 192.168.0.29 bằng địa chỉ IP hoặc tên máy chủ của bạn). Bạn sẽ thấy trang Chào mừng:

Chúng ta phải nhớ rằng một số loại tệp tin có thể nén tốt hơn các loại khác. Các tệp văn bản thuần (như tệp HTML, CSS, và tệp JavaScript) nén rất tốt trong khi các loại khác (tệp .iso, tarballs, và hình ảnh, chỉ là một vài ví dụ) thì không, vì chúng đã được nén theo tự nhiên.

Do đó, có thể mong đợi rằng việc kết hợp Nginx và gzip sẽ cho phép chúng ta tăng tốc độ truyền dữ liệu của trang web, trong khi dạng nén có thể không cải thiện hoặc chỉ cải thiện ít nhiều.

Kiểm tra tốc độ trang web Nginx không có mô-đun gzip

Để bắt đầu, hãy tải xuống một mẫu Bootstrap đầy đủ, một sự kết hợp tuyệt vời của các tệp HTML, CSS, và JavaScript.

Sau khi tải xuống tệp nén, chúng ta sẽ giải nén nó vào thư mục gốc của khối máy chủ của chúng ta (hãy nhớ rằng đây là đối tượng tương đương với chỉ thị DocumentRoot trong khai báo một host ảo Apache):

# cd /var/www/html
# wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
# unzip -a gh-pages.zip
# mv startbootstrap-creative-gh-pages tecmint

Bạn nên có cấu trúc thư mục sau bên trong /var/www/html/tecmint:

# ls -l /var/www/html/tecmint

Bây giờ hãy truy cập http://192.168.0.29/tecmint và đảm bảo trang được tải đúng. Hầu hết các trình duyệt hiện đại đều bao gồm một tập hợp các công cụ phát triển. Trong Firefox, bạn có thể mở nó qua trình đơn Công cụ → Nhà phát triển Web.

Chúng ta đặc biệt quan tâm đến mục con Mạng trong menu này, nó sẽ cho phép chúng ta theo dõi tất cả các yêu cầu mạng xảy ra giữa máy tính của chúng ta và mạng cục bộ và Internet.

Một phím tắt để mở menu Mạng trong các công cụ phát triển là Ctrl + Shift + Q. Nhấn tổ hợp phím đó hoặc sử dụng thanh trình đơn để mở nó.

Vì chúng ta quan tâm đến việc xem xét việc truyền tải tệp tin HTML, CSS, và JavaScript, hãy nhấp vào các nút ở dưới và làm mới trang. Trong màn hình chính, bạn sẽ thấy chi tiết về việc truyền tải tất cả các tệp tin HTML, CSS, và JavaScript:

Bên phải cột Kích thước (Size) (hiển thị kích thước tệp tin cá nhân), bạn sẽ thấy các thời gian truyền tải cá nhân. Bạn cũng có thể nhấp đúp vào bất kỳ tệp tin nào để xem thêm chi tiết trong tab Thời gian (Timings).

Hãy chắc chắn ghi lại các thời gian hiển thị trong hình ảnh trên để bạn có thể so sánh chúng với việc truyền tải tương tự sau khi chúng ta đã kích hoạt module gzip.

Kích hoạt và định cấu hình mô-đun gzip trong Nginx

Để kích hoạt và cấu hình module gzip, mở tệp /etc/nginx/nginx.conf, tìm khối máy chủ chính như hình ảnh dưới đây và thêm hoặc sửa đổi dòng sau (đừng quên dấu chấm phẩy ở cuối hoặc Nginx sẽ trả về một thông báo lỗi khi khởi động lại sau đó!)

root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

Chỉ thị gzip bật hoặc tắt module gzip, trong khi gzip_types được sử dụng để liệt kê tất cả các loại MIME mà module nên xử lý.

Để tìm hiểu thêm về các loại MIME và xem các loại có sẵn, hãy truy cập Basics_of_HTTP_MIME_types.

Kiểm tra tốc độ trang web Nginx với mô-đun nén Gzip

Sau khi hoàn thành các bước trên, hãy khởi động lại Nginx và tải lại trang bằng cách nhấn Ctrl + F5 (lưu ý, điều này chỉ hoạt động trong Firefox, vì vậy nếu bạn đang sử dụng trình duyệt khác, hãy tìm tài liệu tương ứng trước)

# systemctl restart nginx

Tab yêu cầu mạng hiển thị một số cải tiến đáng kể. Hãy so sánh các thời gian để tự kiểm tra, hãy nhớ rằng đây là sự truyền tải giữa máy tính của chúng ta và 192.168.0.29 (truyền tải giữa các máy chủ Google và các CDNs chủ yếu rơi vào phạm vi ngoài tầm tay của chúng ta):

Ví dụ, hãy xem xét các ví dụ truyền tải tệp tin sau / sau khi bật gzip. Thời gian được tính bằng mili giây:

1. index.html (được đại diện bởi /tecmint/ ở đầu danh sách): 15 / 4
2. Creative.min.css: 18 / 8
3. jquery.min.js: 17 / 7

Trong bài viết này, chúng tôi đã chứng minh rằng bạn có thể sử dụng module gzip của Nginx để tăng tốc độ truyền tệp tin, đây chính là cách tăng tốc trang web hữu hiệu. Tài liệu chính thức về module gzip liệt kê các chỉ thị cấu hình khác mà bạn có thể muốn xem xét. 

Ngoài ra, trang web Mozilla Developer Network có một bài viết về Network Monitor giải thích cách sử dụng công cụ này để hiểu những gì đang diễn ra phía sau một yêu cầu mạng.