Leveraging browser caching

What does leveraging browser caching mean?

When a user visits a webpage their browser must download the files that make up the page to be able to display it. The more files they have to download, the longer the page will take to display. This is bad for SEO, bad for mobiles and bad for people with slow connection speeds added to which, each file makes a separate request to the server further reducing your page load speed so we need to be leveraging browser caching to make sure we are speeding up the process wherever possible.

Leveraging browser caching means to instruct the browser to save files locally allowing instant access to them on consequent visits, reducing server load and page load time which is awesome for user experience and Google loves it too!

What settings should I use to leverage browser caching?

Here are the .htaccess browser cache settings you can add via FTP or in Yoast SEO plugin while you are carrying out a speed optimization pass, ideally this would be carried out as part of the initial set up of Yoast on your website.

		
			# Compress HTML, CSS, JavaScript, Text, XML and fonts
			AddOutputFilterByType DEFLATE application/javascript
			AddOutputFilterByType DEFLATE application/rss+xml
			AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
			AddOutputFilterByType DEFLATE application/x-font
			AddOutputFilterByType DEFLATE application/x-font-opentype
			AddOutputFilterByType DEFLATE application/x-font-otf
			AddOutputFilterByType DEFLATE application/x-font-truetype
			AddOutputFilterByType DEFLATE application/x-font-ttf
			AddOutputFilterByType DEFLATE application/x-javascript
			AddOutputFilterByType DEFLATE application/xhtml+xml
			AddOutputFilterByType DEFLATE application/xml
			AddOutputFilterByType DEFLATE font/opentype
			AddOutputFilterByType DEFLATE font/otf
			AddOutputFilterByType DEFLATE font/ttf
			AddOutputFilterByType DEFLATE image/svg+xml
			AddOutputFilterByType DEFLATE image/x-icon
			AddOutputFilterByType DEFLATE text/css
			AddOutputFilterByType DEFLATE text/html
			AddOutputFilterByType DEFLATE text/javascript
			AddOutputFilterByType DEFLATE text/plain
			AddOutputFilterByType DEFLATE text/xml

			# Remove browser bugs (only needed for really old browsers)
			BrowserMatch ^Mozilla/4 gzip-only-text/html
			BrowserMatch ^Mozilla/4\.0[678] no-gzip
			BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
			Header append Vary User-Agent
		

		# BEGIN Expire headers
		
			AddType application/vnd.ms-fontobject .eot 
			AddType application/x-font-ttf .ttf
			AddType application/x-font-opentype .otf
			AddType application/x-font-woff .woff
			AddType image/svg+xml .svg

			ExpiresActive On
			ExpiresDefault "access plus 2 days"
			ExpiresByType image/x-icon "access plus 1 year"
			ExpiresByType image/jpeg "access plus 1 year"
			ExpiresByType image/jpg "access plus 1 year"
			ExpiresByType image/png "access plus 1 year"
			ExpiresByType image/gif "access plus 1 year"
			ExpiresByType application/x-shockwave-flash "access plus 1 month"
			ExpiresByType application/pdf "access plus 1 month"
			ExpiresByType text/css "access plus 1 month"
			ExpiresByType text/javascript "access plus 1 month"
			ExpiresByType application/javascript "access plus 1 month"
			ExpiresByType application/x-javascript "access plus 1 month"
			ExpiresByType text/html "access plus 600 seconds"
			ExpiresByType application/xhtml+xml "access plus 600 seconds"

			ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
			ExpiresByType application/x-font-ttf "access plus 1 year"
			ExpiresByType application/x-font-opentype "access plus 1 year"
			ExpiresByType application/x-font-woff "access plus 1 year"
			ExpiresByType image/svg+xml "access plus 1 year"
		
		# END Expire headers

		# BEGIN Cache-Control Headers
		
			
				Header set Cache-Control "public"
			
			
				Header set Cache-Control "public"
			
			
				Header set Cache-Control "private"
			
			
				Header set Cache-Control "private, must-revalidate"
			
		
		# END Cache-Control Headers

		# Fonts
		# Add correct content-type for fonts
		AddType application/vnd.ms-fontobject .eot 
		AddType application/x-font-ttf .ttf
		AddType application/x-font-opentype .otf
		AddType application/x-font-woff .woff
		AddType image/svg+xml .svg

		# Compress compressible fonts
		# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
		# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

		ExpiresActive on

		# Add a far future Expires header for fonts
		ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
		ExpiresByType application/x-font-ttf "access plus 1 year"
		ExpiresByType application/x-font-opentype "access plus 1 year"
		ExpiresByType application/x-font-woff "access plus 1 year"
		ExpiresByType image/svg+xml "access plus 1 year"
	

Comments are closed.

Austin Web & Design