网页加载速度优化-产品经理要知道的几种方法
作为新手产品经理时的我,也走过网页加载速度慢的坑。如果你刚刚入行,不要以为上线产品了就成功了,对于网页加载速度要非常重视。有研究表明,用户的等待时间超过3秒后,57%的用户就会离开。所以大多数网站都要求自己的打开速度在3秒以内;而且是越快越好;因为每多等一秒,就会造成大量的用户离开,如果是你,你也不愿意等待这么久吧。所以,网站里网页的加载速度,真的很重要。
关于网页加载速度的优化主要都是从技术层面,涉及到代码;这里不会说的太深,产品小伙伴们只需要知道原理,以及一些常用到的比较重要的优化网页速度的方法,就能从容的和工程师们沟通并找到问题了。
先来说一个工具,在百度统计里面,登录后,有一个网站速度测试,可以对自己网站进行网页速度的诊断和测试。如下图就是诊断的结果,这是我自己的产品,加载速度惨不忍睹啊。
下面百度还给出了优化速度的建议,可以拿来作为参考(我家前端说了这个很有用):
从诊断建议里面我们大致总结了3个主要的优化方向:减少请求数量、减少下载资源大小、提高服务器响应速度。
1、优化图片资源
图片资源一般都比较大,所以我们要尽量降低图片的大小;一方面在做产品设计的时候要限制图片的分辨率,另一方面要在前端调用的时候注意下尺寸限制。图片大小一般几十kb就够用了,越大加载就越慢。不信你看下面图,超过100kb的加载了4秒以上。所以图片大小很重要。
上面这个图片里的信息的获得方法是右键“检查”就可以了,可以切换浏览环境,这也是产品经理常用的一个小技巧。2、CDN
尽量把不经常更新的资源放在cnd上,这样可以让用户更快地获得网页资源。
解释一下cdn是啥,来自百度百科的解释:CDN的全称是Content Delivery Network,即 内容分发网络 。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。
简单说就是可以把原来用户需要访问服务器里面的东西,提前放到离用户更近的当地的cdn上,这样用户就可以直接从cdn上下载资源,速度也就更快了。
3、精简代码
我们可以压缩css、js代码的内容,把一些不必要的字符去掉,例如空格、各种符号等等;另外压缩一些代码,比如一些比较长的变量可以重新用短的名称声明。
通过精简代码,将字符数量减少,使得加载速度提升。
4、图片下载域名
很多人喜欢把很多图片放到同一个域名下面,也有人喜欢把每个图片都放在不同的域名下面;其实都不太好。
放到同一个域名下面的话,因为浏览器每次都有一个最大下载数量的限制,比如谷歌是6个,每次都最多加载六个,在同一个域名下面的话后面的就只能等前面的下载完了才能开始加载。但是为每个文件都生成不同的域名是可以避免这样的状况,但是请求数量就太多了,每次解析域名也都要需要时间。
所以合理的方式是用多个域名,每个域名下面放置少量的文件。
还有很多方式,上面的只是一些平时工作中我总结的和产品经理最相关的几个,尤其是图片大小;希望大家看了以后不要踩这个坑。