7 шагов для ускорения фронтенда

Шаг 1. Оптимизация JavaScript

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

С чем связано замедление скорости загрузки JS?

Дело в том, что скрипты взаимодействуют с DOM и CSSOM (визуализация и объектная модель документа) и меняют их. На это уходит больший промежуток времени, нежели на загрузку готовой HTML-разметки. Фрагменты кода, которые невозможно вынести в отдельный файл, рекомендуется размещать в конце документов, чтобы они грузились в последнюю очередь. Чтобы ускорить рендеринг страницы и не блокировать загрузку важных элементов, требуется использовать асинхронный JS.

Шаг 2. Оптимизация изображений

Рекомендуется перейти на новый формат изображений WebP и использовать его везде, где это возможно. Технология сжимает картинку без просадки качества или с небольшой просадкой. Первый метод предпочтительнее. Как следствие, изображение будет намного меньше весить, оставляя больше свободного места на сервере и ускоряя загрузку страницы. А разница в детализации будет незаметной невооруженным глазом.

Есть большой выбор приложений для сжатия картинок, среди которых каждый найдет удобный вариант. Также старайтесь загружать изображения правильного размера. Если версткой предусмотрен размер 200px на 200px, то не стоит загружать картинки выше этого параметра. Это сказывается на скорости загрузки, особенно если картинок будет много.

Дополнительно можно настроить lazy load - подгрузку контента при скроллинге. Таким образом работают социальные сети, например Вк.

Шаг 3. Оптимизируйте CSS

Размер CSS нужно свести к минимуму, по возможности перенести стили в отдельные файлы. Данные в них должны быть кэшированы. Используя сервисы вроде AdVagg для Drupal вы сумеете оптимизировать фронтенд и группировать связанные между собой CSS и JS-файлы. Если определенный стиль используется для главной страницы, то его не требуется подключать для остальных. Если стили невозможно вынести в отдельный файл, то они должны быть в конце кода перед тегом .

Шаг 4. Облегчаем шрифты

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

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

Шаг 5. Внешние ресурсы следует перенести на сервер

По возможности перемещайте сторонние скрипты на собственный сервер. Например, WSO пользуется Facebook Pixel, который можно перенести на сервер и кэшировать на 14 дней, что дает ощутимый прирост скорости.

Шаг 6. Пользуйтесь CDN

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

Шаг 7. Воспользуйтесь Service Workers

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

Стоит ли работать над улучшением скорости загрузки сайта?

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