От автора: в один прекрасный день нашей команде была поставлена очень важная задача, которая являла собой ни что иное, как УЛУЧШЕНИЕ ПРОИЗВОДИТЕЛЬНОСТИ!!!
Для конечного пользователя, который использует конкретное программное обеспечение или приложение, не имеет никакого значения, как оно проектируется или архивируется, или какие шаблоны проектирования были задействованы.
Все, что для них важно, это то, как быстро они могут выполнить свое первое взаимодействие с частью программного обеспечения / приложения, прежде чем потеряют терпение.
Таким образом, вызов, который мы приняли, заключался в следующем. Все наши инструменты, ориентированные на пользователей, должны загружаться в течение секунды при подключении к Интернету со скоростью1MBS.
Каждый в команде смотрел на других с одинаковым вопросом на лице: «Чувак, этого действительно можно достичь?» Почему бы и нет..? Как вы думаете, на какие основные факторы мы должны обратить внимание, а народ? Не уверены? Давайте разберемся !!!
Почему мой сайт / приложение слишком медленное?????
Это важный шаг, прежде чем вы начнете. Обратите внимание на все причины, из-за которых ваш сайт замедляется. Я рассмотрю основные причины, из-за которых, как мы решили, наш сайт становится медленным, и которые нам нужно решить.
Сокращение количества вызовов сетевых запросов
Одним из важных факторов повышения производительности является уменьшение количества сетевых вызовов, которыми могут быть скрипты, css, изображениями, API и т. д. Не выполняйте ненужные вызовы API во время загрузки.
Кэширование
Как работает кэш (Cache busting)
Для чего??? Cache busting является основным ключевым моментом, который мы должны рассмотреть. Это улучшит производительность загрузки. Посмотрим, как мы можем достичь этого!
Как работает кэш (Cache busting)
1. Загружаем файлы из сетевого кэша браузера.
2. Устанавливаем максимальный срок истечения в заголовке запроса.
Cache-Control: max-age=900, public
3. Извлекаем статическое содержимое из кэш-памяти (Redis).
4. Добавляем BUILD_NUMBER в качестве параметра для вызова запроса сети.
Пример:
<script src="js/script.min.js?BUILD_NUMBER=12034"></script>
5. Поддерживаем версии в файлах скриптов и css.
Пример:
<script src="js/script.min.1.3.5.js"></script> <link rel="stylesheet" href="css/styles.min.1.3.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.
Вот, к примеру…!
Actual script size = 5MB Minified script size = 3MB gzip/brotli script size = 1MB // Это то, что вы получите, используете сжатие gzip/brotli.
Избегайте поиска в 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.
