如果你的网站打开时间超过 5 秒种，那你的用户会离开你。
我们站在前端的角度, 都可以做哪些优化呢?
来自谷歌的 Web 优化实践
- 避免资源 404 请求
- 避免CSS @import
import 依赖关系, 加载完一个再加载另一个
- 避免使用document.write
- 合并、压缩 CSS, JS文件
- 精灵图整合图像, 字体图标代替部分图片
- 延迟 JavaScript 加载
- 启用Keep-Alive
- 将小的CSS和JavaScript代码内嵌到HTML中
- 利用浏览器缓存不长变更的资源
- 尽量减少DNS查询次数
- 尽量减少重定向
- 优化样式表和脚本的顺序
- 避免JavaScripts阻塞渲染
- 缩小原始图像
- 指定图像尺寸
来自雅虎的 Web 优化实践
- 内容优化
- 避免资源 404 请求
- 减少 HTTP 请求
- 减少 DNS 查找
- 减少重定向
- 预加载组件
- 延迟加载脚本和内容
- Ajax 缓存文件资源
- 减少 DOM 元素数量
- 根据域名划分页面内容
- 最小化 iframe 数量
- 服务器优化
- 使用 CDN 内容分发网络
- 添加Expires或Cache-Control信息头
- Gzip 压缩
- 设置 Etag , 判断服务器与浏览器缓存中内容的一致性
- 提前刷新缓冲区
- 对Ajax请求使用GET方法
- 避免空的 src
- cookie 的优化
- 减少 cookie 的大小
- 针对Web组件使用域名无关的Cookie ( 突破 cookie 大小的限制 )
- CSS 优化
- 将CSS代码放在HTML页面的顶部
- 避免使用CSS表达式
- 使用
<link>来代替@import - 避免使用Filters
- JavaScript 优化
- 将JavaScript脚本放在页面的底部
- 将JavaScript和CSS作为外部文件来引用
- 缩小JavaScript和CSS
- 删除重复的脚本
- 最小化DOM的访问
- 开发智能的事件处理程序
- 图像优化
- 优化图片大小
- 指定图片大小
- 使用精灵图
- favicon 尽量小, 可缓存
- 针对移动优化
- 保持组件大小在 25KB 以下, iPhone 不能缓存 25KB 以上文件
- 打包组件
版权属于：行川草庐 - 行川的网络日志
本文链接：https://www.xing-chuan.com/archives/15.html
本作品由行川采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可
