HƯỚNG DẪN CẤU HÌNH BROWSER CACHING ĐỂ TĂNG TỐC ĐỘ LOAD WEBSITE.

Xin chào các bạn!

Đến với bài viết này các bạn sẽ được hướng dẫn cấu hình rất có ích cho website của mình là Browser caching. Trước tiên ta nên tìm hiểu sơ bộ về browser caching là gì? để ta có thể hiểu nó góp phần như thế nào trong việc tăng tốc độ load trang web của chúng ta.

Browser cache là gì?

Browser cache sẽ cho phép lưu lại các tập tin trong mã nguồn website của chúng ta trên máy tính cá nhân khi máy tính đó truy cập đến trang web.

Cách để sử dụng browser cache là khi người quản trị có chỉ thị cho phép các trình duyệt biết cách để xử lý các tập tin trong mã nguồn như thế nào.

Khi bạn truy cập vào website thì trình duyệt sẽ hiển thị trang của bạn lúc đó trình duyệt sẽ tải và xử lý các thành phần trong website như hình ảnh, java, css, content.

Sau khi dùng trình duyệt truy cập vào website đã được cấu hình browser cache thì bộ nhớ đệm (cache) của trình duyệt sẽ lưu lại những tập tin như đã được chỉ thị, lần truy cập tiếp theo trình duyệt sẽ không request đến server các file đã lưu tại cache của trình duyệt nữa mà sẽ tự lấy kết quả từ cache đã được lưu, chính vì thế với lần truy cập tiếp theo website của bạn sẽ có thời gian tải nhanh hơn rất nhiều so với lần tải đầu tiên.

Cách cấu hình browser caching.

Đối với hầu hết mọi người cách phổ biến nhất để cấu hình browser cache là ta thêm 1 số đoạn code vào file .htaccess trong mã nguồn của website. Tuy nhiên trước khi thực hiện cấu hình trong file .htaccess ta nên tìm hiểu sơ bộ các chức năng của file .htaccess. Vì tập tinn này rất quan trọng đối với website nó kiểm soát rất nhiều các chức năng quan trọng trong website.

Ta có thể thêm các dòng sau vào cuối file .htaccess để cấu hình browser cache.

## EXPIRES CACHING ##
<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault "access plus 1 month"

ExpiresByType application/javascript "access plus 1 year"

ExpiresByType image/x-ico "access plus 1 year"

ExpiresByType image/jpg "access plus 14 days"

ExpiresByType image/jpeg "access plus 14 days"

ExpiresByType image/gif "access plus 14 days"

ExpiresByType image/png "access plus 14 days"

ExpiresByType text/css "access plus 14 days"

ExpiresByType text/html "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType text/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

</IfModule>

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/opentype

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

</IfModule>
## EXPIRES CACHING ##

Ta lưu file lại và dùng trình duyệt truy cập vào thử để nhận thấy sự thay đổi.

Đến đây là các bạn có thể tăng tốc độ load trang của bạn rồi đấy. Cám ơn các bạn đã đón xem.

Chúc các bạn thành công!