Jump to content


You can find the new forum at https://www.helionet.org/

Photo

How to Implement Caching on a Static Site (the easy way)

caching static .htaccess easy headings headers gtmetrix

  • Please log in to reply
4 replies to this topic

#1 robertzo

robertzo

    Rank II Member

  • Members
  • PipPip
  • 88 posts
  • Gender:Male
  • Interests:I love websites and building them.

Posted 11 June 2021 - 02:39 AM

Note: This is only one of the many ways to implement caching. This in my opinion the easiest and the one that works for me.
 
This is my method on how to easily Implement Caching Headers in .htcaccess. 
 
Now some of you must be wondering. What in the world is caching. Caching is a way to speed up your site by preloading the site so that it can be delivered to you faster. What that means is that instead of doing the complex calculations of generating a website every time, they can just deliver you a saved copy. Kind of like making more products than your customers ordered so when another customer orders the product, you won't have to make it from scratch, you just need to deliver the premade product to them.
 
So with no further due, lets get started.
 
Before we start, here is a Gtmetrix test for my website before implementing these caching headers.
 
Attached File  f396380fb1c060a094a18e556884f725e697586c.png   68.32K   22 downloads
 
Not to shabby, but we can make it better.
 
To implement caching headers you would need to go to the cPanel file manager or connect via ftp. Then you would need to open the .htaccess file. If you don't see one, make sure to go to settings and show hidden files. If you don't have one, you can just create it.
 
Then paste in this code:
 
  <IfModule mod_expires.c>
     ExpiresActive On

     # Images
     ExpiresByType image/jpeg "access plus 1 year"
     ExpiresByType image/gif "access plus 1 year"
     ExpiresByType image/png "access plus 1 year"
     ExpiresByType image/webp "access plus 1 year"
     ExpiresByType image/svg+xml "access plus 1 year"
     ExpiresByType image/x-icon "access plus 1 year"

     # Video
     ExpiresByType video/webm "access plus 1 year"
     ExpiresByType video/mp4 "access plus 1 year"
     ExpiresByType video/mpeg "access plus 1 year"

     # Fonts
     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 application/font-woff "access plus 1 year"

     # CSS, JavaScript
     ExpiresByType text/css "access plus 1 month"
     ExpiresByType text/javascript "access plus 1 month"
     ExpiresByType application/javascript "access plus 1 month"

     # Others
     ExpiresByType application/pdf "access plus 1 month"
     ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
  </IfModule>
 
Done, it is that easy. Now if you want, you can edit the code to your preference but that is optional.
 
Now take a look at the exact same website after implementing that caching methods.
 
Attached File  3ca5dad0943c509802d212c51dae31005b06e339.png   270.11K   18 downloads
 
As you can see my website (without any changes) loaded TWICE as fast as before. 
 
If your homepage has changed and you want to clear the cache. Just replace the code above with this code:
 
# DISABLE CACHING
<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|mp3|mp4|png|pdf|swf|txt)$">
    <IfModule mod_expires.c>
        ExpiresActive Off
    </IfModule>
    <IfModule mod_headers.c>
        FileETag None
        Header unset ETag
        Header unset Pragma
        Header unset Cache-Control
        Header unset Last-Modified
        Header set Pragma "no-cache"
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
    </IfModule>
</FilesMatch>
Save the file and wait a few minutes (5 - 30 minutes). Then just replace the .htaccess file with the original caching code.

Edited by robertzo, 11 June 2021 - 05:00 AM.

RZ

#2 robertzo

robertzo

    Rank II Member

  • Members
  • PipPip
  • 88 posts
  • Gender:Male
  • Interests:I love websites and building them.

Posted 11 June 2021 - 02:42 AM

BTW, this isn't the WordPress site I showed before in the Heliohost Loads Really Fast Topic. I used the Publii CMS this time since it contains all the features I need and isn't an overkill (like WordPress).


RZ

#3 niamul21

niamul21

    Newbie

  • Members
  • 1 posts

Posted 15 June 2021 - 07:59 AM

Note: This is only one of the many ways to implement caching. This in my opinion the easiest and the one that works for me.
 
This is my method on how to easily Implement Caching Headers in .htcaccess. 
 
Now some of you must be wondering. What in the world is caching. Caching is a way to speed up your site by preloading the site so that it can be delivered to you faster. What that means is that instead of doing the complex calculations of generating a website every time, they can just deliver you a saved copy. Kind of like making more products than your customers ordered so when another customer orders the product, you won't have to make it from scratch, you just need to deliver the premade product to them.
 
So with no further due, lets get started.
 
Before we start, here is a Gtmetrix test for my website before implementing these caching headers.
 
attachicon.giff396380fb1c060a094a18e556884f725e697586c.png
 
Not to shabby, but we can make it better.
 
To implement caching headers you would need to go to the cPanel file manager or connect via ftp. Then you would need to open the .htaccess file. If you don't see one, make sure to go to settings and show hidden files. If you don't have one, you can just create it.
 
Then paste in this code:
 

  <IfModule mod_expires.c>
     ExpiresActive On

     # Images
     ExpiresByType image/jpeg "access plus 1 year"
     ExpiresByType image/gif "access plus 1 year"
     ExpiresByType image/png "access plus 1 year"
     ExpiresByType image/webp "access plus 1 year"
     ExpiresByType image/svg+xml "access plus 1 year"
     ExpiresByType image/x-icon "access plus 1 year"

     # Video
     ExpiresByType video/webm "access plus 1 year"
     ExpiresByType video/mp4 "access plus 1 year"
     ExpiresByType video/mpeg "access plus 1 year"

     # Fonts
     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 application/font-woff "access plus 1 year"

     # CSS, JavaScript
     ExpiresByType text/css "access plus 1 month"
     ExpiresByType text/javascript "access plus 1 month"
     ExpiresByType application/javascript "access plus 1 month"

     # Others
     ExpiresByType application/pdf "access plus 1 month"
     ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
  </IfModule>
 
Done, it is that easy. Now if you want, you can edit the code to your preference but that is optional.
 
Now take a look at the exact same website after implementing that caching methods.
 
attachicon.gif3ca5dad0943c509802d212c51dae31005b06e339.png
 
As you can see my website (without any changes) loaded TWICE as fast as before. 
 
If your homepage has changed and you want to clear the cache. Just replace the code above with this code:
 

# DISABLE CACHING
<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|mp3|mp4|png|pdf|swf|txt)$">
    <IfModule mod_expires.c>
        ExpiresActive Off
    </IfModule>
    <IfModule mod_headers.c>
        FileETag None
        Header unset ETag
        Header unset Pragma
        Header unset Cache-Control
        Header unset Last-Modified
        Header set Pragma "no-cache"
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
    </IfModule>
</FilesMatch>
Save the file and wait a few minutes (5 - 30 minutes). Then just replace the .htaccess file with the original caching code.

 
Are you talking about a WordPress site for sure?

Edited by Krydos, 15 June 2021 - 03:04 PM.
fixed quote tag


#4 robertzo

robertzo

    Rank II Member

  • Members
  • PipPip
  • 88 posts
  • Gender:Male
  • Interests:I love websites and building them.

Posted 15 June 2021 - 01:58 PM

No as you see in the post above, I swtiched to Publii.
RZ

#5 Krydos

Krydos

    Rank X Member

  • Root Admin
  • 22,521 posts
  • Gender:Male

Posted 15 June 2021 - 03:05 PM

Are you talking about a WordPress site for sure?

Publii is better, but if you insist on using Wordpress check out https://www.helionet...gle12/?p=187349





Also tagged with one or more of these keywords: caching, static, .htaccess, easy, headings, headers, gtmetrix

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users