Всем привет! Меня зовут Ирина @ierhyna, я фронтенд-разработчик в Semrush. Последние полтора года занимаюсь улучшени… twitter.com/i/web/status/1…

Давайте для начала познакомимся, сегодня расскажу немного о себе и своём пути в разработке.

Наверно как и многие, я увлеклась программированием ещё в школе. К сожалению, не благодаря, а скорее вопреки школьн… twitter.com/i/web/status/1…

Тут надо пояснить, что я росла в маленьком посёлке в Ханты-Мансийском округе, и о такой профессии, как "программист", там никто не слышал.

Примерно в 2001 году дома появился компьютер и интернет. Но он был медленным и с поминутной оплатой, поэтому единст… twitter.com/i/web/status/1…

Моим любимым развлечением стало открывать сохраненные страницы в Блокноте, что-то там менять, открывать в IE, и смотреть, что произошло.

Потом я нашла самоучитель HTML с сайта "постройка-ру", и понеслось :) Сделала страничку про наш класс, сайт про Гар… twitter.com/i/web/status/1…

Но когда возник вопрос, на какой факультет я буду поступать, мысли про IT даже не возникло. Сайты делать? Да кто же… twitter.com/i/web/status/1…

Учиться было сложно ("прочитайте 600 страниц к семинару на завтра", и так по всем предметам), а временами даже физи… twitter.com/i/web/status/1…

На третьем курсе преподаватели узнали о том, что я умею делать сайты, и меня стали привлекать к работе над грантами… twitter.com/i/web/status/1…

Вдохновившись этим успехом, летом после 3го курса мы с приятелями основали свою веб-студию, чтобы делать сайты-визи… twitter.com/i/web/status/1…

Бизнес не взлетел, и через год мы закрылись. В 20 лет это было просто, походы в налоговую казались приключением, а… twitter.com/i/web/status/1…

Я поняла, что мне больше нравится делать что-то самой, чем организовывать работу людей. И с 2012 года стала занимат… twitter.com/i/web/status/1…

В таком режиме прошло три года, я работала в разных местах якобы по специальности, а по ночам фрилансила. И однажды… twitter.com/i/web/status/1…

Сейчас понимаю, что явно себя недооценивала: я имела опыт в open source, умела использовать git, настраивать деплой… twitter.com/i/web/status/1…

Кстати, та фирма заплатила мне за тестовое задание!

Но через полгода основатели поругались, и фирма закрылась 😅 Решив, что со стартапами покончено, я устроилась в Data… twitter.com/i/web/status/1…

Кстати, про DataArt я узнала благодаря этому андерхуду. Пришла на собес, а там @suevalov, который вёл неделю. И я с… twitter.com/i/web/status/1…

А потом я устала от аутсорса. Захотелось погрузиться в продуктовую разработку и видеть, как твои решения влияют на… twitter.com/i/web/status/1…

С этими мыслями я пришла в Semrush, где работаю чуть больше 2,5 лет. Сначала я занималась фронтом в только своей ко… twitter.com/i/web/status/1…

Доброе утро! В ближайшие три дня планирую рассказать:

Давайте проведём несколько опросов, чтобы я лучше понимала, о чем именно и насколько подробно писать :)

Занимаются ли в вашей компании веб-производительностью?

Если вам скажут, что ваше приложение/сайт медленный, знаете ли вы, как это проверить?

Занимаются ли в вашей компании веб-производительностью?

Если вам скажут, что ваше приложение/сайт медленный, знаете ли вы, как это проверить?

Если нужно сделать ваше приложение/сайт быстрее, знаете ли, как можно это сделать?

Если нужно сделать ваше приложение/сайт быстрее, знаете ли, как можно это сделать?

Первая тема — о метриках web performance. Как замерить, насколько приложение быстрое, какие для этого существуют метрики и инструменты.

Пожалуй, самый известный инструмент для отслеживания веб-производительности, это Lighthouse. Я надеюсь, что о нём в… twitter.com/i/web/status/1…

Однако на результат может повлиять конфигурация вашего компьютера, поэтому лучше запускать проверки в изолированном… twitter.com/i/web/status/1…

Получить более подробные данные, на изолированном окружении, можно через Web Page Test. Он позволяет сравнивать рез… twitter.com/i/web/status/1…

На основе Web Page Test работают многие другие инструменты, например, Speedcurve speedcurve.com, который м… twitter.com/i/web/status/1…

Но Speedcurve, в отличие от Web Page Test, платный.

Смысл в том, что когда на странице происходит какое-то изменение, нужно выполнить performance.mark('my-mark'), и эт… twitter.com/i/web/status/1…

То есть нужно будет дописать в коде метрики в тех местах, производительность которых требуется отслеживать

Ещё есть вкладка Performance в хроме, где можно профилировать приложение, но пока я не буду на этом останавливаться

Если вы знаете и используете какие-то другие инструменты для мониторинга производительности, напишите! А я пока перейду к метрикам.

@jsunderhood Если спиннер появляется дольше чем на "Оооооп", но приложение медленное!

@jsunderhood Ежедневно мониторю Page Load Speed в Яндекс.Метрике, так как там показывается срез загрузки сайта у ре… twitter.com/i/web/status/1…

Метрик производительности довольно много. Они показывают определенные события, которые происходят в процессе загруз… twitter.com/i/web/status/1…

Отслеживать все возможные метрики не нужно — мы поначалу так делали, но потом поняли, что это довольно бессмысленно.

Сейчас мне кажется оптимальным следить за Core Web Vitals, это отличный вариант, если вы не знаете, с чего начать.… twitter.com/i/web/status/1…

Особенно важны Core Web Vitals, если у вас сайт, индексируемый поисковиками — гугл умеет определять скорость загруз… twitter.com/i/web/status/1…

Если у вас SPA, или приложение, которое не индексируется, Core Web Vitals можно рассматривать как показатель скорос… twitter.com/i/web/status/1…

Скорее всего, для мониторинга интерактивности SPA потребуется добавить собственные метрики, которые будут показыват… twitter.com/i/web/status/1…

В зависимости от используемого инструмента, метрики можно визуализировать на графиках. Вот, например, так выглядит… twitter.com/i/web/status/1…

@jsunderhood Плюсую, производительность - это базовое свойство системы. Если его не закладывать изначально, то пото… twitter.com/i/web/status/1…

@jsunderhood Мы сейчас используем APDEX apdex.org как способ выразить производительность продукта осн… twitter.com/i/web/status/1…

@jsunderhood Было бы здорово иметь инструмент для тестирования производительности взаимодействия, типа Lighthouse,… twitter.com/i/web/status/1…

@jsunderhood По поводу сатисфакции и конкретных чисел в трешхолдах тоже интересно. Например Гугл как-то писал о мод… twitter.com/i/web/status/1…

Привет! Сегодня расскажу о том, как устроены процессы работы над web perf у нас в компании.

Немного контекста. В Semrush много (30-40?) кроссфункциональных команд разработки, и каждая полностью отвечает за с… twitter.com/i/web/status/1…

И есть инфраструктурная команда, которая делает интеграционный сервис с общими частями интерфейса и API, куда все о… twitter.com/i/web/status/1…

Отсюда следуют несколько особенностей:

Стек технологий у всех команд очень разный. Пожалуй, общее только то, что фронте почти у всех TS + React (потому чт… twitter.com/i/web/status/1…

Это, с одной стороны, повышает вовлеченность команд в их работу (многих мотивирует то, что они сами принимают решен… twitter.com/i/web/status/1…

Для принятия решений, которые будут влиять на работу многих команд, создаются рабочие группы из заинтересованных уч… twitter.com/i/web/status/1…

Так как команда саа принимает решения по своему продукту, мы, как рабочая группа по webperf, не можем "заставить" и… twitter.com/i/web/status/1…

Еще одна особенность, вызванная архитектурой, где много SPA встраиваются в общий сервис — при переходе по меню, пол… twitter.com/i/web/status/1…

До того, как мы начали заниматься улучшением скорости загрузки и оптимизировать размеры бандлов, типична была ситуа… twitter.com/i/web/status/1…

У нас есть некоторое разделение ролей, я больше занимаюсь "экспертизой", создаю общие решения, и консультирую коман… twitter.com/i/web/status/1…

Но мы в целом готовы подхватить задачи друг друга :)

Когда мы решили заняться оптимизациями веб-производительности, основными задачами стали:

Список метрик мы определили исходя из типа приложения: для статичных страниц и для SPA.

Для статичных страниц отслеживаем:

Для SPA метрики те же, и дополнительно отслеживаем собственную метрику First App Render, которая показывает в секун… twitter.com/i/web/status/1…

Значения метрик мы выбирали, основываясь на:

Список метрик и их значений общеизвестен в компании, хранится в Confuence, и при необходимости обновляется.

Также есть рекомендации по размерам JS/CSS-бандлов, их значения тоже немного отличаются для статичных станиц и для SPA.

При выборе инструмента мониторинга ориентировались на возможности создать "спейс" для каждой из команд разработки,… twitter.com/i/web/status/1…

Через SpeedCurve мониторим как синтетические метрики (lab tests несколько раз в день), так и снимаем данные по прои… twitter.com/i/web/status/1…

Для каждой команды разработки настроен свой спейс с дашбордами (по дашборду на каждый продукт команды), на которых… twitter.com/i/web/status/1…

Если по какой-то метрике произошло превышение допустимого значения, об этом приходит уведомление в Slack команде.

Приложения, которые нужно оптимизировать в первую очередь, выбрали количеству трафика и критичности для пользовател… twitter.com/i/web/status/1…

С командами, отвечающими за эти сервисами, вели точечную работу:

Это дало неожиданный эффект, некоторые команды, у которых ещё не был запланирован webperf-аудит, сами находили проб… twitter.com/i/web/status/1…

В течение года, мы провели аудиты примерно 20 команд, и поняли, что дальше продолжать не очень эффективно — в прило… twitter.com/i/web/status/1…

Теперь делаем аудит по запросу от команд, чаще всего это бывает перед выходом нового продукта в продакшен.

Если у вас похожая ситуация, то полезным может быть выделить самый распространенный user flow, понять, какие продук… twitter.com/i/web/status/1…

Оказалось, что многие проблемы общие у разных команд/продуктов, и можно создать единый список рекомендаций, best pr… twitter.com/i/web/status/1…

Про рекомендации, случаи из практики, best practices, планирую рассказать завтра и послезавтра

Попросили показать, как выглядят дашборды. Показываю :) Красная горизонтальная линия — отметка на которой происходи… twitter.com/i/web/status/1…

Thread of my favorite web performance tools 🚀

Привет! Сегодня поговорим про оптимизации, что влияет на метрики, расскажу про best practices и случаи из жизни :)

Выделю три основные направления возможных оптимизаций:

1. Про бандлы и доставку:

Кажется очевидным, но почему-то часто об этом забывают:

Тоже очевидно, но всё же, убедитесь, что вебпак собирает бандлы в продакшен-режиме с включенной опцией minimize: pic.twitter.com/RgHk5F3Ajr

Следующим шагом можно настроить в вебпаке разбивку на чанки. Чтобы это сделать, неплохо для начала проанализировать… twitter.com/i/web/status/1…

Распространён подход, когда в один чанк (или несколько) выносят зависимости node_modules, а в другой код приложения… twitter.com/i/web/status/1…

Лучше, изучив состав бандла через webpack-bundle-analyzer, выделить в отдельный чанк общие зависимости для всех роу… twitter.com/i/web/status/1…

Для генерации отдельного чанка для каждого роута отлично подходит React.lazy() в сочетании с react-router ru.reactjs.org/docs/code-spli…

Дать файлам чанков человеко-читаемые имена поможет волшебный комментарий для вебпака: pic.twitter.com/yQN2fHTxXF

Хорошим способом сократить объем кода, скачиваемого при первой загрузке React приложения, будет импортировать с laz… twitter.com/i/web/status/1…

Некоторые npm пакеты могут существенно увеличить объем бандла кодом, который никогда не будет использован. Например… twitter.com/i/web/status/1…

Исключить лишние локали из moment.js можно через moment-locales-webpack-plugin,
github.com/iamakulov/mome…, IgnorePlu… twitter.com/i/web/status/1…

Про загрузку только необходимых функций lodash, можно почитать тут: azavea.com/blog/2019/03/0…

Про загрузку, отрисовку и взаимодейстивие со страницей продолжу завтра

2. Про загрузку и отрисовку страницы:

Чтобы разобраться в том, как оптимизировать отрисовку, нужно понимать, как браузер рендерит страницу.
Пара ссылок:… twitter.com/i/web/status/1…

Блокируют отрисовку страницы:

Чтобы немного упростить браузеру задачу отрисовки:

Пользователь, заходя на страницу, видит только какую-то её часть. Важно сделать так, чтобы эта видимая часть отобра… twitter.com/i/web/status/1…

Применение critical css позитивно скажется на метриках, например, Largest contentful paint

На контентные метрики (Largest contentful paint / First meaningful paint) влияет и то, как подключаются и использую… twitter.com/i/web/status/1…

Ещё немного про шрифты:

Про изображения:

Для контентных картинок можно использовать тег picture (developer.mozilla.org/en-US/docs/Web…), чтобы, например, загружать более… twitter.com/i/web/status/1…

Совет от кэпа: убедитесь, что картинки минимизованы и имеют адекватные размеры! Особенно, если картинки могут загру… twitter.com/i/web/status/1…

@jsunderhood Более правильный совет будет - не мешайте Webpack делать его работу и не советуйте как следует разделя… twitter.com/i/web/status/1…

Кулстори про клиентский и серверный рендеринг. Есть мнение, что рендерить страницу на сервере быстрее, чем на клиен… twitter.com/i/web/status/1…

Постепенно к странице появлялись всё новые требования: сначала кастомизации в зависимости от тарифного плана и стра… twitter.com/i/web/status/1…

Поддерживать это стало очень сложно, решили снова переписать на реакте. Страница стала отдаваться за 200мс, но выро… twitter.com/i/web/status/1…

Тогда придумали к̶о̶с̶т̶ы̶л̶ь изящное решение: для видимой части сверстали скелетон (штуку как на картинке) и заинл… twitter.com/i/web/status/1…

Если нужно передать через шаблон данные с сервера на клиент (например, initial state для redux store), лучше заверн… twitter.com/i/web/status/1…

3. Про взаимодействие и UX.

Если использовать скелетон, а не спиннер, то пользователям кажется, что страница загружается быстрее:… twitter.com/i/web/status/1…

Полезно изучить, как пользователи переходят по страницам сайта, и использовать это знание для предварительной загру… twitter.com/i/web/status/1…

С rel="prerender" нужно работать осторожно, так как это ускоряет следующую страницу для части пользователей за счёт… twitter.com/i/web/status/1…

Используюя rel="preload" можно скачать и закешировать ресурсы, которые скоро понадобятся. В отличие от rel="prerend… twitter.com/i/web/status/1…

Guess.js — экспериментальная библиотека, которая на основе данных гугл-аналитики предсказывает, на какую страницу д… twitter.com/i/web/status/1…

Для Webpack есть preload-webpack-plugin, он решает проблему добавления ссылок на ресурсы с хешем в имени:
npmjs.com/package/@vue/p…

Совсем немного про отзывчивость интерфейса:

Если в течение ~100мс после действия (клик по кнопке, нажатие на меню, фокусировка в инпуте и начало ввода текста и… twitter.com/i/web/status/1…

Поэтому важно не блокировать интерфейс при выполнении запросов к API и других операциях, и максимально быстро показ… twitter.com/i/web/status/1…

Есть паттерн Optimistic UI, согласно которому предполагается, что операция завершилась успехом, и показывает резуль… twitter.com/i/web/status/1…

Особенно хорошо такой подход работает в случае с атомарными независимыми друг от друга операциями

Как реализовать Optimistic UI с Apollo GraphQL:
apollographql.com/docs/react/per…

Как реализовать Optimistic UI с React Query:
react-query.tanstack.com/guides/optimis…

С вами была Ирина Соколовская, и моя неделя в этом аккаунте подошла к концу. Вы классные, мне было с вами интересно… twitter.com/i/web/status/1…