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:
- Một server chạy CentOS 7, có tài khoản user non-root và được cấp quyền sudo.
- Server này đã cài Nginx để sử dụng Module header, ngoài ra bạn cũng sẽ dùng cả module map của Nginx (Hướng dẫn chi tiết cách cài đặt Nginx trên CentOS 7 tại đây)
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.htmlBằ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.htmlBạ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.htmlPhả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-Control và Expires. 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.confTì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ànhepoch. Đâ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/cssvàapplication/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ứaimage/trong tên MIME của chúng (nhưimage/jpgvàimage/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ànhmax.
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 nginxBướ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.htmlLầ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.jpgHTTP/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.js và test.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 Nam có 11 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.
