网站优化的一些建议

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39658215/article/details/81002461

1.减少http请求

图片地图--一个图片上关联多个url,目标url的选择取决于用户点击了图片上的哪个位置。

css sprites--将多个图片合并到一个单独的图片上,使用background-position属性。

内联图片--使用data:URL模式在Web页面中包含图片但无需任何额外的http请求。

合并脚本和样式表--每个文件都需要一个额外的http请求,分别合并到一个文件中,可以减少http请求的数量并缩短最终用户响应时间。

——减少http请求

2.使用内容发布网络

如果应用程序web服务器离用户更近,则一个http请求响应时间将缩短。

如果组件web服务器离用户更近,则多个http请求响应时间将缩短。

内容发布网络(CDN)是一组分布在多个不同地理位置的web服务器,用于更加有效地向用户发布内容。

除了缩短响应时间之外,cdn还可以带来其他优势。他们的服务包括备份、扩展存储能力和进行缓存。cdn还有助于缓和web流量峰值压力。

依赖CDN的一个缺点是你的响应时间可能会受到其他网站-甚至很可能是你的竞争对手流量的影响。

——使用内容发布网络

3.添加Expires头

web服务器使用expires头告诉web客户端它可以使用一个组件的当前副本,直到指定时间为止。

例:Expires:Mon,15 Apr 2099 20:00:00 GMT

如果为页面中的一个图片返回了这个头,浏览器在后续的页面浏览中会使用缓存的图片,将http请求的数量减少一个。

HTTP1.1引入了Cache-Control头来克服expires头的限制。因为expires头使用一个特定的时间,它要求服务器的客户端的时钟严格同步。另外,过期时间需要经常检查,万一未来这一天到了,还需要配置一个新的日期。

Cache-Control使用max-age指令指定组件被缓存多久。

例:Cache-Control:max-age=315360000

(mod_expires Apacha模块可以使expires头像max-age那样以相对的方式设置日期,将过期时间设计为自请求开始的10年之后,有需要自行查询)

 不仅仅是图片--为图片使用长久的expires头很常见,但长久的expires头应该包含任何不经常变化的组件,包括脚本、样式表和flash组件,但html不应该使用。

——为组件添加长久的expires头

4.压缩组件

例:Accept-Encodeing:gzip,deflate

Apacha 1.3的mod_gzip

Apacha 2.x的mod_deflate

代理缓存--web服务器可以告诉代理根据一个或者多个请求头来改变缓存的响应。

例:Vary:Accept-Encoding

——压缩脚本和样式表

5.将样式表放在顶部

——使用LINK标签将样式表放在文档HEAD中

6.将脚本放在底部

——将脚本移到页面底部

7.避免css表达式

例:background-color:expression((new Date()).getHours()%2 ? “#fff”:“#000”);

上面写法会导致页面多次求值降低性能。

IE不支持min-width属性,可以用表达式的方式解决。

width:expression(document.body.clientWidth<600?"600px":"auto");

min-width:600px;

实际使用过程中,应避免这种写法。

——避免css表达式

8.使用外部javascript和css

——将javascript和css放到外部文件中

9.减少DNS查找

将组件分别放到至少2个,但不超过4个主机名下。

——通过使用keep-alive和较少的域名来减少DNS查找

10.精简javascript

——对javascript源代码进行精简

11. 避免重定向

发生重定向的情况:

缺少结尾的斜线;

连接网站--使用重定向连接两个网站;

跟踪内部流量;

跟踪出站流量;

美化url。

解决方案:Alias,mod_rewite,DirectorySlash。

——寻找一种避免重定向的方法

12.删除重复脚本

——确保脚本只被包含一次

13.配置ETag

实体标签是web服务器和浏览器用于确认缓存组件有效性的一种机制。

——配置或者移除ETag

14.使ajax可缓存

——确保ajax请求遵守性能指导,尤其应具有长久的expires头

  1. Minimize HTTP Requests
  2. Use a Content Delivery Network
  3. Avoid empty src or href
  4. Add an Expires or a Cache-Control Header
  5. Gzip Components
  6. Put StyleSheets at the Top
  7. Put Scripts at the Bottom
  8. Avoid CSS Expressions
  9. Make JavaScript and CSS External
  10. Reduce DNS Lookups
  11. Minify JavaScript and CSS
  12. Avoid Redirects
  13. Remove Duplicate Scripts
  14. Configure ETags
  15. Make AJAX Cacheable
  16. Use GET for AJAX Requests
  17. Reduce the Number of DOM Elements
  18. No 404s
  19. Reduce Cookie Size
  20. Use Cookie-Free Domains for Components
  21. Avoid Filters
  22. Do Not Scale Images in HTML
  23. Make favicon.ico Small and Cacheable

  1. 最小化HTTP请求
  2. 使用内容分发网络
  3. 避免空src或href
  4. 添加Expires或Cache-Control标头
  5. Gzip组件
  6. 将StyleSheets放在顶部
  7. 把脚本放在底部
  8. 避免使用CSS表达式
  9. 使JavaScript和CSS外部
  10. 减少DNS查找
  11. 缩小JavaScript和CSS
  12. 避免重定向
  13. 删除重复的脚本
  14. 配置ETag
  15. 使AJAX可以缓存
  16. 使用GET进行AJAX请求
  17. 减少DOM元素的数量
  18. 没有404s
  19. 减少Cookie大小
  20. 使用Cookie免费域进行组件
  21. 避免过滤器
  22. 不要在HTML中缩放图像
  23. make favicon.ico Small and Cacheable

展开阅读全文

没有更多推荐了,返回首页