Nâng cao lưu vào bộ nhớ cache trong trình duyệt

Nâng cao lưu vào bộ nhớ cache trong trình duyệt

Để nâng cao lưu vào bộ nhớ cache trong trình duyệt, bạn cần phải thay đổi HTTP headers của loại tập tin để trình duyệt có thể nhận dạng.

Apache

Đối với Apache, tìm đến tập tin .htaccess trong thư mục root trang web của bạn. Tập tin này có thể được ẩn nhưng bạn hoàn toàn có thể hiển thị nó trong FileZilla hoặc File Manager ở cPanel.

Bạn cần phải chỉ định loại tập tin cần lưu vào cache và thời gian hết hạn. Chỉnh sửa tập tin này như sau đây:

<IfModule mod_mime.c>
	AddType text/css .css
	AddType text/x-component .htc
	AddType application/x-javascript .js
	AddType application/javascript .js2
	AddType text/javascript .js3
	AddType text/x-js .js4
	AddType text/html .html .htm
	AddType text/richtext .rtf .rtx
	AddType image/svg+xml .svg
	AddType text/plain .txt
	AddType text/xsd .xsd
	AddType text/xsl .xsl
	AddType text/xml .xml
	AddType video/asf .asf .asx .wax .wmv .wmx
	AddType video/avi .avi
	AddType image/bmp .bmp
	AddType application/java .class
	AddType video/divx .divx
	AddType application/msword .doc .docx
	AddType application/vnd.ms-fontobject .eot
	AddType application/x-msdownload .exe
	AddType image/gif .gif
	AddType application/x-gzip .gz .gzip
	AddType image/x-icon .ico
	AddType image/jpeg .jpg .jpeg .jpe
	AddType image/webp .webp
	AddType application/json .json
	AddType application/vnd.ms-access .mdb
	AddType audio/midi .mid .midi
	AddType video/quicktime .mov .qt
	AddType audio/mpeg .mp3 .m4a
	AddType video/mp4 .mp4 .m4v
	AddType video/mpeg .mpeg .mpg .mpe
	AddType application/vnd.ms-project .mpp
	AddType application/x-font-otf .otf
	AddType application/vnd.ms-opentype ._otf
	AddType application/vnd.oasis.opendocument.database .odb
	AddType application/vnd.oasis.opendocument.chart .odc
	AddType application/vnd.oasis.opendocument.formula .odf
	AddType application/vnd.oasis.opendocument.graphics .odg
	AddType application/vnd.oasis.opendocument.presentation .odp
	AddType application/vnd.oasis.opendocument.spreadsheet .ods
	AddType application/vnd.oasis.opendocument.text .odt
	AddType audio/ogg .ogg
	AddType application/pdf .pdf
	AddType image/png .png
	AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
	AddType audio/x-realaudio .ra .ram
	AddType image/svg+xml .svg .svgz
	AddType application/x-shockwave-flash .swf
	AddType application/x-tar .tar
	AddType image/tiff .tif .tiff
	AddType application/x-font-ttf .ttf .ttc
	AddType application/vnd.ms-opentype ._ttf
	AddType audio/wav .wav
	AddType audio/wma .wma
	AddType application/vnd.ms-write .wri
	AddType application/font-woff .woff
	AddType application/font-woff2 .woff2
	AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
	AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresByType text/css A31536000
	ExpiresByType text/x-component A31536000
	ExpiresByType application/x-javascript A31536000
	ExpiresByType application/javascript A31536000
	ExpiresByType text/javascript A31536000
	ExpiresByType text/x-js A31536000
	ExpiresByType text/html A3600
	ExpiresByType text/richtext A3600
	ExpiresByType image/svg+xml A3600
	ExpiresByType text/plain A3600
	ExpiresByType text/xsd A3600
	ExpiresByType text/xsl A3600
	ExpiresByType text/xml A3600
	ExpiresByType video/asf A31536000
	ExpiresByType video/avi A31536000
	ExpiresByType image/bmp A31536000
	ExpiresByType application/java A31536000
	ExpiresByType video/divx A31536000
	ExpiresByType application/msword A31536000
	ExpiresByType application/vnd.ms-fontobject A31536000
	ExpiresByType application/x-msdownload A31536000
	ExpiresByType image/gif A31536000
	ExpiresByType application/x-gzip A31536000
	ExpiresByType image/x-icon A31536000
	ExpiresByType image/jpeg A31536000
	ExpiresByType image/webp A31536000
	ExpiresByType application/json A31536000
	ExpiresByType application/vnd.ms-access A31536000
	ExpiresByType audio/midi A31536000
	ExpiresByType video/quicktime A31536000
	ExpiresByType audio/mpeg A31536000
	ExpiresByType video/mp4 A31536000
	ExpiresByType video/mpeg A31536000
	ExpiresByType application/vnd.ms-project A31536000
	ExpiresByType application/x-font-otf A31536000
	ExpiresByType application/vnd.ms-opentype A31536000
	ExpiresByType application/vnd.oasis.opendocument.database A31536000
	ExpiresByType application/vnd.oasis.opendocument.chart A31536000
	ExpiresByType application/vnd.oasis.opendocument.formula A31536000
	ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
	ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
	ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
	ExpiresByType application/vnd.oasis.opendocument.text A31536000
	ExpiresByType audio/ogg A31536000
	ExpiresByType application/pdf A31536000
	ExpiresByType image/png A31536000
	ExpiresByType application/vnd.ms-powerpoint A31536000
	ExpiresByType audio/x-realaudio A31536000
	ExpiresByType image/svg+xml A31536000
	ExpiresByType application/x-shockwave-flash A31536000
	ExpiresByType application/x-tar A31536000
	ExpiresByType image/tiff A31536000
	ExpiresByType application/x-font-ttf A31536000
	ExpiresByType application/vnd.ms-opentype A31536000
	ExpiresByType audio/wav A31536000
	ExpiresByType audio/wma A31536000
	ExpiresByType application/vnd.ms-write A31536000
	ExpiresByType application/font-woff A31536000
	ExpiresByType application/font-woff2 A31536000
	ExpiresByType application/vnd.ms-excel A31536000
	ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
	<IfModule mod_filter.c>
		AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon image/webp application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel
	<IfModule mod_mime.c>
		# DEFLATE by extension
		AddOutputFilter DEFLATE js css htm html xml
	</IfModule>
	</IfModule>
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
	FileETag MTime Size
	<IfModule mod_headers.c>
		Header set Pragma "public"
		Header append Cache-Control "public"
		Header unset Set-Cookie
	</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|TXT|XSD|XSL|XML)$">
	FileETag MTime Size
	<IfModule mod_headers.c>
		Header append Vary User-Agent env=!dont-vary
		Header set Pragma "public"
		Header append Cache-Control "public"
	</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
	FileETag MTime Size
	<IfModule mod_headers.c>
		Header set Pragma "public"
		Header append Cache-Control "public"
		Header unset Set-Cookie
	</IfModule>
</FilesMatch>
<FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|webp|json|mdb|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|WEBP|JSON|MDB|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$">
	<IfModule mod_headers.c>
		Header unset Last-Modified
	</IfModule>
</FilesMatch>

Như trên, chúng ta thấy loại tập tin và thời hạn cache ở sau cùng mỗi dòng. Tùy theo thời gian thay đổi nội dung của các tài nguyên mà bạn có thể tăng hoặc giảm thời hạn cache tương ứng.

Nginx

Đối với Nginx, thêm đoạn sau vào tệp tin nginx.conf hoặc tệp tin cấu hình cho tên miền của bạn.

server {
	listen          443 ssl http2;
	server_name     sitecuatui.com www.sitecuatui.com;
	root            /sitecuatui.com/public_html;

	.....................

	location ~ \.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip)$ {
		expires 31536000s;
		etag on;
		if_modified_since exact;
		add_header Pragma "public";
		add_header Cache-Control "max-age=31536000, public";
		if ($request_uri ~ ^[^?]*\.(ttf|ttc|otf|eot|woff|woff2|font.css)(\?|$)) {
			add_header Pragma "public";
			add_header Cache-Control "max-age=31536000, public";
			add_header Access-Control-Allow-Origin "*";
		}
		try_files $uri $uri/ $uri.html /index.php?$args;
	}

	.....................
}

Đối với WordPress, bạn có thể dùng một trong các plugin như W3 Total Cache, WP Super Cache…

Lưu ý khi sử dụng bộ nhớ cache trong trình duyệt

• Nên sử dụng bộ nhớ cache trong trình duyệt cho tất cả các tài nguyên tĩnh trên trang web.
• Sử dụng thời hạn cache tối thiểu là một tháng và tối đa là một năm.
• Không nên cache cho các tập tin và tài nguyên mà bạn thường hay cập nhật. Người dùng có thể không truy cập được phiên bản mới của trang web kịp thời. Vì thê hãy sử dụng thời hạn cache ngắn hơn cho các tài nguyên này.
• Bạn không thể cache trong trình duyệt đối với các tài nguyên nằm trên một server khác như Google, Facebook, Twitter…

Nâng cao lưu vào bộ nhớ cache trong trình duyệt là một khuyến nghị của Google Pagespeed, vì thế nó có thể giúp bạn cải thiện được tốc độ và xếp hạng rất tốt. Để kiểm tra trang web của bạn, vui lòng vào Google Pagespeed.