Leverage browser caching on wordpress on .htaccess file with plugin hype animation

1

Hello,

I want to Leverage browser caching on my file .htaccess on a Worpress website where i integrated hype animation with the plugin tumult hype animation.
But i don’t know where and what code should i paste ?

Here is the content of my .htacess file for this moment :

BEGIN WpFastestCache

RewriteEngine On RewriteBase / RewriteCond %{HTTPS} =on RewriteCond %{HTTP_HOST} ^loupiots-design.com # Start WPFC Exclude # End WPFC Exclude # Start_WPFC_Exclude_Admin_Cookie RewriteCond %{HTTP:Cookie} !wordpress_logged_in_[^\=]+\=sophie # End_WPFC_Exclude_Admin_Cookie RewriteCond %{HTTP_HOST} ^loupiots-design.com RewriteCond %{HTTP_USER_AGENT} !(facebookexternalhit|Twitterbot|LinkedInBot|WhatsApp|Mediatoolkitbot) RewriteCond %{HTTP_USER_AGENT} !(WP\sFastest\sCache\sPreload(\siPhone\sMobile)?\s*Bot) RewriteCond %{REQUEST_METHOD} !POST RewriteCond %{REQUEST_URI} !(\/){2}$ RewriteCond %{REQUEST_URI} \/$ RewriteCond %{QUERY_STRING} !.+ RewriteCond %{HTTP:Cookie} !comment_author_ RewriteCond %{HTTP:Cookie} !safirmobilswitcher=mobil RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC] RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/all/$1/index.html -f [or] RewriteCond /homepages/3/d795246818/htdocs/wp-content/cache/all/$1/index.html -f RewriteRule ^(.*) "/wp-content/cache/all/$1/index.html" [L] AddDefaultCharset UTF-8 FileETag None Header unset ETag Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires "Mon, 29 Oct 1923 20:30:00 GMT" # END WpFastestCache

BEGIN WordPress

EXPIRES HEADER CACHING

ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”

EXPIRES HEADER CACHING

RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L]

END WordPress

# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml

Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Here is the url of the webstite :
https://loupiots-design.com/

Thank you by advanced for your help :slight_smile:

2

I add that on the site gtmetrix, the only remaining elements that are not cached are those of hype: see my attachment :

07
Capture d’écran 2019-09-06 à 12.36.07.png1516×636 201 KB

Thank you for your help ! :slight_smile:

3

Try adding these lines, making sure ‘addtype’ is one of the first:

...
AddType     image/svg+xml              svg svgz
ExpiresByType image/svg "access 1 year"
ExpiresByType font/woff "access 1 year"
ExpiresByType image/vnd.microsoft.icon "access 1 year"
...
4

just after “expireActive on”, like this ? :
…

BEGIN WordPress

EXPIRES HEADER CACHING

ExpiresActive On
AddType image/svg+xml svg svgz
ExpiresByType image/svg “access 1 year”
ExpiresByType font/woff “access 1 year”
ExpiresByType image/vnd.microsoft.icon “access 1 year”
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access plus 1 week”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”

EXPIRES HEADER CACHING

RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L]

END WordPress

…

Do i have to delete the second "ExpiresByType image/svg “access 1 year”

I tested that but i still have the same results on gtmetrix :frowning_face:

Do you think i did’nt paste it well ?

5

… I have the “favicon.ico” in less

Thank you by advanced for your answer :slight_smile:

6

Any of the 'addtype' options would need to go first.

When you share code here, make sure you use the 'code block' option to ensure that you don't accidentally copy / paste 'smart quotes'.

Could you share your complete .htaccess file in a zip file?

If you run this as a terminal command:

curl -I https://loupiots-design.com/wp-content/uploads/hypeanimations/1/faire-part-accueil.hyperesources/PastedVector-6.svg

You will see this content type: content-type: image/svg+xml

So your server is not serving that as SVG, it is serving it as SVG+XML. So adding

AddType image/svg+xml svg svgz

will ensure that your server handles the SVG format correctly. But perhaps for good measure you should add:

...
AddType     image/svg+xml              svg svgz
ExpiresByType image/svg "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType font/woff "access 1 year"
ExpiresByType image/vnd.microsoft.icon "access 1 year"
...

And see if that does the trick. Make sure all your quotes look like this: " and not “”.

2 Likes
7

Here is my file htaccess (i named it here whithout the point before : on my mac files .htaccess are transparents). Could you tell me if it’s ok ?htaccess.zip (1.7 KB) .
Thank you very much !!!

8

Just add the ExpiresByType image/svg+xml "access 1 year" line:

All in all, I think your caching strategy is fine – having the default cache time be 2 days is fine

9

Yes it works ! Thank you so much !