网页的资源加载优化,提升网页加载性能

目录：

• 1、如何提高页面加载速度
• 2、如何优化网页加载速度
• 3、如何优化网站页面提高网页的加载速度
• 4、怎么让网站运行变慢一点？
• 5、优化网站的方法有哪些？

如何提高页面加载速度

如何提高页面加载速度

网站最重要的一个核心就是用户体验，网站的打开速度影响着访客的浏览体验，提高网站页面的加载速度的方法其实有很多，下面我主要从下面四个角度进行讨论，分享常用的提高网页加载速度的技巧：

一、网页压缩技术

对于网页压缩而言，相信各位站长都比较熟悉，主要是启用服务器Gzip，对页面Gzip压缩，减少元素的'体积，从而减少数据的传输，进而提高网页的加载速度。

二、CSS优化

(1)css位置

CSS说明如果出现在后，页面需要重新渲染，打开速度受到影响。所有css定义代码的位置要放到网站之前。

(2)css sprite技

网站上的一些图片可以采用css sprite技术进行合并，减少加载请求次数，从而提高网页的加载速

(3)css代码优化

通过对css代码属性的简写、移除多余的结构(fr ameworks)和重设(resets)等一系列的方法和技巧来简化css代码，减小css文件的大小。

三、缓存静态资源

通过设置浏览器缓存，将css、js等不太经常更新的文件缓存在浏览器端，这样同一访客再次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、js等，而不必每次都从你的服务器读取，这样在一定程度上加快了网站的打开速度，又可以节约你的服务器流量。

四、JS优化

(1)JS位置

网页代码中对js进行优化的时候，建议将JS放在页面最后，这样可以加快页面打开速度。

(2)合并JS

合并相同域名下的js，通过减少网络连接次数从而提高网页的打开速度。

(3)LazyLoad(延迟加载)技术

Lazy Load是一个用ja vasc ript 编写的 jQuery 插件，它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置。例如本人的破折君博客就采用这个图片延迟加载功能。

;

如何优化网页加载速度

如果一个网站打开速度特别慢的话会流失很多用户，因为用户有很多选择， 没必要去花时间等待你这个网站，导致网站流量大大下跌。所以提高网页加载速度显得尤其重要。

网站加载速度与服务器配置和带宽息息相关，但也离不开网站资源的优化：

1.选择可靠服务器或者虚拟主机为提高速度打基础

2.开启gzip功能对网站源文件进行压缩

3.精简网页网页源文件降低网页大小

4.减少flash或者大图片的使用

5.非必要js放到页面底部延时加载

6.使用cdn对网站进行加速

7.js css文件外部调用减小文件大小

8.生成静态文件提高加载速度

9.使用缓存技术提高加载速度

以上九点是我们常用到的提高网页加载速度的手段，我们应该适当的选择一些使用二不能为了提高速度而伤害用户体验。

比如：把一些形象的图片替换问文字，这明显是不可取的。所以说seo是一件要考虑面面俱到的的事情，不能捡了芝麻丢了西瓜。

如何优化网站页面提高网页的加载速度

要想提升网页加载速度，提高打开速度，个人建议做好这些方面：

1、页面尽量少放图片、视频等占空间的东西，如果是在药房，那就对页面图片、视频进行压缩，尽可能保证清晰度的同时，减少图片、视频的内存大小；

2、网站页面代码精简，保持整洁。去除冗余，压缩css样式和javascript文件能够有效的减小页面大小，删除不必要的空格等字符可以提高加载速度；

3、也可以通过减少HTTP的请求次数来提高网站的加载速度的。比如：css样式尽量放在一个文件里面；又或者是，利用DIV+CSS搭建网页，减少表格、框架等的使用；

4、现在百度推出提升移动页面加载速度30-50%的MIP页面，建议移动端参照百度MIP官方的模板与规则来写。

5、保证服务器/空间的稳定，也有利于快速打开网页。

以上就是快速优化网页加载速度的方法了。

怎么让网站运行变慢一点？

好奇心日报无论是设计还是内容都追求高品质，于是丰富的图文混合成了标配：首页的banner图，文章详情页的配图，研究所有趣的gif图等等。

特别严重的时候，一篇文章有十多个gif图，加载花费的时间10-20秒之长，加载消耗的流量几十M之多，严重影响了用户体验！尤其是Mobile端，一寸流量一寸金；3-5s打不开页面，用户都会直接逃离。所以网页加载速度优化势在必行！

我们都知道一个网页的加载流程大致如下：

1、解析HTML结构。

2、加载外部脚本和样式表文件。

3、解析并执行脚本代码。// 部分脚本会阻塞页面的加载

4、DOM树构建完成。//DOMContentLoaded 事件

5、加载图片等外部文件。

6、页面加载完毕。//load 事件

一句话就是：请求HTML，然后顺带将HTML依赖的JS/CSS/iconfont等其他资源一并请求过来。

那么优化网页的加载速度，最本质的方式就是：减少请求数量 与 减小请求大小。

减少请求数量

1、将小图标合并成sprite图或者iconfont字体文件

2、用base64减少不必要的网络请求

3、图片延迟加载

4、JS/CSS按需打包

5、延迟加载ga统计

6、等等...

减小请求大小

1、JS/CSS/HTML压缩

2、gzip压缩

3、JS/CSS按需加载

4、图片压缩，jpg优化

5、webp优化 srcset优化

6、等等...

优化网站的方法有哪些？

1.优化图片资源的格式和大小

一个网页中，图片资源的大小占比是最多的，而且单个的文件的大小也很可观。因此，在保证图片质量不变的情况下，尽可能的使用高压缩率的图片格式，图片格式可以按照这个优先级选择webp jpeg png bmp。同时也要根据图片展示尺寸来拉取大小最为匹配的图片资源，不要没事就把原图拉下来使用。以前我就遇到过这种情况，一个196*196大小区域展示的图片，它的文件竟然达到了几兆，最后才发现把1960*1960分辨率的原图拉下来了。

2.开启网络压缩

大部分浏览器在发出请求时，会带上这个标记「Accept-Encoding: gzip, deflate」，表示这个浏览器可以接受以gzip压缩方式传输数据，如果你的网页服务器也支持gzip压缩数据，那么数据以gzip方式传输时，会减少70～80%的流量。

3.使用浏览器缓存

同一个站点下面的不同页面，往往都会复用一部分资源文件，如果把这些资源文件设置为可缓存的，那么在刷新或者跳转到另一个页面时，都无须再从网络拉取相关资源，这样就大大加快了网页的加载速度。

4.减少重定向请求

有的网站对于不同的终端制作了不同的页面，比如说在手机上访问微博，会从weibo.com重定向至weibo.cn，每一次重定向都会导致浏览器重新发起请求，延长加载时间。对于这种情况，应该尽可能使用响应式设计，一个weibo.com站点覆盖至所有终端。

5.使用CDN存储静态资源

CDN是一种静态内容分发网络，它在每个省，甚至每个城市都部署有自己的服务器，用于分发这些静态内容，那么当某个城市的用户要拉取某个资源时，他会首选从本地的CDN服务器上拉取，这样可以保证他最快速的获得该资源。据砖家统计，网络资源中有70%的是静态资源。这就意味着，有70%的内容产生后是不会变化，那么将它们全部放在CDN上面，可以提升这70%的资源的下载速度。

6.减少DNS查询次数

很多人喜欢把不同的图片挂在不同当域名下，比如说图片A挂在a.pm-teacher.com，图片B挂在b.pm-teacher.com。当一个网页同时使用图片A和图片B时，浏览器需要查询两个域名，要知道，每次解析域名都是会浪费时间的，所以尽可能的将全部图片放在一个域名下。

7.压缩css和js内容

这里说的压缩和第2点并不重复，上面提到的压缩是不改变文件内容的压缩。而css和js中有大量的空格和变量命名（如hello="hello word";），如果将这些空格去除，并用简单的字母来代换变量名（如a="hello word";），那么这些css和js原文件的大小也会缩小，这样也对加快拉取速度是有帮助的。

不知道你有没有看出来，上面提到的优化方案的核心就3点：减少请求数、减少资源大小、找最快的服务器。如果你是一个网站的产品经理，快去找你们的开发确认是否有做过类似的优化吧。