页面加载速度(加载时优化)
页面的加载速度不仅影响到网站的搜索引擎排名,还严重影响到用户的体验。
以下介绍优化页面加载速度的几种方法:
一、优化图像。
1.去掉不必要的图片;
2.多使用css3代替图片;
3.使用压缩率最高的图片,特别是gif动图,一些视频格式的体积比gif小很多;
4.用艺术字字体,不要用图片;
5.仔细权衡图片和文字的关系,要表达一个意思,可能一图胜千言;
6.使用progressive jpeg,相比随着数据下载从上到下显示的baseline jpeg,前者是由模糊到清晰,用户体验好,也不会导致reflow;
7. 图片分辨率要尽可能小,避免图片分辨率大于显示分辨率;
8.为使用更新浏览器的用户提供更现代化的图片格式;
9.多种分辨率的位图共不同页面大小使用;
10.要给标签指明宽高,否则会导致reflow
二、优化字体
1.@font-face中unicode-range可以制定字符范围,用来避免下载不需要的语言的字符。
2、确保字体都被压缩过
3、用@font-face的display属性和FontFace对象管理好字体加载时的逻辑
三、去掉不必要的插件
四、减少DNS查询(页面加载时间快速有效的方法)
五、最小化重定向:重定向增加了额外的http请求,因此也增加了加载时间,但有时重定向是不可避免的,如链接网站的不同部分、保存多个域名、或者从不存在的页面跳转到新页面。重定向 增加了延迟时间,因此要避免使用它。
六、使用内容分发网络(CDN): 一些必要的插件,如bootstrap,可以引用cnd上的。CDN是位于全球不同地方的高性能网络服务,复制你网站的静态资源,并以最有效的方式来为访客服务,(cdn网址: http://www.bootcdn.cn/)
七、把css文件放在页面顶部,JavaScript文件放在底部
css文件放在页面顶部可以禁止逐步渲染,节省浏览器加载和重绘页面元素的资源。js用于功能和验证,放在底部可以避免代码执行前的等待时间。
八、利用浏览器缓存
再次访问时,可直接从缓存中读取
九、使用css雪碧图:整合图像文件,减少在下载其他资源的往返次数和延迟,从而提高站点的速度
十、压缩css和js:
压缩是通过移除不必要的字符(如tab、空格、回车、代码注释),以帮助减少其大小和页面的后续加载时间的过程。(但还需保存源代码,方便修改)
十一、启动CZIP压缩
GZIP是一个减少发送给访客的HTML文件、JS和CSS体积的工具,压缩的文件减少了HTTP响应时间。
十二、关键渲染路径
浏览器渲染一张网页通过以下步骤:
1.处理HTML标号并构建DOM树
2. 处理css标记并构建CSSOM树
3. 将DOM与CSSOM合并成一个渲染树
4. 根据渲染树来布局,以计算每个节点的几何信息
5. 将各个节点绘制到屏幕上。
优化关键渲染树路径,就是指优化这个渲染过程,让网页尽快呈现出来。
css:
① css文件会阻塞渲染。浏览器构架好DOM树后,必须等待CSSOM树构建完成。
② 在文档顶部防止外联CSS的标签,让浏览器尽快请求css文件。
③ 避免在css文件中使用@import,因为只有包含import的文件被下载编译后,浏览器才会发现并下载import的css
④ 可以考虑内联css,无需额外请求,不会阻塞渲染。
js:
① 在CSSOM构建完成前,js不会开始执行
② js也会阻止DOM树构建,除非在<script>标签上标记async
③ 用chrome开发者工具的audits检查网页
缓存优化
管理好页面的缓存,避免重复下载资源。
浏览器缓存机制:
1.访问页面,请求各种资源,浏览器检查本地是否有缓存
2.如果有,检查资源是否过期。没过期,就直接使用缓存。过期了,便向服务器发送请求。
3.发出的请求中会带伞etag和last-modified首部字段。
4.服务器通过Etag和last-modified来判断浏览器缓存的资源是否已经不可用
5.如果资源仍然有效,便返回304告知浏览器使用缓存。否则返回更新后的资源