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?
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"
With the help of Seb's IT blog this worked for me:
<IfModule mod_expires.c>
# Activate mod
ExpiresActive on
# Declare fonts content-type
AddType application/x-font-woff2 .woff2
# Set cache duration
ExpiresByType application/x-font-woff2 "access plus 1 month"
# Append "public" to header "Cache-Control"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
Related
I'd like to set expiry date for fonts. Following definition isn't working on apache 2.2.15.
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
First, add proper MIME types definitions:
AddType application/font-sfnt otf ttf
AddType application/font-woff woff
AddType application/font-woff2 woff2
AddType application/vnd.ms-fontobject eot
Next, change your configuration lines to:
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/font-sfnt "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
I find it easier to use file extensions rather than mine types, especially as the Woff mime type changed a few times.
# Set up caching on font files for 6 months (60 * 60 * 24 * 180 = 15724800)
<filesMatch ".([eE][oO][tT]|[tT][tT][fF]|[sS][vV][gG]|[Ww][Oo][Ff][Ff]|[Ww][Oo][Ff][Ff]2)$">
ExpiresDefault A15724800
Header append Cache-Control "public"
</filesMatch>
A project i'm working on has a large htaccess file. But i'm sensing most of it is unneccary, yet i don't know how to use htaccess files at all.
How do i clean up this file?
Is there anything i should be aware of in this file?
Options -Indexes
ErrorDocument 404 /404
ErrorDocument 403 /404
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# Remove extra trailing slashes
RewriteCond %{REQUEST_URI} ^(.*)/{2,}(.*)$
RewriteRule . %1/%2 [R=301,L]
# Manage Uploads Directory
RewriteRule /(uploads/.*) $1 [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/javascript
<filesmatch "\.(js|css|html|jpg|png|gif|eot|woff|ttf|svg)$">
SetOutputFilter DEFLATE
</filesmatch>
</ifModule>
<FilesMatch "\.(htaccess|htpasswd|ini|log|sh|inc|bak|tpl)$">
Order Allow,Deny
Deny from all
</FilesMatch>
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 week"
# CSS
ExpiresByType text/css "access plus 1 week"
# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+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/x-icon "access plus 1 week"
# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 week"
# HTML
ExpiresByType text/html "access plus 30 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 week"
# 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
ExpiresByType audio/ogg "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType video/mp4 "access plus 1 week"
ExpiresByType video/ogg "access plus 1 week"
ExpiresByType video/webm "access plus 1 week"
# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Web fonts
ExpiresByType application/font-woff "access plus 1 week"
ExpiresByType application/font-woff2 "access plus 1 week"
ExpiresByType application/vnd.ms-fontobject "access plus 1 week"
ExpiresByType application/x-font-ttf "access plus 1 week"
ExpiresByType font/opentype "access plus 1 week"
ExpiresByType image/svg+xml "access plus 1 week"
</IfModule>
You need to know what you actually want, and then read the documentation for htaccess files and the various Apache modules.
Why I get error 500? It's caused by .htaccess file
RewriteEngine On
RewriteBase /
AddDefaultCharset UTF-8
<IfModule mod_expires.c>
Header set cache-control: public
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 days"
ExpiresByType application/rss+xml "access plus 1 week"
ExpiresByType image/png "access plus 10 month"
ExpiresByType image/jpg "access plus 10 month"
ExpiresByType image/jpeg "access plus 10 month"
ExpiresByType image/gif "access plus 10 month"
ExpiresByType video/ogg "access plus 10 month"
ExpiresByType audio/ogg "access plus 10 month"
ExpiresByType video/mp4 "access plus 10 month"
ExpiresByType image/x-icon "access plus 10 month"
ExpiresByType font/ttf "access plus 10 month"
ExpiresByType image/svg+xml "access plus 10 month"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
Removing both sections
<IfModule mod_headers.c>
<IfModule mod_expires.c>
resolves problem.
I use XAMPP and those modules are present in \xampp\apache\modules:
mod_expires.so
mod_headers.so
Both are loaded with \xampp\apache\conf\httpd.conf:
LoadModule expires_module modules/mod_expires.so
LoadModule headers_module modules/mod_headers.so
Server was restarted.
I am using the below code in my .htaccess file to try and set the expire headers for some fonts, but upon checking my firefox cache and the expire header, the font is set to expire in about 12 hours from now; not the 1 year I am trying to set it to.
Here is my code:
# 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
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
# 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"
What am I doing wrong?
Seems I had to include this bit as well:
ExpiresActive on
With the full code being:
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2
AddType image/svg+xml .svg
# Compress compressible fonts
AddOutputFilterByType DEFLATE font/ttf font/otf image/svg+xml
ExpiresActive on
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
I believe your issue is how you define the fonts, and there is no need to add their content-type
ExpiresByType font/truetype "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
When i test my website for SpeedTest i'm seeing a lot of expiration not specified error.You can see at this page .
I added this code to my .htaccess file
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-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 ##
But nothing changed . Can you give an advice me, for can i specify expiration date for my static files ?
Server : Linux - Apache
i like the html5boilerplate way :
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# your document html
ExpiresByType text/html "access plus 0 seconds"
# data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# rss feed
ExpiresByType application/rss+xml "access plus 1 hour"
# favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# htc files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# css and javascript
ExpiresByType text/css "access plus 2 months"
ExpiresByType application/javascript "access plus 2 months"
ExpiresByType text/javascript "access plus 2 months"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
Hope this can be useful to you.
Source:
https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
You can use mod_headers to do the trick:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>
Or you can use mod_expires:
ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
I see you have PHP installed (reference wordpress), so we'll try to diagnose your problem:
restart your apache web server. If you own the apache server (command line access), you can do it like such.
create a phpinfo page. This will allow you to view the apache modules installed. Check for the mod_expires.c module your looking to use (should be able to do a CTL-F (find) request in your browser for mod_expires). If you find it - GOOD! If not, you need to install mod_expires in your apache server. If you own your apache server, you can search on for how to install modules for your specific operating system. If not, you can check with your hosting provider on how to get this module installed. Once installed, proceed.
modify your http.conf entry to include "plus" in your expression
restart Apache again
Test =)
You just need to add:
ExpiresByType application/javascript "access plus 1 year"
Maybe you didn't load mod_expires, so the entire stanza is a no-op. Or, AllowOverride is None and your .htaccess file is not processed.