WordPress优化之设置浏览器端缓存:Leverage browser caching

网站上的静态内容,诸如:图片、CSS、JS、flash等,一般变动很小,甚至几个月都不会有所更改,这些体积庞大的静态内容占据了大部分网页加载时间。如何降低静态内容加载时间,甚至不需要(二次)加载静态内容,Leverage browser caching(浏览器端缓存)可以有效地解决这一问题,他使得浏览器可以缓存静态内容,使得浏览器不需要二次加载这些内容。

实现方法很简单,向.htaccess文件中添加以下代码:

#Expire Header
ExpiresActive on
ExpiresByType text/css "access 1 month"
ExpiresByType text/plain "access 2 days"
ExpiresByType text/html  "access 2 days"
ExpiresByType application/javascript "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/ico "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"

#Expire Header
ExpiresActive on //开启缓存
ExpiresByType text/css “access 1 month”//css文件缓存1个月
ExpiresByType text/plain “access 2 days”//纯文本内容缓存2天
ExpiresByType text/html “access 2 days”//html文件缓存2天
ExpiresByType application/javascript “access 1 month”//JS文件缓存1个月
ExpiresByType image/jpeg “access 1 month”//jpeg图片缓存1个月
ExpiresByType image/x-icon “access 1 month”//icon缓存1个月
ExpiresByType image/gif “access 1 month”//gif图片缓存一个月
ExpiresByType image/png “access 1 month”//png图片缓存一个月
ExpiresByType image/ico “access 1 month”//ico缓存1个月
ExpiresByType application/pdf “access 1 month”//pdf文件缓存一个月
ExpiresByType application/x-shockwave-flash “access 1 month”//flash缓存一个月
ExpiresDefault “access 1 month”// 默认(未提及的可缓存文件)缓存1个月

 

保存后刷新网页,用Yslow测试可以看到,绝大部分内容都被缓存了。也就是说:读者第一次打开网页加载所有静态文件,以后再访问该页面,就不需要加载了。如果其他页面也使用相同的静态文件(比如js和css),那么访问其他页面也会很快(直接在浏览器的缓存里提取相应的静态内容)。

读者第一次打开网页加载静态文件并缓存,以后再访问该页面,就不需要加载

该方法需要apache的mod_expires,Ubuntu下用a2enmod expires开启。

CC BY-NC-SA 4.0 WordPress优化之设置浏览器端缓存:Leverage browser caching by 桔子小窝 is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

发表回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据