我从参加#PerfMatters会议中学到的东西 (What I learned from attending the #PerfMatters conference)

从前端的网络运行情况发布会上的注意事项 (Notes from a front-end web performance conference)

This week I had the privilege of attending #PerfMatters, a conference focused on front-end web performance. I’ve never been to a conference before, but I was thrilled to be attending because it promised an amazing lineup of speakers and topics.

本周，我有幸参加了#PerfMatters ，这是一个有关前端Web性能的会议。我以前从未参加过会议，但是我很高兴参加会议，因为会议答应了精彩的演讲者和主题阵容。

I started delving into web performance about over a year ago, and so thought this would be a great chance to deepen my knowledge and meet other people in the community.

大约一年多以前，我开始研究网络性能，因此认为这是加深我的知识并结识社区中其他人的好机会。

This post consists of three parts:

这篇文章包括三个部分：

(1) my experience attending the conference,

(1)我参加会议的经验，

(2) some of the things I learnt at the conference, and

(2)我在会议上学到的一些东西，以及

(3) parting thoughts.

(3)离别思想。

关于会议体验的思考 (Thoughts on the conference experience)

每个人都很友好和平易近人 (Everyone is so friendly and approachable)

I went alone and it was a fairly intimidating experience, since I’m generally a shy person and can take awhile to warm up. But, I made a rule to not sit alone during lunch and to try to talk to at least 2 people each day. I’m glad I did because everyone I met was nice and fun to talk to.

我一个人去，那是相当令人生畏的经历，因为我通常是一个害羞的人，可能需要一段时间才能热身。但是，我制定了一个规则，不要在午餐时间独自一人坐，并且每天尝试与至少2个人交谈。我很高兴，因为我遇到的每个人都很好并且很有趣。

I ended up meeting a lot of people, talking about things ranging from the PRPL pattern, experimenting with Cloudflare workers to better serve users in Australia (from servers in the US), functional programming’s increasing prevalence in front-end web development, and how to get started with snowboarding (not performance related, in case you’re wondering).

我最终结识了很多人，讨论了从PRPL模式，尝试Cloudflare工作者以更好地为澳大利亚的用户提供服务(来自美国的服务器)，函数式编程在前端Web开发中日益普及的各种事情。开始使用单板滑雪(与性能无关，如果您想知道的话)。

这次谈话真是太神奇了 (The talks were absolutely amazing)

All the speakers had something related to web performance in one form or another to talk about, and it was obvious that they put in a lot of effort into their presentations. Jenna Zeigen’s talk covered a long list of performance tricks and each of her points had a song lyric to go along with them, which was so entertainingly informative. She told me that it took her about 15 minutes for each song and there’s like over 30 in there ?

所有发言人都以一种或另一种形式谈论与网络性能有关的事情，很明显，他们在演讲中付出了很多努力。珍娜·泽根 ( Jenna Zeigen )的演讲涵盖了一长串表演技巧，她的每一个要点都带有一首歌词，与之融为一体。她告诉我，每首歌花了她大约15分钟，那里大概有30多分钟？

Videos of the talks should be announced on @perfmattersconf soon, but a number of the slides have already been published with #perfmattersconf.
会谈的影片应在公布@perfmattersconf很快，但一些幻灯片已经出版了#perfmattersconf 。

Improving a web page’s performance isn’t just a one-off audit, fixing the problems that makes that page slow, and then moving on. It takes a concerted effort from all stakeholders—business, design, engineering, marketing, product—in an organisation to get and stay fast.

改善网页的性能不仅是一次性审核，更正了使网页变慢的问题，然后继续进行。在组织中， 所有利益相关者(业务，设计，工程，市场营销，产品)需要齐心协力 ，以保持并保持快速发展。

The talks weren’t all just about how we could improve TTIs or load times, which are important. But, they also covered the other important parts of making the web accessible and usable for as many people as possible. From how people perceive performance to empowering a performance culture, and from how privilege defines performance to the intersection of performance and accessibility.

讨论不仅涉及如何改善TTI或加载时间，这很重要。但是，它们还涵盖了使尽可能多的人可以访问和使用Web的其他重要部分。从人们对绩效的看法到授权绩效文化，从特权如何定义绩效到绩效与可访问性的交集。

非详尽的性能提示和技巧列表 (A non-exhaustive list of performance tips and tricks learnt)

Some, if not all, of these might be common knowledge, but many were new to me.

这些中的一些(如果不是全部)可能是常识，但是许多对我来说是新的。

表演文化 (Performance Culture)

Empower developers with tools to enable better performance. Also, make performance part of the development process.
使开发人员能够使用工具来实现更好的性能。另外，将性能作为开发过程的一部分。
Compare your site with your competitors’ to get executive buy-in on driving performance. Use WebPagetest’s side-by-side video comparison of your webpage against a competitor’s loading journey to succinctly drive your point across.
将您的网站与竞争对手的网站进行比较，以获取高管对绩效的支持。使用WebPagetest对您的网页进行的并行视频比较，与竞争对手的加载过程进行比较，以简洁地传达您的观点。
Measure the potential annual revenue gains from increasing site speed with Google’s Test My Site tool.
使用Google的“测试我的网站”工具来衡量提高网站速度可能带来的潜在年度收益 。

网络性能 (Performance on the Web)

Latency has an outsized impact over bandwidth on network requests.
延迟对带宽对网络请求的影响很大 。
SVG animations are great for animating loaders because of their (relatively) smaller sizes.
SVG动画 (相对)较小， 因此非常适合动画加载器 。
Squeeze your page into 14KB if possible, to avoid multiple round trips because of TCP slow-start.
如果可能，将页面压缩到14KB ，以避免由于TCP慢启动导致多次往返。
Not all CDNs are doing HTTP/2 prioritisation as expected.
并非所有CDN都按预期执行HTTP / 2优先级划分。
If you have to use web fonts, Zach Leatherman wrote a great guide on how to load them well.
如果您必须使用网络字体 ， Zach Leatherman撰写了一份很好的指南，介绍了如何很好地加载它们。
Perceived performance is influenced by duration (actual duration that a process takes, referred to as “performance”), responsiveness, fluency (perceived smoothness of a process), and tolerance (how long does the user expect a process to take). Slides from Gemma Petrie and Heather McGaw’s talk on Measuring Perceived Performance to Prioritize Product Work.
感知的性能受 持续时间 (一个过程所花费的实际持续时间，称为“性能”)， 响应能力 ， 流畅性 (一个过程的感知平滑度)和容忍度 (用户期望一个过程花费多长时间)的影响。来自Gemma Petrie和Heather McGaw的演讲的幻灯片，该演讲涉及衡量感知性能以优先进行产品工作 。

一些整洁的工具 (Some Neat Tools)

Chrome’s code coverage tool is useful for determining where and when to code-split stuff out. Interact with the page a little to see how the numbers change, and according to Tim Kaldec, about 45% unused code is normal and it’ll be diminishing marginal gains to optimise over that.
Chrome的代码覆盖率工具对于确定何时何地对内容进行代码拆分很有用。与页面进行一些交互以查看数字如何变化，并且根据Tim Kaldec的说法，大约有45％的未使用代码是正常的，因此优化该代码将减少边际收益。
Chrome’s override network resource feature allows developers to return a locally saved file, which is useful for debugging something on the fly.
Chrome的覆盖网络资源功能使开发人员可以返回本地保存的文件，这对于动态调试某些内容很有用。
Google Docs Spreadsheet to do bulk WebPagetest audits.
Google Docs Spreadsheet可以进行批量的WebPagetest审核 。
Online JavaScript AST explorer (alright, this one isn’t exactly related to web performance, but I found out about it during the conference and can’t stop playing with it).
在线JavaScript AST资源管理器 (好吧，这与网络性能并不完全相关，但是我在会议期间发现了它，因此无法停止使用它)。
Request Map creates a network graph from a web page and is useful for visualising third party requests.
请求地图可从网页创建网络图，对于可视化第三方请求非常有用。

离别的想法 (Parting Thoughts)

If there’s one overarching theme I got from the conference, it’s that to be good at web performance, it’s crucial to understand how the browser works (things like how rendering happens and the critical rendering path). But, performance doesn’t just stop at technical gains.

如果有一个最重要的主题我从会上得到的，那就是要善于Web性能，它的关键是要了解如何在浏览器作品 (已经是如何渲染发生和关键渲染路径 )。但是， 性能不仅止于技术进步 。

Getting buy-in from all stakeholders, not just engineering, is crucial to improving and maintaining performance because web performance goes beyond loading a page as fast as possible.

从所有利益相关者那里获得购买的支持，而不仅仅是工程方面的支持，对于提高和维护性能至关重要，因为Web性能不仅限于尽可能快地加载页面。

There’s also perceived performance to consider, and then determining whether further improvements in performance creates additional significant business or user improvements. It’s important to keep in mind that performance is just one part of the user experience.

还需要考虑性能，然后确定性能的进一步提高是否会带来其他重要的业务或用户改进 。重要的是要记住， 性能只是其中的一个用户体验的一部分是很重要的。

I didn’t take too many photos during the conference (note to self to definitely take more photos the next time), but I did manage to snap this one.

会议期间我没有拍太多照片(请注意，下次一定要拍更多照片)，但是我确实设法拍了一张。

If you’re interested in web performance or just web development in general, this is an amazing conference to check out and it’s scheduled to happen next year too! There’s also a scholarship program for those unable to attend without financial assistance. Looking forward to seeing you there next year!

如果你有兴趣在网络性能或只是Web开发总的来说，这是一个了不起的会议，以检查和它预定明年要发生呢！还有一个奖学金计划，针对那些没有经济援助就无法参加的人。期待明年与您相见！

Thanks to Hui Yi, Jingwen Chen, and Yao Hui Chua for reading an earlier draft and sharing their feedback.

感谢Hui Yi ， Chenjingwen Chen和Yao Hui Chua阅读早期的草稿并分享他们的反馈。