7个关于网页性能的专家提示

null

获得正确的网络表现并不容易;通常设计师会希望看起来最好看的网站包装所有最新的技巧,而开发人员则专注于确保一切运行良好,并且很难找到有效的妥协方案。

您可以学习一些平衡外观和性能的好方法生成伦敦下周,9月21日,在哪里帕特里克哈曼将分享如何为我们的用户创建更快,更有弹性的体验。如果网络性能对您很重要,立即预订机票

为了进一步增强您的知识,我们向Patrick和其他六位专家询问了他们如何处理Web性能。继续阅读并学习。

01.创造一种表现文化

“我帮助人们和组织明白,性能不仅仅是技术上的最佳实践,而是一种必不可少的设计原则,”他说布拉德弗罗斯特。 “每个人都需要优先考虑工作流程中的性能,从业务所有者到管理人员,设计人员和开发人员。虽然建立绩效文化比应用聪明的开发人员技术要困难得多,但从长远来看,这是一项更有价值的努力。”

02.设定绩效基准

注意,你不能优化你无法衡量的东西Guy Podjarny。 “首先对你的关键页面运行WebPagetest测试,”他建议说,“并记录你最喜欢的速度和重量数作为基线。然后在你的构建系统中重复这些测试,如果你偏离了基线,就打破构建太多了。随着这条线的出现,你可以逐步采取优化措施来提高标准。“

03.制定业绩预算

对于Katie Kovalcin从Vox产品中,网络性能是所有团队成员应该从最初的客户对话中接近的。 “作为一名设计师,我喜欢在开始设计之前与开发人员合作建立性能预算,因此我意识到我必须在其中工作的限制,”她告诉我们。

“我们会设置一个数字,然后经常进行内部检查,因为我设计的目的是确保我做出的选择符合项目的整体目标。如果某种模式影响了这些目标,我们将讨论它并提出来与其他设计解决方案相比,这些解决方案将更快,但仍能展现我想要达到的美感。“

04.内联关键CSS

“我们为自己的核心绩效指标设定了预算,例如项目开始时的Start Render和Speed Index,”他说快速的网络性能工程师帕特里克哈曼,“并使用诸如的工具组合Speedcurve.com,WebPagetest和我们自己的RUM监控,以确保我们每次部署时都不会破坏它们。我们对这些指标的最大改进是将我们的关键CSS内联到我们的页面,减少了开始渲染时间超过两秒。“

At Generate London, Patrick Hamann will discuss best practices for loading assets in the browser

在Generate London,Patrick Hamann将讨论在浏览器中加载资产的最佳实践

05.平衡美学和速度

Etsy的团队通过了解它是整体用户体验的主要部分来处理Web性能。 “我们发现平衡美学和速度,并努力尽可能地了解两者的业务影响非常重要,”高级工程经理解释道。劳拉霍根。 “我们开展A / B测试,测量设计变更和性能变化,以确保我们为会员提供最佳的用户体验。我们致力于通过简化产品设计流程来保持性能最佳测试和测量。“

06.锁定你的帧速率

“大多数人只是优先考虑加载性能,”Chrome开发者关系倡导者指出,保罗刘易斯但是他指出,虽然这很重要,但你还需要测量你的网站响应用户输入的速度,以及它是否能够达到滚动和其他动画的稳定60fps。

“了解每秒的帧数,以及花费在JavaScript,样式,布局,绘画和复合上的时间是至关重要的,因为用户确实注意到帧速率下降或事情锁定。使用开发人员工具和定期成为BFF在开发过程中描述您的项目。如果您以前从未进行过分析,请查看本指南可优化您的网站和应用“。

07.让所有人参与进来

“我将网络性能视为一项整体的,团队范围的任务,”前端开发人员说哈里罗伯茨。 “性能是每个人的问题,不应该被视为一个团队或冲刺的责任。我尽可能早地参与关键的产品和设计决策,以确保一切都是为了项目的最佳利益;设计处理,功能请求和代码本身都有助于产品的性能。这是一个基础,而不是一个功能。“

除了网络性能生成伦敦9月21日至22日还将涵盖动画,用户体验策略,原型设计,用户研究,产品设计,自适应以及对话界面,并加载更多内容。 9月20日星期三还有一些门票留给了研讨会。今天预定你的位置

这篇文章最初出现在网络杂志问题268。



翻译字数超限