Dragon

点一点网站打开慢的原因

2022-09-25 15:58 54 4 条评论 深云太熹中文网

在各大搜索引擎对网站用户体验越发重视的今天,网站打开速度的问题是首当其冲的。而且用户对网站打开速度的容忍度并没有公认的那么高,网站打开速度若是慢甚至明显卡顿,那么用户的跳出率大概在 75%左右。

通常 PC(电脑)端网站打开速度要求是 2-5 秒,移动端网站是 3 秒之内。其实用户的感知大概率是,不管你是电脑端还是移动端,超过 3 秒打不开就开始烦躁了。

网站加载慢 loading

那用户打开网站为什么会慢或者卡顿呢?会不会都是网站方的错呢?下面看弥雅慢慢唠。

网络问题

不管是用户网络问题还是网站方网络问题,都会导致网站打开速度慢。

用户网络问题,可能是用户有些操作高占网络,也可能是用户的宽带线路问题导致,或者是 Intemet 服务提供商(ISP)的问题。

若是 Intemet 服务提供商(ISP)的问题,一般是由于网络堵塞、带宽限制、数据限制(歧视、过滤)、内容过滤造成的。

电脑卡住了

这一般不会出现在网站方,因为会直接导致网站打不开,甚至是提示崩溃。

用户电脑卡导致网站打开慢甚至卡顿,通常是因为电脑硬盘读写问题、内存卡顿、系统等等问题。

浏览器的原因

若是用户设备里浏览器的原因,导致网站打开速度慢或者卡顿,那么大概率会是这几个原因:

  • 浏览器解析问题
  • 浏览器版本比较低(旧)

若是浏览器解析出问题导致,可以通过电脑 IP 和 DNS 设置为自动、刷新电脑 DNS 地址并重启浏览器、清除浏览器缓存(cookies)来解决问题。

若是浏览器版本低导致,那么可以对浏览器升级,或者重新安装浏览器。

除了上面两个原因,还可能是网站本身存在不被浏览器兼容或解读的元素,这个问题需要看网站方的决定而处理。

网站前端没优化好

网站的 CSS(页面样式代码)、JavaScript(简称 JS,高级脚本语言)没经过优化,就可能会导致延迟加载。

【CSS 优化方向】

  • 对 CSS 进行打包压缩
  • 把过多的外联 CSS 文件合并为一个或几个 CSS 文件
  • 妥善使用外联 CSS 和内联 CSS
  • 通过使用“媒体类型”来指定加载对应 CSS 文件
  • 去除无用 CSS
  • 优化重排与重绘
  • 不建议使用@import

……

【JS 优化方向】

  • 无必要情况可以将 JS 文件放在页面的尾部
  • 尽可能避免全局查找
  • 数字转换成字符
  • 通过模板元素 clone 来替代 createElement
  • 谨慎使用闭包
  • 在循环时将控制条件和控制变量合并起来
  • 最小化访问 NodeList 的次数可以极大的改进脚本性能
  • 避免与 null 进行比较
  • 尊重对象的所有权
  • 避免双重解释
  • 缩短否定检测
  • 释放 JS 对象

……

媒体文件过大拖累速度

诸如图像、视频等媒体文件过大时,是会拖累网站页面加载速度的。

我们可以对这些媒体文件进行压缩,来减小它们的大小,进而实现缩短页面加载时间。

也可以将视频、音频等媒体文件采用外链的形式引入(嵌入)页内,进而达到减小页面加载时的压力。例如将视频发布(或托管)到某个视频平台,然后再将视频嵌入到目标页面。

网站代码过胖

打开网站时,WEB 浏览器需要加载的代码越多,那么打开速度自然会越长。

代码过胖的话,我们就需要审查代码中是否存在多余、无效的代码;是否存在多轮重复调用的情况;是否存在语句上的简单复杂化。

写作最后的话

网站打开速度慢除了上面提及到的原因,还有一些原因并未在此罗列,以后会在写如何网站优化的时候具体说说。

总之网站打开慢,一般我们可以归结为用户设备导致的问题、网站方导致的问题、网络服务提供商导致问题。其中概率最低的网络服务提供商导致的问题,剩下的网站方占大头。

所以网站一旦上线运营后,网站优化的工作就不能忽略。

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

弥雅给弥雅打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 15
  • 20
  • 25
5
支付

本文来自投稿,不代表深云太熹中文网立场,版权归原作者所有,欢迎分享本文,转载请保留出处!

2022-09-23

2022-09-25

发表评论

表情 格式 链接 私密 签到

评论
正在努力加载中...
扫一扫二维码分享