crap

In fact, my website speed should be OK now (weird confidence). Are there any friends who visit my blog very slowly? Tell me in the comments!

The host computer room is in Hong Kong, and the test result is as follows:
time.png

But Google gave me a failing grade!!! Part of the reason is that there is no cache. I thought caching was very difficult, but I didn't expect it to be so simple==. Now Google scores 84 points. happy!

brief introduction

Expires headers literally translate: Expiration headers tell the browser an expiration time. Within this expiration time, the browser will keep the cache! In this way, entering the blog again will reduce http requests and speed up!

How to set

There is a file like. htaccess in the blog directory of the Apache host (some are hidden). This file is very powerful. Add some statements in it to tell the browser the expiration time.

Here are some simple statements.

  • Statement format 1: ExpiresByType A/M+time (in seconds)

A: Access means from the browser access time
M: Modification indicates that the file modification time starts

For example, ExpiresByType image/png A604800 sets the png format cache time to 7 days
  • Statement format 2: ExpiresByType descriptive language

Descriptive languages: modification, access, now | plus | years, months, weeks, days, hours, minutes, seconds

For example, ExpiresByType image/png "access plus 7 days" sets the png format cache time to 7 days
  • Statement format 3: match format
 <FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> ExpiresDefault A604800 </FilesMatch>
Indicates that the file cache matching jpg | jpeg | png | gif | swf format is 7 days

Is it very simple!

Then give me what I wrote, and you can modify it based on your change frequency.

 <IfModule mod_expires.c> #Open ExpiresActive On #The following are different cache time settings for different file types ExpiresByType image/x-icon A2592000 ExpiresByType application/x-javascript A2592000 ExpiresByType text/css A2592000 ExpiresByType image/gif A604800 ExpiresByType image/png A604800 ExpiresByType image/jpeg A604800 ExpiresByType text/plain A604800 ExpiresByType application/x-shockwave-flash A604800 ExpiresByType video/x-flv A604800 ExpiresByType application/pdf A604800 ExpiresByType application/javascript "access plus 1 year" ExpiresByType image/svg A604800 </IfModule>

Some rules

  • Static files: implement the principle of "never expire" by setting a sufficiently long expiration time.
  • Dynamic file: set an appropriate Cache Control header. What is appropriate? The principle is simple. Set the change frequency of the dynamic content. Set a shorter expiration time for the content that is frequently modified, and a longer expiration time for the content that is not changed.
  • Never cache html files, or a series of problems will occur! This point is also explicitly mentioned in the Level browser caching rule of PageSpeed:
In general, HTML is not static, and shouldn’t be considered cacheable.

  • Usually these file types need to be cached:

    • Images: jpg, gif, png
    • favicon/ico
    • JavaScript: js
    • CSS: css
    • Flash: swf
    • PDF: pdf
    • Media files: video, audio files
  • Time stamp or version number for static file name (Very important! Otherwise, how can visitors know if you want to clear the cache to get the latest code files?)

The last thing to note is that files with Expires headers have been added (for a long time). If you need to modify them within the set expiration time, you must modify the file name or add a timestamp to modify the file. In this way, when users visit the page again, they will request new files from the server. For example, if you need to modify the layout. css file on the home page, you can do this:

 //Original call processing <link href="/css/layout.css" rel="stylesheet" /> //Call new file processing <link href="/css/layout-v20140913.css" rel="stylesheet" /> //Or do it this way <link href="/css/layout.css?version=v20140913" rel="stylesheet" />

Reference article

Apache enables mod_expires or mod_headers to set the static file cache time
Front end performance optimization: Add Expires headers

Last modification: February 24, 2019
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.