Leverage Browser Vaching Solution

Using Browser Caching

What it is:Using the browser’s caching feature, it is loading files such as images, CSS, HTML or JavaScript from the browser cache without reloading each time the page is visited.
Solution:Adding certain codes to the .htaccess file.
Expert Comment:We generally set this up on our servers. Timeout for static contents is also prepared with cloudflare. However, this warning generally comes from 3rd party software. The important thing here is to remove the versioning in the content we use. Or change the name.

General Explanation

Page loading times can be significantly improved and shortened. To do this, you can ask page visitors to save the content of your website and reuse it.

  • Page loading times are shortened for repeat visitors.
  • It is especially effective on websites where users regularly revisit the same areas of their website.
  • The cost-benefit ratio is very high. For this reason, an improvement is provided in terms of cost.
  • Access is required.

What are the General Rules for Setting Times?

  • Should be completely static content (global CSS styles, logos, etc.) – access + 1 year
  • Everything else – access + 1 week

What is the browser cache?

Every time a browser loads an internet page, it is necessary to download all web files in order to view the page correctly. These files contain all CSS, HTML, JavaScript and images.

While some pages can only consist of a few files and may be small in size – we are only talking about a size such as a few kilobytes. But; there can be quite a lot of files for other pages than these pages, and these files can be several megabytes in size. For example; Twitter.com is 3 MB and above.

With such loaded files, the speed problem is doubled.

  • It takes a long time to load these large files on the website. If; If you have a slow internet connection or if you are trying to view this page from a mobile device, this process can be particularly painful for users because of the long load time and the long waiting time.
  • Each of these installed files will make a separate request to the server. The more requests your server receives at the same time, the more work it will need to do. This situation directly reduces your page speed.

The browser cache can help store some of these files locally in the user’s browser to help reduce load and slow page speed. The loading time will be the same the first time they visit your website. But; even when the same user revisits your website, refreshes the website or switches to another page on your website, they have some files they need locally. This is done by the browser cache storing some of the installed files locally in the user’s browser.

This means that the amount of data that the user’s browser needs to download is less and your server needs less requests. The result is reduced page load times.

How does it work?

Browser caching works by marking specific pages or sections of pages that need to be updated periodically. For example; The logo on your website is unlikely to change from day to day. By caching this logo image, the visitor can be told to download the image to his browser only once a week. Thus, the visitor does not need to download the browser logo image again for every visit to your website within the same week.

By telling the web server to save these files to the browser and not to download those files again when you come back, you save your users time while also saving your web server bandwidth.

Why it matters?

The main reason why browser caching is so important is to ease the load on your web server, which also reduces your users’ load time.

How to Use Browser Cache Removal?

To enable browser cache, you must edit your HTTP headers to determine expiration times for specific file types.

Configuring Apache to Offer Appropriate Titles

Find your .htaccess file at the root of your domain. This file is a hidden file, but; It should appear on FTP clients like FileZilla or CORE. You can edit the .htaccess file with notepad or any basic text editor.

In this file, we will set our cache parameters to tell the browser what kind of files to cache.

<IfModule mod_expires.c>

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/mp4 "access plus 1 year"

ExpiresByType video/mpeg "access plus 1 year"



# CSS, JavaScript

ExpiresByType text/css "access plus 1 month"

ExpiresByType text/javascript "access plus 1 month"

ExpiresByType application/javascript "access plus 1 month"



# Others

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType application/x-shockwave-flash "access plus 1 month"

</IfModule>

You can set different termination times according to the files of your website. If some file types, such as Css files, are updated more frequently, you can set an earlier time-out period for the files.

When you’re done, you should save the file as a .txt file.

If you are using any CMS, there may be cache extensions or plug-ins.

  • Be aggressive about caching for all static resources.
  • Use a minimum of one month expiration (recommended: access plus 1 year).
  • Do not cache more than a year ago!

Things to pay attention

Be careful when caching the browser, if you have set the parameters to be quite long on certain files. Your visitors may not be able to view the new version of your website after updates.

You should be careful, this is especially true if you are working with an external designer for changes to your website. The designer may have made changes, but; you may not have seen these changes yet. This is because the modified items are cached in your browser.

Page Speed Terms and Solutions

Recent Articles

Domain and Corona Virus

Hello GuysAfter the coronavirus started, many domain investors started registering domains related to corona.According...

Superconductors and Superconductor Physics 2020

You plug the cable into the wall socket and run the device by passing the electric current through...

How to Write SEO-Friendly Articles 2020

What is an SEO Friendly ArticleIt draws an increasing graph in the right proportion...

New Release of The Witcher 3 Redux – Free Download

A new version of The Witcher 3 Redux Mod has been released by a modder. The new version...

Worm Manure (Vermicompost) – 2020

Worm manure production can be initiated with large-scale commercial thinking, as well as the increasing number of red...

Related Stories

Your feedback is valuable to us

MediaZone - Ge the daily news in your inbox