NỘI DUNG

Hosting tốc độ cao Vietnix - tốc độ tải trang trung bình dưới 1 giây
VPS siêu tốc Vietnix - trải nghiệm mượt mà, ổn định
14/06/2023
Lượt xem

Cách triển khai Browser Caching với header Module của Nginx trên CentOS 7

14/06/2023
12 phút đọc
Lượt xem

Đánh giá

5/5 - (133 bình chọn)

Browser Caching có thể cải thiện hiệu suất cho trang web của bạn một cách đáng kể, bằng cách giảm số lượng yêu cầu gửi đến server. Người dùng sẽ có được một cái nhìn rõ ràng hơn về cách sử dụng browser caching để cải thiện tốc độ và trải nghiệm trên trang web của mình. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách triển khai browser caching bằng cách sử dụng module header của Nginx trên CentOS 7.

Yêu cầu để triển khai Browser Caching với header Module của Nginx trên CentOS 7

Người dùng cần chuẩn bị như sau:

Yêu cầu để triển khai Browser Caching với header Module của Nginx trên CentOS 7
Yêu cầu để triển khai Browser Caching với header Module của Nginx trên CentOS 7

Bước 1 – Tạo các test files

Bạn sẽ tạo một số test files trong thư mục mặc định của Nginx. Bạn sẽ sử dụng các file này sau để kiểm tra hành vi mặc định của Nginx và sau đó để kiểm tra xem bộ nhớ cache trình duyệt có hoạt động hay không.

Vì Nginx không phân tích nội dung của file, nên việc quyết định loại file nào được phục vụ trên mạng  sẽ rất chậm. Thay vào đó, nó chỉ xem xét phần mở rộng của file để xác định loại MIME của file, và cho biết mục đích của file.

Do thực hiện điều này, nên nội dung của các test files bạn sẽ không phù hợp. chúng ta có thể lừa Nginx bằng cách đặt tên cho các file một cách phù hợp, ví dụ, một file hoàn toàn trống là một hình ảnh và một file là một stylesheet.

Tạo một file có tên là test.html trong thư mục mặc định của Nginx bằng cách sử dụng lệnh truncate. Phần mở rộng này cho biết đó là một trang HTML.

sudo truncate -s 1k /usr/share/nginx/html/test.html

Bằng cách như trên hãy tạo thêm một số test files như: một file ảnh jpg, một file stylesheet css và một file JavaScript js.

sudo truncate -s 1k /usr/share/nginx/html/test.jpg
sudo truncate -s 1k /usr/share/nginx/html/test.css
sudo truncate -s 1k /usr/share/nginx/html/test.js

Bước 2 – Kiểm tra Hành vi Mặc Định

Tất cả các file sẽ có cùng hành vi lưu trữ cache. Để hiểu hơn về điều này, bạn sẽ sử dụng file HTML bạn đã tạo trong bước 1, nhưng bạn cũng có thể kiểm tra với bất kỳ file mẫu nào.

Vì vậy, hãy kiểm tra xem test.html có được phục vụ bằng bất kỳ thông tin nào liên quan đến thời gian bộ nhớ cache, mà trình duyệt lưu trữ phản hồi không. Lệnh tiếp theo sẽ yêu cầu một file từ server Nginx cục bộ của bạn và hiển thị response headers.

curl -I http://localhost/test.html

Bạn nên xem một vài response headers HTTP:

Output: Nginx response headers
HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:21:04 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive
ETag: "57f6257c-400"
Accept-Ranges: bytes

Ở dòng thứ hai từ dưới lên, bạn có thể thấy ETag header, chứa một định danh duy nhất cho phiên bản cụ thể của file được yêu cầu. Nếu bạn thực hiện lệnh curl trước đó nhiều lần, bạn sẽ thấy giá trị ETag giống hệt nhau.

Khi sử dụng trình duyệt web, giá trị ETag được lưu trữ và gửi lại cho server với request header If-None-Match khi trình duyệt muốn yêu cầu lại file giống vậy. Ví dụ như khi trang web được làm mới.

Chúng ta có thể mô phỏng điều này bằng dòng lệnh sau. Hãy đảm bảo bạn thay đổi giá trị ETag trong lệnh này để phù hợp với giá trị ETag trong output trước đó của bạn.

curl -I -H 'If-None-Match: "57f6257c-400"' http://localhost/test.html

Phản hồi bây giờ sẽ khác:

Output: Nginx response headers
HTTP/1.1 304 Not Modified
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:21:40 GMT
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive
ETag: "57f6257c-400"

Lần này, Nginx sẽ thông báo 304 Not Modified. Nó sẽ không gửi file qua mạng lần nữa; thay vào đó, nó sẽ thông báo cho trình duyệt rằng nó có thể tái sử dụng file đã được tải xuống cục bộ.

Dù điều này không đủ điều kiện để đạt được hiệu suất bộ nhớ cache tốt, nhưng rất hữu ích vì nó giảm lưu lượng mạng. Vấn đề xảy ra với ETag là trình duyệt luôn luôn gửi yêu cầu đến server để hỏi liệu nó có thể tái sử dụng file được lưu trữ trong bộ nhớ cache hay không. Ngay cả khi server phản hồi với 304 thay vì gửi lại file, việc thực hiện yêu cầu và nhận phản hồi này vẫn tốn thời gian.

Bước 3 – Cấu hình cho Cache-Control và Expires Headers

Ngoài header file xác nhận ETag, còn có hai response files điều khiển bộ nhớ cache: Cache-ControlExpires. Trong đó Cache-Control là phiên bản mới hơn, có nhiều tùy chọn hơn Expires và thường hữu ích hơn nếu bạn muốn kiểm soát hành vi bộ nhớ cache của mình tốt hơn.

Nếu cài đặt các header này, chúng có thể cho trình duyệt biết rằng file được yêu cầu có thể được lưu trữ cục bộ trong một khoảng thời gian nhất định (có thể là vĩnh viễn) mà không cần yêu cầu lại. Nếu các header không được đặt, trình duyệt sẽ luôn yêu cầu file từ server,phản hồi dự kiến sẽ là 200 OK hoặc 304 Not Modified.

Chúng ta có thể sử dụng header module để đặt các header HTTP này. Module header là một core module của Nginx, điều này có nghĩa là nó không cần cài đặt riêng để sử dụng.

Để thêm header module, hãy mở file cấu hình server block mặc định Nginx bằng vi hoặc ứng dụng chỉnh sửa tương tự.

sudo vi /etc/nginx/nginx.conf

Tìm cấu hình server block, có dạng như sau:

. . .
server {
    listen 80 default_server;
    listen [::]:80 default_server;
. . .

Thêm hai phần mới sau vào đây: một phần trước server block, để xác định thời gian lưu trữ bộ nhớ cache cho các loại file khác nhau, và một phần trong đó, để thiết lập các caching header một cách phù hợp.

. . .
# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    expires $expires;
. . .

Phần trước server block là block map mới, nó chỉ định việc mapping giữa file và thời gian file lưu trong bộ nhớ cache.

Bạn sẽ sử dụng một số thiết lập khác nhau trong map này:

  • Giá trị mặc định được đặt thành off, sẽ không thêm bất kỳ caching control headers. Điều này đảm bảo an toàn cho nội dung mà người dùng không yêu cầu cụ thể về cách cache hoạt động.
  • Đối với text/html, chúng tôi đặt giá trị thành epoch. Đây là một giá trị đặc biệt không dùng đến caching, và sẽ luôn yêu cầu tải lại trạng thái dữ liệu mỗi khi truy cập trang web.
  • Đối với text/cssapplication/javascript, đó là các file stylesheet và file Javascript, bạn đặt giá trị là max. Điều này có nghĩa là trình duyệt sẽ lưu trữ bộ nhớ cache cho những file này càng lâu càng tốt, và giảm số lượng yêu cầu đáng kể vì thường có nhiều file như vậy.
  • Thiết lập cuối cùng là cho ~image/, đó là một biểu thức phù hợp với tất cả các loại file chứa image/ trong tên MIME của chúng (như image/jpgimage/png). Giống như các stylesheet, thường có rất nhiều hình ảnh trên các trang web có thể được lưu trữ một cách an toàn, vì vậy bạn cũng đặt giá trị này thành max.

Trong server block, chỉ thị expires (một phần của header module) thiết lập các caching control headers. Nó sử dụng giá trị từ biến $expires được đặt trong map. Điều này có nghĩa là, các header kết quả sẽ khác nhau tùy thuộc vào loại file.

Lưu và đóng file để thoát.

Để kích hoạt cấu hình mới, khởi động lại Nginx.

sudo systemctl restart nginx

Bước 4 – Kiểm tra Browser Caching

Thực hiện yêu cầu tương tự như trước đó cho HTML test file.

curl -I http://localhost/test.html

Lần này phản hồi sẽ khác. Có hai response headers HTTP bổ sung:

HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:24:42 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive
ETag: "57f6257c-400"
Expires: Thu, 01 Jan 1970 00:00:01 GMT
Cache-Control: no-cache
Accept-Ranges: bytes

Nếu Expires header hiển thị ngày trong quá khứ và Cache-Control được thiết lập với no-cache, giá trị này nhắc trình duyệt luôn hỏi yêu cầu cho server nếu có phiên bản mới của file (sử dụng ETag header, giống như trước đó).

Bạn sẽ thấy một phản hồi khác tại test file hình ảnh.

curl -I http://localhost/test.jpg
HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:25:02 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:46 GMT
Connection: keep-alive
ETag: "57f6257e-400"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Accept-Ranges: bytes

Expires sẽ hiển thị ngày trong tương lai và Cache-Control chứa thông tin về max-age, cho biết trình duyệt có thể lưu bộ nhớ cache của file trong một khoảng thời gian cụ thể tính bằng giây. Điều này cho phép trình duyệt lưu bộ nhớ cache hình ảnh đã tải xuống trong thời gian lâu dài, vì vậy hình ảnh xuất hiện tiếp theo này đều sử dụng bộ nhớ cache cục bộ và không gửi yêu cầu đến server.

Kết quả sẽ là tương tự cho cả test.jstest.css, vì cả file JavaScript và stylesheet đều được thiết lập với các caching headers.

Điều này có nghĩa là các cache control headers đã được cấu hình đúng và trang web của bạn sẽ được hưởng lợi từ việc tăng hiệu suất và giảm yêu cầu server do bộ nhớ cache của trình duyệt. Bạn nên tùy chỉnh các thiết lập caching dựa trên nội dung, cho trang web của mình.

Bên cạnh việc cài đặt Browser Caching với header Module của Nginx trên CentOS 7 để giảm thời gian tải trang, giảm tải cho máy chủ và tiết kiệm băng thông mạng. Thì VPS cũng là một yếu tố ảnh hưởng đến hiệu suất và tốc độ tải trang web.

Hiện tại Vietnix đang cung cấp nhiều gói VPS tốc độ cao với nhiều tính năng, cấu hình đa dạng kèm theo giá cả cạnh tranh rất phù hợp cho nhu cầu phát triển website, gồm: VPS Giá Rẻ, VPS Cloud Server, VPS Cao Cấp, VPS GPU và VPS NVMe.

Ngoài ra, khi đăng ký dịch vụ VPS tại Vietnix bạn còn được tặng miễn phí bộ theme và plugin WordPress có giá trị lên đến 50.000.000 VND giúp tối ưu việc tạo và phát triển website.

Hiẹn tại, Vietnix là nhà cung cấp VPS uy tín hàng đầu Việt Nam11 năm kinh nghiệm cùng hơn 50.000 khách hàng đã và đang sử dụng. Không chỉ được đánh giá cao về chất lượng sản phẩm, Vietnix cũng rất chú trọng đến dịch vụ hỗ trợ khách hàng. Vì vậy, đến 97% khách hàng đã sử dụng dịch vụ vủa Vietnix đều có đánh giá 5 sao.

Đặc biêt, Vietnix luôn không ngừng nỗ lực nâng cao chất lượng và mang lại sự hài lòng cho khách hàng, Vietnix đã nhận được giải thưởng Thương hiệu Việt Nam xuất sắc năm 2022.

Trải nghiệm VPS tốc độ cao với mức giá cạnh tranh ngay hôm nay!

  • Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh
  • Hotline: 1800 1093
  • Email: sales@vietnix.com.vn

Lời kết

Headers module có thể được sử dụng để thêm bất kỳ headers tùy ý nào vào phản hồi, nhưng thiết lập đúng các bộ nhớ cache của control headers là một trong những ứng dụng hữu ích nhất của nó. Trên đây Vietnix đã hướng dẫn bạn cách triển khai Browser Caching với header Module của Nginx trên CentOS 7. Trong quá trình thao tác có gì thắc mắc bạn có thể liên hệ Vietnix để được tư vấn.

THEO DÕI VÀ CẬP NHẬT CHỦ ĐỀ BẠN QUAN TÂM

Đăng ký ngay để nhận những thông tin mới nhất từ blog của chúng tôi. Đừng bỏ lỡ cơ hội truy cập kiến thức và tin tức hàng ngày

Chọn chủ đề :

Hưng Nguyễn

Co-Founder
tại

Kết nối với mình qua

Kết nối với mình qua

Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Tăng tốc độ website - Nâng tầm giá trị thương hiệu

Tăng tốc tải trang

95 điểm

Nâng cao trải nghiệm người dùng

Tăng 8% tỷ lệ chuyển đổi

Thúc đẩy SEO, Google Ads hiệu quả

Tăng tốc ngay

SẢN PHẨM NỔI BẬT

7 NGÀY DÙNG THỬ HOSTING

NẮM BẮT CƠ HỘI, THÀNH CÔNG DẪN LỐI

Cùng trải nghiệm dịch vụ hosting tốc độ cao được hơn 100,000 khách hàng sử dụng

ĐĂNG KÝ NHẬN TÀI LIỆU THÀNH CÔNG
Cảm ơn bạn đã đăng ký nhận tài liệu mới nhất từ Vietnix!
ĐÓNG

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

ĐĂNG KÝ DÙNG THỬ HOSTING

7 NGÀY MIỄN PHÍ

XÁC NHẬN ĐĂNG KÝ DÙNG THỬ THÀNH CÔNG
Cảm ơn bạn đã đăng ký thông tin thành công. Đội ngũ CSKH sẽ liên hệ trực tiếp để kích hoạt dịch vụ cho bạn nhanh nhất!
ĐÓNG