Front-End Performance 2021: быстрые победы

Опубликовано: 2022-03-10
Краткое резюме ↬ Давайте сделаем 2021 год… быстрым! Ежегодный контрольный список производительности внешнего интерфейса со всем, что вам нужно знать для быстрого создания веб-приложений сегодня, от метрик до инструментов и методов внешнего интерфейса. Обновлено с 2016 года.

Оглавление

  1. Подготовка: планирование и показатели
  2. Постановка реалистичных целей
  3. Определение среды
  4. Оптимизация активов
  5. Оптимизация сборки
  6. Оптимизация доставки
  7. Сеть, HTTP/2, HTTP/3
  8. Тестирование и мониторинг
  9. Быстрые победы
  10. Все на одной странице
  11. Скачать контрольный список (PDF, Apple Pages, MS Word)
  12. Все на одной странице
  13. Скачать контрольный список (PDF, Apple Pages, MS Word)
  14. Подпишитесь на нашу рассылку по электронной почте, чтобы не пропустить следующие руководства.

Быстрые победы

Этот список довольно обширен, и выполнение всех оптимизаций может занять некоторое время. Итак, если бы у вас был всего 1 час, чтобы добиться значительных улучшений, что бы вы сделали? Давайте сведем все это к 17 низко висящим фруктам . Очевидно, что перед тем, как вы начнете и закончите, измерьте результаты, включая «Максимальное отрисовку контента» и «Время до интерактивности» при 3G- и кабельном соединении.

  1. Измеряйте реальный мировой опыт и ставьте соответствующие цели. Стремитесь быть как минимум на 20% быстрее, чем ваш самый быстрый конкурент. Оставайтесь в пределах максимального содержания контента < 2,5 с, задержка первого ввода < 100 мс, время до взаимодействия < 5 с на медленном 3G, для повторных посещений, TTI < 2 с. Оптимизируйте хотя бы для First Contentful Paint и Time To Interactive.
  2. Оптимизируйте изображения с помощью Squoosh, mozjpeg, guetzli, pingo и SVGOMG и подавайте AVIF/WebP с CDN изображений.
  3. Подготовьте важный CSS для ваших основных шаблонов и вставьте их в <head> каждого шаблона. Для CSS/JS работайте в пределах критического бюджета размера файла макс. 170 КБ в сжатом виде (0,7 МБ в распакованном виде).
  4. Обрезайте, оптимизируйте, откладывайте и лениво загружайте скрипты. Инвестируйте в конфигурацию вашего сборщика, чтобы удалить избыточность и проверить облегченные альтернативы.
  5. Всегда размещайте свои статические ресурсы самостоятельно и всегда предпочитайте самостоятельно размещать сторонние ресурсы. Ограничьте влияние сторонних скриптов. Используйте фасады, загружайте виджеты при взаимодействии и остерегайтесь антимерцающих фрагментов.
  6. Будьте избирательны при выборе фреймворка. Для одностраничных приложений идентифицируйте критические страницы и обслуживайте их статически или, по крайней мере, предварительно визуализируйте их, а также используйте прогрессивную гидратацию на уровне компонентов и импортируйте модули при взаимодействии.
  7. Рендеринг на стороне клиента сам по себе не является хорошим выбором для повышения производительности. Сделайте предварительный рендеринг, если ваши страницы не сильно меняются, и отложите загрузку фреймворков, если можете. Если возможно, используйте потоковый рендеринг на стороне сервера.
  8. Предоставляйте устаревший код только устаревшим браузерам с <script type="module"> и шаблоном module/nomodule.
  9. Поэкспериментируйте с перегруппировкой правил CSS и протестируйте встроенный CSS.
  10. Добавьте подсказки ресурсов, чтобы ускорить доставку с помощью более быстрого dns-lookup , preconnect , prefetch , preload и prerender .
  11. Подмножьте веб-шрифты и загрузите их асинхронно, а также используйте font-display в CSS для быстрого первого рендеринга.
  12. Убедитесь, что заголовки кэша HTTP и заголовки безопасности установлены правильно.
  13. Включите сжатие Brotli на сервере. (Если это невозможно, по крайней мере, убедитесь, что сжатие Gzip включено.)
  14. Включите перегрузку TCP BBR, если ваш сервер работает на ядре Linux версии 4.9+.
  15. Включите сшивание OCSP и IPv6, если это возможно. Всегда обслуживайте сертификат DV, скрепленный скобками OCSP.
  16. Включите сжатие HPACK для HTTP/2 и перейдите на HTTP/3, если он доступен.
  17. Кэшируйте активы, такие как шрифты, стили, JavaScript и изображения, в кэше сервис-воркера.

Скачать контрольный список (PDF, Apple Pages)

Имея в виду этот контрольный список, вы должны быть готовы к любому проекту производительности внешнего интерфейса. Не стесняйтесь загружать готовый к печати PDF-файл контрольного списка, а также редактируемый документ Apple Pages , чтобы настроить контрольный список в соответствии с вашими потребностями:

  • Скачать контрольный список в формате PDF (PDF, 166 КБ)
  • Загрузить контрольный список в Apple Pages (.pages, 275 КБ)
  • Скачать чек-лист в формате MS Word (.docx, 151 КБ)

Если вам нужны альтернативы, вы также можете проверить контрольный список внешнего интерфейса Дэна Рублика, «Контрольный список веб-производительности дизайнера» Джона Яблонски и Контрольный список внешнего интерфейса.

Поехали!

Некоторые из оптимизаций могут выходить за рамки вашей работы или бюджета или могут быть просто излишними, учитывая устаревший код, с которым вам приходится иметь дело. Хорошо! Используйте этот контрольный список в качестве общего (и, надеюсь, исчерпывающего) руководства и создайте собственный список проблем, которые применимы к вашему контексту. Но самое главное, протестируйте и измерьте свои собственные проекты, чтобы выявить проблемы перед оптимизацией. Всем удачных результатов в 2021 году!

Оглавление

  1. Подготовка: планирование и показатели
  2. Постановка реалистичных целей
  3. Определение среды
  4. Оптимизация активов
  5. Оптимизация сборки
  6. Оптимизация доставки
  7. Сеть, HTTP/2, HTTP/3
  8. Тестирование и мониторинг
  9. Быстрые победы
  10. Все на одной странице
  11. Скачать контрольный список (PDF, Apple Pages, MS Word)
  12. Все на одной странице
  13. Скачать контрольный список (PDF, Apple Pages, MS Word)
  14. Подпишитесь на нашу рассылку по электронной почте, чтобы не пропустить следующие руководства.

Огромное спасибо Гаю Подярному, Йоаву Вайсу, Эдди Османи, Артему Денисову, Денису Мишунову, Илье Пухальски, Джереми Вагнеру, Колину Бенделлу, Марку Земану, Патрику Минану, Леонардо Лосовизу, Энди Дэвису, Рэйчел Эндрю, Ансельму Ханнеманну, Барри Полларду, Патрику. Хаманн, Гидеон Пайзер, Энди Дэвис, Мария Просвернина, Тим Кадлек, Рей Банго, Матиас Отт, Питер Бойер, Фил Уолтон, Мариана Перальта, Пепейн Сендерс, Марк Ноттингем, Жан Пьер Винсент, Филипп Теллис, Райан Таунсенд, Ингрид Бергман, Мохамед Хуссейн SH, Джейкобу Гроссу, Тиму Сваллингу, Бобу Виссеру, Кеву Адамсону, Адиру Амсалему, Алексею Куликову и Родни Рему за рецензирование этой статьи, а также нашему фантастическому сообществу, которое поделилось методами и уроками, извлеченными из своей работы по оптимизации производительности для всех. . Вы действительно сокрушительны!