Skip to content
/ Front-End-Performance-Checklist Public
forked from thedaviddias/Front-End-Performance-Checklist

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

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

License

MIT license
187 stars 1.2k forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

lex111/Front-End-Performance-Checklist

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
.github
.github
 
 
images
images
 
 
.gitignore
.gitignore
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation


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 (скоро)

Topics

translation russian

Resources

Readme

License

MIT license

Code of conduct

Code of conduct
Activity

Stars

187 stars

Watchers

19 watching

Forks

27 forks
Report repository

Releases

No releases published

Packages

No packages published