如何加快web 页面的访问速度

梦里梦外; 2022-08-07 09:38 26阅读 0赞

[如何提升网页加载速度？][Link 1]

## 1. 尽量减少HTTP请求 ##

80%的时间是花在  images, stylesheets, scripts, Flash  
等等的请求上。  
那么最好的提升网站速度的方式就是简化你的设计。  
  
. 简化你页面上的元素  
. 尽可能的用css代替图片  
. 合并多个样式表 放入一个  
. 减少scripts脚本，并把他们放在页面底部

## 2. 减少server响应时间 ##

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

(2) [ 在线检测][Link 2]

(3) [ 使用 YSlow 检测][_ 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_httpd.apache.org_docs_current_mod_mod_deflate.html]  
中文网  
[http://apache.chinahtml.com/mod/mod\_deflate.html][http_apache.chinahtml.com_mod_mod_deflate.html]  
  
添加格式：  
AddOutputFilterByType DEFLATE text/html text/plain text/xml  
详细使用  
请参考：[http://blog.csdn.net/wujiangwei567/article/details/40660471][http_blog.csdn.net_wujiangwei567_article_details_40660471]  
  
(2)nginx  
官方文档：  
[http://wiki.nginx.org/HttpGzipModule][http_wiki.nginx.org_HttpGzipModule]  
详细配置示例：  
[http://blog.chinaunix.net/uid-20622737-id-3464367.html][http_blog.chinaunix.net_uid-20622737-id-3464367.html]  
  
[http://www.jb51.net/article/48995.htm][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][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 On
    ExpiresDefault A0
    
    # 1 YEAR - doesn't change often
    <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
    ExpiresDefault A31536000
    </FilesMatch>
    
    # 1 WEEK - possible to be changed, unlikely
    <FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
    ExpiresDefault A604800
    </FilesMatch>
    
    # 3 HOUR - core content, changes quickly
    <FilesMatch "\.(txt|xml|js|css)$">
    ExpiresDefault A10800
    </FilesMatch>

配置最大生存周期头

# 1 YEAR
    <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
    Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
    
    # 1 WEEK
    <FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    
    # 3 HOUR
    <FilesMatch "\.(txt|xml|js|css)$">
    Header set Cache-Control "max-age=10800"
    </FilesMatch>
    
    # NEVER CACHE - notice the extra directives
    <FilesMatch "\.(html|htm|php|cgi|pl)$">
    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][https_developers.google.com_speed_docs_insights_rules]

[Link 1]: http://blog.crazyegg.com/2013/12/11/speed-up-your-website/
[chrome _ pagespeed]: https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli
[Link 2]: https://developers.google.com/speed/pagespeed/insights/
[_ YSlow]: http://yslow.org/
[http_httpd.apache.org_docs_current_mod_mod_deflate.html]: http://httpd.apache.org/docs/current/mod/mod_deflate.html
[http_apache.chinahtml.com_mod_mod_deflate.html]: http://apache.chinahtml.com/mod/mod_deflate.html
[http_blog.csdn.net_wujiangwei567_article_details_40660471]: http://blog.csdn.net/wujiangwei567/article/details/40660471
[http_wiki.nginx.org_HttpGzipModule]: http://wiki.nginx.org/HttpGzipModule
[http_blog.chinaunix.net_uid-20622737-id-3464367.html]: http://blog.chinaunix.net/uid-20622737-id-3464367.html
[http_www.jb51.net_article_48995.htm]: http://www.jb51.net/article/48995.htm
[https_technet.microsoft.com_en-us_library_cc753681_28v_ws.10_29.aspx]: https://technet.microsoft.com/en-us/library/cc753681%28v=ws.10%29.aspx
[https_developers.google.com_speed_docs_insights_rules]: https://developers.google.com/speed/docs/insights/rules