如何加快web 页面的访问速度_html/css_WEB-ITnose

如何提升网页加载速度？

1. 尽量减少HTTP请求

80%的时间是花在  images, stylesheets, scripts, Flash
等等的请求上。
那么最好的提升网站速度的方式就是简化你的设计。

. 简化你页面上的元素
. 尽可能的用css代替图片
. 合并多个样式表 放入一个
. 减少scripts脚本，并把他们放在页面底部

2. 减少server响应时间

(1) chrome 页面速度检查插件 pagespeed

(2) 在线检测

(3) 使用 YSlow 检测

3. 启用压缩

可以考虑使用 gzip 压缩传输 90%的浏览器支持gzip
如 yahoo 减少下载时间 70%

apache：使用 mod_deflate
nginx： 使用 HttpGzipMoudle
iis：   使用 Configure HTTP Compression

(1) apache
英文网
http://httpd.apache.org/docs/current/mod/mod_deflate.html
中文网
http://apache.chinahtml.com/mod/mod_deflate.html

添加格式：
AddOutputFilterByType DEFLATE text/html text/plain text/xml
详细使用
请参考：

(2)nginx
官方文档：
http://wiki.nginx.org/HttpGzipModule
详细配置示例：
http://blog.chinaunix.net/uid-20622737-id-3464367.html

http://www.jb51.net/article/48995.htm
注意该模块是内置的，不需要编译

    gzip on;    gzip_min_length 1k;    gzip_buffers 16 64k;    gzip_http_version 1.1;    gzip_comp_level 6;    gzip_types text/plain application/x-javascript text/css application/xml;    gzip_vary on;

(3)iis

https://technet.microsoft.com/en-us/library/cc753681%28v=ws.10%29.aspx

4. 开启浏览器缓存

方式一：Last-Modified 上一次修改时间

Last-modified: Fri, 16 Mar 2007 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript...)
浏览器在请求的时候，会自动比较上一次修改
时间是否更新，如果未更新，则304启用缓存文件

方式二：ETag 验证签名

ETag: ead145f File Contents (could be an image, HTML, CSS, Javascript...)

如果服务器时间本来就是错的怎么办，签名是唯一证明每一个
文件的唯一标识
如果文件被修改了，ETag会自动更改

方式三：Expires 设置过期时间

Expires: Tue, 20 Mar 2007 04:00:25 GMT File Contents (could be an image, HTML, CSS, Javascript...)
设置缓存失效时间，

方式四：Max-Age 最大生存周期

如何设置：
apache：

开启  mod_headers 和 mod_expires 模块

配置过期头

ExpiresActive OnExpiresDefault A0# 1 YEAR - doesn't change often<filesmatch>ExpiresDefault A31536000</filesmatch># 1 WEEK - possible to be changed, unlikely<filesmatch>ExpiresDefault A604800</filesmatch># 3 HOUR - core content, changes quickly<filesmatch>ExpiresDefault A10800</filesmatch>

配置最大生存周期头

# 1 YEAR<filesmatch>Header set Cache-Control "max-age=31536000, public"</filesmatch># 1 WEEK<filesmatch>Header set Cache-Control "max-age=604800, public"</filesmatch># 3 HOUR<filesmatch>Header set Cache-Control "max-age=10800"</filesmatch># NEVER CACHE - notice the extra directives<filesmatch>Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"</filesmatch>

5. 压缩资源

(1) 压缩HTML
  使用chorme扩展 进行压缩，点击查看 “优化后的内容”
  即可看到压缩后的效果
(2) 压缩CSS
(3) 压缩javascript

6. 优化图像

图像大小  显示多大就放多大的图片
图像格式  jpeg最好 png 次之(古旧浏览器不支持)
          gif少用
src属性   避免空的src属性 如果为空 浏览器会自动请求
          当前整个页面

7. 优化css

避免直接在标签里面添加属性
就是减少行内css样式
尽量将重复的属性部分 添加至一个css类里面封装起来

8. css部分样式内嵌在页面中

部分来自外部文件

9. 减少网站插件的使用数量

10. 减少重定向

详情点击：
https://developers.google.com/speed/docs/insights/rules