提高页面性能的4个技巧

Web-performance expert Henri Helvetica sitting with his laptop

网络性能分析师Henri Helvetica将分享他关于如何提高网站性能的专业提示 生成纽约 2018. 立即获取您的机票

性能最终成为网页设计和开发对话的重要组成部分。然而,让人们真正消费那些优秀的内容并更频繁地采用性能方法仍然是一个挑战。

幸运的是,自由开发人员和网络性能分析师Henri Helvetica(真名Henri Brisard)随时准备提供有关提升网站性能的重要提示。

01.努力衡量

Helvetica建议您首先必须确保测量。 “你永远无法改善你没有衡量的东西,”他解释道。 “一旦完成了测量和数据布局,就必须弄清楚要测量的重要元素。您可以在9秒内加载两个页面,但可以更快地填充视口,这样您就可以获得更好的用户体验。

“您必须衡量您的网站和商业企业的加载过程中的重要信息。考虑对您的用户进行交互的重要性。每个网站都有自己的个性化需求。”

一旦他看了一下页面加载,这有助于他了解某些项目加载的方式和时间,Helvetica的下一步通常是启动Chrome DevTools以准确评估发生了什么。这是一个显而易见的选择,因为它就在那里它是免费的 - 你不需要跳到另一个工具来试图发现为什么页面可能很慢。然而,许多开发人员几乎不使用它。 “DevTools有点像烟雾探测器,”Helvetica认为。 “如果发生火灾,DevTools会告诉你。它至少会告诉你烟雾在哪里。“

02.减掉一些页面重量

然后Helvetica查看瀑布,它将指示各种问题,例如资产的大小和加载它所涉及的延迟。例如,如果网站包含尺寸较小的图像,您通常会看到一个非常长的瀑布,这是快速接收的一个更容易的痛点。图像是缓慢加载网站的最大罪魁祸首之一 - 这个问题可以很容易地解决。由于它们是最大的数据来源,因此图像也是数据节省的最大来源。

“我总是会考虑你的页面重量,”Helvetica解释道。 “无论你如何分割它,如果你有一个3MB的图像,或者每个1MB的三个图像,你可能会遇到用户体验挑战。

Web-performance expert Henri Helvetica coding on his laptop

“该页面权重也将成为您网络的受害者,因为蜂窝网络永远无法预测。因此,您需要确保您的资产很小并针对视口进行了优化,这意味着您不应该看到任何移动设备上的桌面大小资产。“

Helvetica还建议延迟加载,这种技术可以延迟对象的加载,直到需要它为止。 “并非所有用户都会将其发布到页面底部,”他警告说。 “通常你可能会加载永远不会被看到的资产。使用延迟负载将是非常有益的,因为您节省了数据以及电池消耗或内存管理。如果你没有加载图像,你就不会有任何记忆篡夺设备。“

03.看看你是如何叠加的

Helvetica偏爱DevTools的另一个原因是因为它现在还提供了第一个绘图(用户查看内容的第一个像素所需的时间)和第一个有意义的绘制(页面的主要内容变得可见所需的时间)等指标)。

然后是幻灯片(在DevTools或性能工具WebPagetest中),它显示了渲染网站的浏览器的增量屏幕截图,因此您可以看到页面在加载时的样子。通过检查它们,您可以确定何时加载了哪些资产,并研究在时间轴中较早时间加载其中一些资产的方法。

在WebPagetest中--Helvetica赞扬其令人振奋的细节水平 - 您还可以导出负载视频并将幻灯片与竞争对手的视频进行比较。 “一旦你连接了点,你就可以通过更快地将这些资产带入视口来探索如何改善用户体验,”Helvetica解释道。

04.削减杂乱

Helvetica强调,设计决策也会对性能产生影响,理想情况下,您首次加载到视口中的速度应尽可能快,但也应尽可能无杂乱。

因此,您需要了解为呈现网页的初始视图而发生的一系列事件 - 关键呈现路径。这些事件可以通过避免加载不必要的资产并围绕选择Web字体和图像格式做出决策来优化。

“确保你的SVG尽可能没有复杂性,”Helvetica举例说明。 “然后,在渲染SVG时,您将拥有更少的代码。我一直都是从开发者那里听到的。他们将从设计师处获得SVG,并且必须将其发回,因为它会影响性能。“

本文最初发布于net的第303期,这是世界上最畅销的网页设计师和开发者杂志。购买问题303要么订阅网

想进一步了解如何提高网站的速度?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018

Henri Helvetica将于2018年4月25日至27日发表他的演讲API:性能和用户体验的故事

如果您有兴趣确保您的网页快速加载,请确保您获取了一张票生成纽约。 Henri Helvetica将仔细研究当前甚至用于测量网络应用程序的实验性实践,并提供高性能的用户体验,以及提供更多洞察力,例如第一次绘画,有意义的绘画和交互时间。

Generate New York将于2018年4月25日至27日举行。立即获取您的机票

相关文章:



翻译字数超限