如何提升网站的访问速度

如果你的网站打开时间超过 5 秒种，那你的用户会离开你。
我们站在前端的角度, 都可以做哪些优化呢?

来自谷歌的 Web 优化实践

1. 避免资源 404 请求
2. 避免CSS @import

import 依赖关系, 加载完一个再加载另一个

1. 避免使用document.write
2. 合并、压缩 CSS, JS文件
3. 精灵图整合图像, 字体图标代替部分图片
4. 延迟 JavaScript 加载
5. 启用Keep-Alive
6. 将小的CSS和JavaScript代码内嵌到HTML中
7. 利用浏览器缓存不长变更的资源
8. 尽量减少DNS查询次数
9. 尽量减少重定向
10. 优化样式表和脚本的顺序
11. 避免JavaScripts阻塞渲染
12. 缩小原始图像
13. 指定图像尺寸

来自雅虎的 Web 优化实践

1. 内容优化

• 避免资源 404 请求
• 减少 HTTP 请求
• 减少 DNS 查找
• 减少重定向
• 预加载组件
• 延迟加载脚本和内容
• Ajax 缓存文件资源
• 减少 DOM 元素数量
• 根据域名划分页面内容
• 最小化 iframe 数量

1. 服务器优化

• 使用 CDN 内容分发网络
• 添加Expires或Cache-Control信息头
• Gzip 压缩
• 设置 Etag , 判断服务器与浏览器缓存中内容的一致性
• 提前刷新缓冲区
• 对Ajax请求使用GET方法
• 避免空的 src

1. cookie 的优化

• 减少 cookie 的大小
• 针对Web组件使用域名无关的Cookie ( 突破 cookie 大小的限制 )

1. CSS 优化

• 将CSS代码放在HTML页面的顶部
• 避免使用CSS表达式
• 使用<link>来代替@import
• 避免使用Filters

1. JavaScript 优化

• 将JavaScript脚本放在页面的底部
• 将JavaScript和CSS作为外部文件来引用
• 缩小JavaScript和CSS
• 删除重复的脚本
• 最小化DOM的访问
• 开发智能的事件处理程序

1. 图像优化

• 优化图片大小
• 指定图片大小
• 使用精灵图
• favicon 尽量小, 可缓存

1. 针对移动优化

• 保持组件大小在 25KB 以下, iPhone 不能缓存 25KB 以上文件
• 打包组件

版权属于：行川草庐 - 行川的网络日志

本文链接：https://www.xing-chuan.com/archives/15.html

本作品由行川采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可