提高响应式网页设计性能的三个技巧

响应式网页设计 - 一种在不同屏幕分辨率下提供一致体验的解决方案 - 正在成为设计网站的标准方法。让我们看一下使用此方法可以提高网站性能的三种方法：

响应式网页设计 – 一种在不同屏幕分辨率下提供一致体验的解决方案 – 正在成为设计网站的标准方法。就在几年前，设备检测还被普遍使用，现在钟摆已经转向响应式网页设计，设计师评估它的原因是它不起作用，而不是相反。事实上，谷歌甚至将响应式网页设计列为创建智能手机优化网站的首选配置。

响应式网页设计的原因

设备日益多样化无疑是这一转变的关键因素，正如谷歌的一项调查所证明的那样，67%的用户声称，当网站适合移动设备时，他们更有可能进行购买。但转向响应式网页设计的一个同样重要的原因是网站性能。让我们看一下使用此方法可以提高网站性能的三种方法：

提高响应式网页设计性能

1. 内联首屏内容，如 HTML 标记、图像、CSS 和 Javascript。随着网站规模持续膨胀，谷歌建议移动网站在一秒钟或更短的时间内加载，需要付出一些东西。网站应该主要构建 HTML 以首先加载关键的首屏内容，然后通过缩减资源和启用压缩等策略来减少资源使用的数据量。

2.优化图像。人们希望在他们的网站上获得高分辨率的图像，正如设备上越来越多的视网膜显示器所证明的那样，但代价是什么？在过去的两年中，图像大小在网站上迅速增长，并且大大增加了网站的膨胀。使用Picturefill和自适应图像等工具在不同大小和不同质量的图像之间切换以节省带宽会有所帮助，采用 WebP和JPEG XR等新图像格式也会有所帮助。

3. 控制 CSS 和 JavaScript 的加载。响应式网站通常将桌面和移动 CSS 和 JavaScript 组合成一组文件，但这可能会影响性能，因为将不必要的代码传递到正在查看的宽度。相反，通过使用 JavaScript 来确定正在加载的页面的宽度来分支加载，然后请求特定于该宽度的特定样式和 JavaScript。