Using a cache on the browser side (apache). Enable browser cache on the user side Browser cache for external resources
Hi all! Today I want to tell you how to make a cache external elements on Google PageSpeed Insights, to increase the speed of your site. The point will be to download js and other downloadable files from external resources to your website.
How to enable file caching in the browser
Before writing about how to enable file caching for your website in the browser on the user side, I want to explain what a cache is.
Cache- storing viewed files on your computer, which in turn increases the loading speed of the page or site when viewing it again. The cache has its own shelf life, after which it is updated or deleted.
We figured out what a cache is. Now, let's check our site in the PageSpeed service and make sure that Google recommends that we use the browser cache. Here is an excerpt from the message.
If you specify the date or expiration date of static resources in HTTP headers, the browser will load previously received resources from local disk, not from the Internet.
If these files are located on your resource, then you can write the browser caching code in the file htaccess, located at the root of the site. Here is the code itself, if anyone needs it.
# compression text, html, javascript, css, xml:
By pasting this code into the htacces file, you can double-check your site in Google service PageSpeed
Insights. If in the section " use browser cache"everything is fine, that means you will have it there
only links to external resources, such as analytics, social
buttons and so on.
Personally, in parallel with this code, I use the capabilities of my hosting to cache files on the user side. It looks like this. 
As you can see, my hosting allows you to enable caching on the browser side and set the compression level and file storage period. Also, I use a plugin for fast loading pages wp super cache, but maybe I’ll tell my readers about it somehow, subscribed to blog updates.
How to enable external file cache in Google PageSpeed Insights
If you have followed the recommendations for caching files on your blog. You should only see links to external resources in the Google PageSpeed Insights tool. You must have something similar. 
As you can see from the screenshot, Google PageSpeed Insights swears at external resources, such as Yandex metrics, google analytics and others. Now I will tell you how to fix this error and make links to external resources internal and cached on the side of your server.
Using the browser cache for external resources
Since external resource files do not belong to our site, they must first be downloaded. In order to download external files from third-party resources, we must create a file kesh_js.php with the following code. I advise you to use Notepad++ to quickly and correctly add code to a file.
In order to write the code we need. take and copy this link:
downloadJs( ‘paste the link from PageSpeed here /metrics.js ‘ , realpath("./ folder_js« ) . ‘/ metrics.js— insert the final file here’) ;
This way you can add many queries. The only thing you need to remember is to make sure that you do not have duplicate files in the folder. In this case, use one file for several scripts, usually the same script, or rename it.
After adding the code to the file kesh_js.php, you can call it something else. It must be uploaded to the root of our site. Also in the root of the site, you need to create a folder folder_js, or under another name with access rights 777/755. In order to set access rights for a folder, I recommend using Fillizille.
To do this, simply open the fillizilla program. Next, select the folder and set the access rights, be sure to 777, after which we change it back to 755. This can also be done in the control panel of your hosting if you do not want to use this program. I'll show you a screenshot of setting access rights in the Fillizilla program. 
Then open the section “ file permissions" and enter our value 777/755.
How to enable the task scheduler for the site (cron)
The next step, we need to enable the task scheduler for our site so that our script https://address of your website/kesh_js.php ran daily. Thanks to this, it will always be on our website current version files from external resources. Even if developers make changes to their code, we will always have working version on the site, thanks to the task scheduler.
In order to schedule tasks for your website, you need to go to your hosting control panel and enter one of the code options.
running a task via GET. If you need to run a cron job taking into account the engine context:
GET https://site.ru/script.php
where site.ru is the name of your domain, and script.php is the name of the file with the task;
running a job via WGET. An alternative option for running a cron job, taking into account the engine context:
Wget -q -O - https://site.ru/script.php> /dev/null 2>&1
where site.ru is the name of your domain, and script.php is the name of the file with the task;
In our case, we must write:
GET https://your website address/kesh_js.php
Or choose an alternative option; I personally chose the first one.
We have figured out what to register, now we open our hosting and go to its control panel. I use the ISPmanager control panel, if you have a different one, look for the task scheduler tab, or cron.
Now, open the “create” tab.
Then we clear the browser cache. For Google Chrome, use the key combination ctrl+shift+delete and check the operation of the site. I also recommend running your site through the PageSpeed Insights tool again.
That's all for me, I wish you a good score thanks to this method of speeding up the page. In the next article, I will tell you how to create a colorful youtube subscribe button for your blog, so don't forget subscribe to updates. Bye everyone!
I think it’s no secret that page loading speed is influenced by many factors. If anyone doesn’t know, I’ll briefly say the following: loading speed affects not only whether a visitor will wait for your site to load, but also on SEO optimization. Indeed, today many search engines have begun to take into account page loading speed when ranking sites. Therefore, the faster your site loads, the more visitors you can get with search engines, and, therefore, earn more money from it.
Therefore, in this article I decided to collect the top 10 tips on how you can increase the loading speed of a web page and the site as a whole. The article does not pretend to be genius and is intended for beginners.
So, here we go:
1. Reduce the number of HTTP requests
80% of page loading is focused on loading page components: scripts, photos, CSS files, flash. The HTTP/1.1 specification recommends that browsers should download no more than 2 components of a web page from a single host in parallel. By reducing the number of these components, we reduce the number of HTTP requests to the server and, as a result, increase the page loading speed.
But how to reduce the number of requests to the server without affecting appearance pages?
2. Place CSS files at the beginning of the page
By placing a connection to css files in the page header, we get gradual rendering of the page, i.e. the page will load gradually - first the header, then the logo at the top, navigation, etc. – and this in turn serves as an excellent indicator of page loading for the user and improves the overall impression of the site.
Placing CSS files at the bottom of the page prevents many browsers from rendering the page incrementally. This is explained by the fact that the browser “does not want” to redraw elements whose style may change after loading the page. So always include all your CSS files at the top of the page in the HEAD section.
3. Place javascript at the bottom of the page
By placing javascript files at the bottom of the page, we allow the browser to load the page with the content first, and only then start loading the javascript files. If your site keeps up with the times and contains all possible interactive bells and whistles, then there can be several of these javascript files and they can weigh several hundred kilobytes, so forcing the user to wait until all your javascript files are loaded before loading the page is disastrous.
In addition, external .js files block parallel loading. The HTTP/1.1 specification recommends that browsers should download no more than 2 components of a web page from a single host in parallel. Thus, if the images for your site are located on different hosts, you will receive more than 2 parallel downloads. And when the script is downloaded, the browser will not start any other downloads, even from other hosts.
4. Minify css and javascript
File minimization is the removal of all non-essential characters from the code in order to reduce the size of the file and speed up its loading. In the minimized file, all comments and insignificant spaces, line breaks, and tab characters are removed. Everything is simple here. The smaller the file size, the less time it will take the browser to download it. And these 24 online services for compressing and optimizing CSS code will help you minimize your code.
5. Use subdomains for parallel downloads
As I said above, according to the HTTP/1.1 specification, browsers are subject to restrictions on the number of simultaneously loaded website components, namely no more than 2 components from one host. Therefore, if your site has a lot of graphics, then it is better to move it to a separate subdomain or subdomains. For you it will be the same server, but for the browser it will be different. The more subdomains you create, the more files the browser can download simultaneously and the faster the entire site page will load. All you have to do is change the address of the pictures to a new one. A very simple but effective way.
6. Use your browser cache
Caching is becoming extremely important for modern websites that rely heavily on JavaScript and CSS. The fact is that when a visitor visits your site for the first time, the browser will download all the javascript and css files, and will also load all the graphics and flash, but by correctly setting the Expires HTTP header, you will make the page components cacheable. This way, when a visitor visits your site again or goes to next page of your site, its browser cache will already contain some necessary files and the browser won't need to download them again. Hence the gain in site loading speed.
Therefore, set the Expires HTTP header wherever possible, several days or even months in advance. In order for the Apache web server to issue HTTP Expires headers that comply with the recommendations, you need to add the following lines to the .htaccess file located in the root folder of the site:
This fragment of the Apache Web server configuration file checks for the presence of the mod_expires module and, if the mod_expires module is available, turns on the sending of Expires HTTP headers, which set the retention period for the above objects in the cache of browsers and proxy servers to one year from the moment of first loading. By setting the browser cache's lifetime to this level, it may be difficult to update files. Therefore, if you changed the contents of a css or javascript file and want these changes to be updated in the browser cache, then you need to change the name of the file itself. Usually the version of the file is added to the file name, for example: styles.v1.css
7. Use a CDN to load popular JavaScript libraries
If your site uses a popular javascript framework, such as jQuery, then it is better to use a CDN to connect it.
8. Optimize your images
You need to determine the appropriate format for your images. Selecting the wrong image format can significantly increase the file size.
- GIFs are ideal for images with multiple colors, such as a logo.
- JPEG – great for detailed images with big amount flowers such as photographs.
- PNG is your choice when you need a high-quality image with transparency.
Here are a few online services to optimize images:
9. Don't scale images
Do not resize the image using the width and height attributes of the tag, or using CSS. This also negatively affects page loading speed. If you have an image with a size of 500x500px, and you want to insert an image with a size of 100x100px into the site, then it is better to resize the original image using graphic editor Photoshop, or any other. The lighter the image, the less time it will take to load it.
10. Use Gzip compression
As studies have shown, gzip compression text file“on the fly” in 95–98% of cases allows you to reduce the time it takes to transfer a file to the browser. If you store archived copies of files on the server (in the memory of the proxy server or simply on disk), then in general the connection can be released 3-4 times faster.
Beginning with HTTP/1.1, web clients indicate which compression types they support by setting the Accept-Encoding header in the HTTP request.
Accept-Encoding: gzip, deflate
If the web server sees such a header in a request, it can apply response compression using one of the methods listed by the client. When issuing a response, the server notifies the client via the Content-Encoding header about how the response was compressed.
Content-Encoding: gzip
The data transferred in this way is approximately 5 times smaller than the original data, and this significantly speeds up their delivery. However, there is one drawback: it increases the load on the web server. But the issue with the server can always be resolved. So let's not pay attention to this.
In order to enable GZIP compression on your website, you need to write the following lines of code in the .htaccess file:
If this method worked, then great, if not, then you can try this code:
But again, this code does not work on all servers, so it is better to contact the support service of your hosting provider and clarify this issue.
Well, that’s actually all I wanted to tell you. In this article, I tried to list all the main methods of client optimization to increase the loading speed of a web page. In addition to client optimization, there is also server optimization. But this is a topic for a separate article.
If you missed something or have something to add, write your opinion in the comments below to this post. Thank you for your attention!
- htaccess caching saves the content of a web page on the local computer when a user visits it;
- Using the Browser Cache – The webmaster instructs browsers how to treat resources.
When the browser renders a web page, it must load the logo, CSS file, and other resources:
The browser cache “remembers” resources that the browser has already downloaded. When a visitor goes to another page on the site, logo, CSS files, etc. shouldn't be downloaded again because the browser has already "remembered" them (saved them). This is the reason why the web page takes longer to load on your first visit than on repeat visits.
When you use caching, the web page files will be stored in the browser cache. Pages will load much faster on repeat visits. It will also happen with other pages that use the same resources.
How to enable browser caching
- Modify resource request headers to use caching;
- Optimize your caching strategy.
Changing request headers
For most people, the only way to cache a site's htaccess is to add code to the .htaccess file on the web server.
The .htaccess file controls many important settings for your site.
Browser caching via .htaccess file
The code below tells the browser what to cache and how long to “remember” it. It should be added to the beginning of the .htaccess file:
## EXPIRES CACHING ##
Save the .htaccess file and then refresh the web page.
How to set cache time for different file types
The above code specifies time intervals. For example, 1 year (1 year) or 1 month (1 month). They are related to file types. The above code states that .jpg files (images) should be cached for a year.
If you wanted to change this so that JPG images would also be cached for a month, then you would simply replace "1 year" with "1 month". The above htaccess caching values are optimal for most web pages.
Alternative caching method for .htaccess
The method described above is called " Expires", it helps most beginners with caching. Once you get comfortable with caching, you can try another caching method called Cache-Control, which gives you more options.
It's possible that the Expires method won't work on your server, in which case you might want to try using Cache-Control.
Cache-Control
This method allows you to gain more control over page caching in the browser, but many people find it easier to specify all the settings once.
Example usage in a .htaccess file:
#1 month for most static assets
The above code sets the Cache-Control header depending on the file type.
How does Cache-Control work?
Consider the above line of caching code in the htaccess browser:
#1 Month for most static assets
This line is just a note. The .htaccess file ignores lines starting with the # character. This note is recommended as you may have multiple different sets data as a file caching solution:
The line mentioned above says that, " if the file is one of these types, then we will do something with it...»
The most important thing about this line is that it lists Various types files ( CSS, JS, JPEG, PNG etc. ) and that caching instructions should be applied to these file types. For example, if you don't want JPG files to be cached for a specified period of time, you can remove " JPG". If you want to add HTML, then you need to indicate in this line “ HTML«:
Header set Cache-Control "max-age=2592000, public"
The line mentioned above sets the actual headers and values:
- Part " Header set Cache-Control» — sets the title;
- Variable " max-age=2592000"—indicates how long the caching process will take (in seconds). In this case, we cache for one month (2592000) seconds;
- Part " public» reports that it is publicly available.
Before opening a page, the browser needs to download all of its content (HTML, CSS, Javascript, and images). Loading large and cumbersome sites can be quite a painful experience if you have slow internet (or are using mobile phone). Each of the files sends a separate request to the server, and the more such requests it receives at the same time, the more work it needs to do and the slower the page will load. In this case, use the browser cache.
The browser cache may save some of the site files for the user. On your first visit, the download time will remain unchanged, but with the next visit, refreshing the page or switching to another, some of the files will already be saved in the browser. This means that the user's browser will need to download less data and make fewer requests to the server, thereby reducing site loading time.
Before you start this guide, you will need the following:
- Access to the .htaccess file
Step 1 - Editing the .htaccess file
The process is quite simple, you need to add the following code to your .htaccess file (you can find a guide on how to determine the location of your .htaccess file):
## EXPIRES CACHING ##
After saving changes to the .htaccess file, your site will automatically start using the browser cache to store temporary files.
Step 2 - Checking Browser Cache Usage
You can check the correctness of the changes made using many tools, such as WebPageTest or GTMetrix
Here are the results BEFORE enabling browser caching:
For comparison, here are the results AFTER enable browser caching:
Conclusion
In this quick guide, you learned how to speed up your website using your browser cache. If you want to increase the loading speed of your site, use the browser cache.
img class=”aligncenter wp-image-2458 size-full” title=”How to enable browser caching of site pages” src=”http://about-windows.ru/wp-content/uploads/2014/07/How to enable -browser-caching-of-site-pages.jpg” alt=”How to enable browser caching of site pages” width=”600″ height=”450″ />
How can I enable the end user's browser cache on my site?
If your server lets the end user's browser know that some resources can be stored in , then a repeat request to the same resources will receive a response from someone other than remote server, and from local computer. Both sides will benefit from this. Thus, the server will relieve some of the load, since it will not have to send certain resources that are already available on the user’s computer. But the user will receive faster access to the requested resources.
How to enable browser caching of site resources on an Apache server?
First, let's figure out what resources the browser should cache. Let me remind you that if the browser caches some resources, it may not update them for quite a long time. This situation is quite suitable for static objects. What resources can be classified as static objects?
- CSS files.
- JS files.
- Images.
- Video.
- Music.
The above resources, as well as some other resources, can be cached for a long time without harm. They won't be updated every day. Based on this, I will give you code that will force the user’s browser to cache the listed resources. Additionally, we will indicate the period during which these resources can be stored in the cache without requesting updates.
Expires Active 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”
This code must be entered into the file .htaccess, which lies in the root folder of the site for which Apache serves as the server. After this, the browser will cache all of the above objects for the specified period. This means that if you visit the same site within a year (as indicated in the example), you will receive many files from your computer, unless, of course, you have cleared your computer’s cache during this time.
Loading...