如何为你的响应式设计提速

响应式设计是最近的流行词，可以打造多屏幕一致体验。
如今几乎每一个人都喜欢响应式设计，并且能够是没有缘由的支持，这跟Flash刚出现那会火热的局面有点类似。然而，响应式设计带来了表现力的问题，这须要经过调整图像、压缩图像、改变图像大小等手段来解决。
然而，为了提升表现力，有的时候不得不增大文件的尺寸。浏览体验须要快速的载入，本文将讲述一些为响应式设计提速的方法。
为何响应式设计载入那么慢？
在全部的设备上，响应式设计载入的HTML元素都相同。就算你的网站专供桌面或者专供平板，在其余设备上，载入的元素依然相同。这就意味着须要经过网络传递全部的内容，包括了图像和脚本。
一项去年的调查代表，86%的响应式网站会将一个完整的桌面页传送到手机中。若是咱们可以对数据进行精简、提高浏览速度，那么响应式设计将获得更好的推广。
与此同时，响应式设计提升了页面大小，这也是一个亟待处理的问题。由于研究发现 ，若是3秒以内没法载入页面，57%的用户会选择离开。

怎样提升载入性能？
对于那些已经采用响应式设计，如今想要进行进一步优化的人来讲，Mobitest能够用来测量手持设备上网页的载入性能，这样就能发现问题，从而解决问题。固然若是设计还在进行或者计划中，那么优化起来就更方便了。只须要在设计过程当中注意载入速度便可，这样就不用过后亡羊补牢了。
为了提升表现力，咱们须要减小页面的资源的数量，缩小页面的尺寸。并不须要能够的调整页面的外观，经过一些工具和手段也能实现”瘦身”。
首先要考虑的就是哪些元素是必要的，哪些是没必要要的，去掉没必要要的元素，这样就能最小化HTTP请求，这样用户的等待加载的耗时也最少。这能够经过压缩CSS和JS来实现，推荐一款叫作Compass的工具——开源的CSS框架编写工具。
这也是能够考虑采用的重要手段，很是适用于响应式设计的提速，这样就能确保手机用户不会下载那些会下降载入速度的元素。
有选择性的载入，可以阻拦各类内容的载入，包括社交窗口、图像、地图，以及其余。再采用这种手段以前，最好对网站进行全面的测试，先要了解是哪方面下降了网页的载入速度，这样对症下药，效果才能更好。
咱们都知道图像在网页中占据了大量的字节。通常在手机上的图像表现力要比桌面上的差。
若是网站内容不少，便会影响到载入速度，所以就须要截断一部份内容，这样就可以提升载入速度。尽管能够经过改变src和img元素来调整标记来实现此功能，但采用PHP解决方案Adaptive Images无疑会更加轻松。该软件会根据屏幕大小自动作出调整，合理的缩放嵌入的HTML图像,而不须要改动标记。主要结合了弹性图片技术（Fluid Image)，可以方便的解决问题，并且节省载入时间。这种自适应图像只占用一个htaccess文件，一个php文件，以及一行Javascript代码，可以判断访问用户的设备屏幕尺寸。