如何提高网页的加载速度 ——图片压缩和网页资源缓存

1、gzip压缩
如何开启gzip压缩？
在nginx的配置里面加如下选项：

server{
    gzip on;
    gzip_types    text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

2、Cache-Control （chrome 和 firefox）Safari没带last-modified和cache-control
第一次加载每一个资源都加载一次，第二次只加载html，其他的在本地缓存存取，是Chrome的默认策略，HTML是重新去请求，nginx返回了304 Not Modified
为什么nginx知道没有修改呢？
因为第一次请求，nginx的http响应头里返回了html的本地文件最近修改时间 last-Modified：
第二次请求带上，变成If-Modified-Since字段，两次比较，一旦时间一直，返回304，从客户端取。若没开启，则每次都200重新请求。
手动控制缓存时间：Cache-Control ，设置图片缓存30天，js/css缓存7天
这样响应头会加一个Cache-Control：max-age=604800(s)

location ~* \.(jpg|jpeg|png|gif|webp)$ {
    expires 30d;
}       
location ~* \.(css|js)$ {
    expires 7d;
}

max-age的优先级大于last-modified。如果要强制不缓存，把expires时间设置为0
3、使用etag
很多网站使用模板渲染，每次请求都是重新渲染，生成的文件的last-modified肯定是不一样的，而使用max-age你无法知道精确控制页面的数据什么时候会发生变化。
nginx开启etag只需要在server配置里面加上一行：

etag on;

etag就是对文件做的一个校验和，第一次访问时，响应头里面返回这个文件的etag，浏览器第二次访问的时候把etag带上，nginx根据这个etag和新渲染的文件计算出的etag进行比较，如果相等则返回304。第二次访问带上etag，在If-None-Match字段，服务返回304，如果我把html文件修改了，那么这个etag就会发生变化，服务返回200。
由于etag要使用少数的字符表示一个不定大小的文件，所以etag是有重合的风险。使用etag的代价是增加了服务器的计算负担，特别是当文件比较大时。