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à:
- 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.
- 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?
Má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.
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
Bạn cài W3 Total Cache rồi tìm hướng dẫn để cấu hình nó xem.
Với blogpsot thì làm như nào bạn?
Mình không dùng Blogspot nên cũng không biết nữa.
Bạn hướng dẫn mình kỹ hơn về cái này với
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é.
.htaccess trong thư mục root trang web cái này ở đâu vậy bạ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é.
rất hay, hữu ích cho mọi người, thanks
hay lắm, tks ad đã chia sẻ 😀
Mặc dù dùng CDN nhưng cũng thích cache cái này lắm 😀