我從參加#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閱讀早期的草稿并分享他們的反饋。