Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I leverage browser caching of .woff fonts?

In PageSpeed Insights I keep seeing the message to leverage browser caching of a particular iconset/font I'm using: iconFont.woff (2 days)

I've set my .htaccess as so:

## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType font/ttf "access 1 week" ExpiresByType font/woff "access 1 week" ExpiresByType image/jpg "access 1 month" ExpiresByType image/jpeg "access 1 month" ExpiresByType image/gif "access 1 month" ExpiresByType image/png "access 1 month" ExpiresByType text/css "access 1 week" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month"  ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES CACHING ## 

Despite this I'm still getting the same message in PageSpeed Insights. How do I cache this properly?

like image 543
C-M Avatar asked Oct 24 '14 17:10

C-M


People also ask

How do I leverage browser caching?

To leverage your browser's caching generally means that you can specify how long web browsers should keep images, CSS and JS stored locally. That way the user's browser will download less data while navigating through your pages, which will improve the loading speed of your website.

How do I fix leverage browser caching in WordPress?

Fixing Leverage Browser Caching in WordPress with the W3 Total Cache can be done by following the steps listed below: Download and install the W3 Total Cache WordPress plugin. Navigate to General Settings and select Enable Browser Cache. Click save and navigate to Browser Cache Settings (top of the page)

What is leverage browser caching WordPress?

What is Browser Caching in WordPress? Browser caching is a way to improve your website loading speeds. When a web page loads, all of the files will be loaded separately. This creates multiple requests between the browser and your WordPress hosting server, which increases the web page loading time.

Are Google fonts cached?

In Google's own words: The font files themselves are cached for one year, which cumulatively has the effect of making the entire web faster: When millions of websites all link to the same fonts, they are cached after visiting the first website and appear instantly on all other subsequently visited sites.


1 Answers

This is doing the job for me, as Google page speed is no longer asking to fix it. The AddType is essential.

# 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 application/font-woff2  "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 year" 
like image 97
Erik van Berkum Avatar answered Sep 23 '22 19:09

Erik van Berkum