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

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

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" />
</div>
<div style="visibility:hidden;">
	<img src="hidden.png" />
</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端网站，大家可以相互的利用这些优化的技巧和方法。

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

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/mobile-website-speed.html