网站在移动端的打开速度慢怎么办

 

大部分人对移动端的浏览体验感到失望，同时当体验提升时，他们会在智能手机上花费更多的时间。因为64%的智能手机用户希望网站可以在4秒内加载完毕，但一半的网站花费了二倍以上的时间，达到了9秒。下面简单介绍一些可以使你的网站在移动端跑得更快的技术。

 

减少依赖文件

如果你想为移动端用户隐藏图片，display:none与visibility：hidden是不能阻止文件下载的。测试下面的代码：

 

<div style="display:none;">
    <img src="image1" />
</div> 

<div style="visibility:hidden;">
    <img src="image2" />
</div>

 

你可以观察下面的瀑布图，图片容器设置display: none或visibility: hidden后仍然会被下载。

替代方案是利用css加载背景图片，之后利用media query媒体查询来通过条件隐藏图片。这个技术最初被Jason grigsby测试过，之后被tim kandlec进一步拓展。亚马逊独立的移动端页面使用了此种技术，根据设备来条件加载特定的图片。

 

<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>

 

你可以看到图片不加载的瀑布图：

 

 

保持最小数量的外联样式表

你需要把这些文件合并在一个文件里，减少http请求。另一种方法，你可以通过后端处理，通过判断设备来自动插入样式表。

另一种方案可以使用内部样式。亚马逊独立的移动产品页面有一个6 KB大小的外部样式表,连同一些内部样式。这只需要通过一个额外的HTTP请求来下载所有的页面样式。

 

避免内联iframe

每一个内联框架(iframe)都会生成一个HTTP请求,这是在iframe内没有另外依赖资源的情况下。这是我们做一个快速测试,比较一个iframe只含有文本。

为了保证web站点加载迅速，最好不要使用iframe。

 

拆分到多个页面(单独的移动网站)

 

保持你的核心内容在页面上,之后提供到次要内容的链接到次要内容。这将减少HTML的加载负担，同时防止相关的资源被下载。

亚马逊的移动产品页面有通用的产品信息,同时提供链接到“用户评论”、“描述和细节”和“新&使用提供。

这就减少了三张图片的HTTP请求,且HTML的大小减少45 KB。

 

保持最少重定向(单独的移动网站)

亚马逊有一个重定向，来引导游客到单独的移动页面,这带来了0.4秒的延迟。与之相比,戴尔的网站有两个重定向,带来了1.2秒延迟。

 

 避免组件

组件对实际加载时间的影响是灾难性的。

 

服务器端(后端)技术

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

• 缓存HTTP重定向来加速重复访问;
• 合并HTTP重定向链来减少重定向;
• 使用HTTP压缩来减少数量的字节(Gzip或缩小)。

 

参考资料：   如何提升网站在移动端的打开速度       http://www.studyofnet.com/news/173.html