Question

Máy chủ NGINX không nén font chữ woff và woff/2 trước khi gửi về trình duyệt?

0

Ðức STU • 0 đã đăng:

Chào các bạn, có bạn nào bên lập trình web không cho mình hỏi vấn đề này tí ạ.

Mình đang làm một website đơn giản, trong phần cài đặt và sử dụng máy chủ NGINX , mọi thứ đã chạy ổn định.

Tiếp đến, mình bật nén các tập tin javascript, css, image và tập tin font chữ bao gồm: woff, eot, woff2 trước khi máy chủ gửi về trình duyệt bằng cách thêm vào file nginx.conf như sau:

...
gzip on;
gzip_types application/javascript image/png image/jpeg text/html text/css application/vnd.ms-fontobject font/woff font/woff2;
...

Kiểm tra lại với câu lệnh sudo nginx -t không báo lỗi, sau đó mình khởi động lại NGINX, và vào trình duyệt để test thử, kết quả như hình bên dưới,

Thời gian tải trang trong công cụ phát triển Google Chrome

Trong phần khung màu xanh, tập tin javascript và css đã được nén lại chỉ còn 4.07 KB và 30.08 KB, còn trong phần khung màu đỏ, tập tin font chữ woff và woff2 không được nén trong khi tập tin font chữ eot lại được nén (mình không chụp tập tin eot trong ảnh).

Cho mình hỏi tại sao NGINX giải nén tất cả file mình muốn trong gzip_types mà lại bỏ qua những file có đuôi .woff và .woff2 vậy? Tất nhiên là không có chuyện mình cài sai định dạng được, font/woff và font/woff2 trong gzip_types là đã đúng cú pháp, rất mong nhận được sự giúp đỡ? Thanks.

công nghệ phần mềm lập trình web nginx (máy chủ web) font cài đặt máy chủ web

• •

đã hỏi 5.6 năm trước bởi

Ðức STU • 0

Không cần phải nén các file nhị phân như file hình ảnh: image/png image/jpeg, bởi vì bản thân chúng đã là được nén rồi, việc nén thêm bằng gzip không những không có hiệu quả đáng kể mà còn có thể tăng ngược lại dung lượng file được truyền đi so với file gốc.

– viétkâz 20.09.2018

thêm bình luận...

minhkiet đã đăng 5.6 năm trước bởi minhkiet • **150** · Accepted Answer

Đoạn code bạn cài đặt cho NGINX là đúng, máy chủ NGINX cũng không hề có lỗi, nguyên nhân là do trình duyệt Web không yêu cầu máy chủ phải nén những tập tin font chữ có đuôi .woff hoặc .woff2 cho nên không có một lý do gì khiến máy chủ NGINX phải nén những file này cả.

Trình duyệt Web làm điều này bằng cách nào?

Trong gói tin HTTP gửi đến Server, trình duyệt Web sẽ thêm một Header có tên Accept-Encoding với ý nghĩa nó muốn gói tin trả lời từ server được nén như thế nào, dựa vào thông tin này, server có thể dùng thuật toán nén cho phù hợp, ví dụ đối với tập tin javascript, trình duyệt sẽ gửi yêu cầu với Header cụ thể như sau,

Accept-Encoding: gzip, deflate, br

Có nghĩa là đối với file javascript này, trình duyệt sẽ chấp nhận 3 loại thuật toán nén gzip, deflate hoặc br. Khi server nhận được yêu cầu này, nó biết là tập tin này cần phải được nén trước khi gửi trả về, máy chủ có 3 lựa chọn để nén file, do đó nó sẽ xem xem trong phần cấu hình, bạn chọn loại nén nào, ở đây bạn chọn gzip on;, server sử dụng thuật toán gzip để nén file javascript, kết quả là mọi thứ đúng như bạn mong đợi.

Nhưng đối với file font chữ có đuôi .woff hoặc .woff2 thì sao? Trình duyệt không yêu cầu Server phải nén những loại tập tin này bằng một Header cụ thể như sau,

Accept-Encoding: identity

Khi giá trị của Accept-Encoding là identity, NGINX hiểu là những file này không cần phải giải nén, vậy thì được thôi, máy chủ NGINX sẽ không cần làm gì hết cho mệt, chỉ cần gửi đúng gói tin đó về là xong.

Vậy tại sao tập tin font chữ có đuôi .woff hoặc .woff2 không được trình duyệt gửi yêu cầu nén trong khi tập tin font chữ .oet lại được gửi yêu cầu nén?

Câu trả lời rất đơn giản, những loại tập tin font chữ dành cho website như .eot đã có từ rất lâu đời, tồn tại những điểm hạn chế rất lớn trong đó có hạn chế đó là chiếm nhiều dung lượng, cho nên cần phải được nén trước khi được truyền đi trong mạng.

Còn hai loại font chữ .woff và .woff2 được ra đời mới đây đã khắc phục những điểm hạn chế trên, đồng thời bản thân .woff đã được nén một cách tối ưu bằng thư viện zlib, .woff2 được cải thiện thậm chí còn tốt hơn .woff, do đó, khi trình duyệt Chrome, Firefox, ...v.v. xác định tập tin font chữ nào đó có dạng .woff hoặc .woff2 thì nó không cần yêu cầu server phải nén trước khi truyền tải nữa.