Nâng cao lưu vào bộ nhớ đệm trong trình duyệt là một trong những keyword được search nhiều nhất trên Google về chủ đề nâng cao lưu vào bộ nhớ đệm trong trình duyệt. Trong bài viết này, hoclamweb.vn sẽ viết bài viết Hướng dẫn nâng cao lưu vào bộ nhớ đệm trong trình duyệt mới nhất 2020.
Hướng dẫn nâng cao lưu vào bộ nhớ đệm trong trình duyệt mới nhất 2020
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 giống như HTML, Javascript, CSS và hình ảnh được đăng nhanh hơn. Điều này giúp user truy cập website của bạn một hướng dẫn gấp rút hơn và giảm đăng 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 web mà user thường xuyên truy cập lại các vùng giống nhau của các trang web.
- Giảm đăng máy chủ và tăng trưở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 website, nó cũng cần download all các tập tin để hiển thị website đúng phương pháp. Điều này gồm có tất cả các HTML, CSS, Javascript và hình ảnh.
Dù các tài nguyên của web là to hay nhỏ, việc đăng đi tải lại các tài nguyên này là tốn thời gian và không quan trọng.
Có 2 vấn đề ở đây là:
- Các tập tin có click 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ó liên kết chậm hoặc một thiết bị di động.
- Mỗi lần website được đăng thì máy chủ website của bạn phải giải quyết 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 website được share một cách chậm chạp.
Bộ nhớ cache trong trình duyệt đủ sức 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. kể từ các lần truy cập kế tiếp, 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ủ.
all 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ẽ k xử lý quá nhiều yêu cầu sau đó. vì thế website đượ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. gợi ý bạn có một logo và bạn dự định logo của bạn sẽ k được thay đổi trong vòng một tháng, bạn đủ nội lực 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. giố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 đăng 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
so với Apache, tìm đến tập tin .htaccess trong thư mục root website 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:
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 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 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 # DEFLATE by extension AddOutputFilter DEFLATE js css htm html xml FileETag MTime Size Header set Pragma "public" Header append Cache-Control "public" Header unset Set-Cookie FileETag MTime Size Header append Vary User-Agent env=!dont-vary Header set Pragma "public" Header append Cache-Control "public" FileETag MTime Size Header set Pragma "public" Header append Cache-Control "public" Header unset Set-Cookie Header unset Last-Modified
giống 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 cải thiện content của các tài nguyên mà bạn đủ sức 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 domain của bạn.
server svg
so với WordPress, bạn đủ nội lực 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 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ải tiến. user có thể không truy cập được phiên bản mới của web kịp thời. Vì thê hãy dùng thời hạn cache ngắn hơn cho các tài nguyên này.
- Bạn k thể cache trong trình duyệt so với các tài nguyên nằm trên một server khác như Google, Fb, 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, cho nên nó có thể giúp bạn thay đổi được tốc độ và xếp hạng rất khả quan. Để rà soát web của bạn, vui lòng vào Google Pagespeed.
nguồn: sitecuatui.com
