Trang chủ » Thủ thuật Web » 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 của Google Pagespeed nhằm giúp các tài nguyên như HTML, Javascript, CSS và hình ảnh được tải nhanh hơn. Điều này giúp người dùng truy cập trang web của bạn một cách nhanh chóng hơn và giảm tải tài nguyên trên máy chủ của bạn.

  • Người truy cập không cần tải các tài nguyên trước đó từ máy chủ của bạn. Các tài nguyên này được trình duyệt lưu vào bộ nhớ và truy xuất cho các lần sau.
  • Đặc biệt hiệu quả trên các trang web mà người dùng thường xuyên truy cập lại các vùng giống nhau của các trang web.
  • Giảm tải máy chủ và tăng tốc độ với người truy cập.

Bộ nhớ cache trong trình duyệt là gì?

Mỗi khi trình duyệt tải một trang web, nó cũng cần tải về tất cả các tập tin để hiển thị trang web đúng cách. Điều này bao gồm tất cả các HTML, CSS, Javascript và hình ảnh.

Dù các tài nguyên của trang web là lớn hay nhỏ, việc tải đi tải lại các tài nguyên này là tốn thời gian và không cần thiết.

Có 2 vấn đề ở đây là:

  1. Các tập tin có kích thước lớn mất nhiều thời gian để tải. Điều này có thể là thảm họa đối với một máy tính có kết nối chậm hoặc một thiết bị di động.
  2. Mỗi lần trang web được tải thì máy chủ web của bạn phải xử lý tất cả các yêu cầu này. Điều này làm hao tổn tài nguyên máy chủ và dẫn đến trang web được truyền tải một cách chậm chạp.

Bộ nhớ cache trong trình duyệt có thể giúp lưu một số tập tin của trang web vào bộ nhớ đệm của trình duyệt người dùng. Khi các tập tin này được tải lần đầu tiên, trình duyệt sẽ lưu các tập tin này lại. Bắt đầu từ các lần truy cập tiếp theo, F5 hoặc chuyển sang trang khác, trình duyệt sẽ truy xuất các tập tin này mà không cần có một truy vấn đến máy chủ.

Tất cả những điều đó có nghĩa rằng trình duyệt sẽ không tải cùng một tài nguyên nhiều hơn một lần. Và tất nhiên, máy chủ của bạn sẽ không xử lý quá nhiều yêu cầu sau đó. Vì vậy trang web được tải nhanh hơn.

Làm thế nào nó hoạt động?

Nâng cao lưu vào bộ nhớ cache trong trình duyệtMáy chủ web của bạn sẽ phải chỉ định một số tập tin và tài nguyên mà trình duyệt cần lưu vào bộ nhớ cache. Ví dụ bạn có một logo và bạn dự định logo của bạn sẽ không được thay đổi trong vòng một tháng, bạn có thể yêu cầu trình duyệt lưu logo của bạn vào cache trong vòng một tháng. Như vậy, trình duyệt sẽ tải logo của bạn một lần đầu tiên và lưu vào cache một tuần, sau đó nó sẽ truy xuất logo đó từ cache mà không tải logo này từ máy chủ của bạn.

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.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

11 Bình luận

  1. Avatar của tran quang hieu

    anh oi !giúp em với
    Tận dụng bộ nhớ đệm của trình duyệt cho các tài nguyên có thể lưu vào bộ nhớ cache sau:
    ……….
    như vậy sửa sao anh

    • Avatar của Nguyễn Tứ

      Bạn cài W3 Total Cache rồi tìm hướng dẫn để cấu hình nó xem.

  2. Avatar của Vnhapy

    Với blogpsot thì làm như nào bạn?

    • Avatar của Nguyễn Tứ

      Mình không dùng Blogspot nên cũng không biết nữa.

  3. Avatar của Duy

    Bạn hướng dẫn mình kỹ hơn về cái này với

    • Avatar của Tứ Nguyễn

      Mình k biết phải nói gì kỹ hơn nữa ạ. Bạn tự tìm hiểu thêm nhé.

      • Avatar của Duy

        .htaccess trong thư mục root trang web cái này ở đâu vậy bạn

        • Avatar của Tứ Nguyễn

          Trên HOST của bạn đấy. Nếu bạn xài WordPress thì có thể cài các Plugin như W3 Total Cache, WP Super Cache… bạn lên mạng tìm hướng dẫn thêm nhé.

  4. Avatar của Tải Cốc Cốc, taicoccocvn

    rất hay, hữu ích cho mọi người, thanks

  5. Avatar của hphan

    hay lắm, tks ad đã chia sẻ 😀

  6. Avatar của Administrator

    Mặc dù dùng CDN nhưng cũng thích cache cái này lắm 😀