移动SEO之如何提高移动端网站打开速度方法和技巧

一个网站的打开速度往往决定着你是否有机会留住访客,首先是抛开网站内容,那么就是网站的加载速度了,一个在 3 秒钟内如果都还没有打开的网站是绝对留不住访客的,除非你这篇文章内容有极其高的阅读价值,否则你连留住用户的可能都没有。

移动SEO之如何提高移动端网站打开速度方法和技巧-移动优化教程-SEO 技巧

80%的网民对移动端的浏览体验感到失望,当体验提升时,他们会在智能手机上花费更多的时间。64%的智能手机用户希望网站可以在 3 秒内加载完毕,但是有很多的网站打开速度却在 6 秒钟以上,那么这就成为移动网站 SEO 优化的一个要点,也是子凡觉得移动端网站应该在这方面做得更好的用户体验,子凡作为一个追求极致的人来说,是非常受不了这样慢的速度。其实在子凡前两天开始写移动 SEO优化的时候就写提及过网站的加载速度问题,所以还是准备仔细的给大家分析一下。

一、移动端用户下载速度研究和分析

从专业的角度来研究下究竟是什么影响了智能手机上的网页加载速度吧,最明显的原因是智能机的网速,最佳情况下,移动端用户所使用的是 3G 与 4G 上网。

在国内,使用 3G 网络的人数较多,而使用 4G 网络的人可能算是比较少数的,就算是 4G 网络,可能也不会用过多的流量来浏览网页,这个是重点吧!毕竟在国内的上网资费来说还是比较贵的。而从子凡自己本身来说,拥有一张移动 4G 卡,但是却用着那个当年追求发烧的小米 2,所以网络也就处于 2G 时代,所以流量网页的几率也就变小了,平时都只是会在 WIFI 网络下浏览网页的。

从大众对手机网络的使用中,使用 3G,4G 上网的人还是偏多,2G 已经开始逐步减少,那么对于像子凡这样感觉流量资费较贵的人群来说,浏览网页就希望越简单越好,越少的加载对用户的流量就越节约,这就是用户体验

244 KB/s 3G 用户平均网速值 (0.24 MB/s)
756 KB/s 4G 用户平均网速值(0.76 MB/s)

如果把上述值乘以移动用户等待时间 4 秒,这意味着网站对于 3G 用户来说最大为 1mb,而 4G 用户为 3mb。

然而下载速度并不是瓶颈,网络延迟及智能机的内存与 cpu 才是瓶颈,即使手机可以在 4 秒内下载完 1mb,页面也要花费更长的时间去加载,因为手机需要接收并解析代码与图片。

在桌面端,下载文件只占显示网站时间的 20%,其余时间花费在解析 http 请求,获取样式表,脚本文件及图片上,由于移动端的 cpu,内存与缓存跟桌面端完全无法相提并论,这些在手机上会花费更长的时间。

二、怎样优化和减少网站加载时间呢?

其实这个子凡在昨天的《移动网站 SEO 技巧之页面优化》一文中也有提到,这里就算是对昨天内容的一个拓展和提升吧!

构建一个快速的网站,就是一个做出艰难决定与砍掉非核心体验的过程,如果某一项需求价值不大,去掉之,这个原则适用于所有开发阶段,尤其是规划和编码时。
减少依赖文件:更少的文件意味着更少的 http 请求与更快的加载时间。

降低图片大小:适应与调整高分辨率图片,在额外的下载时间中占居榜首,占用了宝贵的内存与处理资源。

减轻客户端负担:最佳实践是重新思考你的 javascript,并使之降低到最小尺寸。

三、如何减少和优化网站冗余代码

在很多的网页中,你看不到的东西可能有很多,但是却不一定是这个网页所需要的,如果你想为移动端用户隐藏图片,display:none 与 visibility:hidden 是不能阻止文件下载的,测试下面的代码:

1
2
3
4
5
6
<div style="display:none;">
	<img src="none.png" alt="移动SEO之如何提高移动端网站打开速度方法和技巧" />
</div>
<div style="visibility:hidden;">
	<img src="hidden.png" alt="移动SEO之如何提高移动端网站打开速度方法和技巧" />
</div>

这也就是之前子凡在《浅谈什么是移动 SEO 优化及注意要点》一文中提及的不建议使用自适应做移动页面的适配的原因,自适应本身就是通过 CSS 样式来隐藏和显示在不同屏幕大小下的匹配罢了,虽然说这也是一种流行的网页设计,但是并不是适用与所有的网站,大家都选择性的去使用吧!子凡这里也只是发表自己的个人体验感想而已。

其实也有一些替代方案,就是是利用 css 加载背景图片的方法来实现,利用 media query 媒体查询来通过条件隐藏图片,这个技术就是根据设备来条件加载特定的图片。

1
2
3
4
5
6
7
8
9
10
<meta name="viewport" content="width=device-width">
<style>
	@media (max-width:600px) {
		.image {display:none;}
}
	@media (min-width:601px) {
		.image {background-image: url(image1.jpg);}
	}
</style>
<div class="image"></div>

四、利用 CSS3 代替图片

圆角,阴影,渐变填充等,这些样式不需要使用图片,可以减少 http 请求,加快加载时间。CSS3 可以减少 http 请求,但增加了处理负荷,css3 带来的处理时间很小,但不能不考虑,特别注意 box-shadow 对处理时间的影响最大。

五、其它子凡感觉不太常用有比较常见的优化点

1.字体图标:现在很多网站为了减少网站图标的使用,所以使用字体图标来解决,总的效果来看还是挺不错的,单独的 Web 字体,对于所有图标来讲,HTTP 请求的数量可以减少到一个,如果 Web 字体使用数据 URI(如上所述)嵌入页面,HTTP 请求可以减少到零,这正是 WordPress 使用的技术。子凡最近在开发一个网页也有使用到这几效果,效果是挺不错,但是如果网站中使用不多的话建议就不使用这个了。

2.避免内联 iframe:每一个内联框架(iframe)都会生成一个 HTTP 请求,这是在 iframe 内没有另外依赖资源的情况下,这是我们做一个快速测试,比较一个 iframe 只含有文本。包含一个 iframe 增加了将近 0.2s 的加载时间,为了保证 web 站点加载迅速,最好不要使用 iframe。当然这个在移动端网站应该是非常少使用的,子凡经常见到的就是在 PC 端用这个的还挺多的。

3.如何减少客户端处理:Javascript 对加载时间的影响,在移动端较小的内存,cpu 及缓存下会表现得更明显,通常,我们要重新思考 javascript 的使用,并保持其在最小尺寸。

4.服务器端后端技术

除了优化前端,服务器端技术也可以用来加速加载时间,这些技术都值得考虑,如以下几点:

(1)、缓存 HTTP 重定向来加速重复访问;

(2)、合并 HTTP 重定向链来减少重定向;

(3)、使用 HTTP 压缩来减少数量的字节(Gzip 或缩小)。

写在最后:为了满足移动用户的高期望,你需要对网站针对移动设备进行优化,在 3 秒或更少的时间里加载完毕,最好的方式来达到 4 秒这个魔术时间,是通过减少 JavaScript 和优化 HTML、CSS 和图像,保持智能手机上最少的处理负荷。对于移动网站 SEO 优化提速来看,依然适用与 PC 端网站,大家可以相互的利用这些优化的技巧和方法。

真的是不写不知道,写着写着又是长篇大论了,感觉其实有很多细节可以写的,但是为了给大家阅读时带来一个良好的效果和阅读质量,所以子凡还是觉得应该一定程度的控制文章的篇幅长度。所以到此就结束啦!

转载泪雪博客请以链接形式标明本文地址

  • 站长技术交流群
  • 群号:635625050
  • weinxin
  • 微信公众号
  • 微信扫一扫关注
  • weinxin
李文云
广告也精彩

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: