Credit: The Hangover[/caption]

This Week I Learned about Expires Headers

This week I learned (TWIL) is a weekly installment containing tidbits our team has learned about search engine optimization, PPC / AdWords, social media marketing, and other aspects of Internet marketing. This week, Jake Bohall discovered the secrets of setting expires headers on font files in .htaccess. Check out what he has to say below in this week’s TWIL!  

Set Expires on font files with headers in .htaccess.

I was working to help speed up a client’s site this week, and was having issues “conquering” page speed insights.  In order to fix the “leverage browser caching” issue with some lagging font files, I went to .htaccess to set some expires headers. Generally, I have plugins running like autoptimize, etc. but in this case, I was just looking for a simple solution to leverage browser caching for font files (ttf, svg, otf, eot, woff, etc.. ), so I did a little research through Stack Overflow and found a nice solution that seems to have done the trick! See the final code below, as well as some other htaccess code I typically put in place for speeding up a site!
# Below is custom site speed items
# We need to set 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

# This sets up expire times 
# First part covers typical images, etc. 
# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
# This part sets the expires for the 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"
</ifModule>
# END Expire headers

# This sets up browser cache control
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch ".(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch ".(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

# This is for gzip, which compresses files
<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
JUMP TO A CATEGORY

WEB ANALYTICS  |  SEARCH OPTIMIZATION  |  PAID ADVERTISING  |  COMPANY NEWS