Caching site pages using .htaccess - Cache

Listen to this article

Caching site pages with .htaccess. An equally important stage of technical optimization is the inclusion of gzip compression or CSS minification. Enabling Cache pages and files will allow you to significantly increase the speed of the site. And also at times reduce the load on the server. Thanks to simple manipulations, your site will start to fly.

In this article, we will talk about all aspects of this topic. What is the importance of the cache for the site and its application. I will describe examples that you can apply in practice. Plus, there will be a short review of some fairly good Cache plugins for WordPress.

The content of the article:

• What is a site cache - how does caching affect a site
• How to enable and configure site caching
• Code Header set Cache-Control
• An example of the “FilesMatch” construct that disables forced caching
• Simple Cache Code
• A more serious use case for Cache
• Configuring caching in the browser on the user's side for 3 - 7 days or for a year
• Content cache (Flash, CSS, JS, HTML, XML) and images
• Caching with WordPress plugins

What is a site cache - how does caching affect a site

In simple terms, caching - this is saving information about the site from the user in the browser. Thus, the main load on the server is reduced. A significant part of the site will not need to be loaded, since its saved part will be loaded by the user's browser. This is an extremely effective method of speeding up the loading of the site.

Cache or cache or Cache is an intermediate clipboard with quick access. Retaining and containing information that is frequently requested. Access to data in cache is faster than from slower memory sources. But there is a memory limit. In accessible language Cache (cache) is a short memory.

At the same time, caching does not harm the user. But it improves the display of your project in its browser. How does this happen! When the user visits the site. Its loading is a little slower than it should be. This is due to the fact that the browser at this moment saves some copy of the site. To a greater extent this applies to:

1. to logos;
2. small images;
3. css files;
4. general page structure.

Thus, part of the site is constantly in the memory (cache) of the user's browser. Due to this, when reloading the site, the visitor gets the highest possible response speed. The browser at this moment unloads some of the elements from its memory. And the site, there is no need to re-transmit a large amount of information.

When the site has cache enabled and configured. A certain part of it will be saved for the required period in the local cache of the visitor's browser. Which web pages will load much faster on repeated visits.

How to enable and configure site caching?

It's not at all difficult to do this. We will continue to work with the htaccess file, which sets the rules for the server. How to work with it, I described in many articles. So I'll get straight to the point. According to the standard, caching is set for the necessary files and for a certain period of time. After the expiration of the time allotted for storing the file, its current version will be downloaded again from the server. For this you need:

• Create a construct of type FilesMatch. In it, we specify the necessary file extensions for caching.
• Next, we specify the Cache-Control header with the max-age variable. Here Cache-Control is the server response header. Max-age is a variable that specifies the file storage time in seconds.

A typical list of extensions that are used in the FilesMatch construct:

(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)

Those files that you do not want to cache do not need to be included in the list of the FilesMatch construct.

Code example Header set Cache-Control

# Cache-Control # 30 days Header set Cache-Control "max-age=2592000, public" # 30 days Header set Cache-Control "max-age=2592000, public" # 2 days Header set Cache-Control "max-age=172800, public, must-revalidate"

Value -#- comment! As you can see, the comments indicate the terms for which the files will be saved. There is also an option to disable forced cache. This option is suitable for dynamic files. More related to scripts and various scenarios.

An example of the “FilesMatch” construct that disables forced caching

Header unset Cache-Control

As you can see, there are no deadlines. Therefore, these file extensions will not be cached. In this design, you can add your file extensions.

There is also another way to manage Cache - which is used by many plugins on WordPrees. In this method, we will use the mod_expires module. This module has the ability to control HTTP response headers on the server side. Here the main time for storing data in the cache can be set by you.

It has several settings for the duration of data storage:

1. by client access time;
2. or by the last modification of the file;
3. time setting;

Simple Cache Code Example

# Expires Headers - 2678400s = 31 days ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 7200 seconds" ExpiresByType image/gif "access plus 2678400 seconds" ExpiresByType image/jpeg "access plus 2678400 seconds" ExpiresBy type image/ png "access plus 2678400 seconds" ExpiresByType text/css "access plus 518400 seconds" ExpiresByType text/javascript "access plus 2678400 seconds" ExpiresByType application/x-javascript "access plus 2678400 seconds"

A more serious use case for Cache

ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x -js A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image /svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image /bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x -icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/webp A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536 000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application /x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis. opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application /pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31 536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/ tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A3153 6000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font -woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000

As we can see, a huge number of extensions are affected here. With the same shelf life.

Caching in the browser on the user's side for 3 - 7 days or for a year

Here, the bulk of the file extensions will be saved for a year. To a greater extent, this is useful for images, since I think few people change them. Thus, they will be loaded in the visitor's browser during the year.

# User-side browser caching ExpiresActive On ExpiresDefault "access 7 days" ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType text/html " access plus 7 day" ExpiresByType text/x-javascript "access 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType application/x-shockwave-flash "access 1 year" ExpiresByType js "access 3 days"

Content caching (Flash, CSS, JS, HTML, XML) and images

In this example, we are only using the cache for certain files. And for a shorter period.

ExpiresActive On # Image Cache ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" # cache content (Flash, CSS, JS, HTML, XML) ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 2592000 seconds" ExpiresByType application/javascript "access plus 2592000 seconds" ExpiresByType application/x-javascript "access plus 2592000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds"

Setting up caching of pages and site files is not such a difficult thing. The main thing is to choose the right strategy. All of the above examples, you can use at your discretion. Test the strategies and choose the right code option. Below I will talk about some Cache plugins for WordPress.

Setting up caching with WordPress plugins

For those using the CMS WordPress has a huge variety of cache plugins. All of them have a full-featured solution and automatic configuration. There should not be any particular problems when using such plugins. After installing such a plugin, you just need to apply the settings you need. The plugin will automatically save them in the htaccess file.

WP Fastest Cache

A popular and fairly powerful caching plugin for WP. It has a large number of various settings, including optimization of HTML, CSS and Js. Even a novice user can figure it out.

WP SuperCache

Very popular plugin! Excellent functionality and convenient settings. Capable of caching a large number of different objects. Setting up the plugin is very simple.

W3 Total Cache

Powerful solution for large sites. The most popular plugin among its kind. There is a huge variety of settings and functionality. You need to configure it with care, as it can cause critical errors. There is a possibility of conflicts with other plugins or themes. But in terms of functionality, a very good and powerful plugin.

These are the main and most popular cache plugins that I myself used. You can choose any depending on your preferences.

Finally

In this article, I tried to cover the topic of caching as much as possible. Specifying examples that can be used depending on your characteristics. Setting up caching with this guide will go like clockwork for you. I hope this article will be relevant for a long time. I thank you for your attention, but I do not say goodbye. See you in the next articles.

Reading this article:

• How to create a robots.txt file for a website - correct robots
• Htaccess file - how to create a .htaccess file instruction for beginners

Thanks for reading: SEO HELPER | NICOLA.TOP