Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Software Development
Programming
Tutorials
How to leverage browser caching
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Ecko" data-source="post: 263166" data-attributes="member: 24874"><p>Since I see a lot of people release stuff that uses big ass images and don't know how to cache stuff to increase page load times, I'm going to explain how.</p><p></p><p><strong>Note:</strong> This is for Apache where mod_expires and mod_headers are enabled, although you can read <a href="http://www.mnot.net/cache_docs/" target="_blank">this great article</a> for most major web servers. Bits of this was taken from <a href="https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess" target="_blank">html5-boilerplate git</a>.</p><p></p><p>Edit your .htaccess file:</p><p>[code]</p><p># ------------------------------------------------------------------------------</p><p># | Proper MIME types for all files |</p><p># ------------------------------------------------------------------------------</p><p></p><p><IfModule mod_mime.c></p><p></p><p> # Audio</p><p> AddType audio/mp4 m4a f4a f4b</p><p> AddType audio/ogg oga ogg opus</p><p></p><p> # Data interchange</p><p> AddType application/json json map</p><p></p><p> # JavaScript</p><p> # Normalize to standard type (it's sniffed in IE anyways):</p><p> # http://tools.ietf.org/html/rfc4329#section-7.2</p><p> AddType application/javascript js</p><p></p><p> # Video</p><p> AddType video/mp4 f4v f4p m4v mp4</p><p> AddType video/ogg ogv</p><p> AddType video/webm webm</p><p> AddType video/x-flv flv</p><p></p><p> # Web fonts</p><p> AddType application/font-woff woff</p><p> AddType application/vnd.ms-fontobject eot</p><p></p><p> # Browsers usually ignore the font MIME types and sniff the content,</p><p> # however, Chrome shows a warning if other MIME types are used for the</p><p> # following fonts.</p><p> AddType application/x-font-ttf ttc ttf</p><p> AddType font/opentype otf</p><p></p><p> # Make SVGZ fonts work on iPad:</p><p> # https://twitter.com/FontSquirrel/status/14855840545</p><p> AddType image/svg+xml svgz</p><p> AddEncoding gzip svgz</p><p></p><p> # Other</p><p> AddType application/octet-stream safariextz</p><p> AddType application/x-chrome-extension crx</p><p> AddType application/x-opera-extension oex</p><p> AddType application/x-web-app-manifest+json webapp</p><p> AddType application/x-xpinstall xpi</p><p> AddType application/xml atom rdf rss xml</p><p> AddType image/webp webp</p><p> AddType image/x-icon cur</p><p> AddType text/cache-manifest appcache manifest</p><p> AddType text/vtt vtt</p><p> AddType text/x-component htc</p><p> AddType text/x-vcard vcf</p><p></p><p></IfModule></p><p></p><p></p><p># ------------------------------------------------------------------------------</p><p># | ETag removal |</p><p># ------------------------------------------------------------------------------</p><p></p><p># Since we're sending far-future expires headers (see below), ETags can</p><p># be removed: http://developer.yahoo.com/performance/rules.html#etags.</p><p></p><p># `FileETag None` is not enough for every server.</p><p><IfModule mod_headers.c></p><p> Header unset ETag</p><p></IfModule></p><p></p><p>FileETag None</p><p></p><p># ------------------------------------------------------------------------------</p><p># | Expires headers (for better cache control) |</p><p># ------------------------------------------------------------------------------</p><p></p><p># The following expires headers are set pretty far in the future. If you don't</p><p># control versioning with filename-based cache busting, consider lowering the</p><p># cache time for resources like CSS and JS to something like 1 week.</p><p></p><p><IfModule mod_expires.c></p><p></p><p> ExpiresActive on</p><p> ExpiresDefault "access plus 1 month"</p><p></p><p> # CSS</p><p> ExpiresByType text/css "access plus 1 year"</p><p></p><p> # Data interchange</p><p> ExpiresByType application/json "access plus 0 seconds"</p><p> ExpiresByType application/xml "access plus 0 seconds"</p><p> ExpiresByType text/xml "access plus 0 seconds"</p><p></p><p> # Favicon (cannot be renamed!) and cursor images</p><p> ExpiresByType image/x-icon "access plus 1 week"</p><p></p><p> # HTML components (HTCs)</p><p> ExpiresByType text/x-component "access plus 1 month"</p><p></p><p> # HTML</p><p> ExpiresByType text/html "access plus 0 seconds"</p><p></p><p> # JavaScript</p><p> ExpiresByType application/javascript "access plus 1 year"</p><p></p><p> # Manifest files</p><p> ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"</p><p> ExpiresByType text/cache-manifest "access plus 0 seconds"</p><p></p><p> # Media</p><p> ExpiresByType audio/ogg "access plus 1 month"</p><p> ExpiresByType image/gif "access plus 1 month"</p><p> ExpiresByType image/jpeg "access plus 1 month"</p><p> ExpiresByType image/png "access plus 1 month"</p><p> ExpiresByType video/mp4 "access plus 1 month"</p><p> ExpiresByType video/ogg "access plus 1 month"</p><p> ExpiresByType video/webm "access plus 1 month"</p><p></p><p> # Web feeds</p><p> ExpiresByType application/atom+xml "access plus 1 hour"</p><p> ExpiresByType application/rss+xml "access plus 1 hour"</p><p></p><p> # Web fonts</p><p> ExpiresByType application/font-woff "access plus 1 month"</p><p> ExpiresByType application/vnd.ms-fontobject "access plus 1 month"</p><p> ExpiresByType application/x-font-ttf "access plus 1 month"</p><p> ExpiresByType font/opentype "access plus 1 month"</p><p> ExpiresByType image/svg+xml "access plus 1 month"</p><p></p><p></IfModule>[/code]</p></blockquote><p></p>
[QUOTE="Ecko, post: 263166, member: 24874"] Since I see a lot of people release stuff that uses big ass images and don't know how to cache stuff to increase page load times, I'm going to explain how. [b]Note:[/b] This is for Apache where mod_expires and mod_headers are enabled, although you can read [url=http://www.mnot.net/cache_docs/]this great article[/url] for most major web servers. Bits of this was taken from [url=https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess]html5-boilerplate git[/url]. Edit your .htaccess file: [code] # ------------------------------------------------------------------------------ # | Proper MIME types for all files | # ------------------------------------------------------------------------------ <IfModule mod_mime.c> # Audio AddType audio/mp4 m4a f4a f4b AddType audio/ogg oga ogg opus # Data interchange AddType application/json json map # JavaScript # Normalize to standard type (it's sniffed in IE anyways): # http://tools.ietf.org/html/rfc4329#section-7.2 AddType application/javascript js # Video AddType video/mp4 f4v f4p m4v mp4 AddType video/ogg ogv AddType video/webm webm AddType video/x-flv flv # Web fonts AddType application/font-woff woff AddType application/vnd.ms-fontobject eot # Browsers usually ignore the font MIME types and sniff the content, # however, Chrome shows a warning if other MIME types are used for the # following fonts. AddType application/x-font-ttf ttc ttf AddType font/opentype otf # Make SVGZ fonts work on iPad: # https://twitter.com/FontSquirrel/status/14855840545 AddType image/svg+xml svgz AddEncoding gzip svgz # Other AddType application/octet-stream safariextz AddType application/x-chrome-extension crx AddType application/x-opera-extension oex AddType application/x-web-app-manifest+json webapp AddType application/x-xpinstall xpi AddType application/xml atom rdf rss xml AddType image/webp webp AddType image/x-icon cur AddType text/cache-manifest appcache manifest AddType text/vtt vtt AddType text/x-component htc AddType text/x-vcard vcf </IfModule> # ------------------------------------------------------------------------------ # | ETag removal | # ------------------------------------------------------------------------------ # Since we're sending far-future expires headers (see below), ETags can # be removed: http://developer.yahoo.com/performance/rules.html#etags. # `FileETag None` is not enough for every server. <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None # ------------------------------------------------------------------------------ # | Expires headers (for better cache control) | # ------------------------------------------------------------------------------ # The following expires headers are set pretty far in the future. If you don't # control versioning with filename-based cache busting, consider lowering the # cache time for resources like CSS and JS to something like 1 week. <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/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 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files 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 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # 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 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>[/code] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Software Development
Programming
Tutorials
How to leverage browser caching
Top