Use browser caching and compression to speed up your website
| 3 min read
Use browser caching
Most websites will work fine without caching. But if you want to save bandwidth and make your site feel more responsive for your visitors, a little control over how browsers respond to your website and its assets is always good. To do so you can use browser caching. This is done with a set of rules that specify what to cache and for how long.
Using browser cache will speed up loading times for your website considerably. This is especially true for returning visitors. For example, images and javascript files do not really change, so those files can be cached for much longer than regular text content.
I've created a universal set of rules that will work for most websites. If you feel that some items need to be cached for longer, or shorter, just edit the life time. 1 month, 6 month, 2 week, whatever makes sense.
Likewise, if you never serve a certain file, and you're certain of that, you can leave that out entirely if you want.
I've placed this near the top of my .htaccess file.
# Cache Control
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 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
# Others
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"Use Compression
Modern web servers can often use compression for sending data to browsers (visitors). This is useful because the compressed data is smaller. And less data to download to show the website means your website will be faster. The compression method requires the apache module mod_deflate to be active on your hosting service. Most servers have this installed and ready to go by default. But not every hosting provider uses it by default. Mine doesn't, and I have to enable gzip compression for every website I add.
Check your hosting dashboard, something like DirectAdmin or cPanel, if 'GZIP Compression' is enabled for your website. Ask your hosting provider where the option is if you can't find it.
Again in the .htaccess file, I've placed this near the top of the file. Right below the caching rules.
# Gzip compression
SetOutputFilter DEFLATE
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g|mp4|webm|webp)$ no-gzip dont-vary
# Compress all output labeled with one of the following MIME-types
AddOutputFilterByType DEFLATE application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-ttf application/xhtml+xml application/xml font/ttf font/otf font/opentype image/svg+xml image/x-icon text/css text/html text/plain text/x-component text/xml
Header append Vary: Accept-Encoding
# Force deflate for mangled headers
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding