ru:https://highload.today/blogs/kak-uskorit-rabotu-sajta-na-etape-razrabotki-poshagovaya-instruktsiya/ ua:https://highload.today/uk/blogs/kak-uskorit-rabotu-sajta-na-etape-razrabotki-poshagovaya-instruktsiya/
logo

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

Дмитрий Аккерман BLOG

Frontend Developer в рекламном агентстве OdesSeo

В прошлой статье мы рассмотрели три основные показателя нового критерия ранжирования Google — Core Web Vitals, предназначенных для измерения пользовательского опыта работы с сайтом. В этой статье я расскажу, что мы делаем для улучшения веб-производительности во время разработки.

Largest Contentful Paint (LCP)

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

Отрисовка самого крупного контента

Элемент «Отрисовка самого крупного контента»

 

Самый крупный элемент страницы

Самый крупный элемент страницы

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

Оптимизируйте серверные операции

  • Проверьте, насколько «быстрый» ваш хостинг-провайдер.
  • Оптимизируйте запросы к базе данных.
  • Используйте CDN для вашего сайта.

Настройте кэширование

Настройте кэширование статических ресурсов для уменьшения дорогостоящих серверных вычислений. Проанализируйте кэширование элементов, которые редко изменяются: изображения, PDF-документы, возможно, CSS- и JS-файлы.

Заранее настройте подключение к сторонним ресурсам

Уделите этому пункту особое внимание, так как он важен как для LCP, так и для FID.

Запросы сервера к сторонним ресурсам также могут повлиять на LCP, особенно если они нужны для отображения важного содержимого на странице.

Практичний інтенсивний курс з дизайну - Design Booster від Powercode academy.
Навчіться дизайну з нуля за 3 місяці і заробляйте перші $1000, навіть якщо ви не маєте креативного мислення, смаку або вміння малювати. Отримайте практичні навички, необхідні для успішної кар'єри в дизайні.
Зарееструватися

Используйте rel="preconnect", чтобы сообщить браузеру, что ваша страница хочет установить соединение как можно скорее:

<link rel="preconnect" href="https://example.com" />

Вы также можете использовать dns-prefetch для более быстрого поиска DNS:

<link rel="dns-prefetch" href="https://example.com" />

Несмотря на то, что оба метода работают по-разному, рассмотрите dns-prefetch как альтернативу для браузеров, которые не поддерживают предварительное подключение:

<head>
 …
 <link rel="preconnect" href="https://example.com" />
 <link rel="dns-prefetch" href="https://example.com" />
</head>

Оптимизируйте CSS и JavaScript, которые блокируют поток

Уделите данному пункту особое внимание, так как он важен как для LCP, так и для FID.

Скрипты и стили блокируют рендеринг и ухудшают показатель LCP. Отложите любой некритический JavaScript и CSS, чтобы ускорить загрузку основного содержимого вашей веб-страницы.

Итак:

  • Минимизируйте размер CSS и JS. Для облегчения чтения файлы CSS и JS могут содержать интервалы, отступы или комментарии. Все эти символы не нужны браузеру, и их минимизация гарантирует, что они будут удалены. Сделать это можно с помощью сборщиков модулей или инструментов сборки WebpackGulp или Rollup.
  • Курс English For IT: Communication від Enlgish4IT.
    Почни легко працювати та спілкуватися з мультикультурними командами та міжнародними клієнтами. Отримайте знижку 10% за промокодом ITCENG.
    Інформація про курс
  • Отложите загрузку некритического CSS. Используйте предварительную загрузку важных файлов стилей:

<link rel="preload" as="style" href="styles.css">

<link href="styles.css" rel="stylesheet" media="(min-width: 1920px)">

Pagespeed Insights часто указывает на неиспользуемые стили на странице, поэтому атрибут media может помочь в улучшении LCP.

  • Заинлайньте критический CSS:
Инлайнинг критического CSS

Инлайнинг критического CSS

Помеcтите в тег <style> критически важный CSS, необходимый при отрисовке верхней части страницы.

  • Удалите неиспользуемый CSS и JS или переместите в отдельные файлы, если на разных страницах используется разный код. Используйте вкладку Coverage в Chrome DevTools для отладки:
Вкладка "Coverage"

Вкладка Coverage

Заранее загрузите ключевое изображение

Cамым важным и самым большим элементом для измерения LCP являются hero image в верхней части страницы. Для улучшения метрики настройте предзагрузку этих изображений:

<link rel="preload" as="image" href="image.jpg">

Онлайн-курс "Створення електронної музики" від Skvot.
Практичний курс про те, як знайти власний стиль та написати й зарелізити свій перший трек.
Програма курсу і реєстрація

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

Убедитесь, что ресурсы расположены в правильном порядке, чтобы не привести к ухудшению других метрик, когда другие ресурсы тоже считаются важными (критический CSS, JS, шрифты). Подробнее о цене предзагрузки можно узнать тут.

В качестве примера предлагаю посмотреть на «карусель» баннеров в верхней части страницы. Настройка предварительной загрузки всех изображений внутри нее может негативно сказаться на LCP — вместо этого настройте предзагрузку первого изображения, остальные загружайте «лениво» (о чем поговорим ниже).

Используйте отзывчивые изображения с предварительной загрузкой

Используйте отзывчивые изображения с атрибутом srcset и их предварительную загрузку. Познакомьтесь с возможностью предварительной загрузки адаптивных изображений. Благодаря атрибутам imagesrcset и imagesizes, добавленных в <link>, вы можете предзагрузить адаптивные картинки:

<link rel="preload" as="image" href="your-image.jpg" 
             imagesrcset="your-image_575px.jpg 575w,
                          your-image_991px.jpg 991w,
                          your-image_1920px.jpg 1920w"
    	     imagesizes="50vw">

В разметке же код должен выглядеть примерно так:

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Воркшоп "PR + AI: Рисерч, Креатив, Контент" від Skvot.
Навчіться адаптувати потенціал АІ під задачі піарника. Корисні тулзи, яким можна делегувати рутину, генерувати свіжі ідеї для контенту і піар-стратегій.
Дізнатись більше

Этот материал – не редакционный, это – личное мнение его автора. Редакция может не разделять это мнение.

Ваша жалоба отправлена модератору

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: