Awesome

Примечание переводчика: возможны ошибки и неточности перевода, спасибо всем, кто их найдёт и предложит исправления! Может это очевидно, но считаю необходимым указать, что названия ссылок хоть и частично переведены, их контент на английском языке, за исключением случаев, когда рядом со ссылкой на оригинал указан перевод (к сожалению, очень-очень редко).

Содержание

1. HTML
2. CSS
3. Шрифты
4. Изображения
5. JavaScript
6. Сервер (в процессе)
7. JS-фреймворки (в процессе)

Введение

Производительность — огромная тема, но это не всегда забота «бэкенда» или «администратора»: это также ответственность фронтенда. Чек-лист производительности фронтенда — это исчерпывающий список пунктов, которые вы должны проверить или, по крайней мере, знать о них, как фронтенд-разработчик, и применять в своём проекте (личном и коммерческом).

Как использовать?

Для каждого правила будет приведён параграф, поясняющий почему это правило важно и как вы можете его исправить. Для получения более подробной информации вам нужно перейти по ссылкам, которые будут указывать на 🛠 инструменты, 📖 статьи или 📹 средства, которые могут завершить чек-лист.

Все пункты в Чек-листе производительности фронтенда необходимы для достижения наивысшей оценки производительности, но вы найдёте индикатор, который поможет вам в конечном счёте определить приоритеты некоторых правил. Существует 3 уровня приоритета:

• означает, у этого пункта низкий приоритет.
• означает, у этого пункта средний приоритет. Вам не следует избегать выполнение этого пункта.
• означает, у этого пункта высокий приоритет. Настоятельно не рекомендуется избегать соблюдения этого правила, поэтому необходимо выполнить рекомендуемые исправления.

Инструменты производительности

Список инструментов, которые вы можете использовать для тестирования или мониторинга вашего веб-сайта или приложения:

• 🛠 WebPagetest - Тест производительности и оптимизации сайта

• 🛠 ☆ Dareboost: Проверка скорости и анализ сайта (используйте купон WPCDD20 для получения скидки 20%)

• 🛠 Treo: Мониторинг скорости страницы

• 🛠 GTmetrix | Оптимизация производительности и скорости сайта

• 🛠 PageSpeed Insights

• 🛠 Pingdom - Тест скорости сайта

• 📖 Pagespeed - Инструмент и руководство по оптимизации

• 📖 Сделайте сайты быстрее | Google Developers

• 🛠 Sitespeed.io - Добро пожаловать в прекрасный мир веб-оптимизации

• 🛠 Calibre - Мониторинг и анализ быстродействия веб-приложений

• 🛠 Dotcom-Tools - Тест скорости сайта и проверка веб-производительности

• 🛠 Pingdom - Мониторинг доступности сервера и сайта (Ссылка на бесплатную регистрацию)

• 🛠 Uptime Robot

• 🛠 SpeedCurve: Мониторинг производительности фронтенда

• 🛠 PWMetrics - Инструмент командной строки и библиотека для сбора метрик производительности

• 🛠 Varvy - Оптимизация скорости страницы

• 🛠 Lighthouse - Google

• 🛠 Расширение для браузера Checkbot - Проверяет веб-производительность на соответствие передовым практикам

• 🛠 Yellow Lab Tools | Онлайн-тест для помощи ускорения тяжелых веб-страниц

Справочные руководства

• 📹 Цена JavaScript - YouTube (текстовая версия) (🇷🇺 перевод)
• 📖 Начало работы с анализом производительности во время выполнения | Google Developers
• 📖 Состояние веба | 2018_01_01
• 📖 Размер страницы не имеет значения
• 📖 Varvy - Глоссарий веб-производительности
• 📖 fabkrum/web-performance-resources: Обновлённая коллекция ценных ресурсов веб-производительности
• 📖 Checkbot - Передовые практики по загрузке веб-проектов

HTML

• Минифицированный HTML: HTML-код минифицирован; комментарии, проблемы и новые строки удалены из файлов-ресурсов, используемых в продакшене.

  Почему:

  Удаление всех ненужных пробелов, комментариев и переводов строк уменьшит размер вашего HTML и ускорит время загрузки страницы сайта и, очевидно, облегчит загрузку сайта вашим пользователям.

  Как:

  У большинства фреймворков есть плагины для обеспечения миницификации веб-страниц. Вы можете использовать кучу NPM-модулей, которые могут делать данную работу автоматически.

  • 🛠 HTML minifier | Минифицировать код
  • 🛠 Онлайн-сжатие HTML
  • 📖 Экспериментирование с HTML-минификатором — Perfection Kills

• Удалить ненужные комментарии: Убедитесь, что комментарии удалены из ваших страниц.

  Почему:

  Комментарии не очень полезны для пользователя, поэтому должны быть удалены из файлов в продакшене. Случай, когда вы можете сохранить комментарии — это сохранить источник (происхождение) библиотеки.

  Как:

  В большинстве случаев комментарии могут быть удалены, используя плагин для минификации HTML.

• 🛠 remove-html-comments - npm

• Удалить ненужные атрибуты: Атрибутов типов, такие как type="text/javascript" или type="text/css", больше не нужны, и их следует удалить.

  <!-- До HTML5 -->
  <script type="text/javascript">
      // JavaScript-код
  </script>
  
  <!-- В настоящее время -->
  <script>
      // JavaScript-код
  </script>
  

  Почему:

  Атрибуты типов не нужны, поскольку HTML5 подразумевает text/css и text/javascript по умолчанию. Неиспользованный код следует удалить, если он не используется вашим сайтом или приложением, т.к. это он добавляет больше размера вашим страницам.

  Как:

  ⁃ Убедитесь, что у тегов <link> и <script> нет атрибутов типа.

  • 📖 Тег Script | CSS-Tricks    

• Всегда размещайте теги подключения CSS до тегов, загружающих JavaScript: Убедитесь, что ваш CSS всегда загружается перед JavaScript-кодом.

  <!-- Не рекомендуется -->
  <script src="jquery.js"></script>
  <script src="foo.js"></script>
  <link rel="stylesheet" href="foo.css"/>
  
  <!-- Рекомендуется -->
  <link rel="stylesheet" href="foo.css"/>
  <script src="jquery.js"></script>
  <script src="foo.js"></script>
  

  Почему:

  Наличие тегов подключения CSS до любого JavaScript позволяет повысить параллельную загрузку, которая ускоряет время отрисовки страницы браузером.

  Как:

  ⁃ Убедитесь, что теги <link> и <style> в вашем <head> всегда находятся перед вашим <script>.

  • 📖 Порядок стилей и скриптов для pagespeed

• Сократить количество элементов iframe: Используйте элементы iframe только в том случае, если у вас нет другой технической возможности. Старайтесь избегать элементов iframe столько, сколько сможете.

⬆ вернуться в начало

CSS

• Минификация: Все CSS-файлы минифицированы, комментарии, проблемы и новые строки удалены из файлов для продакшена.

  Почему:

  Когда CSS-файлы, содержимое загружается быстрее и меньше данных отправляются клиенту. Важно всегда минифицировать CSS-файлы в продакшене. Это выгодно для любого пользователя, как и для каждого бизнеса, который хочет снизить расходы на пропускную способность и снизить использование ресурсов.

  Как:

  Используйте инструменты для минификации ваших файлов автоматически automatically до или во время сборки или деплоя.

  • 🛠 Модульный минификатор, основанный на экосистеме PostCSS - cssnano
  • 🛠 @neutrinojs/style-minify - npm
  • 🛠 Онлайн-сжатие CSS

• Объединение: CSS-файлы объединены в один файл (Не всегда действительно для HTTP/2).

  <!-- Не рекомендуется -->
  <link rel="stylesheet" href="foo.css"/>
  <link rel="stylesheet" href="bar.css"/>
  
  <!-- Рекомендуется -->
  <link rel="stylesheet" href="foobar.css"/>
  

  Почему:

  Если вы все ещё используете HTTP/1, вам по-прежнему нужно объединять ваши файлы, это меньше относится, если ваш сервер использует HTTP/2 (должны быть сделаны тесты).

  Как:

  ⁃ Используйте онлайн-инструмент или любой другой плагин до или во время вашей сборки или деплоя для объединения файлов. ⁃ Разумеется, убедитесь, что объединение не нарушило работы вашего проекта.

  • 📖 HTTP: оптимизация доставки приложений - Высокопроизводительная браузерная сеть (O'Reilly)
  • 📖 Передовые практики производительности в эру HTTP/2

• Нет блокировки: CSS-файлы следует быть неблокируемыми для предотвращения работы с DOM до полной загрузки.

  <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="global.min.css"></noscript>
  

  Почему:

  CSS-файлы могут блокировать загрузку страницы и задерживать отрисовку вашей страницы. Использование preload может на самом деле загружать файлы CSS до того, как браузер начнёт показывать содержимое страницы.

  Как:

  ⁃ Вам нужно добавить атрибут rel со значением preload и атрибут as="style" в элемент <link>.

  • 🛠 loadCSS by filament group
  • 📖 Пример использования preload в CSS, используя loadCSS
  • 📖 Предварительная загрузка содержимого с помощью rel="preload"
  • 📖 Предварительная загрузка: что в этом хорошего? — Smashing Magazine

• Длина CSS-классов: Длина ваших классов может иметь (небольшое) воздействие на ваши HTML- и CSS-файлы (в конечном счёте).

  Почему:

  Даже влияние производительности может быть спорным, принятие решения о стратегии именования, используемой в вашем проекте может оказать существенное влияние на удобство сопровождение ваших таблиц стилей. Если вы используете BEM, в некоторых случаях вы можете получить классы с большим количеством символов, чем это необходимо. Всегда важно мудро выбирать ваши имена и пространства имён.

  Как:

  Установка ограничения в плане количества символов может быть интересно для некоторых людей, но добиться разделения сайта на компоненты может помочь уменьшить количество классов (и определений) и длину ваших классов.

  • 🛠 Сравнение производительности: длинные и короткие классы · jsPerf

• Неиспользуемый CSS: Удалить неиспользуемые CSS-селекторы.

  Почему:

  Удаление неиспользуемых CSS-селекторов может уменьшить размер ваших файлов, а затем ускорить загрузку ваших ресурсов.

  Как:

  ⚠️ Всегда проверяйте, не содержит ли код CSS-фреймворка, который вы хотите использовать, ещё не включённый код сброса/нормализации стилей. Иногда вам может понадобиться не все, что находится внутри файла стилей для сброса/нормализации.

  • 🛠 UnCSS - Онлайн удаление неиспользуемого кода
  • 🛠 PurifyCSS
  • 🛠 PurgeCSS
  • 🛠 Chrome DevTools Coverage

• Критичный CSS: Критичный CSS (or "above the fold") собирает весь CSS-код, используемый для отрисовки видимой части страницы. Он встраивается перед подключением вашего основного CSS и между <style></style> в одну строку (минифицирован, если это возможно).

  Почему:

  Встраивание критического CSS помогает ускорить отрисовку веб-страниц, уменьшая количество запросов на сервер.

  Как:

  Сгенерировать критический CSS с помощью онлайн-инструментов или используя такой плагин, который разработал Эдди Османи (Addy Osmani).

  • 📖 Понимание критического CSS
  • 🛠 Инструмент для генерации критического CSS от Эдди Османи на GitHub.
  • 📖 Встраивание критического CSS для лучшей веб-производительности | Go Make Things
  • 🛠 Генератор критического CSS по URL-адресу :: SiteLocity
  • 📖 Уменьшение размера содержимого в верхней части страницы

• Встраиваемый или встроенный CSS: Избегайте использования встраиваемого или встроенного CSS внутри вашего <body> (Недействительно для HTTP/2)

  Почему:

  Одна из первых причин — это просто хорошая практика отделять содержимое от дизайна. Это также способствует более удобному коду и поддерживает доступность вашего сайта. Что касается производительности — это уменьшает размер файлов ваших HTML-страниц и время загрузки.

  Как:

  Всегда используйте внешние таблицы стилей или встраивайте CSS в ваш <head> (и следуйте другим правилам производительности CSS)

  • 📖 Соблюдение передовых практик CSS: избегайте встроенных стилей CSS

• Анализ сложности таблиц стилей: Анализ таблиц стилей может помочь вам указать на проблемы, избыточный код и дублирования CSS-селекторов.

  Почему:

  Иногда у вас может быть избыточный код или ошибки проверки в вашем CSS, анализ CSS-файлов и устранение этих трудностей может помочь вам ускорить CSS-файлы (потому что ваш браузер будет загружать их быстрее)

  Как:

  Ваш CSS должен быть организован, использование препроцессора CSS может помочь в этом. Некоторые онлайн-инструменты, перечисленные ниже, также помогут вам проанализировать и исправить ваш код.

  • 🛠 TestMyCSS | Оптимизация и проверка производительности CSS
  • 📖 Статистика CSS
  • 🛠 macbre/analyze-css: Анализатор сложности CSS-селекторов и производительности

⬆ вернуться в начало

Шрифты

• 📖 Книга от издательства «A Book Apart» — «Руководство по веб-шрифтам»

• Форматы шрифтов: Вы используете формат WOFF2 в своём веб-проекте или приложении.

  Почему:

  Согласно Google, формат сжатия веб-шрифта WFF 2.0 обеспечивает в среднем прирост на 30% по сравнению с WOFF 1.0. Поэтому лучше использовать WOFF 2.0, а WOFF 1.0 в качестве фолбэка и TTF.

  Как:

  Проверьте перед покупкой нового шрифта, что он доступен в формате WOFF2. Если вы используете бесплатный шрифт, вы всегда можете использовать Font Squirrel для создания всех необходимых вам форматов шрифтов.

  • 📖 WOFF 2.0 – Узнайте больше о новом поколении веб-шрифтов и сконвертируйте TTF в WOFF2
  • 🛠 Font Squirrel - Создайте собственный набор шрифтов с помощью @font-face
  • 🛠 IcoMoon App - Генерация иконочного шрифта в формате SVG, PDF & PNG
  • 📖 Использование @font-face | CSS-Tricks
  • 📖 Can I use... WOFF2

• Используйте preconnect для быстрой загрузки ваших шрифтов:

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  

  Зачем:

  Когда вы пришли на сайт, ваше устройство должно узнать, где находится ваш сайт, и с каким сервером ему нужно подключиться. Ваш браузер должен связаться с DNS-сервером и дождаться завершения проверки перед получением ресурса (шрифты, файлы CSS...).

  Почему:

  ⁃ Перед использованием предварительной загрузки (prefetch) ваших веб-шрифтов, воспользуйтесь webpagetest для оценки вашего веб-сайта. <br> ⁃ Ищите DNS-запросы с сине-зелёным цветом и обратите внимание на запрашиваемый хост. <br> ⁃ Предварительно загружаемые шрифты поместите в <head>.

  • 📖 Быстрые Google-шрифты с помощью Preconnect - CDN Planet
  • 📖 Сделайте ваш сайт быстрее с помощью подсказок Preconnect | Viget
  • 📖 Окончательное руководство по подсказкам браузера: Preload, Prefetch и Preconnect - MachMetrics Speed Blog (🇷🇺 перевод)
  • 📖 Всеобъемлющее руководство по стратегиям загрузки шрифтов — zachleat.com

• Размер веб-шрифта: Размеры веб-шрифта не должны превышать 300 Кб (со всеми вариантами)

• 📖 Байты шрифтов - Размер страницы

• Предотвратите использование Flash или невидимого текста: Избегайте использования прозрачного текста до загрузки веб-шрифта

• 📖 font-display для широких масс
• 📖 CSS font-display: Будущее отрисовки шрифтов в вебе

⬆ вернуться в начало

Изображения

• 📖 Байты изображений в 2018

• Оптимизация изображений: Ваши изображения оптимизированы, сжаты без прямого воздействия на конечного пользователя.

  Зачем:

  Оптимизированные изображения загружаются быстрее в вашем браузере и потребляют меньше данных.

  Как:

  ⁃ Попробуйте использовать эффекты CSS3, когда это возможно (вместо небольшого изображения) <br> ⁃ Когда это возможно, используйте шрифты вместо текста, закодированного в ваших изображениях <br> ⁃ Используйте SVG <br> ⁃ Используйте инструмент и укажите уровень сжатия ниже 85.

  • 📖 Оптимизация изображений | Web Fundamentals | Google Developers
  • 🛠 TinyJPG – Сжатие JPEG-изображений разумно
  • 🛠 Kraken.io - Онлайн-оптимизирование изображений
  • 🛠 Compressor.io - Оптимизация и сжатие JPEG-фотографий и PNG-изображений
  • 🛠 Cloudinary - Инструмент анализа изображений
  • 🛠 SVGOMG - Оптимизация векторных графических файлов SVG

• Формат изображений: Выберите формат изображения должным образом.

  Зачем:

  Чтобы гарантировать, что ваши изображения не замедлят ваш сайт, выберите нужный формат

  Почему:

  ⁃ Используйте Lighthouse для определения того, какие изображения в конечном счёте могут использовать форматы нового поколения (такие как JPEG 2000m JPEG XR или WebP) <br> ⁃ Сравните различные форматы, иногда использование PNG8 лучше, чем PNG16, иногда это не так.

  • 📖 Обслуживание изображений в форматах нового поколения | Tools for Web Developers | Google Developers
  • 📖 Какой правильный формат изображения для сайта? — SitePoint
  • 📖 PNG8 - Явный победитель — SitePoint
  • 📖 8-бит против 16-бит - Какую цветную глубину вы должны использовать и почему это имеет значение - DIY Photography

• Используйте векторное изображение против растровых: Prefer using vector image rather than bitmap images (when possible).

  Зачем:

  Векторные изображения (SVG), как правило, являются меньше, чем изображения, и SVG адаптивные и масштабируются. Эти изображения могут быть анимированы и изменены через CSS.

• Размеры изображений: Установите атрибуты width и height на элемент <img>, если окончательное отрисованное изображение известно.

  Зачем:

  Если заданы высота и ширина, пространство, необходимое для изображения, сохраняется при загрузке страницы. Однако без этих атрибутов браузер не знает размер изображения и не может зарезервировать для него подходящее пространство. Эффект будет заключаться в том, что раскладка страницы изменится во время загрузки (при загрузке изображений).

• Избегайте использование изображений в формате Base64: Иногда вы можете преобразовать крошечные изображения в base64, но на самом деле это не лучшая практика.

  • 📖 Кодирование и производительность Base64, первая и вторая часть от Гарри Робертс (Harry Roberts)
  • 📖 Более пристальный взгляд на производительность изображения Base64 – The Page Not Found Blog
  • 📖 Когда base64 кодирует изображения (а когда их нет) | David Calhoun
  • 📖 Base64 кодирует изображения для более быстрых страниц | Performance and seo factors

• Ленивая загрузка: Изображения вне текущей области страницы загружены лениво (Фолбэк с noscript всегда предоставлен).

  Зачем:

  Это улучшит время ответа текущей страницы, а затем предотвратит загрузку ненужных изображений, которые пользователю могут не понадобиться.

  Как:

  ⁃ Используйте Lighthouse для определения сколько изображений находятся вне экрана. <br> ⁃ Используйте плагин JavaScript из списка ниже для ленивой загрузки ваших изображений. Убедитесь, что вы настроили ленивую загрузку только изображений, находящихся вне экрана <br> ⁃ Также убедитесь, что лениво загружаемые изображения отображаются при наведении курсора или при других пользовательских действиях.

  • 🛠 verlok/lazyload: GitHub
  • 🛠 aFarkas/lazysizes: GitHub
  • 📖 Ленивая загрузка изображений и видео | Основы Web | Google Developers
  • 📖 5 блестящих способов ленивой загрузки изображений для быстрой загрузки страницы - Dynamic Drive Blog

• Адаптивные изображения: Обеспечьте отображение изображений, близких к размеру вашего дисплея.

  Зачем:

  Маленьким устройствам не нужны изображения больше, чем их вьюпорт. Рекомендуется иметь несколько версий одного изображения разных размеров.

  Как:

  ⁃ Создавайте разные размеры изображений для целевых устройств <br> ⁃ Используйте srcset и picture для доставки нескольких вариантов каждого изображения.

  • 📖 Адаптивные изображения - Изучение веб-разработки | MDN

⬆ вернуться в начало

JavaScript

• Минифицикация JS: Все файлы JavaScript минифицированы, комментарии, пробелы и новые строки удалены из производственных файлов (все ещё действительно при использовании HTTP/2).

  Зачем:

  Удаление всех ненужных пробелов, комментариев и переводов строк уменьшит размер ваших файлов JavaScript и ускорит загрузку страниц вашего сайта и, очевидно, облегчит загрузку для вашего пользователя.

  Как:

  ⁃ Используйте инструменты, перечисленные ниже, чтобы автоматически минифицировать ваши файлы до или во время сборки или деплоя.

  • 🛠 uglify-js - npm
  • 🛠 Онлайн-сжатие JavaScript
  • 📖 Короткое чтение: Чем отличается HTTP/2? Должны ли мы все ещё минифицировать и объединять?

• Нет JavaScript внутри: (Только для сайта) Избегайте наличия нескольких блоков кода с JavaScript, встроенных в середину страницы. Перегруппируйте свой JavaScript-код внутри внешних файлов или в конечном итоге в <head> или в конце вашей страницы (до </body>).

  Зачем:

  Размещение встраиваемого кода JavaScript непосредственно в ваш <body> может замедлить вашу страницу, потому что он загружается, когда DOM строится. Лучший вариант — использовать внешние файлы с async или defer, чтобы избежать блокировки DOM. Другой вариант — разместить некоторые скрипты внутри <head>. В большинстве случаев это код аналитики или небольшой скрипт, который необходимо загрузить до того, как DOM начнёт обрабатываться.

  Как:

  Убедитесь, что все ваши файлы загружены с помощью async или defer и разумно определяют код, который вам нужно загрузить в <head>.

  • 📖 11 советов по оптимизации JavaScript и повышению скорости загрузки сайта

• Неблокирующий JavaScript: Файлы JavaScript загружаются асинхронно, используя async или отложено с использованием атрибута defer.

  <!-- Атрибут defer  -->
  <script defer src="foo.js"></script>
  
  <!-- Атрибут async -->
  <script async src="foo.js"></script>
  

  Зачем:

  JavaScript блокирует нормальный синтаксический анализ HTML-документа, поэтому, когда парсер доходит до тега <script> (особенно внутри <head>), он перестаёт извлекать и запускать его. Добавление async или defer настоятельно рекомендуется, если ваши скрипты размещены в верхней части страницы, менее полезно, если находятся перед тегом </ body>. Но хорошая практика всегда использовать эти атрибуты, чтобы избежать каких-либо проблем с производительностью.

  Как:

  ⁃ Добавьте async (если скрипт не полагается на другие скрипты) или defer (если скрипт опирается на асинхронный скрипт или полагается на него) в качестве атрибута вашего тега скрипта. <br>     ⁃ Если у вас небольшие скрипты, возможно, используйте встроенное подключение скрипта выше подключения асинхронных скриптов.

  • 📖 Удалить блокирующий отрисовку JavaScript
  • 📖 Отложить загрузку JavaScript

• JS-библиотеки оптимизированы и обновлены: Все библиотеки JavaScript, используемые в вашем проекте, необходимы (желательно использовать обычный JavaScript для простого функционала), обновлены до последней версии и не перегружают ваш JavaScript ненужными методами.

  Зачем:

  В большинстве случаев новые версии поставляются с исправлением оптимизации и безопасности. Вам следует использовать наиболее оптимизированный код для ускорения проекта и обеспечить, чтобы вы не замедляли ваш сайт или приложение без использования устаревшего плагина.

  Как:

  Если ваш пакет использует NPM-пакеты, npm-check — довольно интересная утилита для обновления ваших библиотек.

  • 📖 Вам может не понадобиться jQuery
  • 📖 Обычный JavaScript для разработки мощных веб-приложений

• Проверьте ограничение размера зависимостей: Обеспечьте использование разумных внешних библиотек, большую часть времени вы можете использовать более лёгкую библиотеку для одной и той же функциональности.

  Зачем:

  У вас может возникнуть соблазн использовать один из 745 000 пакетов, которые вы можете найти на npm, но вам нужно выбрать лучший пакет для ваших нужд. Например, MomentJS - это потрясающая библиотека, но с множеством методов, которые вы никогда, возможно, не будете использовать, поэтому был создан Day.js. Почувствуйте разницу: 2 Кб против 16,4 Кб для Moment.

  Как:

  Всегда сравнивайте и выбирайте лучшую и более лёгкую библиотеку для своих нужд. Вы также можете использовать такие инструменты, как npm trend, чтобы сравнить количество загрузок пакетов NPM или Bundlephobia, чтобы узнать размер ваших зависимостей.

  • 🛠 ai/size-limit: Предотвращение раздувание JS-библиотек. Если вы случайно добавляете большую зависимость, Size Limit выдаст ошибку.
  • 🛠 webpack-bundle-analyzer - npm
  • 📖 Ограничение размера: Сделайте веб легче — Martian Chronicles, Evil Martians’ team blog

• Профилирование JavaScript: Проверьте проблемы с производительностью в ваших JavaScript-файлах (и CSS тоже).

  Зачем:

  Сложность JavaScript может замедлить производительность во время выполнения. Идентификация этих возможных проблем имеет важное значение для обеспечения максимально плавного пользователем вашего проекта.

  Как:

  Используйте инструмент «Временная шкала» в инструменте разработчика Chrome для оценки событий сценариев и найдите тот, который может занять слишком много времени.

  • 📖 Ускорить выполнение JavaScript | Tools for Web Developers | Google Developers
  • 📖 Профилирование JavaScript с помощью инструментов разработчика Chrome — Smashing Magazine
  • 📖 Как записывать снимки кучи | Tools for Web Developers | Google Developers
  • 📖 Глава 22 - Профилирование фронтенда - Blackfire

⬆ вернуться в начало

Сервер

• Размер страницы < 1500 Кб (в идеале < 500 Кб): Уменьшите размер страницы, а также ресурсов на столько, сколько сможете.

  Почему:

  В идеале вы должны пытаться ориентироваться к < 500 Кб, но состояние веба показывает, что медиана килобайтов составляет около 1500 Кб (даже на мобильных устройствах). В зависимости от ваших целевых пользователей, подключений, устройств важно уменьшить максимально возможное количество окончательных килобайтов, чтобы иметь лучшее пользовательское взаимодействие, насколько это возможно.

  Как:

  Все правила внутри чек-листа производительности фронтенда помогут вам максимально сократить размер ресурсов и кода.

  • 📖 Размер страницы
  • 🛠 Сколько стоит посещение моего сайта?
  • 🛠 Измерить полный размер страницы в инструментах разработчика Chrome - Stack Overflow

• Время загрузки страницы < 3 секунд: Сократите максимально возможное время загрузки страницы для того, чтобы быстро доставить контент своим пользователям.

  Почему:

  Чем быстрее сайт или приложение, тем меньше вероятность увеличения отказов, другими словами у вас меньше шансов потерять вашего пользователя или будущего клиента. Достаточно исследований по этому вопросу доказывают это.

  Как:

  Использовать онлайн-инструмент, такой как Page Speed Insight или WebPageTest для анализа что может замедлить работу и использовать чек-лист производительности фронтенда, чтобы улучшить время загрузки.

  • 🛠 Сравните скорость вашего мобильного сайта
  • 🛠 Проверьте скорость и производительность вашего мобильного сайта - Think With Google
  • 📖 Среднее время загрузки для 2018 - Как вы сравниваете? - MachMetrics Speed Blog

• Время загрузки первого байта < 1.3 секунды: Сократите на столько, сколько сможете время, когда ваш браузер ожидает, прежде чем получать данные.

  • 📖 Что такое TTFB в инструментах разработчика и что с этим делать?
  • 📖 Мониторинг ваших серверов с бесплатным инструментами — это легко
  • 📖 Время загрузки первого байта (TTFB)
  • 🛠 Инструмент тестирования глобальной латентности

• Размер кук: Если вы используете куки, то проверьте, что каждый файл кук не превышает 4096 байт, а ваше доменное имя содержит не более 20 файлов кук.

  Почему:

  Куки передаются в HTTP-заголовках между серверами и браузерами. Важно максимально уменьшить размер файлов кук, чтобы минимизировать воздействие на время ответа пользователя.

  Как:

  Исключить ненужные куки

  • 📖 Спецификация Cookie: RFC 6265
  • 📖 Куки HTTP
  • 🛠 Ограничения кук в браузере
  • 📖 Производительность сайта: Куки не такие замечательные на вкус - Monitis Blog
  • 📖 Передовые практики по веб-производительности от Google #3: Минимизировать накладные расходы запроса - GlobalDots Blog

• Минимизация HTTP-запросов: Обязательно убедитесь, что каждый запрошенный файл имеет важное значение для вашего веб-сайта или приложения.

• 📖 Объединить внешние CSS
• 📖 Объединить внешний JavaScript

• Используйте CDN для доставки ваших ресурсов: Используйте CDN для быстрой доставки вашего содержимого по всему миру.

• 📖 10 советов по оптимизации производительности CDN - CDN Planet
• 📖 Кеширование HTTP | Web Fundamentals | Google Developers

• Обслуживайте файлы из одинакового протокола: Избегайте использования вашего сайта с помощью HTTPS и отдачи входящих файлов по протоколу HTTP.

• Обрабатывать доступные файлы: Избегайте запросов с недоступными файлами (404).

  • 📖 Как избежать плохих запросов

• HTTP-заголовки кеширования установлены корректно: Установите HTTP-заголовки, чтобы избежать дорогостоящего числа круговых задержек (roundtrips) между браузером и сервером.

• 📖 Использование cache-control для кеширования в браузере

• Сжатие GZIP / Brotli включено:

• 🛠 Проверьте работу сжатия GZIP
• 🛠 Проверьте работы сжатия Brotli
• 📖 Can I use... Brotli

⬆ вернуться в начало

Производительность JS-фреймворков

Angular

• 📖 Чек-лист производительности Angular

React

• 📖 Оптимизация производительности - React
• 📖 Манипуляция изображениями React | Cloudinary
• 📖 Отладка производительности React с версии 16 и инструментов разработчика Chrome

Vue

Производительность и CMS

WordPress

Статьи

• 📖 19 советов по ускорению производительности WordPress (обновлено)
• 📖 Ускорьте свой WordPress - как сохранять изображения, оптимизированные для интернета

Рекомендуемые плагины

Переводы

Чек-лист производительности фронтенда хочет быть доступным и на других языках! Не стесняйтесь принять участие в переводе!

• 🇵🇹 Португальский: fernandofawkes/Front-End-Performance-Checklist
• 🇨🇳 Китайский: JohnsenZhou/Front-End-Performance-Checklist
• 🇫🇷 Французский: WilliamDASILVA/Front-End-Performance-Checklist
• 🇰🇷 Корейский: ParkSB/Front-End-Performance-Checklist

Участие в проекте

Откройте ишью или пулреквест для предлложения изменений или добавлений.

Поддержка

Если у вас есть какие-либо вопросы или предложения, не стесняйтесь использовать Gitter или Twitter:

• Чат на Gitter
• Facebook
• Twitter

Автор

Сделано с ❤️ Дэвидом Диазом (David Dias) в @influitive 🇨🇦

Контрибьюторы

Этот проект существует благодаря тем людям, которые вносят свой вклад. [Принять участие].

License

MIT

Все иконки предоставлены Icons8

⬆ вернуться в начало