网页性能优化实战之带宽优化处理

简介: 最近用户反馈页面加载慢,系统首页刚打开的时候要等上一两分钟才能进入到登录页面,进入到系统之后部分查询的页面加载过慢.问题收到之后就是各种定位,经过一番操作,终于还用户了一个丝滑柔顺的操作体验,下面总结了一下页面性能优化的经验,希望对有同样需求的同学有所启示!

背景说明


   最近用户反馈页面加载慢,系统首页刚打开的时候要等上一两分钟才能进入到登录页面,进入到系统之后部分查询的页面加载过慢.问题收到之后就是各种定位,经过一番操作,终于还用户了一个丝滑柔顺的操作体验,下面总结了一下页面性能优化的经验,希望对有同样需求的同学有所启示!


处理过程


首先思考影响网页加载速度的最常见原因(以下排名不分先后):

1.网速

   最先考虑网速是因为自己的网络不好再怪人家的网站性能不好是很不地道的,哈哈!当然这也是最容易排除的一个因素,换一台不在同一网络的其他电脑试一下,如果网站加载仍然不给力,那恭喜你应该不是本地网速的问题,顺利摆脱背锅的命运,继续往下看.


2.带宽

   这个可以说是最容易导致网络加载慢的原因,因为大部分的服务器在最初采购的时候都是以廉价、够用为采购标准进行购买的,所以可以看到很多的服务器都是2M、3M的带宽进行配置,刚开始用户不多的情况下没有问题,但是随着用户访问数量的增多,原有的带宽越来越紧张!处理这个问题的方式也很简单,就是升级带宽呗,下面会结合具体场景详细说下如何升级带宽。


3.数据库连接

   关于数据库性能优化问题一定是后端开发难以逾越的大山,每想到这里都会心疼后端的同学三秒钟,要处理复杂的业务逻辑,又得懂运维,还得会数据库调优,为什么不能像前端的小姐姐一样美美的只关注页面,哈哈!一般业务相对复杂的项目中,数据库查询肯定存在多表关联查询,刚开始的时候还看不出来,但随着数据量的增多,一定会碰到慢sql,这种慢sql一定会影响接口访问速度,继而给用户带来非常不好的操作体验.所以如何进行sql优化确实需要下功夫研究总结.那执行多长时间的算是慢sql,这个没有标准.就目前接触的项目来看,数据量都是在十万级别左右的,用时在毫秒级别算是比较合理,对于超过十几秒钟的算是慢sql,需要进行优化了.原谅我给身处一线处理千万级别的后端开发拖了后腿,毕竟小公司做不到啊!


4.前端代码问题,比如说图片过大

   关于这个不想多说,常见的代码规范问题,不做前端,不做过多评价,另外前端只负责岁月静好,不用负重前行!


结合项目实际情况说下处理过程

   先说一下怎么科学的进行判断带宽是否够用.F12打开控制台,输入目标网址,如果显示的蓝色进度条过大,说明静态文件太大了,要么前端需要优化一下,要么加一下带宽吧!

7fb4d65e594e13ccf184182afcc071f0_7ae45ca693174bcca5c19b794add63cd.png


加载慢具体表现为:首次加载很慢,但是第二次打开之后就没有这么慢,原因是浏览器已经缓存的部分信息.关于绿色的进度条一般表示的是请求服务端的时间,如果绿色的响应时间很长,说明需要考虑一下服务端的问题了,就好比是下图,结合目前接触的主要考虑数据库查询耗时的问题.

87ecea7c24dcc993591acbed66b0ca14_d1bfc22942894318941517fa38e5b788.png

   当然可以结合阿里云控制台看是否需要加带宽以及加多少带宽合适.

   进入到阿里云服务器的实例页面,点击监控部分,主要看公网带宽就可以,客户访问网站 主要看这个 公网的out 带宽(就是绿色的部分), 我的服务器的带宽也是3M带宽,如果长时间内绿色部分在3M 持平(可以选择时间范围),这个的意思就是带宽跑满了,需要加带宽.

5e4ae0015035b191fb18d57e67178b46_9c82522b9ee64466aa244b0abce832b4.png


至于加多少合适,可以参考蓝色部分.蓝色部分表示公网进入的带宽消耗,如果是超过ecs服务器配置的带宽,就基本上可以确定要加带宽了.然后考虑加多少的问题,可以把监控的时间范围拉的长一些,看下蓝色部分的峰值一般在多少,基本上可以确定提升的带宽数.

59ec25a51cb913f16355335c1b6ed9d1_f736dcfc9be641d9945afb918b597271.png

   最后是如何加带宽的问题.阿里云提供多种带宽升级的方式,在不确定是否是带宽影响的前提下,可以选择临时带宽,这里可以指定临时带宽的时间,需要最低是三个小时,提升到6M当时好像是不到一元钱,是不是很划算.自己加了临时带宽之后,首页加载速度是上来了,页面中部分接口中查询速度还是慢,就排除带宽的影响,安心处理sql耗时过多问题了.不要再让带宽背锅.关于sql性能优化实战可以参考: mysql查询优化实战:查询用时一分半降到三毫秒.关于升级带宽具体的操作步骤可以参考下图:

565dde17edd2a23e44ed6fdbd441ed4c_77662739031944c2b34ab3a514c37781.png

d67256d9522d0b68c2f4809330ab5a0c_86722059f3ac432c8a489847207b984b.png



   一般在搞流量比较大的活动时,会最这种临时带宽的升级方案,经济划算,哈哈!当然也可以直接选择包年包月进行升级带宽.可以不用经受带宽的困扰,专注于业务问题.

   以上是处理网页加载慢的记录总结,希望对有同样需求的同学有所帮助,为你的问题排查提供一点点思路!


相关文章
|
存储 缓存 前端开发
前端如何优化网站性能?
前端如何优化网站性能?
|
7月前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
187 0
|
4月前
|
缓存 前端开发 API
优化前端性能的最佳实践
在构建高效的前端应用时,性能优化是不可忽视的关键因素。本文将探讨一些实用的前端性能优化策略,包括资源的懒加载、合理的缓存策略、代码分割以及异步数据加载等方法。通过实施这些最佳实践,可以显著提升应用的响应速度和用户体验。
|
4月前
|
缓存 前端开发 JavaScript
优化前端性能的五种最佳实践
在现代 web 开发中,前端性能的优化是提高用户体验的关键。本文探讨了五种最佳实践来提升前端性能,包括代码分割、懒加载、压缩资源、优化渲染和使用缓存策略。这些方法不仅有助于减少加载时间,还能提高应用的响应速度和整体用户满意度。
|
7月前
|
缓存 前端开发 JavaScript
如何优化前端性能:关键技巧与最佳实践
在当今数字化时代,前端性能优化是构建高效用户体验的关键。本文探讨了一系列关键技巧和最佳实践,帮助开发人员提升前端应用的性能表现。从资源加载到代码优化,从图片处理到网络请求,我们将深入探讨如何通过各种手段使前端应用更加高效。
|
7月前
|
前端开发 JavaScript UED
如何优化前端网页性能提升用户体验
本文将探讨如何通过一系列前端优化技术,提高网页加载速度、减少资源请求次数,从而优化用户体验。我们将介绍一些常用的性能优化技巧,包括资源压缩、懒加载、CDN 加速等方法,帮助开发者更好地构建高效、流畅的前端网页。
|
7月前
|
缓存 前端开发 JavaScript
探索Web前端性能优化策略
在Web应用开发中,前端性能优化是至关重要的一环。本文将介绍几种有效的Web前端性能优化策略,包括代码压缩与合并、资源缓存、异步加载和图片优化等方法,以帮助开发者提升网页加载速度和用户体验。
83 1
|
7月前
|
缓存 前端开发 JavaScript
如何优化前端网页性能
网页性能是用户体验的重要因素之一,许多因素会影响网页的性能,包括加载时间、响应速度和渲染时间等。本文将介绍如何优化前端网页性能,从减少HTTP请求数、压缩资源、使用CDN以及异步加载等方面入手,为读者提供实用的技巧和建议。
|
前端开发 Serverless 开发者
前端工程化的前端性能的性能优化方案的网络层面优化之资源优化
资源优化是一种非常重要的前端性能优化方案,因为它可以在不同的环境中提高网页的响应速度和可接受性。
95 1
|
监控 网络协议 安全
聊聊服务器性能优化~(建议收藏)
聊聊服务器性能优化~(建议收藏)
415 0