Giters

lex111 / Front-End-Performance-Checklist

🎮 Единственный чек-лист производительности фронтенда, который справляется лучше других

Home Page:https://frontendchecklist.io (скоро)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

translationrussian


Front-End Performance Checklist

  Чек-лист производительности фронтенда  

🎮 Единственный чек-лист производительности фронтенда, который справляется лучше других.

Одно простое правило: "Учитывайте производительность при дизайне и написании кода"

      PRs Welcome         Gitter           Licence MIT  

  Как использовать • Участие в проекте • Product Hunt

🇨🇳 🇫🇷 🇵🇹 🇷🇺

Другие чек-листы:
🗂 Чек-лист фронтенда • 💎 Чек-лист дизайна фронтенда

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

Содержание

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

Введение

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

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

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

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

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

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

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

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

HTML

html

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

    Почему:

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

    Как:

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

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

    Почему:

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

    Как:

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

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

    <!-- До HTML5 -->
<script type="text/javascript">
    // JavaScript-код
</script>

<!-- В настоящее время -->
<script>
    // JavaScript-код
</script>

    Почему:

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

    Как:

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

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

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

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

CSS

css

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

    Почему:

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

    Как:

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

  • Объединение: medium 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 (должны быть сделаны тесты).

    Как:

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

  • Нет блокировки: high 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>.

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

    Почему:

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

    Как:

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

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

    Почему:

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

    Как:

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

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

    Почему:

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

    Как:

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

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

    Почему:

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

    Как:

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

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

Шрифты

fonts

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

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

Изображения

images

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

    Зачем:

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

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

JavaScript

javascript

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

    Зачем:

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

    Как:

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

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

    Зачем:

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

    Как:

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

  • Неблокирующий JavaScript: high Файлы 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 (если скрипт опирается на асинхронный скрипт или полагается на него) в качестве атрибута вашего тега скрипта.
        ⁃ Если у вас небольшие скрипты, возможно, используйте встроенное подключение скрипта выше подключения асинхронных скриптов.

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

    Зачем:

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

    Как:

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

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

Сервер

server-side

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

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

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

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

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

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

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

Angular

React

Vue

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

WordPress

Статьи

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

Переводы

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

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

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

Поддержка

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

Автор

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

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

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

License

MIT

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

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

About

🎮 Единственный чек-лист производительности фронтенда, который справляется лучше других

https://frontendchecklist.io (скоро)

translationrussian

License:MIT License