Việc ảnh hưởng tốc độ khi gtmetrix.com và GooglePage Speed Insights báo Leverage browser caching. Trong bài viết này mình lấy Analytic để hướng dẫn cho các bạn. Không nói nhiều nữa vào tối ưu Leverage browser caching Analytics ngay luôn nào.
Bạn cần biết: Tối ưu Google PageSpeed insights 2020 cho WordPress
Nội dung
Lưu ý khi tối ưu Leverage browser caching Analytics
Khi tối ưu hóa tốc độ trang web của bạn. Khi đó ta làm theo hướng dẫn của GooglePage Speed Insight và gtmetrix. Bạn sẽ biết cảnh báo này. Kích hoạt bộ nhớ đòn bẩy của bộ nhớ cache Bộ nhớ đệm cho Google Analytics Script. Thông thường, cảnh báo này sẽ bị đổ lỗi khi một trang web không đạt được 100 điểm 100 điểm nổi tiếng.
Hướng dẫn tối ưu Leverage browser caching
Trước tiên, các bạn hãy đảm bảo rằng file .htaccess đã kích hoạt đoạn mã dưới đây. Trong trường hợp chưa có thì copy dán vào.
Lưu ý: Dán vào hàng đầu tiên để đạt công suất cao nhất nhé!
<IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rdf+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/schema+json "access plus 0 seconds" ExpiresByType application/vnd.geo+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon (cannot be renamed!) and cursor images ExpiresByType image/vnd.microsoft.icon "access plus 1 week" ExpiresByType image/x-icon "access plus 1 week" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" ExpiresByType application/x-javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" # Manifest files ExpiresByType application/manifest+json "access plus 1 week" ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media files ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/bmp "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType image/webp "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web fonts # Embedded OpenType (EOT) ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType font/eot "access plus 1 month" # OpenType ExpiresByType font/opentype "access plus 1 month" # TrueType ExpiresByType application/x-font-ttf "access plus 1 month" # Web Open Font Format (WOFF) 1.0 ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType font/woff "access plus 1 month" # Web Open Font Format (WOFF) 2.0 ExpiresByType application/font-woff2 "access plus 1 month" # Other ExpiresByType text/x-cross-domain-policy "access plus 1 week" </IfModule> <IfModule mod_deflate.c> # Insert filters / compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/vtt AddOutputFilterByType DEFLATE text/x-component AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/js AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE application/atom+xml AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE application/ld+json AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-web-app-manifest+json AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon # Exception: Images SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary # Drop problematic browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule> #Alternative caching using Apache's "mod_headers", if it's installed. #Caching of common files - ENABLED <IfModule mod_headers.c> <FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt)$"> Header set Cache-Control "max-age=2592000, public" </FilesMatch> </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary Accept-Encoding </FilesMatch> </IfModule> # Set Keep Alive Header <IfModule mod_headers.c> Header set Connection keep-alive </IfModule> # If your server don't support ETags deactivate with "None" (and remove header) <IfModule mod_expires.c> <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None </IfModule>
Giải pháp cho việc tối ưu DNS caching anlytics
Bước 1: Tải js của analytics về hosting của bạn
Theo gtmetrix.com báo thì đường dẫn như sau => https://www.google-analytics.com/analytics.js
Sau khi tải về thì up lên host ví dụ: ///domain của bạn.com/analytics.js.
Bước 2: Tiếp tục vào file header.php hoặc footer.php thay đoạn code dưới đây và nhớ là xóa tất cả đoạn code mặc định của analytics đi nhé!
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://domain của bạn.com/analytics.js','ga'); ga('create', 'UA-xxxxxxx-x', 'auto'); ga('send', 'pageview'); </script>
Lưu ý: Thay đổi UA-xxxxxxx-x của bạn và đường dẫn đến mã analytics.js mà bản đã tải lên host
Lời kết
Tương tự các trang mà gtmetrix.com và GooglePage Speed Insights báo như analytics thì cách làm cũng như vậy nhé. Túm lại các bạn hiểu như này nhé! Các đoạn mã bên ngoài nếu thiết thì cho về web hết. Hy vọng bài viết này sẽ giúp ích cho các bạn. Chúc các bạn thành công.
Trả lời: Nếu bạn biết coder thì việc tối ưu dễ như trở bàn tay.
Trả lời: Nói đơn giản cho bạn dễ hiểu. Các bạn gộp css chung 1 file rồi nén nó lại. Còn javascript cũng vậy và cho nó nằm dưới footer là xong nhé!