Use the browser's cache to speed up your Website

Use the browser's cache is a complex task. There are a few plugins are configured using the browser's cache to speed up web Website. If configured correctly will help you improve your website speed. Conversely, if you have configured the plugin incorrectly, they will make your website slow speed instead go faster as original features that the plugin offers.

1. WHY YOU SHOULD USE THE BROWSER'S CACHE TO SPEED UP YOUR SITE

In the study of Pingdom Tool which test and appraise the speed of the Web page, I was submitted showing how the browser's content on a Web page.

  • Foremost, the browser requires this Web site server to transmit the necessary files (such as images, video, logos, CSS files, JavaScript code, HTML 
  • files,...) to display the content of a Web page in the browser.
  • Succeeding, the server search files that the browser requires.
  • Lastly, the host transmits the file to the browser. Browser rearranges that information and display Web pages that the user requests.

The first time you get to the Web page, the browser which you are using will complete all required files from that web server. The browser tells the server that I need 100 files to display this Web page for the user. The server finds and sends down 100 files to the browser. Receiving full file browser, start running the code to display the webpage content.

In this first, most of the files stored in the browser's cache (assuming there are 80 files were stored in the cache). The next time when you come back to this web page, the browser will retrieve 80 files which were stored in the cache. The 20 residual files aren’t stored in the cache, will be downloaded from the Web server rather than download 100 files from the server. This helps speed up page loads faster. However, how do the browser know which it can draw from the cache and which it must request from the host?... 

Expires Headers help the browser to do it.

2. EXPIRES HEADERS AND ITS CHARGE 

Expires Headers is the code which is inserted into Webserver to notify for the browser about the lifetime of the files that are stored in the browser’s cache. Here is an example of Expires Headers was inserted in the content of the file .htaccess:

# ----------------------------------------------------------------------

#  Expires Headers Content

# ----------------------------------------------------------------------

<IfModule mod_expires.c>

ExpiresActive on

 

# With HTML files

ExpiresByType text/html "access plus 0 seconds"

 

# With image, video, audio files

ExpiresByType audio/ogg "access plus 1 month"

ExpiresByType image/gif "access plus 1 month"

ExpiresByType image/jpeg "access plus 1 month"

ExpiresByType image/png "access plus 1 month"

ExpiresByType video/mp4 "access plus 1 month"

ExpiresByType video/ogg "access plus 1 month"

ExpiresByType video/webm "access plus 1 month"

 

# CSS and JavaScript

ExpiresByType application/javascript "access plus 1 year"

ExpiresByType text/css "access plus 1 year"

</IfModule>

We will examine the role of each of the above codes. 

ExpiresActive on: You have activated the countdown mode about the file exists in your browser's cache 

# With HTML files

ExpiresByType text / html "access plus 0 seconds" - the lifetime of the HTML file, in the cache is 0 seconds, which means the html files are not stored in 

the cache. The next time when you get back to this website, you will have to download that file from the server, not from the cache.

# With image, video, audio files

ExpiresByType audio/ogg "access plus 1 month"

ExpiresByType image/gif "access plus 1 month"

ExpiresByType image/jpeg "access plus 1 month"

ExpiresByType image/png "access plus 1 month"

ExpiresByType video/mp4 "access plus 1 month"

ExpiresByType video/ogg "access plus 1 month"

ExpiresByType video/webm "access plus 1 month"

The audio file (the .ogg file format) exists in the browser's cache within 1 month. Likewise, the image file (with .gif, .jpeg, .png) and video files (.mp4, .ogg, .webm) also exist on caching within 1 month.

# CSS and JavaScript

ExpiresByType application/javascript "access plus 1 year"

ExpiresByType text/css "access plus 1 year"

Similarly, the file containing the javascript code and css files also exists on caching within 1 year. In the next time when you come back this website, it will send requests for the file to display content. With the html files, because they are not stored in the cache. Thus, they should be downloaded from the host.

With the images which saved on the browser within 1 month, the browser will take them from the browser's cache. Similar to video, audio, CSS and JavaScript, too.

Note:

The file exists in the browser's cache will be deleted when they expire. In the case above, the image files, video, audio after a month will expire and be deleted from the cache, the lifetime of CSS files in the cache is 1 year. But in that time, if you clear your browser's cache, all the files of the website you've ever visited will be deleted.

Of course, the image files, video, audio on this site will be deleted from the cache. The next time you come back the site after deleting the cache entirely similar to your first visit, meaning that you have to download all files from the server because the files are no longer on the caching of  the browser.


Choose a language

SEARCH

CMMS Lazada

Subscribe YouTube

 

Hải sản Vân Đồn

Chào mừng bạn đến với chuyên mục giới thiệu và cung cấp các mặt hàng hải sản của Vân Đồn. Hải sản Vân Đồn - Quảng Ninh | Tươi ngon, bổ dưỡng và đảm bảo với giá cả phải chăng. Xem trang....

UDEMY COURSES

Sitewide2of4-Oct-15dollars300x250