行业知识
当前位置:首页 >> 新闻资讯 >> 行业知识 >> 网站建设之移动端页面优化解决加载缓慢卡顿
网站建设之移动端页面优化解决加载缓慢卡顿
发布日期:2021-05-29 16:17:27 阅读次数:22 字体大小:

网站对于很多企业都已经是必备的宣传渠道之一了,其中移动端网站更是重中之重。随着基础网络设施及移动技术发展进步,人们越来越依赖移动设备,使用移动设备的频率已经远大于电脑。

现在很多企业会发现,移动端网站访问总是有卡顿现象,使用体验有很大的提升空间。

移动端网页出现卡顿的原因:

1.加载资源多,下载需要较长时间,比如图片过大、过多,导致渲染页面时间过长;

2.多余组件、js使用不当等

如何解决移动页面卡顿问题:

之前已经分享一篇通过技术手段解决网页加载慢的解决办法。如何提高前端网页加载速度

今天分享另外一种方案:谷歌AMP技术和百度MIP技术

谷歌AMP技术与百度MIP技术实现思路是一样的,谷歌AMP技术适用于大陆以外地区,百度MIP技术适用于大陆地区。虽说百度下线了MIP Cache 服务,MIP失去了百度服务器cdn加速,但是MIP这项技术还是可以使用的。

Web 优化有很多种方案,每种方案都有自己的适用范围。有些收益很高的优化手段,存在这样那样的限制:例如针对具体业务逻辑所做的优化,很难通用化;部署 Google 的 PageSpeed 模块等服务端优化方案,使用成本很高;借助客户端所做的优化,如现在广为流行的移动端 WebView 容器加速方案,优化效果局限在指定 APP 内,甚至还会导致使用通用浏览器访问速度更慢。以内容为主的新闻详情页,大部分性能消耗在图片、视频等媒体资源以及第三方功能如广告、社会化组件的加载上。

浏览器对不同资源加载和预加载有自己的策略,对于预加载,我们有一些控制权,但总的看来这一块对于开发者来说还是很不可控。例如浏览器默认会并行加载多张图片,但在屏幕小、网速慢、性能差的手机上,串行由上到下加载图片很可能体验更好。

移动设备在网络、CPU、内存等方面与 PC 差距很大,很多 PC 上可以忽略的问题,在移动端不得不重视起来。例如我们都知道图片是异步加载的,页面触发 DOMContentLoaded 事件并不需要等图片加载完,但在移动端,大量图片加载带来性能开销却会大幅延后 DOMContentLoaded 时机。

我们再来看百度MIP或谷歌AMP是如何优化网页提升加载速度的

AMP html是HTML 的子集,在 AMP HTML 中只允许使用有限的标签。例如 <body>、<article> 这些标签可以直接使用,没有任何限制;有些标签允许有限制的使用,例如 <meta> 标签不能使用 http-equiv 属性;而像 <img>、<audio> 这样的标签需要替换为 <amp-img>、<amp-audio> 等 AMP Components;更多的标签如 <frame>、<form> 不允许使用。(MIP也是这样的)

简单的说,就是AMP和MIP接管了页面加载顺序控制权和限制部分消耗性能过多的标签,并新增许多专用标签,让页面加载速度呈现大幅度提升,同时也给了很多普通网站、无法进行WPO的网站另外一个解决办法。

文章标签: #网站推广 #页面优化