UA RU
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/
UA RU
logo

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

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

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

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

Курс Проджект-менеджмент в IT.
Навчайся у найкращих, курс проводить Тарас Федорук, найкращий PM за версією Ukrainian IT Awards у 2019 році.
Вивчити курс

Largest Contentful Paint (LCP)

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

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

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

 

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

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

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

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

  • Проверьте, насколько «быстрый» ваш хостинг-провайдер.
  • Оптимизируйте запросы к базе данных.
  • Используйте CDN для вашего сайта.
  • Курс Англійської.
    Навчання для різних цілей та рівнів: робоча англійська, початковий рівень, курси для дітей та підлітків.
    Дізнатись про курс

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

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

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

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

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

Используйте 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.

Курс Аналітик даних.
Протягом 4 місяців ви вивчите повний набір інструментів для аналізу даних та отримаєте можливість працевлаштування в Laba Group.
Ознайомитись з курсом

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

Итак:

  • Минимизируйте размер CSS и JS. Для облегчения чтения файлы CSS и JS могут содержать интервалы, отступы или комментарии. Все эти символы не нужны браузеру, и их минимизация гарантирует, что они будут удалены. Сделать это можно с помощью сборщиков модулей или инструментов сборки WebpackGulp или Rollup.
  • Отложите загрузку некритического 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">

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

Убедитесь, что ресурсы расположены в правильном порядке, чтобы не привести к ухудшению других метрик, когда другие ресурсы тоже считаются важными (критический 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">

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Курс Англійської.
Навчання для різних цілей та рівнів: робоча англійська, початковий рівень, курси для дітей та підлітків.
Дізнатись про курс

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

Топ-5 самых популярных блогеров ноября

Senior Project Manager at Nemesis
Всего просмотровВсего просмотров
1061
#1
Всего просмотровВсего просмотров
1061
Android Team Lead у Balancуй Team
Всего просмотровВсего просмотров
568
#2
Всего просмотровВсего просмотров
568
Software Developer у FullCity Consulting
Всего просмотровВсего просмотров
380
#3
Всего просмотровВсего просмотров
380
Talent scout/HR та Community Manager в Juniverse
Всего просмотровВсего просмотров
301
#4
Всего просмотровВсего просмотров
301
Android Developer | Kotlin
Всего просмотровВсего просмотров
233
#5
Всего просмотровВсего просмотров
233
Рейтинг блогеров
Курс Англійської.
Обери викладача за своїми вимогами серед 1100+ фахівців в Englishdom.
Ознайомитись з курсом

Самые обсуждаемые статьи

Топ текстов

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

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

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