To Optimize WordPress Browser Cache by .htaccess we only need some minutes to do. It will help us very much in wordpress speed and save a lot of server resource. Think about just one logo image file what visitor will load it 10 times in 10 pageviews but now it only load from server one time because of the .htaccess optimization. Other than that, it load very fast.
In this article, we only focus to Apache webserver what is the most popular web server, if you manage nginx server or other webserver then I believe your server skill is good enough to optimize browser cache. Now let ‘s go with the Optimize WordPress Browser Cache.
1. Where is .htaccess file location?
It ‘s funny question but hope it ‘s helpful for some people. The .htaccess file is the base directory of wordpress directory. If you don’t see it, let ‘s create a new one. If you are using windows, when you create it by notepad, you have to write the name “.htaccess” to have the right name is .htaccess or window will not accept this type of name.
2. Gzip Compression
The coe below will show us how to compress file before return to browser what is activated when server support Google page speed module for apache. So that let ‘s install it if it is missing or choose the good hosting to support it.
1 2 3 4 5 | <IfModule pagespeed_module> ModPagespeed on ModPagespeedEnableFilters extend_cache,combine_css,combine_javascript,collapse_whitespace,move_css_to_head </IfModule> |
3. Browser cache header and cache control
Add more code below to your .htaccess file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | # BEGIN Expire headers <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType image/x-icon "access plus 2500000 seconds" ExpiresByType image/jpeg "access plus 2500000 seconds" ExpiresByType image/png "access plus 2500000 seconds" ExpiresByType image/gif "access plus 2500000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2500000 seconds" ExpiresByType text/css "access plus 600000 seconds" ExpiresByType text/javascript "access plus 200000 seconds" ExpiresByType application/javascript "access plus 200000 seconds" ExpiresByType application/x-javascript "access plus 200000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </IfModule> # END Expire headers # 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 |
If you understand .htaccess code, you will see max-age directive is not necessary for Cache-Control header because it’s already set by the mod_expires module.
See! You are done, it ‘s quite simple. Enjoy the code and if you have any question, don’t hesitate to contact us.
Thanks!