?>

TWIL: Expires Headers in .htaccess for Fonts and Images

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!

expires headers the hangover

Credit: The Hangover

 

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>

Comments


  1. I’m using your .htaccess example and noting improvements, but I think the hosting is more responsible for speed or slowness.
    Thanks for this helpI

    Reply

  2. what is the reason for “access plus 216000 seconds”?
    I currently have “access 1 month” for most elements, wondering if this will make the load quicker?

    Reply

  3. @ditsa — I just put it in seconds.. I could have done “access plus 6 days” instead..

    You can set the expires to whatever timing you like, just as long as you are being mindful of if/how content might change. E.g. if you set JS or CSS files to a month, and then change your site without modifying the filename, then your site could look pretty wonky to previous visitors if you’ve changed class names or something and don’t have them referenced in the cached css file.

    Reply
  4. Ghulma Murtaza says:

    How do I expire by type in .htaccess for remote loaded Google fonts?
    i have searched a lot and wasted many days but i can’t success 🙁
    any body can suggest me how to do this. Thanks

    Reply

  5. Hi Ghulma, You can’t control external resources via your htaccess. You’ll have to host them locally if you want to control an expires header for them.

    Reply

Trackbacks

    Leave a Reply

    Get Started

    800-650-0820

    Hive Digital can help you get the most out of your website. Simply fill out this form, and we'll get back to you with a free quote. No risk, no obligation.

    Hive Digital respects your privacy. We will never spam you or sell your information to any third party. Privacy Policy


    Subscribe via Email

    Subscribe to receive notifications of new posts by email.

    Follow Us on Twitter


    Get Started

    800-650-0820

    Hive Digital can help you get the most out of your website. Simply fill out this form, and we'll get back to you with a free quote. No risk, no obligation.

    Hive Digital respects your privacy. We will never spam you or sell your information to any third party. Privacy Policy

    [X] Close