Cách cấu hình Nginx để nén và tối ưu hóa tài nguyên

Khi triển khai ứng dụng web, việc nén và tối ưu hóa tài nguyên là một phần quan trọng để cải thiện tốc độ tải trang và hiệu suất của trang web. Trong bài viết này, chúng ta sẽ tìm hiểu cách cấu hình Nginx để nén và tối ưu hóa tài nguyên.

Nén tài nguyên

Nén tệp tin CSS và JavaScript

Để nén tệp tin CSS và JavaScript, chúng ta có thể sử dụng module gzip của Nginx. Để bắt đầu, chúng ta cần bật module gzip bằng cách thêm cấu hình sau vào tệp cấu hình của Nginx (nginx.conf hoặc các tệp cấu hình của máy chủ ảo):

http {
...
gzip on;
gzip_types text/css application/javascript;
...
}

 

Trong cấu hình trên, chúng ta đã bật module gzip (gzip on) và xác định các loại tệp tin mà chúng ta muốn nén (gzip_types). Trong ví dụ này, chúng ta nén các tệp tin CSS và JavaScript.

Nén tệp tin HTML

Để nén tệp tin HTML, chúng ta cần sử dụng module ngx_http_gzip_static_module của Nginx. Đầu tiên, chúng ta cần chắc chắn rằng module này đã được cài đặt trong phiên bản Nginx hiện tại. Sau đó, chúng ta có thể bật nén tệp tin HTML bằng cách thêm cấu hình sau vào tệp cấu hình của Nginx:

http {
...
gzip_static on;
...
}

 

Khi module này đã được bật, Nginx sẽ tìm kiếm các tệp tin HTML có đuôi .html.gz và gửi chúng đến trình duyệt. Điều này giúp giảm kích thước tệp tin và cải thiện tốc độ tải trang.

How To Monitor NGINX using Telegraf and Graphite | MetricFire Blog

Tối ưu hóa tài nguyên

Sử dụng tệp tin nhỏ hơn

Để tối ưu hóa tải trang, chúng ta có thể sử dụng các tệp tin có kích thước nhỏ hơn. Có một số cách để làm điều này:

  • Tái cấu trúc CSS và JavaScript để loại bỏ các khoảng trống, định dạng không cần thiết và mã không sử dụng.
  • Sử dụng các công cụ tối ưu hóa để giảm kích thước tệp tin như CSS minifiers và JavaScript minifiers.

Sử dụng tệp tin tĩnh (static files)

Để cải thiện hiệu suất, chúng ta có thể sử dụng Nginx để phục vụ các tệp tin tĩnh như hình ảnh, biểu đồ, video, vv. Một cách đơn giản để làm điều này là thêm cấu hình sau vào tệp cấu hình của Nginx:

http {
...
server {
...
location /static {
root /path/to/static/files;
}
...
}
...
}

 

Trong ví dụ trên, chúng ta đã tạo một vị trí (location) mới được gọi là /static và chỉ định thư mục chứa các tệp tin tĩnh (root). Bằng cách làm như vậy, Nginx sẽ phục vụ các tệp tin tĩnh từ địa chỉ /static mà không cần chuyển tiếp yêu cầu tới ứng dụng.

docker-nginx-php · GitHub Topics · GitHub

Tối ưu hóa và nén tài nguyên là một phần quan trọng trong việc cải thiện hiệu suất và tốc độ tải trang của ứng dụng web. Trong bài viết này, chúng ta đã tìm hiểu cách cấu hình Nginx để nén tài nguyên CSS, JavaScript và HTML bằng module gzip và gzip_static. Chúng ta cũng đã xem xét một số phương pháp tối ưu hóa tài nguyên bằng cách sử dụng tệp tin nhỏ hơn và phục vụ các tệp tin tĩnh. Bằng cách áp dụng những phương pháp này, chúng ta có thể cải thiện tốc độ tải trang và cải thiện trải nghiệm người dùng trên trang web của chúng ta.