Browser cache là gì? Ảnh hưởng đến tốc độ tải web ra sao?
Browser cache là một thuật ngữ không mấy xa lạ với các web developer và cả người dùng web. Khi người dùng gặp sự cố trên trang web họ truy cập, họ có thể được hướng dẫn để xóa bộ nhớ cache trên trình duyệt. Bizfly Cloud sẽ phân tích cụ thể hơn về browser cache là gì, ảnh hưởng đến hiệu năng website như thế nào. Bên cạnh đó, hướng dẫn cấu hình bộ nhớ đệm trong bài sẽ giúp cải thiện tốc độ tải đáng kể cho website.
1. Bộ nhớ đệm của trình duyệt (browser cache) là gì?
Khi người dùng sử dụng trình duyệt trên máy tính (IE, Firefox, Chrome...) để truy cập vào 1 trang web bất kỳ, trình duyệt sẽ tải các thành phần từ trên webserver xuống như hình ảnh,font chữ, file text....và kết hợp các thành phần này thành giao diện trang web hoàn chỉnh hiển thị trên trình duyệt.
Bộ nhớ đệm của trình duyệt là 1 vùng lưu trữ dữ liệu trên ổ cứng hoặc trên RAM của máy tính, dùng để lưu trữ tạm thời dữ liệu được trình duyệt tải về. Các dữ liệu sẽ được lưu tại bộ nhớ đệm này thường là các file hình ảnh, file html, file css, file javascript, tùy thuộc vào webserver chỉ định sẽ lưu loại nào trên cache.
Sau 1 thời gian được chỉ định, các dữ liệu này sẽ bị xóa đi hoặc được cập nhật mới.
Các lần truy cập sau này vào trang web, thay vì tải các file có định dạng trên từ webserver, trình duyệt sẽ kiểm tra trong bộ nhớ đệm trước , và sẽ tải từ bộ nhớ đệm ra nếu file tồn tại.
Nếu các file chưa có, trình duyệt sẽ gửi yêu cầu tới webserver để tải về.
2. Bộ nhớ đệm của trình duyệt ảnh hưởng đến hiệu năng website như thế nào?
Bộ nhớ đệm của trình duyệt giúp website tải nhanh hơn.
Nguyên nhân:
- Bộ đệm trình duyệt giúp giảm tải cho máy chủ, giúp máy chủ phục vụ được nhiều yêu cầu khác, các yêu cầu được xử lý nhanh hơn vì giảm thời gian chờ.
Với các dữ liệu được lưu trên bộ nhớ đệm, khi người dùng truy cập vào trang web, trình duyệt sẽ lấy từ bộ nhớ đệm ra, thay vì gửi yêu cầu lên webserver, chờ server xử lý và gửi kết quả về.
Như vậy, giả sử trước đó máy người dùng phải gửi 100 request lên server, thì bây giờ, chỉ cần gửi 60 request yêu cầu server xử lý, và trả dữ liệu về.
Server phải xử lý ít hơn, nên sẽ xử lý nhanh hơn, trong 1 khoảng thời gian sẽ phục vụ được nhiều người dùng hơn.
- Tải dữ liệu từ bộ nhớ đệm trình duyệt sẽ nhanh hơn tải từ máy chủ nên thời gian tải trang sẽ giảm, giúp website nhanh hơn.
- Giảm dung lượng dữ liệu truyền tải từ server về máy người dùng do 1 phần dữ liệu đã được lưu trữ sẵn trong máy. Điều này sẽ giúp giảm thời gian tải trang. Việc giảm dung lượng truyền tải này còn đặc biệt có ý nghĩa trong bài toán tối ưu băng thông, tối ưu chi phí truyền tải.
3. Hướng dẫn cấu hình bộ nhớ đệm trình duyệt trên webserver.
Bộ nhớ đệm trình duyệt chọn các dữ liệu sẽ lưu lại trên máy của người dùng khi truy cập trang web dựa vào phần cấu hình của webserver đó quy định. Các loại dữ liệu được chọn thường là hình ảnh, video, file html, css hoặc javascript và các file tĩnh khác..
Sau đây là hướng dẫn cấu hình cho 1 số loại webserver thông dụng : Apache, Nginx và IIS.
3.1 Cấu hình browser cache cho Nginx
Chèn đoạn code sau đây vào trong server block (server {...}) của NginX, thường nằm ở đường dẫn /etc/nginx/site-enabled/default:
Cách 1: Cấu hình sử dụng Cache-Control headers:
location ~* \.(jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ { expires 365d; add_header Cache-Control "public, no-transform"; } location ~* \.(js|css|pdf|html|swf)$ { expires 30d; add_header Cache-Control "public, no-transform"; } Cách 2: Cấu hình sử dụng Expires Header
location ~* \.(jpg|jpeg|webp|gif|png)$ { expires 365d; } location ~* \.(pdf|css|html|js|swf)$ { expires 30d; } Khởi động lại nginx. 3.2. Cấu hình browser cache cho Apache
Cách 1: Thêm cấu hình Cache-Control Header trên server chạy Apache bằng cách thêm các dòng sau vào file .htaccess
<IfModule mod_headers.c> <FilesMatch "\.(ico|jpg|jpeg|png|gif|css)$"> Header set Cache-Control "max-age=2678400, public" </FilesMatch> <FilesMatch "\.(html|htm)$"> Header set Cache-Control "max-age=7200, private, must-revalidate" </FilesMatch> <FilesMatch "\.(pdf)$"> Header set Cache-Control "max-age=86400, public" </FilesMatch> <FilesMatch "\.js$"> Header set Cache-Control "max-age=2678400, private" </FilesMatch> </IfModule> Cách 2: Thêm cấu hình Expires Header trên server chạy Apache bằng cách thêm các dòng sau vào file .htaccess
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 7 days" </IfModule> ## EXPIRES CACHING ## Khởi động lại Apache
Chú ý: Trong 1 số trường hợp, sử dụng cấu hình Cache-Control thường được ưu tiên hơn vì tính linh hoạt . Khi thay đổi nội dung của một file và muốn tất cả người dùng đều phải request lại nó, chỉ cần đổi tên riêng file và các liên kết tới file đó.
3.3. Cấu hình browser cache cho IIS
Thêm phần cấu hình sau vào trong file web.config
<configuration> <system.webServer> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" /> </staticContent> </system.webServer> </configuration> Khởi động lại IIS.
Trên đây là 1 số cách phổ biến để cấu hình cho các loại webserver thông dụng. Ngoài ra còn 1 số cách khác như cấu hình trong source code hoặc dùng các plugin cache.
4. Kiểm tra việc cấu hình browser cache
Các bạn cũng có thể sử dụng Chrome Developer Tools để kiểm tra xem cấu hình trên đã nhận đúng chưa.
Thực hiện: Click chuột phải vào giao diện website => chọn Inspect => chọn tab Network => Reload (F5) website => click vào link của 1 file tĩnh bất kỳ (link thuộc website của bạn chứ không phải link của 1 site khác ) và kiểm tra kết quả:
Như vậy chúng ta đã cấu hình xong browser cache cho webserver.
Ngoài các phương pháp trên, bạn có thể tham khảo CDN (Content delivery network), giải pháp truyền tải nội dung của Bizfly Cloud đã tích hợp đầy đủ các tính năng tối ưu cho tệp trong đó có cấu hình browser cache.
Việc tích hợp CDN vào website của bạn được cấu hình trong source code, không phụ thuộc vào loại webserver bạn sử dụng nên tính linh hoạt cao, không bị ảnh hưởng khi cấu hình của webserver thay đổi.
Tuy nhiên, bạn cũng cần lưu ý: Không phải CDN của nhà cung cấp nào cũng sở hữu tính năng TỰ ĐỘNG cấu hình tiện ích này. Các liên kết sử dụng Bizfly CDN sẽ được cấu hình browser cache hoàn toàn tự động, bạn sẽ không phải thực hiện các thao tác thủ công hao tổn thời gian và công sức, bên cạnh đó trải nghiệm thêm những tác động vô cùng tích cực CDN mang lại cho website của bạn.
Ngoài ra, Bizfly CDN còn cung cấp một số tính năng tối ưu khác giúp tăng tốc độ tải web tới 16 lần như:
- Tối ưu CSS và JS
- Tinh gọn các Metadata của hình ảnh (Image's Metadata Stripping)
- Nén ảnh giảm dung lượng, giữ nguyên chất lượng (Image Recompressing)
- Tự động chỉnh sửa kích cỡ hình ảnh (Automatic image resizing)
- Tối ưu tốc độ load trang bằng Progressive Image Loading
Tham khảo thêm về các tính năng được hỗ trợ trong Bizfly CDN: https://bizflycloud.vn/tin-tuc/vi-sao-dich-vu-cdn-cua-vccloud-tot-nhat-tai-viet-nam--20180607152233564.htm
Để giúp khách hàng có thể trải nghiệm và cảm nhận chất lượng dịch vụ chân thực và trực tiếp nhất, Bizfly Cloud hiện đang hỗ trợ MIỄN PHÍ CDN bản dùng thử 100GB trong 30 ngày.
Theo Bizfly Cloud
