通过前端性能优化提高用户体验

想象一下你在十字路口等着轮到你穿过街道。你按下按钮拨打步行信号，然后拿出你的手机。你想要完成一件事：也许检查你的电子邮件，在你的待办事项列表中添加一个项目，或者查看推特。你有限的时间来完成那件事。

那么多的时间就是用户在你的网站上完成他们想要做的事情的时间。这很重要。

谷歌的一项研究显示，在搜索结果页面上增加半秒钟可以减少 20%的流量和广告收入。同一篇文章报告称，亚马逊发现，每增加 100毫秒的加载时间，销量就会减少 1%。用户期望页面在两秒钟内加载-三秒钟后，多达 40%的页面将 直接离开。

你能跟上吗？如果您正在设计内容丰富的站点、大量的动态元素、更大的JavaScript文件和复杂的图形-就像我们中的许多人一样-答案可能是“不行”。

是时候让性能优化成为我们如何设计、构建和测试我们创建的每个站点的基本部分了-对于每一个设备。

性能设计

网站的表现从设计开始。权衡设计选择对页面速度的影响和对站点转化率的影响。你真的需要八种不同颜色的蓝色吗？这个 1000px宽的背景图像增加了什么价值？用图标字体代替雪碧实际上会增加更多的页面重量和缓慢的渲染速度，还是会比原来的图像更快？

并不是每个设计决策都有利于性能。我已经发现，稍微减慢页面速度的按钮样式仍然可以增加转换，这是值得的小小的Web性能牺牲。

但有时，表现会赢。我曾经进行过登陆页面的重新设计，在页面中添加了大量的图像，但我不确定性能是否会对转换产生负面影响，所以我将重新设计的内容提交给了 A/B test中的一小部分用户，看看会产生什么样的影响。新的设计花费了两倍的时间来加载，我立即看到了一个高的退出率和较低的转换率，所以我们保留了原来的轻量级设计。犯错是可以的-这就是给你一个基准的原因。

在另一个实验中， dyn.com的主页上有一个缩略图部分，其中有 26张图片，在 10个插槽中来回旋转。

dyn.com主页

当时我的队友把所有26张图片都放进了一个精灵里，这是：

• 通过增加 CSS、JavaScript和图像大小，使主页的总大小增加 60K，这是使用 sprite重新创建此效果所需的。
• 将请求数量减少 21%
• 将主页总加载时间大幅度减少 35%

这证明了它是值得尝试的：我们不确定这是否会是一个页面速度的成功，但我们认为值得从实验中吸取教训。

性能编码

清理你的 HTML，其他的一切都会随之而来。

从在 HTML中重命名非语义元素开始。这可能是最困难的，但一旦您开始考虑主题的语义，如“NAV”或“文章”，少使用设计或网格名称，您将取得重大进展。我们通常通过在 CSS选择器中需要更多的权重来获得具有非语义名称的元素，而不是以正确的方式清理 CSS和添加专用性，而是在 HTML中添加不必要的ID和元素。

然后，清理你的 CSS。首先消除低效的选择器。在我为 writegoodcode.com执行的 a study I performed，我发现在 CSS文件中添加效率低下的选择器实际上会增加 5.5%的页面加载时间。更高效的 CSS选择器实际上更容易重新设计和定制将来的样式，因为它们在样式表中更容易阅读，并且具有语义意义。可重用的、可编辑的代码通常与良好的性能齐头并进.在该案例研究中，我通过清理CSS文件节省了 39%的 CSS文件大小。

接下来，将重点放在 div-itis的HTML上。通常情况下，标记越干净，CSS就越小，而且将来更容易重新设计和编辑。它不仅节省了页面加载时间，还节省了开发时间。

最后，将重点放在创建可重新指定的代码上，这样可以节省时间并导致更小的 CSS和 HTML文件。较少的 HTML和 CSS将显着地更容易维护和重新设计以后，较小的页面大小将对页面速度产生积极的影响。

优化请求

请求时，浏览器必须获取类似文件或 DNS记录之类的内容。标记越干净，浏览器所需的请求就越少-用户等待浏览器往返的时间也就越少。

除了清理标记之外，只在绝对必要时加载 JavaScript请求，从而最小化 JavaScript请求。如果不需要每个页面上的文件，就不要在每个页面上调用它。不要在只需要大屏幕的响应设计上加载 JavaScript文件；例如，用简单的 replace social scripts with simple links。您还可以异步加载 JavaScript，这样 JavaScript就不会阻止任何内容的呈现。

尽管响应性设计通常意味着更多的 CSS和图像(更大的页面权重)，但是如果您剪切请求，仍然可以从较大的页面大小获得更快的加载时间。

优化图片

保存尽可能多的图像请求。首先，专注于 creating sprites。在我的 writegoodcode.com的研究中，我发现这个示例中的图标的sprite将页面加载时间减少了16.6%。我喜欢开始清理图像，为重复的背景创建一个精灵。您可能需要为垂直重复创建一个，为水平重复创建一个。

接下来，为不重复的背景创建一个透明的精灵。这将包括像你的标志和图标。随着您变得更高级，您还可以使用 Grunticon这样的工具，它获取 SVG图标和背景图像，并根据用户的浏览器功能确定最佳的服务方式。

在重新生成映像之后，通过像 ImageOptim这样的优化器运行它们。同样地，视网膜大小的图像仍然可以通过 extensive compression而变得更小，而最终的结果并不明显。

现在看看您可以用 CSS3梯度替换哪些图像。这不仅会减少页面加载时间，而且还将使以后编辑站点变得更加容易，因为将来开发人员将不必找到原始图像文件来编辑、重新生成或重新优化。

最后，看看如何使用 Base64 encode，它允许您将图像嵌入到 CSS文件中，而不是使用单独的 URL调用它。最后看起来是这样的：

随机字母和数字相加成一个小圆圈，在 dyn.com的许多地方使用。嵌入图像允许您每次想要在设计中使用图像请求时保存它。使用这种方法嵌入图像将使您的CSS文件更大，因此值得在前后测试页面加载时间，以确保您正在进行改进。

评估绩效

现在是有趣的部分：决定你的努力是否有回报。

Google的 PageSpeed和Yahoo！的 YSlow都提供了关于如何提高页面加载时间的建议，包括识别哪些元素阻止页面呈现，以及页面的不同组件的大小，比如CSS或HTML。

我还推荐YSlow扩展 3PO，它检查您的站点与流行的第三方脚本(如 twitter、facebook和 google+)的集成。该插件可以为您提供关于如何进一步优化页面上的社交脚本以提高页面加载时间的建议。

WebPageTest.org 自从我第一次开始根据 PageSpeed和 YSlow的建议进行改进以来，就一直是我的基准测试工具。它提供了关于请求、文件大小和时间的非常详细的信息，并提供了多个要测试的位置和浏览器。

基准测试可以帮助您在设计时进行故障排除。测量性能和分析结果将帮助您使您的大屏幕和小屏幕设计更快。您还可以测试和基准测试技术，如条件加载图像，因为您可以更舒适地开发性能。

web性能的影响

Web性能会影响您的用户-这意味着每个人的工作都是理解它、测量它并改进它。所有这些技术将导致更好的页面加载时间，这将大大改善您的网站的用户体验。

更快乐的用户意味着更好的转化率，无论是在收入、注册、回访或下载方面。有了一个快速的页面加载时间，人们可以使用你的网站，在短时间内完成他们想要的-即使只是在等待步行信号的时候。

原文：https://alistapart.com/article/improving-ux-through-front-end-performance