GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → lex111 → Front-End-Performance-Checklist

lex111 / Front-End-Performance-Checklist

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

Labels

translationrussian

Projects that are alternatives of or similar to Front-End-Performance-Checklist

Ru.reactjs.org
React documentation website in Russian / Официальная русская версия сайта React
Stars: ✭ 444 (+172.39%)
Mutual labels:  translation, russian
Dictionary
Словари по фронтенду
Stars: ✭ 1,682 (+931.9%)
Mutual labels:  translation, russian
Qa bible
Библия QA это почти 300 страниц обновляемой смеси ответов на вопросы с реальных собеседований на QA, полезных ресурсов и статей, перевода интересного контента с зарубежных ресурсов и агрегации материала с отечественных.
Stars: ✭ 657 (+303.07%)
Mutual labels:  translation, russian
The Road To Learn React Russian
The Road to Learn React - Русский перевод
Stars: ✭ 128 (-21.47%)
Mutual labels:  translation, russian
laravel-docs-ru
Актуализированная редакция документации Laravel версий 8.x и 9.x на русском языке.
Stars: ✭ 19 (-88.34%)
Mutual labels:  translation, russian
bem-flashcards
Simple single-page flashcards application based on the bem-core/bem-history and BEM methodology
Stars: ✭ 19 (-88.34%)
Mutual labels:  translation, russian
SI
SIGame и продукты, с ней связанные
Stars: ✭ 89 (-45.4%)
Mutual labels:  russian
Arisu
☔ Translation made with simplicity, yet robust. Made with ❤️ in TypeScript.
Stars: ✭ 15 (-90.8%)
Mutual labels:  translation
udar
UDAR Does Accented Russian: A finite-state morphological analyzer of Russian that handles stressed wordforms.
Stars: ✭ 15 (-90.8%)
Mutual labels:  russian
fanyi-bot
🤖 Telegram 上的谷歌翻译机器人，为全世界语言提供中文翻译。
Stars: ✭ 100 (-38.65%)
Mutual labels:  translation
elasticsearch-keyboard-layout
Elasticsearch plugin for keyboard layout suggestions
Stars: ✭ 21 (-87.12%)
Mutual labels:  russian
Learn-to-program-with-C AR
ترجمة لدرس تعلّم البرمجة بلغة السي الخاص بموقع OpenClassrooms
Stars: ✭ 51 (-68.71%)
Mutual labels:  translation
caighdean
Inneall aistriúcháin atá taobh thiar de Chaighdeánaitheoir na Gaeilge, agus aistritheoirí Gàidhlig/Gaelg→Gaeilge
Stars: ✭ 15 (-90.8%)
Mutual labels:  translation
i18n
Minimalist gettext style i18n for JavaScript
Stars: ✭ 14 (-91.41%)
Mutual labels:  translation
flutter-internationalization
Flutter Internationalization by Using JSON Files
Stars: ✭ 18 (-88.96%)
Mutual labels:  translation
datalang
Package to translate R data sets
Stars: ✭ 12 (-92.64%)
Mutual labels:  translation
potools
Tools for working with translations in R
Stars: ✭ 42 (-74.23%)
Mutual labels:  translation
rosetta
A blazing fast internationalization (i18n) library for Crystal with compile-time key lookup.
Stars: ✭ 23 (-85.89%)
Mutual labels:  translation
number-to-words
convert number into words (english, french, italian, roman, spanish, portuguese, belgium, dutch, swedish, polish, russian, iranian, roman, aegean)
Stars: ✭ 53 (-67.48%)
Mutual labels:  russian
i18n-tag-schema
Generates a json schema for all i18n tagged template literals in your project
Stars: ✭ 15 (-90.8%)
Mutual labels:  translation
View All Similar Projects ➔


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

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].