虽然当下网络服务提供商都在把流量费用做到即为低廉的费用，可能有时用户会认为这么点流量我不在乎，但是现实情况并非如此，在我们网站开发之初，我们就会考虑用户体验，因为流量过大加载慢，会给用户带来很差的体验。下面我们就和尚武科技的网站开发工程师一起来了解一下那些是不必要的下载吧。
　　
　　最好的优化，便是根本不下载资源。所以要尽量减少比不要的资源的上传与下载。
　　
　　1.评估所有依赖是否必要，权衡利弊。
　　
　　2.依赖的下载路径是否可靠，不可用时候是否会阻碍整个页面。
　　
　　3.产品设计时候就需要抛弃浪费带宽的设计。
　　
　　压缩所有可以压缩的资源

　　
　　代码自不用说，都是文本，全部压缩。
　　
　　优化图片
　　
　　1.去掉不必要的图片
　　
　　2.多使用css3来代替图片
　　
　　3.使用压缩率更高的图片。特别是gif动图，一些视频格式（H.264或WebM）的体积比gif小很多。
　　
　　4.用艺术字字体，不要用图片
　　
　　5.仔细权衡图片和文字的关系。要表达一个意思，可能一图胜千言。多了一张图片，反而节省了大量文字。
　　
　　6.使用progressive jpeg。相比随着数据下载从上到下显示的baseline jpeg，progressive jpeg是由模糊到清晰，用户体验好，也不会导致reflow。
　　
　　7.图片分辨率要尽可能小，避免图片分辨率大于显示分辨率。
　　
　　8.为使用更新浏览器的用户提供更现代的图片格式。
　　
　　9.多种分辨率的位图供不同页面大小使用。
　　
　　10.要给标签指明宽高，否则会导致reflow。
　　
　　11.使用HTTP/2。比如，精灵图是由很多小图片组成的一张大图片，可以减少http请求。但是却难以缓存，修改一个小图片，导致所有小图片缓存失效。HTTP/2，一个链接内可以发起多个请求，便无需使用精灵图。
　　
　　优化字体
　　
　　1.@font-face 中unicode-range可以制定字符范围，用来避免下载不需要的语言的字符。
　　
　　2.确保字体都被压缩过。
　　
　　3.用@font-face的display属性和FontFace对象管理好字体加载时的逻辑。
　　
　　关键渲染路径
　　
　　浏览器渲染一张网页通过以下步骤。
　　
　　处理 HTML 标记并构建 DOM 树。
　　
　　处理 CSS 标记并构建 CSSOM 树。
　　
　　将 DOM 与 CSSOM 合并成一个渲染树。
　　
　　根据渲染树来布局，以计算每个节点的几何信息。
　　
　　将各个节点绘制到屏幕上。
　　
　　优化关键渲染路径，便是指优化这个渲染过程，让网页尽快呈现出来。
　　
　　css
　　
　　CSS文件会阻塞渲染。浏览器构建好DOM树后，必须等待CSSOM树构建完成。
　　
　　在文档顶部防止外联CSS的标签，让浏览器尽快请求CSS文件。
　　
　　避免在css文件中使用@import，因为只有包含import的文件被下载编译后，浏览器才会发现并下载import的css。
　　
　　可以考虑使用内联CSS，无需额外请求，不会阻塞渲染。
　　
　　js
　　
　　在CSSOM构建完成前，js不会开始执行。
　　
　　js也会阻止DOM树构建。除非在 <script>标签上标记async。
　　
　　用Chrome开发者工具的audits检查网页。
　　
　　以上就是尚武科技的网站开发工程师为大家带来的关于网站建设中如何有效的节省资源，为加载做好优化的全部介绍，希望大家能够喜欢。