Home >Web Front-end >HTML Tutorial >Remember to optimize the page and use the caching mechanism_html/css_WEB-ITnose
Remember to optimize the page and use the caching mechanism_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:361212browse
1. Using the caching mechanism of html5
1. First enter the rule code: m.manifest
CACHE MANIFEST# 2015-04-24 14:20#直接缓存的文件CACHE:/templates/specialty/css/style.css/templates/specialty/js/jquery.js/templates/specialty/js/index.js/templates/specialty/js/custom.js/templates/specialty/js/97zzw.jsNETWORK:*
CACHE: required Cached files
NETWORK: Files that need to be loaded from the network
Of course there are other parameters, but I only test these; Note: Do not cache those that change frequently. If they are already cached, you can pass Modify the manifest file and let the browser recreate the cache.
2. Add a rule file in 100db36a723c770d327fc0aef2ce13b110037f6654caa4dd289e8733d110e670
<!DOCTYPE html><html manifest="m.manifest"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1.0">
3.manifest file needs to be configured The correct MIME-type, which is "text/cache-manifest". Must be configured on the web server.
If you are using Apache, you can add in .htaccess:
AddType text/cache-manifest manifest
After completing the above 3 steps, you can now test
Under chrome:
Caching successful! Continue testing????>
Status code 304, using cache.
Under Firefox:
Summary: When defining rules, be careful to cache data that is not constantly updated, and do not miss writing NETWORK rules; the speed is still significantly improved. .
2. Use css sprite to reduce http requests.
3. Compress the js code and only quote the js required by the current page.
4. Use asynchronous loading of images and content.
5. Enable server gzip compression.
6. Compress css.
7. Compressed html code
After the above optimization, I used Baidu Webmaster Test again and the score has been greatly improved.
The above is the current optimization, and the php function will be optimized in the future.