大巧不工Web前端设计修炼之道——(7)让你的设计更加完美——优化技巧和最佳实践

1.性能在前端的重要性

网页打开速度一般在2s以内为宜,之后每延迟1s,将失去10%的用户
性能测试工具:

  • Page Speed:网页加速工具,自动优化网站图像
  • YSlow:检查优化的空间,列出修改意见

2.前端性能优化的基本原则

2.1页面内容的优化

  • 降低请求数:合并文件(js、css)、CSS Sprites、剔除重复脚本
  • 减少交互通信量:
    • 压缩技术:压缩JS/CSS(YUI Compressor、Page Speed);优化图像(YSlow工具下的Smush.it在线压缩工具);减少Cookie体积
    • 合理的利用缓存:使用外部JS、CSS;缓存Ajax
    • 减少不必要的通信量:剔除未用到的JS、CSS;推迟加载内容;使用GET来完成Ajax请求(POST方式需要发送文件头,再发送数据,发送两个TCP包);对于静态内容使用无cookie请求
  • 合理利用并行:
    • 尽量避免重定向:当URL结尾本该有斜杠(/)却被省略掉的时候会浪费相应时间
    • 慎用iframe
    • 把样式表置于顶部(放在head内部会加快页面的下载速度)
    • 脚本放到样式后面加载
  • 节约系统消耗:
    • 避免使用CSS表达式
    • 避免使用滤镜

2.2服务器的优化

  • 使用内容分发网络(CDN)
  • 配置合理的缓存机制
  • Gzip压缩文件内容
  • 减少DNS查找次数
  • -

3.让自己更容易被发现

搜索引擎优化。
3.1SEO策略

  • 网站内容的规划和组织
  • 链接策略——SEO的重点
  • 站点地图
  • 关键词的选择和分析

3.2前端搜索引擎友好

  • 友好的用户界面
  • 友好的搜索引擎HTML代码

3.3其他

  • 谨慎地使用用户重定向
  • 避免URL参数
  • 服务器相应速度

3.4维护SEO效果
- 排名监控
- 网站分析
- 关键词监控
- 链接监控
- 内容更新

阅读更多
想对作者说点什么?

博主推荐

换一批

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