Leverage Joomla browser caching

Leverage Joomla browser caching

Are you wondering how to make your Joomla website faster? Well, there are many possibilities, but we would like now to introduce the one that does not require much effort. Leverage Joomla browser caching is often recommended by Google.

This method involves the re-use of files already existing at the user and not requiring a download again.

It does not require many changes, and it’s easy to make. Extending the cache lifetime results in the user saving the time usually required to download the same files each time they visit the site.

Increase browser cache by changing the .htaccess file

The whole process requires a modification in the .htaccess files which you can find in the root of your web site's hosting server. The file edition will allow setting the expiry time of images and CSS files by changing the expire headers.

How to do it? You need to access your hosting CPanel and using any text editor find the .htaccess file (it’s hidden - use the FTP tool like FileZilla), then add the following content (set caching parameters) at the bottom of the file. That’s all. You can save the file (not as a .txt file).
  1. # ----------------------------------------------------------------------
  2. # CORS-enabled images (@crossorigin)
  3. # ----------------------------------------------------------------------
  4. # Send CORS headers if browsers request them; enabled by default for images.
  5. # developer.mozilla.org/en/CORS_Enabled_Image
  6. # blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
  7. # hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
  8. # wiki.mozilla.org/Security/Reviews/crossoriginAttribute

  10. <IfModule mod_setenvif.c>
  11. <IfModule mod_headers.c>
  12. # mod_headers, y u no match by Content-Type?!
  13. <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
  14. SetEnvIf Origin ":" IS_CORS
  15. Header set Access-Control-Allow-Origin "*" env=IS_CORS
  16. </FilesMatch>
  17. </IfModule>
  18. </IfModule>

  20. # ----------------------------------------------------------------------
  21. # Webfont access
  22. # ----------------------------------------------------------------------
  23. # Allow access from all domains for webfonts.
  24. # Alternatively you could only whitelist your
  25. # subdomains like "subdomain.example.com".

  27. <IfModule mod_headers.c>
  28. <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
  29. Header set Access-Control-Allow-Origin "*"
  30. </FilesMatch>
  31. </IfModule>

  33. <IfModule mod_deflate.c>
  34. <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
  35. SetOutputFilter DEFLATE
  36. # Header set Expires "max-age=29030400, public"
  37. Header unset ETag
  38. FileETag None
  39. </FilesMatch>
  40. </IfModule>

  42. #
  43. # Sources:
  44. # http://stackoverflow.com/questions/7704624/how-can-i-use-gzip-compression-for-css-and-js-files-on-my-websites
  45. # http://codex.wordpress.org/Output_Compression
  46. # http://www.perun.net/2009/06/06/wordpress-websites-beschleuinigen-4-ein-zwischenergebnis/#comment-61086
  47. # http://www.smashingmagazine.com/smashing-book-1/performance-optimization-for-websites-part-2-of-2/
  48. # http://gtmetrix.com/configure-entity-tags-etags.html
  49. # http://de.slideshare.net/walterebert/die-htaccessrichtignutzenwchh2014
  50. # http://de.slideshare.net/walterebert/mehr-performance-fr-wordpress
  51. #

  53. <IfModule mod_deflate.c>
  54. # Insert filters / compress text, html, javascript, css, xml:
  55. AddOutputFilterByType DEFLATE text/plain
  56. AddOutputFilterByType DEFLATE text/html
  57. AddOutputFilterByType DEFLATE text/xml
  58. AddOutputFilterByType DEFLATE text/css
  59. AddOutputFilterByType DEFLATE text/vtt
  60. AddOutputFilterByType DEFLATE text/x-component
  61. AddOutputFilterByType DEFLATE application/xml
  62. AddOutputFilterByType DEFLATE application/xhtml+xml
  63. AddOutputFilterByType DEFLATE application/rss+xml
  64. AddOutputFilterByType DEFLATE application/js
  65. AddOutputFilterByType DEFLATE application/javascript
  66. AddOutputFilterByType DEFLATE application/x-javascript
  67. AddOutputFilterByType DEFLATE application/x-httpd-php
  68. AddOutputFilterByType DEFLATE application/x-httpd-fastphp
  69. AddOutputFilterByType DEFLATE application/atom+xml
  70. AddOutputFilterByType DEFLATE application/json
  71. AddOutputFilterByType DEFLATE application/ld+json
  72. AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  73. AddOutputFilterByType DEFLATE application/x-font-ttf
  74. AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
  75. AddOutputFilterByType DEFLATE font/opentype
  76. AddOutputFilterByType DEFLATE image/svg+xml
  77. AddOutputFilterByType DEFLATE image/x-icon
  78. # Exception: Images
  79. SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png)$ no-gzip dont-vary
  80. # Drop problematic browsers
  81. BrowserMatch ^Mozilla/4 gzip-only-text/html
  82. BrowserMatch ^Mozilla/4\.0[678] no-gzip
  83. BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
  84. # Make sure proxies don't deliver the wrong content
  85. Header append Vary User-Agent env=!dont-vary
  86. </IfModule>

  88. ## EXPIRES CACHING ##
  89. <IfModule mod_expires.c>
  90. ExpiresActive On
  91. ExpiresDefault "access plus 1 week"
  92. ExpiresByType image/jpg "access plus 1 year"
  93. ExpiresByType image/jpeg "access plus 1 year"
  94. ExpiresByType image/gif "access plus 1 year"
  95. ExpiresByType image/png "access plus 1 year"
  96. ExpiresByType image/svg+xml "access plus 1 month"
  97. ExpiresByType text/css "access plus 1 month"
  98. ExpiresByType text/html "access plus 1 minute"
  99. ExpiresByType text/plain "access plus 1 month"
  100. ExpiresByType text/x-component "access plus 1 month"
  101. ExpiresByType text/javascript "access plus 1 month"
  102. ExpiresByType text/x-javascript "access plus 1 month"
  103. ExpiresByType application/pdf "access plus 1 month"
  104. ExpiresByType application/javascript "access plus 1 months"
  105. ExpiresByType application/x-javascript "access plus 1 months"
  106. ExpiresByType application/x-shockwave-flash "access plus 1 month"
  107. ExpiresByType image/x-icon "access plus 1 year"
  108. ExpiresByType application/json "access plus 0 seconds"
  109. ExpiresByType application/ld+json "access plus 0 seconds"
  110. ExpiresByType application/xml "access plus 0 seconds"
  111. ExpiresByType text/xml "access plus 0 seconds"
  112. ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
  113. ExpiresByType text/cache-manifest "access plus 0 seconds"
  114. ExpiresByType audio/ogg "access plus 1 month"
  115. ExpiresByType video/mp4 "access plus 1 month"
  116. ExpiresByType video/ogg "access plus 1 month"
  117. ExpiresByType video/webm "access plus 1 month"
  118. ExpiresByType application/atom+xml "access plus 1 hour"
  119. ExpiresByType application/rss+xml "access plus 1 hour"
  120. ExpiresByType application/font-woff "access plus 1 month"
  121. ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
  122. ExpiresByType application/x-font-ttf "access plus 1 month"
  123. ExpiresByType font/opentype "access plus 1 month"
  124. </IfModule>
  125. ## EXPIRES CACHING ##

  127. #Alternative caching using Apache's "mod_headers", if it's installed.
  128. #Caching of common files - ENABLED
  129. <IfModule mod_headers.c>
  130. <FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|html|htm)$">
  131. Header set Cache-Control "max-age=2592000, public"
  132. </FilesMatch>
  133. </IfModule>

  135. <IfModule mod_headers.c>
  136. <FilesMatch "\.(js|css|xml|gz)$">
  137. Header append Vary Accept-Encoding
  138. </FilesMatch>
  139. </IfModule>

  141. <IfModule mod_gzip.c>
  142. mod_gzip_on Yes
  143. mod_gzip_dechunk Yes
  144. mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  145. mod_gzip_item_include handler ^cgi-script$
  146. mod_gzip_item_include mime ^text/.*
  147. mod_gzip_item_include mime ^application/x-javascript.*
  148. mod_gzip_item_exclude mime ^image/.*
  149. mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
  150. </IfModule>

  152. # Set Keep Alive Header
  153. # This *just* sets the header - maybe your hoster is not allowing this feature
  154. # Please check if it is working with tools like http://www.webpagetest.org
  155. <IfModule mod_headers.c>
  156. Header set Connection keep-alive
  157. </IfModule>

  159. # If your server don't support ETags deactivate with "None" (and remove header)
  160. <IfModule mod_expires.c> 
  161. <IfModule mod_headers.c>
  162. Header unset ETag
  163. </IfModule>
  164. FileETag None
  165. </IfModule>
Expires headers inform the browser whether they should request a specific file from the server or grab it directly from the browser's cache.

So in practice, they do not improve page speed for a first-time visit as this visitor would have to download all the files. But they significantly decrease load times for returning visitors. Expires headers can be set on specific file types.

You can set different expiry times. For these files that are often updated, it would be good to set earlier expiry date.

A tip - Set expiry at a minimum of one month and no more than a year ( it depends on you). Files should refresh as quickly as the HTML of the website.

Set short expiry times for things that change regularly. If your website visitor comes again within a month, he does not have to need to download your CSS and JS files again. Files that take the most time to download are kept on the visitor's machine.

Remember that enabling browser caching and setting up the parameters for too long might affect on the lack of a fresh version of your website after any updates.

If entering the code itself does not give results, it is worth to perform additional activities such as "enable optimization in the template parameters.

Learn more about ways to speed up, optimize your website.


      • Related Articles

      • DJ-MegaMenu Joomla 4 Module options

        DJ-MegaMenu module is necessary to display the menu in the module position.  Navigate Content > Sitem modules and choose the DJ-MegaMenu module. Let's take a look at Module Parameters: Menu Name – The name of the menu (default is main menu) Base ...

      • How to install the DJ-Classifieds Joomla 4.x quickstart?

        What is Quickstart? The Quickstart is the backup (zipped copy) of the Joomla 4.x demo from our demo site. After the successful installation, you get the same effect as on our demo pages. You do not need to configure everything from scratch; the ...

      • How to add images using the file browser

        Adding images from the server is now possible with the new file browser. The DJ-MediaTools 2.13 version introduces this feature. Let's see how to use it. Open the DJ-MediaTools component. Go to " New item ." You should fill in all the data for your ...

      • DJ-Accessibility Joomla installation

        Download and install the DJ-Accessibility plugin from the download section. You install the package as any other Joomla extension. 

      • Migrate from Joomla 1.5

        If you're currently using the version for Joomla 1.5, we have prepared the migration package that will help you migrate DJ-Classifieds to Joomla 2.5. Below you can find step by step instructions on how to proceed. Please notice that migration can not ...