Как ускорить работу сайта на этапе разработки: пошаговая инструкция

@font-face {
  font-family: 'Circe-Bold';
  src: local('Circe-Bold'),
  url('Circe-Bold.woff2');
  font-display: swap;
}

Если включен font-display: swap, текст отобразится на странице сразу после загрузки кода CSS.

Используйте современные форматы шрифтов

Используйте форматы woff и woff2.

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

First Input Delay (FID)

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

Уменьшите влияние сторонних ресурсов

Убедитесь, что загрузка сторонних ресурсов несет реальную ценность для вашего сайта.

Как пример приведу один из самых используемых сторонних ресурсов — библиотеку jQuery. Она была отличным решением, когда не было общепринятого способа обращаться к элементам DOM с помощью CSS-селектора, не было стандартного способа добавить анимацию к стилю элемента, а интерфейс XMLHttpRequest, предложенный Internet Explorer, как и многие API, был плохо совместим с браузерами. Сейчас же нативные CSS и JS позволяют реализовать подавляющее число задач, поэтому рассмотрите вариант отказа от jQuery.

В тех случаях, когда на сайте необходимо использовать карусель изображений, для чего многие зачастую выбирали OwlCarousel или Slick, которые требуют jQuery, сейчас мы выбираем нативные решения, например, Swiper или Glider.js, которые мало весят и свободны от зависимостей. Для AJAX-запросов отдавайте предпочтение уже давно себя зарекомендовавшему Axios или же нативному Fetch.

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

• Используйте атрибуты async или defer для тега <script>:

<script async src="script.js">
<script defer src="script.js">

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

Используйте defer для менее важных ресурсов (например, видеоплеер в нижней части страницы).

• Настройте подключение к этим ресурсам заблаговременно.

Вы можете сэкономить 100–500 миллисекунд, установив ранние подключения к важным сторонним источникам. Тут вам помогут два типа подключения тега <link>: preconnect и dns-prefetch.

<link rel = "preconnect" href="https://cdn.example.com"> сообщает браузеру, что ваша страница намеревается установить соединение с другим источником и что вы хотите, чтобы процесс начался как можно скорее. Когда делается запрос ресурса из предварительно подключенного источника, загрузка начнется немедленно.

<link rel = "dns-prefetch"> обрабатывает небольшое подмножество того, что обрабатывает <link rel ="preconnect">. Он включает в себя поиск DNS и подтверждение TCP, а для безопасных источников — согласование TLS.

Preconnect лучше всего использовать только для наиболее важных соединений. Для менее важных сторонних доменов используйте <link rel = dns-prefetch>.

• Настройте ленивую загрузку данных ресурсов.

Встроенные сторонние ресурсы могут быть большим фактором снижения скорости страницы, если они спроектированы. Если они некритичны или находятся в нижней части страницы (если пользователям нужно прокручивать их для их просмотра), отложенная загрузка — хороший способ улучшить скорость страницы и отрисовку. Таким образом пользователи быстрее получат контент главной страницы.

Один из самых эффективных подходов — отложенная загрузка стороннего контента после загрузки главной страницы. Альтернативный подход — загружать сторонний контент только тогда, когда пользователь прокручивает страницу вниз до этого раздела страницы.

Используйте Intersection Observer — API браузера, который эффективно определяет, когда элемент попадает или пропадает из области просмотра браузера, и его можно использовать для реализации этого метода.

Уменьшите время выполнения JavaScript

Этот показатель идентичен шагам в разделе LCP. Еще раз отмечу их:

• минимизируйте и сжимайте JavaScript;
• удалите неиспользуемый JavaScript;
• отложите выполнение некритического JavaScript.

Минимизируйте работу в основном потоке

Уменьшите количество и размер запрашиваемых файлов.

Немного слов о «количестве ресурсов». Используйте вкладку «Задайте правила эффективного использования кэша для статических объектов» в Pagespeed Insight или вкладке Network в Chrome DevTools, чтобы посмотреть все ресурсы, которые загружены на странице:

Вкратце отмечу, что мы делаем, чтобы уменьшить количество ресурсов:

• Объединяем и минимизируем JavaScript.
• Объединяем и минимизируем CSS.
• Минимизируем использование свойства background-image в файлах стилей и инлайним графические элементы.
• Уменьшаем влияние сторонних ресурсов.
• Оптимизируем длительно-выполняющиеся скрипты.

Используйте вкладку Performance в Chrome DevTools для поиска и отладки длительных операций. Определите, какие процессы являются наиболее затратными и по возможности оптимизируйте их.

Обратите внимание на процессы, которые отмечены как Long task и по возможности оптимизируйте их.

Еще одним способом поиска проблем является новая функция Pagespeed Insights — View treemap, которая позволяет увидеть, что находится в вашем JavaScript, найти зависимости и процент использования в коде.

• Загружайте Javascript асинхронно.
• Используйте методы прогрессивного улучшения, чтобы пользовательский интерфейс можно было использовать до запуска JavaScript.
• Ограничьте объем и сложности вычисления стилей.
• Не используйте большие сложные макеты и избегайте их подтормаживания.

Cumulative Layout Shift

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

Давайте поймем, как можно улучшить этот показатель.

Резервируйте места для изображений, видео и iframe-элементов

Зарезервировать места для изображений, видео и iframe-элементов можно, указав размеры.

Чтобы уменьшить сдвиг разметки, вызванный загрузкой ресурсов без заданных размеров, задайте картинкам и видео атрибуты width и height. Это помогает браузеру выделить достаточное место на странице, пока элементы грузятся:

<img src="image.jpg" alt="..." width="500" height="500">

Если ваше изображение должно быть отзывчивым, задайте ему в стилях свойство width со значением 100%, а height со значением auto. Тем самым мы может удовлетворить требования браузера и контролировать размеры изображения на медиа-запросах:

img {
  width: 100%;
  height: auto;
}