如何为你的响应式设计提速
响应式设计是最近的流行词,能够打造多屏幕一致体验。
现在几乎每个人都喜欢响应式设计,而且可以是没有原因的支持,这跟Flash刚出现那会火热的局面有点相似。然而,响应式设计带来了表现力的问题,这需要通过调整图像、压缩图像、改变图像大小等手段来解决。
然而,为了提高表现力,有的时候不得不增大文件的尺寸。浏览体验需要快速的载入,本文将讲述一些为响应式设计提速的方法。
为什么响应式设计载入那么慢?
在所有的设备上,响应式设计载入的HTML元素都相同。就算你的网站专供桌面或者专供平板,在其他设备上,载入的元素依然相同。这就意味着需要通过网络传递所有的内容,包括了图像和脚本。
一项去年的调查表明,86%的响应式网站会将一个完整的桌面页传送到手机中。如果我们能够对数据进行精简、提升浏览速度,那么响应式设计将得到更好的推广。
与此同时,响应式设计提高了页面大小,这也是一个亟待处理的问题。因为研究发现 ,如果3秒之内无法载入页面,57%的用户会选择离开。
怎样提高载入性能?
对于那些已经采用响应式设计,现在想要进行进一步优化的人来说,Mobitest可以用来测量手持设备上网页的载入性能,这样就能发现问题,从而解决问题。当然如果设计还在进行或者计划中,那么优化起来就更方便了。只需要在设计过程中注意载入速度即可,这样就不用事后亡羊补牢了。
为了提高表现力,我们需要减少页面的资源的数量,缩小页面的尺寸。并不需要可以的调整页面的外观,通过一些工具和手段也能实现”瘦身”。
首先要考虑的就是哪些元素是必要的,哪些是不必要的,去掉不必要的元素,这样就能最小化HTTP请求,这样用户的等待加载的耗时也最少。这可以通过压缩CSS和JS来实现,推荐一款叫做Compass的工具——开源的CSS框架编写工具。
这也是可以考虑采用的重要手段,非常适用于响应式设计的提速,这样就能确保手机用户不会下载那些会降低载入速度的元素。
有选择性的载入,能够阻拦各种内容的载入,包括社交窗口、图像、地图,以及其他。再采用这种手段之前,最好对网站进行全面的测试,先要了解是哪方面降低了网页的载入速度,这样对症下药,效果才能更好。
我们都知道图像在网页中占据了大量的字节。一般在手机上的图像表现力要比桌面上的差。
如果网站内容很多,便会影响到载入速度,因此就需要截断一部分内容,这样就能够提高载入速度。尽管可以通过改变src和img元素来调整标记来实现此功能,但采用PHP解决方案Adaptive Images无疑会更加轻松。该软件会根据屏幕大小自动做出调整,合理的缩放嵌入的HTML图像,而不需要改动标记。主要结合了弹性图片技术(Fluid Image),能够方便的解决问题,而且节省载入时间。这种自适应图像只占用一个htaccess文件,一个php文件,以及一行Javascript代码,能够判断访问用户的设备屏幕尺寸。