Все посты
8538 9 Знания

Как ускорить сайт: подборка работающих способов

Как увеличить скорость загрузки сайта, уменьшить вес и подготовить его к Google Core Vitals. Разбираемся с оптимизацией картинок и новыми параметрами.

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

Как уменьшить вес страниц сайта и ускорить загрузку

В 2021 году Google будет учитывать новый показатель для оценки пользовательского опыта и качества страницы — Google Core Vitals. В него входят три основных элемента:

  • время, за которое браузер отрисовывает самый крупный видимый объект в области просмотра — Largest Contentful Paint, LCP;
  • оценка сдвигов макета во время загрузки страницы — Cumulative Layout Shift, CLS;
  • время между первым взаимодействием пользователя со страницей и ответом бразуера — First Input Delay, FID.

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

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

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

Какой показатель LCP считается оптимальным

На LCP влияют четыре фактора:

  • время ответа сервера;
  • JavaScript и CSS с блокировкой рендеринга;
  • время загрузки ресурса;
  • рендеринг на стороне клиента.

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

Как оптимизировать CLS: сдвиги макета страницы, которые мешают пользователям

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

Как смещение элементов на сайте влияет на пользователей
Из-за сместившихся кнопок пользователь промахнулся

CLS — это совокупный сдвиг макета, он помогает оценить, как часто пользователи сталкиваются с неожиданными сдвигами. Оптимальный показатель CLS —не больше 0,1 на 75% сессий.

Оптимальный показатель CLS

В статье разбираем, как измерить показатель, какие сдвиги считать нормальными и как оптимизировать показатель.

Что влияет на скорость загрузки сайта [Исследование 5,2 млн страниц]

Команда блога Backlinko во главе с Брайаном Дином провели исследование страниц из выдачи Google и проверили, какие способы ускорения используют самые быстрые страницы. В выборке было 5,2 млн страниц из десктопной и мобильной выдачи, так что результат стоит посмотреть.

Подробнее о выводах с графиками и схемами в полной статье в блоге. Пара интересных тезисов:

  1. Средняя скорость загрузки первого байта (TTFB) — 1,286 секунды на десктопе и 2,594 секунды на смартфоне. Среднее время полной загрузки страницы — 10,3 секунды на десктопе и 27,3 секунды на мобильном.
  2. Как ни странно, лучшие варианты — либо минимально сжать файлы перед отправкой с сервера, либо максимально. У таких страниц более высокая производительность по сравнению со средним уровнем сжатия.
  3. Для загрузки на десктопе на скорость сильнее влияет использование CDN, на мобильных — количество запросов HTML.

Больше интересного в полной статье.

Как уменьшить вес сайта и ускорить загрузку страниц с помощью gzip, brotli, минификации и других способов

Картинки, видео и разные интерактивные элементы много весят и тормозят сайт. Можно сжать тяжелые элементы и ускорить загрузку.

Для это есть алгоритмы сжатия, самые популярные сейчас — это gzip и brotli. Brotli сжимает сильнее, чем gzip, у него больше уровней сжатия. Но на высоких уровнях его скорость меньше.

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

Есть еще способы ускорить сайт: минифицировать, то есть сократить CSS, HTML и JS, настроить кэширование, оптимизировать изображения — это все разбираем в статье.

Как ускорить загрузку: оптимизируем код верхней части страницы

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

Для оптимизации кода верхней части страницы есть несколько методов:

  • удалить лишние символы и скрипты из верхней части кода;
  • настроить асинхронную загрузку с jQuery;
  • ускорить получение первых байтов (TTFB)
  • объединить и сократить JavaScript и CSS;
  • настроить загрузку из кэша на стороне пользователя;
  • использовать CDN.

Обо всем этом в статье.

Как проверить скорость сайта и узнать, что еще можно сделать для ускорения

Прогоните сайт через инструмент pr-cy.ru/speed_test/ от PR-CY: он бесплатно проанализирует загрузку сайта поэтапно, в соответствии с новым параметром оценки качества сайта Google Core Vitals. Для каждого пункта есть пояснения и советы, что можно улучшить, с примерным подсчетом экономии скорости при выполнении.

Как проверить скорость загрузки сайта онлайн
Фрагмент проверки

Как оптимизировать картинки для быстрой загрузки

Большое руководство по SEO для картинок

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

Большая часть советов основана на вебинаре специалиста технического SEO и реверс инжиниринга Деми Мурыча (Demi Murych).

Требования к картинкам:

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

Технические вопросы:

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

Заполнение метатегов:

  • какие метатеги нужно заполнять обязательно, а какие по желанию;
  • как заполнять title и alt;
  • важно ли название файла для поисковика.

Как настроить отложенную загрузку картинок — lazy loading изображений

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

Есть несколько вариантов настройки:

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

Картинки загружаются по мере просмотра:

Отложенная загрузка изображений в браузере
Отображение картинок с отложенной загрузкой

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

Формат WebP: нужно ли использовать его для оптимизации

WebP — это формат графических изображений, его разработали в Google в 2010 году. Получилась альтернатива PNG и JPEG, но с меньшим размером при таком же качестве изображения. При этом в WebP можно сохранить прозрачность фона или анимацию.

Чем Webp отличается от PNG и Jpeg
Сравнение свойств популярных форматов изображений

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

В статье мы собрали все самое важное о формате WebP: исследования качества и веса, достоинства и недостатки формата, поддержку браузерами, способы конвертирования и другие темы.


Как вы ускоряете сайт, какие способы используете? Поделитесь в комментариях!

Теги поста или какие разделы почитать еще:

Комментарии (9)
Xenial   07.01.2020 14:16
Так, а кто чайник, подскажите программу,которая анализирует насколько быстрая загрузка файлов и изображений?
Natalia88   07.01.2020 14:51
Да проще простого, введите Google PageSpeed Insights,там окошко будет где можно ввести адрес и нажать анализировать
Kostya_Tokin   07.01.2020 14:56
А я нормально здесь пользуюсь и бесплатно, даёт полную аналитику,меня устраивает)
Kirill_Chekin   07.01.2020 15:23
Не изобретаю велосипед,просто архивирую с помощью Gzip, быстро увеличивает скорость и браузеры все поддерживают
maxklim   07.01.2020 15:33
До какой единицы сжимаешь?
Kirill_Chekin   08.01.2020 11:36
Стандартно до 5 единиц, достаточно
Who_called   04.11.2020 21:50
Этот долбаёб Гугл лучше бы свои рекламные блоки оптимизировал для начала ...
aidar171   10.11.2020 11:36
Сука в точку
Doniks   05.12.2020 17:05
Пом моему опыту могу сказать, что дольше всего грузятся скрипты. Особенно, если они подгружаются с внешних ресурсов. Поэтому я их всегда ставлю в футер, чтобы основной контент быстро загружался.
К данной записи нельзя добавлять комментарии, т.к. она очень старая.
🔥 Лучшие статьи о SEO за год
Как бесплатно получить обратные ссылки на сайт: 13 способов
Как ускорить индексацию сайта в Яндексе и Google