如何优化网页(如何优化网页加载速度)-冯金伟博客园

优化网站的方法有哪些?

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

在一个网页中,图片资源的大小占的比重最大,单个文件的大小也是相当可观的。所以在保证相同画质的情况下,尽量使用压缩率高的图片格式,WebP >:JPEG & gt;png & gt骨形成蛋白.同时根据图片的显示尺寸,拉最匹配尺寸的图片资源,不要把原图拉下来使用。我以前也遇到过这种情况。一张图片在196*196区域显示的文件大小居然达到了几兆。最后发现原来分辨率为1960*1960的图被拉了下来。

2.打开网络压缩

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

3.使用浏览器缓存

同一站点下的不同页面往往会重用一些资源文件。如果将这些资源文件设置为可缓存,那么在刷新或跳转到另一个页面时,就不需要从网络上拉取相关资源,从而大大加快了网页的加载速度

4.减少重定向请求。

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

5.使用CDN存储静态资源

CDN是一种静态的内容分发网络。它在每个省甚至每个城市都有自己的服务器来分发这些静态内容。所以当某个城市的用户想要拉一个资源的时候,他会先从当地的CDN服务器上拉,这样可以保证他最快的获得资源。据专家统计,70%的网络资源是静态资源。这就意味着70%的内容在制作出来之后是不会改变的,所以把它们都放到CDN上可以提高这70%资源的下载速度。

6.减少DNS查询的数量

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

7.压缩css和js内容

这里提到的压缩,点2就不重复了。上面说的压缩是不改变文件内容的压缩。css和js中有大量的空case和变量名(比如hello = & quothello word & quot;),如果去掉这些空格,用简单字母代替变量名(比如a = & quothello word & quot;),那么这些css和js原始文件的大小也会减小,这也有助于加快拉取速度。

不知道大家有没有看到,上面提到的优化方案的核心就是三点:减少请求数量,减少资源大小,找到最快的服务器。如果你是某网站的产品经理,去找你的开发者确认是否做过类似的优化。