Какво научих от посещението на конференцията #PerfMatters

Записки от една конференция уеб производителност предния край

Тази седмица имах привилегията да присъствам на #PerfMatters, конференция, фокусирана върху уеб представянето отпред. Никога досега не съм ходил на конференция, но бях развълнуван да присъствам, защото тя обещаваше невероятна гама от лектори и теми.

Започнах да се задълбочавам в уеб изпълнението преди повече от година и затова си мислех, че това ще бъде чудесен шанс да задълбоча знанията си и да се срещна с други хора в общността.

Тази публикация се състои от три части:

(1) опитът ми да присъствам на конференцията,

(2) някои от нещата, които научих на конференцията, и

(3) раздяла на мисли.

Мисли за опита на конференцията

Всички са толкова приятелски настроени и достъпни

Отидох сам и това беше доста плашещо преживяване, тъй като по принцип съм срамежлив човек и може да отнеме известно време да се затопли. Но взех правило да не седим сами по време на обяд и да се опитваме да говорим с поне 2 души всеки ден. Радвам се, че го направих, защото с всеки, когото срещнах, беше приятно и забавно да говоря.

В крайна сметка срещнах много хора, говорех за неща, вариращи от модела PRPL, експериментирах с работниците на Cloudflare, за да обслужвам по-добре потребителите в Австралия (от сървъри в САЩ), нарастващото разпространение на функционалното програмиране в уеб разработката отпред и как да започнете със сноуборд (не е свързано с производителността, в случай че се чудите).

Разговорите бяха абсолютно невероятни

Всички лектори имаха нещо, свързано с уеб изпълнението под една или друга форма, за което да разговарят и беше очевидно, че те положиха много усилия в своите презентации. Речта на Джена Зейген обхващаше дълъг списък с трикове за изпълнение и всяка от точките й имаше текст на песента, който беше заедно с тях, което беше толкова забавно информативно. Тя ми каза, че й отне около 15 минути за всяка песен и там има над 30?

Видеозаписите от разговорите трябва скоро да бъдат обявени на @perfmattersconf, но редица слайдове вече са публикувани с #perfmattersconf.

Разговорите обхващат много аспекти на работата по уеб изпълнение

Подобряването на ефективността на уеб страницата не е само еднократен одит, отстраняване на проблемите, които правят тази страница бавна, и след това продължаване. Необходими са съгласувани усилия от всички заинтересовани страни - бизнес, дизайн, инженеринг, маркетинг, продукт - в една организация, за да се постигне и да се поддържа бързо.

Разговорите не бяха само за това как можем да подобрим TTI или времето за зареждане, което е важно. Но те обхващат и другите важни части от това да направим мрежата достъпна и използваема за възможно най-много хора . От това как хората възприемат представянето до овластяване на култура на изпълнение и от това как привилегията определя изпълнението до пресечната точка на изпълнението и достъпността.

Неизчерпателен списък с научени съвети и трикове

Някои, ако не всички, може да са общоизвестни, но много от тях са нови за мен.

Култура на изпълнението

  • Овластете разработчиците с инструменти, за да осигурите по-добра производителност. Също така, направете представянето част от процеса на разработка.
  • Сравнете уебсайта си с конкурентите си, за да получите бай-ин за изпълнение на шофирането. Използвайте сравнението на видеото на страницата до страницата на WebPagetest за сравнение на вашата уеб страница с товаренето на конкурент, за да насочите лаконично вашата точка.
  • Измерете потенциалните годишни печалби от увеличаване на скоростта на сайта с инструмента на Google Test My Site.

Изпълнение в мрежата

  • Латентността оказва огромно влияние върху честотната лента на мрежовите заявки.
  • SVG анимациите са чудесни за анимиране на товарачи поради техните (относително) по-малки размери.
  • Стиснете страницата си в 14KB, ако е възможно, за да избегнете множество двупосочни пътувания поради TCP бавен старт.
  • Не всички CDN правят HTTP / 2 приоритизиране, както се очаква.
  • Ако трябва да използвате уеб шрифтове , Zach Leatherman написа чудесно ръководство за това как да ги заредите добре.
  • Възприеманата производителност се влияе от продължителността (действителната продължителност на процеса, наричана „производителност“), отзивчивостта , плавността (възприемана гладкост на процеса) и толерантността (колко време потребителят очаква процесът да отнеме). Слайдове от речта на Джема Петри и Хедър Макгоу на тема „ Измерване на възприеманата производителност, за да се даде приоритет на работата на продукта“ .

Някои кокетни инструменти

  • Инструментът за покритие на кода на Chrome е полезен за определяне къде и кога да се разделят кодовете. Взаимодействайте със страницата малко, за да видите как се променят числата и според Тим Калдек около 45% неизползван код е нормален и ще намалее незначителните печалби, за да се оптимизира над това.
  • Функцията за заместване на мрежовите ресурси на Chrome позволява на разработчиците да върнат локално запазен файл, който е полезен за отстраняване на грешки в нещо в движение.
  • Електронна таблица на Google Docs за извършване на групови одити на WebPagetest .
  • Онлайн JavaScript AST Explorer (добре, този не е точно свързан с уеб производителността, но разбрах за него по време на конференцията и не мога да спра да играя с него).
  • Request Map създава мрежова графика от уеб страница и е полезна за визуализиране на заявки на трети страни.

Мисли за раздяла

Ако има една всеобхватна тема, която получих от конференцията, това е, че за да се справям добре с уеб производителността, от решаващо значение е да разбера как работи браузърът (неща като това как се извършва рендирането и критичния път на рендиране). Но производителността не спира само на технически печалби .

Получаването на бай-ин от всички заинтересовани страни, а не само инженеринг, е от решаващо значение за подобряване и поддържане на производителността, тъй като уеб ефективността надхвърля зареждането на страница възможно най-бързо.

Има и възприемана производителност, която трябва да се разгледа и след това да се определи дали по-нататъшните подобрения в производителността създават допълнителни значителни подобрения в бизнеса или потребителите . Важно е да имате предвид, че производителността е само една част от потребителското изживяване .

Не направих твърде много снимки по време на конференцията (обърнете внимание на себе си, за да направя повече снимки следващия път), но успях да го снимам.

Ако се интересувате от уеб производителност или просто уеб разработка като цяло, това е невероятна конференция, която трябва да проверите и трябва да се случи и следващата година! Има и програма за стипендии за тези, които не могат да присъстват без финансова помощ. Очакваме Ви да се видим там догодина!

Благодарим на Hui Yi, Jingwen Chen и Yao Hui Chua, че прочетоха по-ранен проект и споделиха отзивите си.