Лучшие способы улучшения производительности front-end

Лучшие способы улучшения производительности front-end

От автора: в один прекрасный день нашей команде была поставлена очень важная задача, которая являла собой ни что иное, как УЛУЧШЕНИЕ ПРОИЗВОДИТЕЛЬНОСТИ!!!

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

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

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

Каждый в команде смотрел на других с одинаковым вопросом на лице: «Чувак, этого действительно можно достичь?» Почему бы и нет..? Как вы думаете, на какие основные факторы мы должны обратить внимание, а народ? Не уверены? Давайте разберемся !!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Почему мой сайт / приложение слишком медленное?????

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

Сокращение количества вызовов сетевых запросов

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

Кэширование

Как работает кэш (Cache busting)

Для чего??? Cache busting является основным ключевым моментом, который мы должны рассмотреть. Это улучшит производительность загрузки. Посмотрим, как мы можем достичь этого!

Как работает кэш (Cache busting)

1. Загружаем файлы из сетевого кэша браузера.

2. Устанавливаем максимальный срок истечения в заголовке запроса.

3. Извлекаем статическое содержимое из кэш-памяти (Redis).

4. Добавляем BUILD_NUMBER в качестве параметра для вызова запроса сети.

Пример:

5. Поддерживаем версии в файлах скриптов и css.

Пример:

6. Если вы используете Angular1,7+, и если вы загружаете несколько шаблонов Angular1, используйте кэш шаблонов Angular1, чтобы повысить производительность загрузки.

Используйте файлы шрифтов WOFF (Web Open Font Format) / WOFF2

Шрифты WOFF поддерживаются этими версиями браузеров

Для чего??? Файлы формата WOFF / WOFF2 меньше по размеру по сравнению с другими типами формата шрифта. WOFF имеет встроенное сжатие. Убедитесь, что ваш компрессор WOFF использует оптимальные параметры сжатия.

WOFF2 использует пользовательские алгоритмы предварительной обработки и сжатия для доставки на 30% уменьшенных по сравнению с другими форматами файлов.

Итак, какой из них вы должны использовать? Согласно caniuse, 93% браузеров поддерживают формат WOFF, а 80,91% поддерживают WOFF2. Только IE8 и старые браузеры для Android не поддерживают его. Поэтому лучшей рекомендацией было бы предоставить WOFF и WOFF2 (использовать дополнительное сжатие) для всех современных браузеров, а для остальных вернуться к безопасному веб-шрифту, например Arial, о котором мы расскажем ниже.

Использование CDN

Как работает CDN

Для чего??? CDN улучшает опыт пользователя с точки зрения скорости. Важное значение имеет обеспечение согласованного опыта для всех ваших пользователей.

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

Использование спрайтов изображений

СТОП!! Загрузка нескольких изображений ….

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Спрайт изображения (группа из нескольких изображений)

Для чего??? Предположим, вы используете 50 изображений, загрузка каждого изображения занимает 1 сек, тогда общее время составляет 50 * 1 сек = 50 сек. Старик!!! Пользователь должен подождать 50 секунд? Следовательно, создайте спрайт изображения и укажите координаты этих изображений в html.

Отложенный рендеринг изображений

Если вы не хотите применять подход спрайтов изображений, то есть другой путь — «отложенный рендеринг» изображений.

Отложенный рендеринг изображений

Для чего??? Не заставляйте пользователя ждать, пока все ваши ресурсы не будут отображены. Используйте отложенный рендеринг ресурсов. Даже Medium использует отложенный рендеринг ресурсов, что вы, возможно, уже заметили.

Минимизация скриптов и css

Не загружайте файлы скриптов / css без указания параметров.

Минимизация кода

Для чего??? Если у пользователя низкая пропускная способность для интернет-трафика, более крупные файлы скриптов / css будут грузиться огромное количество времени. Поэтому максимально сократите файлы скриптов / css.

Используйте любые инструменты построения: webpack / gulp / grunt, чтобы минимизировать файлы. В данный момент трендовым инструментом является webpack.

Использование сжатия gzip / brotli

Поддерживающие браузеры

Для чего??? Настройте ресурсы для загрузки в формате gzip / brotli, а не в обычном режим. Это уменьшит их размер почти на 50%. gzip: этот HTTP-заголовок эффективно поддерживается всеми браузерами (с IE6 +, Firefox 2+, Chrome 1+ и т. д.). Согласно исследованиям, проведенным CertSimple:

Сжатые с помощью Brotli пакеты Javascript на 14% меньше, чем пакеты Javascript, сжатые с помощью Gzip.

HTML-файлы, сжатые с помощью Brotli, на 21 процент меньше, чем их эквиваленты в Gzip.

Файлы CSS, сжатые с помощью Brotli, на 17 процентов меньше, чем сжатые через Gzip.

Вот, к примеру…!

Избегайте поиска в DNS

Лучшие провайдеры DNS (источник — Google)

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

ПРЕКРАТИТЕ!!!! писать встроенный CSS

Инструмент: https://rawgit.com/webbhuset/test-elm-performance/master/index.html

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

Это уменьшает размер кода и создает меньше дубликатов. При настройке стилей лучше всего использовать только одну внешнюю таблицу стилей CSS, поскольку дополнительные таблицы стилей увеличивают количество HTTP-запросов.

В заключение!!!!!! Как проверить производительность моего веб-сайта?

Вы хотите проверить производительность на низкой / высокой скорости интернета? Используйте LightHouse: https://developers.google.com/web/tools/lighthouse/

ИЛИ

Используйте инструмент тестирования производительности инструментов для разработчиков Crome.

Инструмент тестирования производительности инструментов для разработчиков Crome

Автор: Manjunath Davanam

Источник: https://medium.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Станьте современным верстальщиком с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree