小时的需要不是响应式设计，而是响应式性能

响应式设计最近出现了几个性能问题。 具有讽刺意味的是——响应式设计在最新系列的智能手机上表现相当不错，但除此之外别无他法。

您可能会感到困惑，因为大多数网络用户都拥有高端智能手机。 然而，大量用户仍在使用运行在旧版 Android 或 iOS 上的小屏幕移动设备，并且可能只是功能很少的功能手机。 结果，响应式设计并没有像预期的那样服务于更广泛的受众。

响应式设计适用于任何屏幕尺寸的移动设备的长期信念与此问题有很大关系。 随着性能的下降和不满的增加，有必要超越响应式设计。 相反，重点应该放在确保响应性能上。 这个帖子差不多。

那么，最大的问题是该怎么做？

摒弃桌面优先的设计理念

这个持续存在的问题的一个重要原因是，重点仍然是桌面优先的设计方法。 重点是为台式机设计网站，然后为智能手机和平板电脑等其他设备设计。 对于任何缺失的功能，开发人员会大量使用 shims 和 polyfills。 当然，有大量的库可以确保快速发展。 但是，这并不能解决浏览器不兼容的问题。 参与没有产生预期结果的设计概念是否合理？

实施移动优先的设计方法并不是很困难，其目标是在移动用户的屏幕上只向移动用户提供预期的信息，而不是所有会扼杀设备的东西。 Luke Wroblewski 于 2011 年首次将这种设计方法概念化，从那时起，许多行业专家都称赞他的突破性设计方法。

更多数据，即使只需要几分之一秒，也会对整体加载时间产生显着影响。 然而，网站也随着图形丰富的内容变得越来越重，越来越多的人使用他们的移动设备访问这些内容也是事实。 当用户在低分辨率屏幕的手机上键入网站的 URL 时，他的目的始终是访问网站内容，但他所经历的却是一场噩梦。 这是因为在无休止的不必要广告中导航很困难。 删除此类可避免的内容元素，以允许您的用户访问主要内容。 这会增加网站流量，因为除了拥有高端智能手机的用户外，许多人会通过低分辨率的移动设备访问您的网站。 如果手机功能有限，提供纯文本版本非常有意义，但话又说回来，您可能会说用户体验受到影响。 嗯，确实是这样，但总比完全不接收内容要好。 至少在这种情况下，用户将访问有关您网站的基本信息。 以这样一种方式设计一个网站是否有任何意义，它会减少它的潜在影响？

你肯定会接受这样一个事实，即无休止地等待只是为了检查一个网站不会让任何人兴奋。 根据 Akamai 和 Gomez.com 的一些调查，大约 50% 的网络用户高度期望网站能够在 2 秒甚至更短的时间内加载。 如果网站在 3 秒内未能在浏览器中加载，则网站被放弃的可能性更大！ 此外，现在大多数电子商务网站都有大量的社交分享按钮，如 Facebook、Google Plus、Twitter、LinkedIn 等。你知道这些按钮会给你的响应式网站增加超过 500KB 并影响其性能吗？ 仅 Facebook like 按钮就需要 270KB 的压缩代码！ 它还需要多个 HTTP 请求。 相反，请使用基于 URL 的社交分享按钮，因为即使移动连接速度很快，如此巨大的尺寸也会不可避免地影响响应式网站的加载时间。

网站的性能对企业的绩效有直接影响，响应速度慢的网站永远不会对企业产生任何好处。 信不信由你，大多数移动用户对做研究或阅读长篇文章不感兴趣。 他们中的大多数人使用他们的移动设备来轻松访问 Facebook、WhatsApp、Twitter，并沉迷于网上购物的乐趣。 此外，移动不再是趋势，而是未来。

根据 Comscore 去年的统计，美国仅使用移动设备的互联网用户数量急剧增加，而仅使用桌面设备的用户减少到 10.6%。

还需要说什么来说服吗？

确保优雅降级

在过去的几年里，你可能会遇到响应式设计领域的新流行语，那就是“优雅退化”。 是的，优雅降级意味着即使一个功能不能成功运行，它也应该以一种有助于可接受可用性的方式失败。 这意味着，为桌面创建网站设计，然后逐渐转向平板电脑、智能手机和功能手机。 网站优雅降级的响应式设计的性能必然很高，因为用户体验在这里始终是一流的。 尽管存在任何缺陷，该网站仍将保持正常运行，并且访问者肯定会对整体质量印象深刻。

现在，您可能会想到一个问题，即优雅降级有什么令人着迷的地方。 答案很简单。 这是因为它使您的内容无论使用何种浏览器都可见且可读，这是一项了不起的壮举！ 幸运的是，如果您使用的是 CSS3，优雅的降级变得很容易，因为 CSS3 的大多数属性会自动降级，例如圆角变成方形，文本被换行而不是单行，渐变变成纯色等等。

让我们举一个优雅降级的例子。 假设您设计了一个具有 JavaScript 功能的响应式网站，而您的浏览器不支持这些功能，或者您的客户端可能会禁用这些功能。 那么，你能做些什么来获取内容呢？ 好吧，在这种情况下，优雅降级允许您的浏览器显示“noscript”标签内的内容。

您可以通过下面给出的编码更好地理解这一点：

[xhtml]
<无脚本>
<h1>亲爱的约翰，您遇到了问题！</h1>
<p>您的浏览器不支持 JavaScript 或被暂时禁用。
请访问我们的<a href="/support/browsers/">浏览器支持</a>寻求帮助。</p>
</noscript>
[/xhtml]

我想再分享一个优雅降级的例子，那就是 YouTube 使用 HTML5 播放视频。 假设您的浏览器不支持 HTML5，视频将使用 Flash 显示，如果没有安装 Flash，您将收到一条消息，要求您在移动设备上安装它。 无论哪种情况，您都可以观看视频。 然而，这种优雅降级的一个缺点是，虽然性能很好，但如果您使用过时的浏览器，则必须在某些设计元素上做出妥协。 我想事先确定您网站的基本视觉元素可以解决问题。

无需保留未使用的库

一种最佳做法是不保留未使用的库。 是的，跟踪已使用和未使用的库确实非常耗时，但确实值得。 有时，您可能已经注意到在包含库后您只使用了一个功能。 有时甚至可以是两三个。 我用于创建响应式设计的最常用工具是 jQuery。 事实上，有很多 jQuery 库可以帮助开发人员创建响应式网站。 仅仅因为您喜欢一些小部件而包含几个库（如 JavaScript 库）将在很大程度上增加您的页面加载时间。 但是，分析正在使用的库以及使用的程度将是一种巧妙的做法。

检查功能的可用性

您可以在激活之前检查您的设备是否支持某个功能。 例如，尽管您在过时的 Android 手机上安装了最新版本的 Google Chrome，但它仍然没有显示您的网站。 有时，在尝试加载这样的网站时，浏览器会严重崩溃，以至于整个移动设备都没有响应。 您需要重新启动设备，这是您最不想要的，不是吗？ 由于这个问题，某些 Web 应用程序的许多用户已经受到影响。

设备上的功能不可用以及网站或应用程序的设计导致了一些明显的问题，例如无论浏览器类型如何，全球 Android 设备上的 Google Hangout 应用程序都会立即崩溃。 尽管该应用程序是一个轻量级应用程序，但这是一个事实。 您可能会争辩说，用户使用的是旧版本的 Android 智能手机，但这些设备在任何移动商店中仍然可以作为全新的现成设备购买，这也是事实。 许多移动用户在使用 YouTube 和 Twitter 应用时也面临同样的性能问题。 甚至通过 Google Play 更新 Google 的 Android System Webview 服务也会冻结许多智能手机，成为用户的噩梦。

优化图像

包括视觉上吸引人的大图像对设计师来说总是很诱人。 当他们在将这些图像上传到 CMS 之前没有压缩这些图像时，就会出现问题。 对于网络上的多个电子商务网站尤其如此。 根据 Radware 最近的研究，页面越来越大，前 100 家零售网站中约有 45% 没有进行图像压缩。 这使此类网站变得更加庞大，因此加载时间增加了，但作为设计师，您可以避免这个问题。

使用合适的图像优化工具使图像尺寸更小。 事实上，网络上不乏此类工具。 您可以使用的一些值得注意的是 Dynamic Drive、Smush it 和 Riot。 如果您是 Photoshop 的专业人士，您还可以自己优化图像大小。 使用智能压缩技术并将其从任何冗余元数据中剥离。 将图形转换为 PNG，将色彩丰富的图像转换为 JPEG，将动画图像转换为 GIF 也可以做到这一点。

为极端情况做好准备

当您开始设计时，您一定已经注意到您很想设计更容易的页面。 至少，这使您能够向利益相关者展示一些东西。 乍一看这似乎很好，但如果你把精力集中在最具挑战性的场景上，一开始你会得到一个好的结果。

例如，包含一些文章、博客和新闻稿的网页。 它也必须有一个标题。 现在，如果您认为显示“响应式网页设计技巧”的标题空间必须显示标题“成功响应式网站设计的 10 个基本技巧和技术”会发生什么？ 现在，这是一个极端的案例。

像上面这样优化响应式网站性能的努力似乎是无形的。 然而，这些努力为用户带来了满意的回报。 您可以借助各种工具，例如 Pingdom 工具，这些工具可以让您轻松监控响应式网站的加载时间。 不要跳过测试的重要方面，以确保您的响应式网站按预期运行。 在尽可能多的真实设备上进行测试。

您还可以利用 Screenfly 等资源，使您能够在多种屏幕分辨率上测试您的网站。 您可以争辩说，所有这些策略都需要大量时间，但话又说回来，一个人需要付出艰苦的努力才能获得收益。 如今，创建具有响应性能的响应式网站至关重要，因为谷歌根据网站的性能对网站进行评级。 如果您是设计师或开发人员，请不要将自己限制在上述任何一种最佳实践中。 您应该寻找更多解决方案，并且可能会努力提供一个表现出响应性能的网站。