1714 Знания

Как ускорить сайт: лучшие подробные материалы от PR-CY

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

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

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

Исследование 5,2 млн страниц: новые знания о скорости загрузки сайта

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

Статья в нашем блоге — адаптированный перевод самых интересных выводов:

  1. Какова скорость загрузки первого байта
    Средняя скорость загрузки первого байта (TTFB) — 1,286 секунды на десктопе и 2,594 секунды на смартфоне. Среднее время полной загрузки страницы — 10,3 секунды на десктопе и 27,3 секунды на мобильном.
  2. Что влияет на загрузку TTFB
    Для загрузки на десктопе на скорость сильнее влияет использование CDN, на мобильных — количество запросов HTML.
  3. Какие фреймворки быстрее
    Wink и Gatsby — самые быстрые для страниц средних размеров.
  4. Как влияет сжатие файлов
    Как ни странно, лучшие варианты — либо минимально сжать файлы перед отправкой с сервера, либо максимально. У таких страниц более высокая производительность по сравнению с средним уровнем сжатия.
  5. Как влияет сжатие изображений
    Адаптивные изображения встречаются чаще. Также эффективно сжатие gzip. Формат WebP пока отстает.
  6. Какие CMS быстрее
    Лучшие показатели по скорости у сайтов на движках Squarespace и Weebly, худшие у Wix и WordPress.

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



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

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

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

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

В статье разбираемся, как использовать сжатие gzip и brotli, как минифицировать CSS, HTML и JS, как настроить кэширование, оптимизировать изображения на странице.

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

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

Для оптимизации кода верхней части страницы есть несколько методов: удалить лишние символы и скрипты из верхней части кода, объединить и сократить JavaScript и CSS, сжать код алгоритмами, настроить загрузку из кэша на стороне пользователя, использовать jQuery и CDN. Обо всем этом в статье.

5 способов увеличить скорость загрузки сайта

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

Как увеличить скорость загрузки сайта

  1. Уменьшите объем загружаемых страниц
  2. Уменьшите объём графики
  3. Уменьшите количество запросов браузера
  4. Включите кэширование данных
  5. Сократите размер кода CSS и JavaScript



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


Как оптимизировать загрузку картинок: настройка lazy loading изображений

Картинки обычно довольно много весят, особенно, если на сайте важна передача цветов и хорошее качество изображения. Увеличить скорость можно с помощью настройки ленивой загрузки — пользователю не придется ждать, пока загрузится весь контент, потому что картинки будут подгружаться порционно, по мере просмотра страницы. Этот способ загрузки называется lazy loading, асинхронная или «ленивая» загрузка. Функция работает на технологии AJAX с помощью JavaScript.

Способ работает для элементов с атрибутом src — картинок img и фреймов iframe. Есть несколько вариантов настройки:

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

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

Сколько сайтов используют отложенную загрузку изображений

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

Как использовать WebP для оптимизации картинок на сайте

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

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


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


Как и зачем оптимизировать изображения на сайте

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

По этому графику видно: чем медленнее страница, тем меньше клиентов, совершающих целевые действия.

Как ускорение загрузки влияет на конверсию


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


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

«Анализ сайта»: специальный тариф для студий
В Яндекс.Метрике появились отчеты по контенту
Google стал фильтровать выдачу в России
Комментарии (6)
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 единиц, достаточно

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться