网站无线链路的优化

2022-04-30    分类: 网站建设

服务端响应时间只占整个请求路径上很小的一部分,PC上更重要的是优化首屏的加载,无线端更多则是优化中间的管道。
1.无线端请求合并
无线环境下做请求合并的收益是比较大的,所以会将当前的两次请求在服务端做ESI合并为一个请求。在无线环境下减少请求的数量可以明显减少总耗时。
无线环境下数据大小对性能的影响比在PC端的更明显,PC端数据从20KB到80KB增加了100毫秒,而无线端数据从20KB到80KB增加了700 毫秒。因此是否能控制页面大小对无线端的性能影响很大。

综上,我们得出如下结论。
在无线环境下,减少网络请求次数对首屏加载性能有比较明显的影响;
无线环境下的文件大小与PC环境下的文件大小对性能的影响效果不同:无线环境下的数据大小对性能影响比在PC环境下的更明显,所以是否能控制页面大小对无线环境下的性能影响很大;
CDN直接Cache可以大幅提升性能,所以尽量将数据Cache到CDN,这对无线端同样是有效的;
小数据情况下,动态加速和直接回主站没有明显优势,再加上当前动态加速链路还在调优中,所以当前无线数据直接回统一Cache比较理想,待动态加速更加成熟后再走CDN。
3. CDN动态加速
CDN的动态加速技术也是比较流行的一种优化技术,它的技术原理就是在CDN的DNS解析中通过动态的链路探测来寻找回源最好的一条路径,然后通过DNS的调度将所有请求调度到选定的这条路径上回源,从而提高用户访问的效率。
由于CDN节点是遍布全国的,所以用户接人一个CDN节点后,可以选择一条从自己最近的CDN节点到源站链路的最好路径。这里的一个简单原则就是在每个CDN节点上,从源站下载一个一定大小的文件,看哪条链路的总耗时最短。这样可以构成一个链路列表,然后绑定到DNS解析上、更新到CDN的LocalDNS。当然,是否走这条链路并不定只依据“耗时”这个唯一条件, 有时候也要考虑网络成本,例如走某个节点虽然可以节省10毫秒时间,但是网络带宽成本却增加很多,还要综合考虑网络链路安全等其他因素。
4. WebP图片优化
WebP是一种同时提供了有损压缩与无损压缩的图片文件格式,派生自图像编码格式VP8。WebP最初在2010年发布,目标是缩小文件并达到和JPEG格式相同的图片质量,以便节省图片文件的网络传送时间。
Chrome浏览器以及Chromium 内核的浏览器都支持WebP格式的图片,Android 4.0 以上也都原生支持该类型图片。根据caniuse com的统计,目前约有70%的用户可以享受到WebP格式带来的好处。
(1) WebP带来的收益
节约的带宽=CDN流量x可以使用WebP格式图片的流量占比x支持WebP的浏览器占比xWebP格式压缩率(实测为38%~ 41%)。从公式可知,带宽收益与CDN流量、支持WebP的浏览器(主要是Chrome内核浏览器)占比、页面中可以使用WebP格式的图片占比成正比。
我们以商品详情系统的放大镜图片(40x40/ 310x310)和所有装修中的图片使用WebP为例,计算出详情系统使用WebP后,一个月大约会节约数十万元左右的带宽费用,非常可观。
(2)好实践
WebP有m0~m6等7种压缩级别,一般来说级别越高画质越好。但级别越高转换为WebP所要消耗的CPU资源也更多。在用WebP转换图片时要注意以下问题。
①转换为WebP图片的时候,使用有损压缩(与m0~m6压缩级别无关)会导致:红色字体被压缩之后普遍偏暗;
部分蓝色字体被压缩之后偏模糊;
当背景为黑色的时候,红色小字体偏模糊;当背景为红色的时候,黑色小字体偏模糊。
②低版本的Chrome浏览器不支持透明通道的WebP,所以对PNG图片不能使用WebP格式。
③gif转换为WebP动画非常耗性能,所以只处理第一帧图片。
④原图转换成WebP非常耗性能,图片的所有缩略图(如310x310)都是先转换为JPEG格式,再转换为WebP格式。
通过分析近万张图片我们得出以下结论:网站制作压缩级别在m0~m2时,不少图片丢失色块(出现马赛克),压缩级别为m3及以上时则极少出现此问题,同时m3级别所节约的带宽和m4级别是非常接近的,但m3的转化性能明显高于m4。因此,我们决定使用m3级别。

当前标题:网站无线链路的优化
网址分享:https://www.cdcxhl.com/news/147738.html

成都网站建设公司_创新互联,为您提供品牌网站建设网站收录Google微信公众号用户体验企业网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都做网站