10 важных этапов оптимизации производительности

10 важных этапов оптимизации производительности

От автора: поскольку сеть продолжает развиваться, производительность начинает становиться все более и более важной. Контент-ориентированные веб-приложения, такие как Facebook или Instagram, имеют дело с мегабайтами данных. Они обеспечивают богатый пользовательский опыт, который требует применения сложных скриптов в фоновом режиме — все это за счет производительности.

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

Почему производительность имеет значение

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

Другая причина — улучшение конверсии. Исследования кейсов, представленные на Web Fundamentals, показывают, что производительность может оказать серьезное положительное влияние: «Pinterest увеличил трафик из поисковых систем и количество регистраций на 15%, когда они сократили предполагаемое время ожидания на 40%».

Но это также может иметь некоторые серьезные негативные последствия: «BBC обнаружили, что они теряют дополнительные 10% пользователей за каждую дополнительную секунду, которую загружает их сайт».

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

Как следует измерять производительность

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

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

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

Имея это в виду, давайте рассмотрим список. Все начинается на сервере. Мы можем внести огромные улучшения, прежде чем даже получим наши ресурсы.

Оптимизация на стороне сервера

1. Настройте сжатия

Если вы еще этого не сделали, включите сжатие на стороне сервера. Это может значительно уменьшить размер HTTP-ответов и оказать наибольшее влияние. Сжатие максимально возможного количества типов файлов. Единственными исключениями из этого правила являются некоторые статические ресурсы, такие как изображения, шрифты или файлы PDF. Они уже сжаты. Попытка сжать их приведет только к потере ресурсов ЦП, а в некоторых случаях даже к увеличению размера файлов.

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

10 важных этапов оптимизации производительности

Согласно тесту, проведенному Akamai, Brotli кажется лучшим вариантом, чем gzip. Они протестировали 1000 веб-сайтов и обнаружили, что Brotli превосходит gzip в среднем на 21%.

2. Минимизируйте количество HTTP-запросов

Несмотря на то, что сжатие может сохранить значительные объемы данных, вы можете дополнительно сократить время загрузки страницы, сводя к минимуму количество HTTP-запросов. Некоторые общие методы, которые вы можете использовать:

Объединение активов. Объедините файлы JavaScript и CSS, чтобы уменьшить количество запросов. Если размеры пакетов слишком велики, и вы бы предпочли разбить их на более мелкие куски, вы также можете поэкспериментировать с разбиением домена.

Используйте спрайты. С помощью спрайтов вы можете доставлять несколько изображений за один запрос. Затем вы можете ссылаться на отдельные изображения, используя свойство CSS background-position.

3. Используйте CDN

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

10 важных этапов оптимизации производительности

4. Используйте заголовок Cache-Control

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

5. Избегайте использования перенаправлений

Помните, что перенаправления (301, 302) задерживают все и замедляют загрузку страницы. Перенаправления чаще всего возникают, когда в URL-адресе отсутствует косая черта. Это заставляет веб-страницу перезагрузить все с правильным URL. Теперь давайте перейдем к оптимизации на стороне клиента и посмотрим, как мы можем улучшить ситуацию.

Оптимизация на стороне клиента

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

6. Оптимизируйте HTML

Размещайте срипты внизу: файлы JavaScript в head блокируют парсинг HTML. Вы можете улучшить воспринимаемую производительность, разместив их перед закрытием тега body. Вы также можете поэкспериментировать с атрибутами async/ defer.

10 важных этапов оптимизации производительности

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

Уменьшите количество элементов DOM: чем больше у вас элементов DOM, тем больше байтов вы будете загружать. Это также означает, что доступ к DOM через JavaScript станет медленнее. Избавьтесь от оболочек. Вы можете посчитать количество элементов DOM на странице с помощью следующего сниппета:

document.querySelectorAll('*').length

7. Оптимизируйте CSS

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

// Instead
.class:nth-last-of-type(3n+0) { ... } // Do
.class--special { ... }

Избегайте изменений в макете: изменения в свойствах, которые влияют на размеры или положение элемента, такие как width, height или left и right, вызывают изменения макета, которые могут еще больше замедлить время загрузки.

.card { height: 200px;
} // Changing height triggers layout
.card--tall { height: 400px;
}

Уменьшить области отрисовки: отрисовка является последним шагом на пути критического рендеринга. Изменения в макете или внешнем виде могут вызвать перерисовку. Области отрисовки могут быть больше, чем они должны быть. Вы можете вывести анимированные элементы на отдельные слои, чтобы получить некоторые преимущества производительности. Выводите элементы, только если вы уверены, что это улучшит производительность.

Чтобы увидеть, какие части страницы перерисовываются, перейдите на вкладку «Рендеринг» и включите «Подсветку отрисоки».

10 важных этапов оптимизации производительности

8. Оптимизируйте JavaScript

Используйте web workers для сложных вычислений: JavaScript запускается в главном потоке в браузере. Это означает, что долгосрочные задачи могут заморозить страницу и заблокировать взаимодействие с пользователем. Если у вас есть тяжелая вычислительная работа, сделайте это внутри web workers. Они работают в отдельном потоке и не блокируют рендеринг. Примечание: у вас нет доступа к DOM внутри web workers.

Используйте вкладку «Покрытие»: вкладка «Покрытие» может быть мощным инструментом для определения того, какой код нам действительно нужен при загрузке страницы. Все, что вы видите красным, не выполняется сразу. Это означает, что вы можете отложить и запросить это после завершения загрузки.

10 важных этапов оптимизации производительности

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

9. Оптимизируйте изображения

Используйте CSS вместо изображений. Лучший способ уменьшить вес изображений — не использовать их. У нас часто есть сложные элементы пользовательского интерфейса с крошечными деталями дизайна. Подумайте о шевронах, переключателях, тенях или моделях. В следующий раз, когда вы что-то разработаете, спросите себя: «Могу ли я достичь этого, используя только CSS или глифы?» Если ответ «да», тогда сделайте это.

Используйте векторные изображения: векторные изображения не зависят от разрешения и масштаба, что делает их подходящими для визуальных элементов. Они также имеют меньший размер, чем растровые изображения. Вы можете еще больше уменьшить их размер, уменьшив их XML-разметку. Поскольку они часто создаются с помощью сторонних приложений, эти файлы могут содержать ненужные метаданные.

Используйте правильный растровый формат: попробуйте выбрать один из трех основных типов: JPG, PNG или GIF. Если вам нужны анимированные визуальные эффекты, используйте GIF. Если вам нужно сохранить мелкие детали, используйте PNG. Для всего остального — JPG.

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

10 важных этапов оптимизации производительности

Размер отображения изображения 150х146. Естественный размер, обозначенный как «Внутренний», почти вдвое больше.

10. Оптимизируйте шрифты

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

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

Предварительная загрузка шрифтов. В качестве последнего шага вы можете пометить шрифты как высокоприоритетные, чтобы браузеры запрашивали их как можно скорее. Мы можем сделать это, используя тег preloadв link.

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

Рекомендации

Все инструменты, перечисленные ниже, бесплатны.

Lighthouse

Lighthouse, вероятно, будет вашим первым инструментом аудита. Он встроен прямо внутри Chrome. Вы можете связаться с ним через вкладку Аудит. Если вы не используете Chrome, то все равно можете использовать его в Интернете в качестве инструмента PageSpeed Insights в Google. Если вы также хотите проводить аудит SEO или доступности, web.dev будет подходящим вариантом.

10 важных этапов оптимизации производительности

webhint

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

10 важных этапов оптимизации производительности

GTmetrix

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

10 важных этапов оптимизации производительности

Вкладка «Производительность»

Вкладка «Производительность» в Chrome позволяет анализировать производительность во время выполнения. Она предоставляет все возможные данные, начиная с отбрасывания FPS и заканчивая длительными скриптами, и сколько времени всего занимает рендеринг и отрисовка сайта.

10 важных этапов оптимизации производительности

Performance API

Наконец, для сравнения вашего кода JavaScript вы можете использовать Performance API. Это дает вам возможность рассчитать, сколько времени потребуется для выполнения кода. Ранее мы могли использовать console.time и console.timeEnd. Однако performance дает более точные результаты. Возьмите следующий код в качестве примера:

performance.mark('startMeasurement'); for (let i = 0; i < 1_000_000; i++) { let calc = Math.sqrt(i);
} performance.mark('endMeasurement'); // With measure() we can create a new entry
performance.measure('record', 'startMeasurement', 'endMeasurement'); // This will give you a PerformanceMeasure object
// with the following properties
console.log(performance.getEntriesByName('record')); // Returns:
// Where duration tells us how long it took for the loop to run
{ detail: null, name: "record", entryType: "measure", startTime: 414557.83500001417, duration: 5.26999999419786
}

Заключение

Если вы выполните все действия и исправите все проблемы, возникшие в результате аудита, эффективность вашего сайта будет выше.

С какими распространенными проблемами производительности вы сталкиваетесь время от времени? Дайте нам знать об этом в комментариях! Спасибо, что нашли время, чтобы прочитать эту статью и удачи в отладке!

Автор: Ferenc Almasi

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

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