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

Содержание

Скорость загрузки сайта

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

Оптимальное время загрузки — 2-3 сек. Идеальное — время реакции пользователя, то есть, 0,5 сек. Однако для высоконагруженных веб-приложений оптимальная скорость может отличаться. В таком случае высчитайте среднее время загрузки конкурентов в вашей области и ориентируйтесь на него.

  1. Чем быстрей загружается сайт, тем лучше конверсия
  2. Что влияет на скорость сайта
  3. Как увеличить скорость загрузки сайта
  4. Оптимизируйте изображения
  5. Упростите код JavaScript и CSS
  6. Уменьшите количество запросов браузера
  7. Включите кэширование данных
  8. Как включить кэширование?
  9. Используйте технологии для мгновенной загрузки контента
  10. Проверка скорости загрузки сайта
  11. Важность ускорения сайтов

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

Чтобы убедиться в этом, изучите следующие результаты исследований:

  • Исследование Aberdeen Group показало, что в результате задержки в 1 секунду уменьшается количество просмотров (на 11%), процент удовлетворенности аудитории (на 16%), а также коэффициент конверсии (на 7%).
  • Компания Shopzilla увеличила скорость сайта на 5 секунд и тем самым повысила конверсию на 12%
  • Сократив время загрузки своих посадочных страниц, компании Mozilla удалось увеличить количество загрузок на 15,4%, что привело к 60 млн дополнительных загрузок.
  • 85% мобильных юзеров ожидают, что сайты будут грузиться так же быстро, как и на компьютере. Не получая такого же результата, они покидают сайт.

Источники: gomez.com, aberdeen.com, en.oreilly.com, blog.mozilla.com

Что влияет на скорость сайта

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

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

Когда сайт загружается (при первом визите) – происходят такие операции:

  • DNS-запрос названия сайта.
  • Связь с сервером по IP (по протоколу TCP).
  • Установка безопасного соединения при использовании протокола HTTPS (TLS соединение).
  • Запрос по URL-адресу HTML-страницы и ожидание сервера (на основе HTTP-протокола).
  • Загрузка HTML-кода страницы.
  • Анализ HTML-документа на стороне браузера и дальнейшее формирование серии запросов к ресурсам веб-документа.
  • Дальнейшая загрузка и разбор таблиц каскадных стилей (CSS). Загрузка и выполнение JS-кодов.
  • Дальше осуществляется рендеринг отображения страницы и активация Джава-скриптов.
  • Следующий этап – подгрузка имеющихся шрифтов.
  • Отображение картинок и других элементов страниц.
  • Окончание отображения полной страницы, выполнение отстроченных скриптов и кодов.

В вышеописанном процессе некоторые этапы могут проходить одновременно, а иногда меняться местами, но суть при этом не меняется.

Оптимизация сервера связана с четырьмя первыми этапами. А стадии с 5 по 12-ю предполагают оптимизацию клиента. Время каждого этапа является индивидуальным для разных сайтов. Поэтому вам нужно узнать метрики сайта для идентификации основных проблем.

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

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

Оптимизируйте изображения

Графика часто составляет 80% и более от общего размера страниц. Поэтому очень важно правильно оптимизировать публикуемые фотографии. Следующие рекомендации помогут вам уменьшить размер изображений на 50% и более:

  • Публикуйте фотографии в формате JPEG, избегайте формата PNG. Формат JPEG позволяет сильно сжимать изображения без потери качества. Например, в день представления Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, «вес» которого составил 1 МБ. Фото аналогичного качества в формате JPEG имеет размер приблизительно 140 КБ.
  • Не злоупотребляйте использованием формата PNG для обеспечения прозрачности графики. Эффект прозрачности — это очень красиво, но не всегда функционально.
  • Корректно выбирайте уровень качества картинок в формате JPEG. Уменьшив качество фото на 25-50%, вы практически не заметите разницы по сравнению с исходным изображением. При этом «вес» иллюстрации значительно уменьшится.
  • Используйте сервис TinyPNG.com для сжатия изображений.

Уменьшая «вес» фотографий, постарайтесь сохранить эстетическую привлекательность сайта. Пользователи и поисковые системы больше ценят визуально привлекательные ресурсы.

Упростите код JavaScript и CSS

Использование специальных средств упрощения кода JavaScript и CSS уменьшает «вес» соответствующих элементов сильнее, чем стандартные технологии сжатия, например, gzip. Сервисы упрощения удаляют из кода лишние элементы, а также сокращают названия функций.

Чтобы упростить код элементов JavaScript и CSS, воспользуйтесь программными средствами или онлайн-сервисами, например, Online Javascript Compression Tool или Online JavaScript/CSS Compression.

Уменьшите количество запросов браузера

Этот пункт перекликается с предыдущим. Один из способов уменьшить количество запросов браузера — удалить со страницы часть элементов.

Используйте CSS-спрайты — графические файлы, содержащие сразу несколько изображений. Это оптимальный способ, если на сайте много маленьких изображений и иконок. Объедините несколько CSS- и JS-файлов в один, это сократит количество HTTP-запросов.

Чтобы посмотреть количество запросов браузера в Chrome, войдите в «Инструменты разработчика» (Настройки → Дополнительные инструменты или просто нажмите Ctrl+Shift+I) и перейдите во вкладку Network.

Включите кэширование данных

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

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

Как включить кэширование?

Используйте модуль headers веб-сервера Apache, который контролирует и изменяет заголовки HTTP-запросов и HTTP-ответов. Браузер загружает с сервера в локальный кэш данные, которые редко изменяются, и при посещении сайта загружает их уже из кэша. Также можно кэшировать файлы определённых типов на заданное время, по истечении которого они будут загружены с сервера заново.

Это можно сделать так:

Header set Cache-Control «max-age=1234000»

Укажите нужные расширения файлов в конструкции FilesMatch, где для них устанавливается заголовок Cache-Control и переменная max-age, с помощью которой указывается время хранения файлов в секундах. Те файлы, которые не нужно кэшировать, просто не включайте в список.

Также можно запретить кэширование файлов. Добавьте приведённый ниже код в .htachess, предварительно указав, какие типы файлов кэшировать не нужно:

Header unset Cache-Control

Вы также можете управлять кэшированием с помощью модуля expires. Он контролирует установку HTTP-заголовков для кэширования со стороны браузера. Укажите период хранения данных в зависимости от времени, от последнего изменения файла или от времени доступа клиента.

ExpiresActive On
ExpiresDefault «access plus 2 month»

ExpiresByType image/png «access plus 4 months»
ExpiresByType image/swf «access plus 4 months»

ExpiresByType text/html «access plus 2 month 14 days 7 hours»
ExpiresByType image/gif «modification plus 8 hours 3 minutes»

Используйте технологии для мгновенной загрузки контента

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

Проверка скорости загрузки сайта

Сервисы, с помощью которых можно протестировать скорость загрузки сайта:

Обращаем ваше внимание, данные сервисы не смогут решить ваши проблемы. Их главная функция – проанализировать скорость загрузки сайта. Все дальнейшие действия должны исходить именно от вас.

Однако, сервис проверки скорости сайта у Google скачивает не оптимизированные данные с вашего сайта, оптимизирует и предлагает заменить.

После проверки скорости сайта пролистайте ниже и вы увидите ссылку на файлы:

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

Важность ускорения сайтов

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

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

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

Источник: http://webmaster-seo.ru/seo/skorost-zagruzki-sajta/

Как скорость загрузки сайта влияет на продажи?

Секундные задержки при переходе на сайт – не мгновения, а серьезные потери. И речь не о технических характеристиках, а о финансовых показателях сайта: конверсиях. Аналитики компании Akamai утверждают, что секундная прибавка к времени загрузки страницы понижает показатель конверсии вплоть до 15% — и это ещё не худшие потери.

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

Полное исследование специалистов компании Akamai можно найти в сети.

Медленный сайт – понижение в поисковом ранжировании

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

Первичный фактор юзабилити – скорость загрузки веб-страницы и её полной прорисовке в браузере. Чем ниже эта характеристика, тем глубже место сайта в поисковой выдаче. Позиция сайта при ранжировании становится ниже – его аудитория уменьшается. Решить проблему можно лишь одним способом: ускорением работы сайта.

Как измерить скорость загрузки сайта?

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

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

Причина 1. На странице содержатся слишком крупные изображения.

Чем больше разрешение картинки, тем больше их объём – и ниже скорость загрузки. Следует оценить размер каждого изображения и его формат. Предпочтительнее использовать файлы JPG вместо более объёмных картинок PNG. Алгоритмы сжатия JPG позволяют значительно уменьшить размер изображения без заметных потерь качества.

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

Хотя некоторые источники рекомендуют удалять «лишние» метаданные – текстовые описания картинок, делать это не следует. Текстовая информация в любом случае занимает незначительный объём, а поисковики всё меньше «любят» картинки без сопроводительных данных.

Причина 2. Обилие flash-анимации на сайте

Присутствие на сайте flash-контента серьёзно снижает скорость прорисовки страницы. Даже если сами ролики имеют небольшой объём, они способны серьёзно нагружать компьютер пользователя. Наконец, многие мобильные гаджеты уже не обладают поддержкой flash-анимации. Рекомендуется избавить страницы от этого устаревшего формата данных в пользу более прогрессивного HTML5.

Причина 3. Медленный хостинг

Сервер, где физически размещён ресурс, может быть перегружен. Если сам сайт не содержит ни flash-анимации, ни картинок с большим разрешением, но скорость загрузки всё равно остаётся низкой, следует поменять хостинг-провайдера. Цены на рынке отличаются незначительно, и минимальные вложения в более дорогой хостинг способны в разы повысить «отзывчивость» сайта и его конверсионные показатели.

Причина 4. Неоптимизированный код

Сам HTML-код занимает небольшой объём и не способен серьёзно влиять на скорость загрузки. Однако это программные инструкции, которые «указывают» браузеру, как обрабатывать страницу перед её показом на экране. Если код (особенно в части JavaScript и CSS) неоптимизирован, то даже небольшая по размеру веб-страница может отображаться со значительными задержками.

Как мы увеличили время пребывания на сайте на 28 %

В этом году в рамках продвижения для сайта компании ООО ПП «ПСП» https://psp.ru/ мы проводили работы по увеличению скорости загрузки сайта.

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

  • Процент отказов с сайта – 18,9%;
  • Глубина просмотра – 4,59 страницы;
  • Время на сайте – 3:57 секунд.

Спустя месяц после проведенных работ мы еще раз проверили показатели, было замечено значительное улучшение поведенческих факторов:

  • Процент отказов с сайта – 16,9%;
  • Глубина просмотра – 5,17 страниц;
  • Время на сайте – 4:57 секунд.

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

Быстрый сайт удобнее и приятнее для посетителей. Он вызывает доверие и положительные эмоции. Увеличение скорости загрузки веб-страниц – едва ли не самый простой приём для увеличения его посещаемости и конверсии.

Источник: http://nextype.ru/blog/internet-marketing/kak-skorost-zagruzki-sayta-vliyaet-na-prodazhi/

Ускорение сайта по-японски

Как ускорение сайта влияет на конверсию? Есть ли влияние на SEO и показатели вовлеченности аудитории? Ответы читайте в материале.

  • Автор записи

Автор: Алексей
Дата записи

Nikkei — один из самых авторитетных медиа-бизнесов в Японии. Этому изданию больше 140 лет.

Кроме печатной газеты, у них 450 миллионов посетителей в месяц на сайтах. В ноябре 2017 года, в Nikkei успешно запустили прогрессивное веб-приложение (PWA) — https://r.nikkei.com. Результаты говорят сами за себя:

Рост производительности после ускорения:

  • 2X выше показатель Speed Index
  • 14 секунд быстрее до взаимодействия
  • 75% быстрее загрузка с prefetch

Результаты для бизнеса с быстрым сайтом:

  • 2.3X рост SEO трафика
  • 58% больше конверсий (в подписку)
  • 49% рост дневной аудитории
  • 2X больше страниц на посетителя

Сколько секунд загружается ваш сайт? Проверьте:

История ускорения в скриншотах

В Nikkei наблюдали быстрый рост мобильного трафика. Сервисы проверки скорости загрузки показывали низкие показатели. Время до взаимодействия было около 20 секунд, а как мы знаем исследования Google показали, что 53% людей уходят с сайта, если он загружается дольше трех секунд.

Ценность высокой скорости загрузки неоспорима, особенно для онлайн новостей в мире финансов. Мы сделали скорость одним из наших основных показателей. Наши клиенты оценили это изменение.

Тайхэй Сигемори, менеджер по маркетингу.

Результаты ускорения сайта

Nikkei увеличили показатели по PageSpeed с 23 до 82. Время до интерактива улучшилось примерно на 14 секунд. Органический трафик, скорость, конверсионный коэффициент и активные ежедневные пользователи тоже выросли.

PWA — это многостраничное приложение (MPA), снижающее сложность внешнего интерфейса, построенное с использованием Vanilla JavaScript. Пять основных инженеров фронтэнда работали в течение года, чтобы достичь этой производительности.

Программисты Nikkei доказали, что отличное UX приносит хорошие бизнес-результаты.

Хироюки Хигаши, менеджер по продукции, Nikkei

Решение задачи

Nikkei создали и запустили Progressive Web App, используя отзывчивый дизайн, ванильный JavaScript и многостраничную архитектуру, они сосредоточились на создании лучшего пользовательского интерфейса.

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

Лучшие практики Web-Performance

  • Улучшение скорости загрузки и интерактивности за счет использования современных веб-интерфейсов API, сжатия и оптимизации кода.
  • Постепенно улучшайте UX, добавляя функции PWA, такие как поддержка оффлайн режима и добавление приложения на главный экран мобильных и десктоп.

Техническое погружение

Важно расставить приоритеты при загрузке важного контента. Используя HTTP/2 Server Push, они смогли расставить приоритеты для критически важных частей JavaScript и CSS, которые, как они проанализировали, точно понадобятся пользователю сразу.

Избегайте лишних запросов от сторонних ресурсов

Конечно же сайт должен был загрузить сторонние ресурсы для отслеживания статистики, рекламы и многого другого, как это обычно бывает. Они использовали (откроется в новой вкладке)» href=»https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect» target=»_blank»>link rel=preconnect для предварительного запроса к DNS/TCP/SSL для этих запросов сторонних ресурсов.

Динамический prefetch для следующей страницы

Когда они были уверены, что посетитель будет переходить на следующие страницы, то не ждали, когда навигация просто произойдет. В Nikkei динамически добавляли link rel=prefetch в head и предзагружали следующую страницу до того, как посетитель совершил клик. Это позволило сделать навигацию по сайту мгновенной.

Важный CSS для отрисовки первого экрана инлайн в коде страницы (Inline Critical-path CSS)

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

Оптимизация JavaScripts бандла

По их предыдущему опыту, JavaScript-бандл Nikkei был слишком тяжел, в общей сложности весом более 300 килобайт. Переписав всё на vanilla JavaScript они смогли уменьшить размер JS до 60 килобайт с помощью RollUp.

Сколько весит JS у вас на сайте? Измерьте сейчас:

Другие внедренные практики для ускорения сайта
  • Сжатие: Gzip/Brotli все ресурсы, что можно сжать с помощью Fastly CDN
  • Кэширование: Включить кэширование HTTP
  • Оптимизация изображений: Использовали imgix для оптимизации и определения формата изображения.
  • Ленивая загрузка некритических ресурсов
  • Стратегия загрузки веб-шрифтов
  • Оптимизировать первую отрисовку контента
  • Сохранение быстрой загрузки и выполнения JavaScript

Оптимизация стороннего JavaScript

Оптимизировать JavaScripts сторонних разработчиков не так просто, по сравнению с вашими собственными скриптами, Nikkei успешно минимизировал и объединил все рекламные скрипты, которые теперь обслуживаются из собственной сети доставки контента (CDN).

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

Nikkei использовал следующий подход и улучшил время инициализации на 100 мс, а также уменьшил размер JS на 30%:

  • Соберите все необходимые скрипты с помощью JS-пак (например, Webpack).
  • Асинхронная загрузка скриптов, чтобы они не блокировали рендеринг страницы.
  • Прикрепить рассчитанный рекламный баннер к Shadow DOM (против ифрейма)
  • Отложенная загрузка рекламы при прокрутке пользователя с помощью API Intersection Observer

Progressively enhancing the website

В дополнение к этим базовым оптимизациям, Nikkei использовала Web App Manifest и сервисные воркеры, чтобы сделать их сайт устанавливаемым и работать даже без подключения к интернету.

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

Выводы Nikkei

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

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

Свежее от Google по теме ускорения сайтов и оптимизации производительности:

Источник: http://loading.express/blog/case-studies/nikkei-speed-up/

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

Даже очень терпеливые люди не всегда могут долго стоять в очереди – будь то в банке, аэропорту или пиццерии. Мы либо скучаем, либо злимся, если ожидание занимает больше времени, чем предполагалось.

Ожидание загрузки страницы сайта ничем не отличается от ожидания очереди за вкусным кусочком пиццы. Мы хотим эту пиццу сейчас. И если потребуется слишком много времени, чтобы получить желаемое, мы выйдем за дверь и пойдем кушать в другое место. То же самое применимо и к просмотру сайтов в Интернете. Если страница загружается слишком долго – мы покидаем ее.

1. Как Google относится к скорости сайта

2. Какой должна быть скорость загрузки сайта?

3. Как проверить время ответа сервера?

4. Способы увеличить скорость загрузки страницы

Как Google относится к скорости сайта

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

Многие думают, что поисковая оптимизация ориентирована в первую очередь на использование правильных ключевых слов в контенте и получение обратных ссылок, чтобы вывести сайт в ТОП поисковых систем (в основном для Google). Однако, на самом деле существует множество факторов, которые часто недооцениваются и один из них – скорость загрузки страницы. Google учитывает время загрузки вашего сайта в своем алгоритме и использует его как фактор для ранжирования. Уже с далекого 2010 года компания отдает приоритет быстро загружаемым страницам и открыто заявила о своей позиции. Об этом даже есть отдельный пост в блоге Google.

Компания так сильно заботится о скорости сайтов, что в 2011 году они создали инструмент под названием Page Speed ​​Online (сейчас называется PageSpeed Insights), который позволяет проверять скорость загрузки сайта.

После анализа вам будет предоставлены полезные советы по оптимизации страницы.

Немного исследований

Google однажды спросил пользователей, сколько результатов поиска они хотели бы видеть на странице выдачи – 10 или 30? Подавляющее большинство выбрало последний вариант, который в то время казался хорошей идеей, если не учитывать тот момент, что, когда Google внес изменение, трафик упал на 20%. Напрашивается вопрос: ну и зачем? Страница с 30-ю результатами заняла полсекунды для загрузки. Казалось бы, совсем ерунда, но полсекунды оказывают существенное влияние, когда дело доходит до скорости загрузки страницы.

В качестве другого примера влияния скорости сайта на посетителей, рассмотрим исследование, проведенное Akamai и Gomez.com. Оно показало, что пользователи готовы ждать не более 2 секунд, пока загрузится сайт. Если он не загрузился в течение 3 секунд, то посетитель готов перейти на другой. С точки зрения Google это означает, что сайты с более высокой скоростью загрузки будут доступны быстрее для пользователя и, следовательно, будут являться более релевантными – отсюда и включение скорости сайта в алгоритм ранжирования.

Какой должна быть скорость загрузки сайта?

В идеале, конечно, чем быстрее – тем лучше, но есть цифры, от которых нужно отталкиваться:

1-2 секунды – очень хорошо;

3-4 секунды – хорошо;

4-5 секунд – удовлетворительно, но стоит поработать над оптимизацией;

дольше 6 секунд – дела плохи, нужно серьезно заняться сайтом.

Как проверить время ответа сервера?

Советую использовать самые удобные и понятные сервисы:

PageSpeed Insights – о нем уже поговорили выше. Максимально прост и эффективен для анализа скорости загрузки сайта.

WebPageTest – англоязычный сервис, предоставляет очень подробную информацию.

Pingdom Website Speed Test – еще один англоязычный сервис с интуитивно понятным и ярким интерфейсом.

Способы увеличить скорость загрузки страницы

1. Оптимизируйте изображения

Картинки или фото порой могут занимать до 80% от всего объема страницы, поэтому необходимо их оптимизировать, уменьшая размер. Вот некоторые варианты оптимизации:

Используйте для публикации на сайте изображения в формате JPEG и откажитесь от формата PNG там, где это не является необходимостью. Дело в том, что формат JPEG допускает вполне существенное сжатие картинок без потери качества.

Уменьшайте размер картинок (ширину и высоту). Если вы используете картинку товара шириной около 6000px, то можете уверенно уменьшать до 2000-1800px, этого будет вполне достаточно.

Делайте превью (маленькие изображения) к большим картинкам.

2. Используйте сжатие страниц сайта

Очевидно, чем «тяжелее» контент на странице, тем дольше она загружается. Используйте сжатие данных по протоколу HTTP, например, с помощью технологии zip или gzip. Это поможет сократить размер используемых ресурсов (CSS, JavaScript) до 50%.

3. Оптимизируйте работу базы данных

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

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

4. Нехватка ресурсов сервера (хостинга)

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

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

5. Ненужные плагины или код

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

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

Не будьте слоупоками

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

Источник: http://www.obrazstroy.ru/blog/skorost-sayta/

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

У каждого интернет-магазина своя аудитория, и в каждой индустрии есть свои особенности. Специалисты компании Blue Triangle Technologies, поставщика услуг в области повышения производительности сайтов, провели исследование, как влияет производительность сайта на конверсию на 4-х разных сайтах из разных индустрий.

Исследование проводилось в течение ноября 2015 года. Объем транзакций, который принял участие в исследовании:

  • Посетителей сайтов: более 36 миллионов
  • Конверсий: более 1 миллиона
  • Объем продаж: более 305 млн долларов

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

Интернет-магазин № 1: одежда из ценового сегмента «highend»

Объем продаж за время исследования: более 75 млн долларов

Посетителей: 6,5 миллионов

На графике показаны распределение посетителей по времени загрузки страниц – главной и страницы с карточкой товара (сплошные области показывают объем трафика – правая шкала) и конверсии этих страниц (линии – левая шкала).

Как видно, производительность действительно важна для этого сайта. Разница в конверсии «быстрых» и «медленных» страниц составляет около 2-х раз для карточек товара.

Оказалось, что время загрузки влияет не только на конверсию, но и на размер покупки.

Пиковые показатели дохода на 1 покупателя приходятся на время загрузки в 1,5 секунд и составляют 224 доллара для главной страницы и 240 долларов для карточки товара.

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

Сокращение времени загрузки всего на 0,1 секунды дает:

  • Для главной страницы: прирост выручки в 419 тыс. долларов в месяц. Это дало бы +0,6% к месячной выручке
  • Для карточек товара: прирост выручки в 925 тыс. долларов в месяц (+1,2% к месячной выручке)

Интернет-магазин № 2: бытовая техника и электроника

Объем продаж за время исследования: более 100 млн долларов

Посетителей: 18,5 миллионов

Что интересно в этом случае — падение конверсии и главной страницы и карточки товара не останавливается после достижения некоторого предела и стабильно падает с увеличением времени загрузки. Разница в конверсии между «быстрыми» и «медленными» страницами также может превышать 2 раза.

Пиковые показатели дохода на 1 покупателя приходятся на время загрузки в 1 секунду и составляют 464 доллара для главной страницы и 403 доллара для карточки товара.

Сокращение времени загрузки на 0,1 секунды дает:

  • Для главной страницы: прирост выручки в 3,6 млн долларов в месяц (+2,1% к месячной выручке)
  • Для карточек товара: прирост выручки в 2,1 млн долларов в месяц (+3,5% к месячной выручке)

Интернет-магазин № 3: украшения и аксессуары

Объем продаж за время исследования: более 550 тыс. долларов

Посетителей: 272 тысячи

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

Пиковые показатели дохода на 1 покупателя приходятся на время загрузки в 1,1 секунды для главной страницы и в 6 секунд для карточки товара и составляют 110 и 101 доллар соответственно.

Сокращение времени загрузки на 0,1 секунды дает в случае с этим сайтом не такие уж значительные цифры:

  • Для главной страницы: прирост выручки в 3,9 тыс. долларов в месяц (+0,7% к месячной выручке)
  • Для карточек товара: прирост выручки в 8,7 тыс. долларов в месяц (+1,6% к месячной выручке)

Интернет-магазин № 4: спортивные товары

Объем продаж за время исследования: более 61 млн долларов

Посетителей: более 10 миллионов

Пиковые показатели дохода на 1 покупателя приходятся на время загрузки в 2,5 секунды для главной страницы и в 1,5 секунды для карточки товара и составляют 117 и 130 долларов соответственно.

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

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

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

Сокращение времени загрузки на 0,1 секунды дает:

  • Для карточек товара: прирост выручки в 1,2 млн долларов в месяц (+2% к месячной выручке)
  • Для главной страницы прирост выручки от ускорения загрузки отсутствует.

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

Поэтому кажется неразумным предлагать какие-то «правила», основанные на средних величинах, наподобие «карточка товара должна загружаться за 1,5 секунды». Очевидно, что это очень сильно зависит от каждого конкретного сайта.

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

Источник: http://www.shopolog.ru/metodichka/analytics/kak-0-1-sekundy-uskoreniya-zagruzki-sayta-mozhet-dat-milliony-dollarov-dopolnitel/

Как скорость загрузки страниц сайта влияет на SEO и продажи

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

Как определить скорость загрузки страниц сайта

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

  • GTmetrix
  • Google page speed
  • Google Analytics

С помощью данных инструментов вы сможете проанализировать страницы на своем сайте и получить рекомендации по их улучшению.

Google page speed

Для чего это необходимо

Многие скажу, а в чем разница загружается сайт 1-2 секунды или 5-10, пользователь никуда не денется пусть подождет если ему нужно. Но на практике и проведенных исследованиях низкая скорость загрузки страниц отрицательно влияет на:

  • Продвижение сайта поисковой выдаче
  • Показатель отказов
  • Доверия пользователя к бренду компании
  • Конверсию сайта

По проведенным исследование 47% пользователей закроют сайт если страница будет загружаться дольше 2 секунд. Порядка 40% покинут сайт который загружается более 3 секунд. Даже 1 секунда в задержке может снизить конверсию на 7-10%, а это не малые цифры.

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

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

Если вы дорожите бредом своей компании и намерены его развивать, то подумает о том, что 40% пользователей покинут сайт если время загрузки, составит 2-3 секунды. Это критично скажется на первом знакомстве с вами, если новые посетители не дождались загрузки страницы, то они скорей всего больше не вернутся к вам.

Как улучшить скорость загрузки страниц сайта

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

  • Выбор хостинг провайдера. Подойдите внимательно к этому вопросу, не стоит размещать сайт на первом понравившемся. Проведите исследование или обратитесь к независимым источникам, которые анализировали работы различных хостинг провайдеров, в сети таких данных не мало.
  • Используйте кэширование. Многие веб-разработчики часто использую кэширование браузера с целью улучшить время загрузки сайта. Также хорошие хостинг провайдеры предоставляют кэширование на уровне веб сервера.
  • Сжатие изображений. Все изображения должны быть оптимизированы и уменьшены до необходимого размера. Сжимайте изображения, чтобы уменьшить их размер в байтах, но при этом не потерять качество картинки.
  • Удаление лишнего кода. Здесь вам потребуется опытный разработчик, который сможет оптимизировать код и свести его к минимуму. Также стоит обратить внимание на выбор CMS, некоторые системы просто не могут работать без лишнего мусорного кода.
  • Отложенная загрузка. Позволяет загружать элементы сайта, расположенные ниже на страницы по мере того как пользователь прокручивает страницу. Объекты не загружаются пока пользователь не перейдет в нужный раздел.
  • AMP версия сайта. Если у вашей компании более 50% пользователей заходят на сайт с мобильных устройств, то рекомендуется рассмотреть внедрение AMP.

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

Источник: http://seoupdate.ru/blog/skorost-zagruzki-stranic-sajta

Оптимизация скорости загрузки сайта от А до Я

Вступление

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

Как пишут специалисты Яндекса – пользователи не готовы ждать больше 2 секунд загрузки сайта в мобильных приложениях. Поэтому очень важно оценивать скорость загрузки не только с персональных компьютеров, а в первую очередь с мобильных устройств.

ИТОГО: скорость загрузки напрямую влияет на поведенческие факторы (показатели отказов, совершение конверсии и т.д), которые в свою очередь являются важнейшими факторами ранжирования сайта в поисковых системах. Также важно понимать, что улучшив этот показатель, увеличится не только трафик и конверсии из поисковых систем, но также и общие показатели конверсии сайта с других источников привлечения трафика (рекламы, внешних ссылок и т.д.).

Оценка скорости загрузки сайта — инструменты

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

К внутренним относятся сервисы, доступ к которым можно получить, имея доступ к сайту по ftp, хостингу либо к административной панели CMS.

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

Внутренние инструменты

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

Виджет мониторинга скорости загрузки сайта

  • Яндекс Вебмастер. Если сайт добавлен в панель вебмастера, по ссылке “Сводка” можно посмотреть индекс скорости загрузки сайта

Оценка скорости загрузки сайта через панель Вебмастера Яндекс

  • Google Analytics. Счетчик Google analytics также позволяет проанализировать скорость загрузки сайта. Зайти в данный отчет можно через левое меню: Поведение->Скорость загрузки сайта->Время загрузки страниц:

Определение скорости загрузки сайта в Google Analitis

Здесь же в Google Analitics можно оценить время загрузки отдельных страниц (Поведение->Скорость загрузки сайта->Ускорение загрузки):

Оценка скорости загрузки отдельных страниц через Google Analitis

  • Google Вебмастер. Как и в случае с вебмастером Яндекс, в Google Webmaster выводится виджет по оценке скорости загрузки сайта. Загружается данный отчет через ссылку в левом меню – “Статистика сканирования”:

Отчет загрузки страницы в Google Webmaster

  • Модули и плагины CMS. Для популярных CMS существует множество плагинов и модулей, которые позволяют измерять и выводить в различных видах показатели скорости загрузки сайта. Некоторые подобные модули встроены в CMS по умолчанию.

Оценка производительности в административной панели CMS Битрикс

Внешние инструменты

Внешних инструментов и веб-сервисов для оценки скорости загрузки существует великое множество, как российских, так и зарубежных разработчиков. Мы используем в своей работе https://tools.pingdom.com/ и https://developers.google.com/speed/pagespeed/insights/

Подробно останавливаться на них не буду, отмечу лишь, что pingdom позволяет проверять скорость загрузки из нескольких стран, а pagespeed является разработкой Google, данные которой используются для оценки скорости в Google Analytics. Также стоит отметить, что данные инструменты детально показывают, что мешает более быстрой загрузке сайта, и, что очень важно, отдельно оценивают скорость загрузки для ПК и для мобильных устройств.

Детальная оценка скорости загрузки отдельных элементов страницы в pagespeed

Оптимизация скорости загрузки

Основными факторами, влияющими на скорость загрузки страницы, являются:

  • Настройка и производительность сервера
  • Оптимизация изображений
  • Оптимизация кода и базы данных
  • Оптимизация загрузки внешних скриптов
  • Оптимизация контента
  • Оптимизация нагрузки на сайт, кэширование
  • Использование внешних решений – CDN, турбо страниц, страниц AMP

Более подробно о каждом из факторов и способах их оптимизации – ниже.

Настройка и производительность сервера

Скорость обработки и передачи информации от сервера пользователю во многом зависит от производительности сервера, и от его настроек. В своей работе мы перепробовали множество решений, и в зависимости от целей, CMS сайта, посещаемости, наличия поддоменов и т.д. подходят разные решения – уникального нет. В своей работе мы чаще всего используем виртуальные серверы от компаний rusonyx.ru и beget.com. Но и они имеют свои недостатки, поэтому прежде чем выбирать хостинг для своего сайта – следует изучить технические возможности сайта, а также проконсультироваться у соответствующих специалистов.

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

Наиболее распространенный фактор, замедляющий работу – это недостаточная оптимизация изображений на страницах сайта (например – в карточках товара). Основными способами оптимизации изображений является оптимизация размеров, оптимизация сжатия и формат изображений.

Оптимизация размеров изображений

Одной из причин долгой загрузки страницы является то, что на сайт добавляются изображения, размеры которых не соответствуют размерам блоков, в которых эти изображения выводятся. Например, в слайдер на главной странице загружается изображение 6000×4000 пикселей. При стандартном разрешении экрана в 1280×700 пикселей и 1920×1080 в Full HD.

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

Оптимизация сжатия изображений

Многие изображения можно сжать без потери качества. Для этого существует множество десктопных программ и онлайн сервисов. Мы в своей работе пользуемся сервисом https://www.iloveimg.com/ru/compress-image, который позволяет сжать изображение до 80%.

Использование современных форматов для изображений

Для более быстрой загрузки страниц сайта рекомендуется использовать современные форматы изображений. Google рекомендует использовать форматы JPEG 2000, JPEG XR и WebP (более подробно — https://web.dev/uses-webp-images/)

Оптимизация кода и базы данных

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

  • Версия php. На некоторых сайтах до сих пор можно наблюдать использование старой версии php 5. Обновление до 7-ой версии по некоторым оценкам увеличивает производительность кода в несколько раз.
  • Скрипты js и стили css. Загрузка скриптов и стилей, которые не используются на страницах сайта, также может привести к потере скорости при загрузке сайта. Эта “болезнь” многих популярных CMS, где по умолчанию включен функционал и соответственно загружаются файлы, которые не используются сайтом. Проверить, какие скрипты не используется можно с помощью консоли браузера либо сторонних сервисов.

Также можно сократить объем используемых скриптов, и сжать используемые сайтом файлы стилей css. Для популярных CMS для оптимизации кода настройки сайта существует множество модулей и плагинов. Например, для CMS WordPress данным плагином является Clearfy Pro

Оптимизация кода с помощью плагина Clearfy Pro в CMS WordPress

  • Базы данных. Оптимизация баз данных для сайтов также является одним из факторов, с помощью которого можно увеличить скорость загрузки сайта. Для каждой CMS настройки БД индивидуальны, и для многих существуют специальные плагины, установка которых позволяет оптимизировать базу данных без привлечения специалистов. Например, вышеупомянутый плагин Clearfy Pro для WordPress позволяет отключить ревизии*.

*Ревизии — при сохранении и обновлении любой записи или страницы создается её копия (ревизия), которую в будущем можно посмотреть или восстановить. Но со временем большое количество таких ревизий (а их может быть десятки для каждой страницы) забивают базу данных, расходуя место и замедляя работу. Обычно достаточно хранить до 3-5 последних ревизий.

Отключение ревизий в CMS WordPress с помощью плагина Clearfy Pro

Оптимизация загрузки внешних скриптов

В значительной мере на скорость загрузки сайта может повлиять долгая загрузка скриптов js с внешних источников. Это касается, например, Яндекс метрики, Гугл аналитекс, онлайн-консультанта и других внешних сервисов. Проверить какие скрипты грузятся, и сколько времени занимает их загрузка можно через сервисы https://tools.pingdom.com/ и https://developers.google.com/speed/pagespeed/insights/

Решениями подобной проблемы являются:

    Вынесение внешних скриптов в конец кода страницы (перед тегом

Источник: http://kupislova.ru/blog/optimizaciya-skorosti-zagruzki-sayta-ot-a-do-ya

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

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

  • 53% посетителей мобильных сайтов уходят, если загрузка идёт дольше 3 секунд (согласно исследованию DoubleClick);
  • увеличение времени загрузки с 1 до 7 секунд повышает вероятность отказа посетителей на 113% (согласно исследованию think with Google);
  • рост числа элементов страницы (текст, картинки, заголовки) с 400 до 6000 увеличивает показатель отказов на 95%.

А вот что показало свежее исследование Google:

  • 46% пользователей смартфонов утверждают, что их раздражает медленная загрузка сайтов;
  • 50% пользователей полагают, что нормальное время загрузки сайта – до 2 секунд;
  • конверсия может снизиться до 20% за каждую лишнюю секунду загрузки.

    Зависимость числа отказов от скорости загрузки

    Скорость 3G/4G-интернета часто нестабильна, а если «тормозит» ещё и сайт, больше половины людей сразу его закрывают. Пользователи компьютеров и ноутбуков тоже не рады долгой загрузке.

    На что и как влияет скорость загрузки?

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

    К тому же Яндекс и Google постепенно снижают позиции медленных сайтов в общей и мобильной выдаче.

    Технические этапы загрузки страницы

    Скорость загрузки важна не только для поисковиков. Facebook учитывает её при показе рекламы – чем шустрее мобильный сайт, тем активнее откручиваются объявления.

    Чем быстрее загрузка, тем выше вероятность того, что сайт займёт хорошие позиции в поисковой выдаче.

    Как измерить скорость загрузки?

    Это можно сделать в специальных сервисах. Для примера возьмём наш сайт http://www.altera-media.com.

      Test My Site от Google. Этот сервис проверяет скорость загрузки мобильной версии сайта.

      Test My Site показывает время полной загрузки и предполагает, какой процент посетителей мы теряем из-за задержки

      Pingdom. Показывает время загрузки и вес десктопной версии сайта. Тут же сравнивает параметры и сообщает, как у нас дела относительно других сайтов, протестированных в этом же сервисе.

      Мы быстрее, чем 77% сайтов – ура!

    • Pr-cy. Здесь можно проверить скорость отдельно для компьютера и телефона. После проверки сервис посоветует, как и что лучше оптимизировать.
    • GTmetrix. Показывает время полной загрузки, общий вес страницы и небольшой отчёт о производительности.
    • Google PageSpeed. Сервис проверяет скорость загрузки обычной и мобильной версии. Он выставляет сайту оценку по 100-балльной шкале и предлагает идеи по оптимизации. Получается своеобразный чек-лист.

      Рекомендаций довольно много. Некоторые полезные, другие спорные

      WebPageTest. Сервис для тех, кто любит разбираться в настройках. Тут можно выбрать устройство или браузер для теста и привязать их к местоположению. Посмотрите, как быстро грузится сайт в браузере Chrome в Индии или на Samsung Galaxy S7 в Далласе.

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

      Результаты проверки в разных сервисах могут различаться. Это нормально. «Прогоните» сайт через все, сравните итоговые значения и выведите среднее.

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

      Уменьшить размер страниц

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

      Размер данных можно уменьшить на 64% и более – это ускорит загрузку

      Уменьшить вес изображений

      Проще всего сделать это в сервисах TinyJPG или Compressor. Если пользуетесь «Фотошопом», выберите опцию «Сохранить для Web» (Ctrl+Shift+Alt+S) и установите качество 50-80%. Вес картинок в высоком разрешении часто уменьшается в несколько раз. В отдельных случаях – в 10 раз и более.

      TinyJPG уменьшает вес изображений на 40-70% и даже больше. В бесплатной версии можно загружать только картинки до 5 Мб

      Ненужные изображения можно удалить. Однако удалять всё подряд не надо – картинки, скриншоты и фотографии помогают лучше воспринимать текст. Они придают контенту на странице дополнительную ценность.

      Убрать всё лишнее

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

      • куски кода от сторонних ресурсов, сервисов, дополнений;
      • дублированные скрипты;
      • ненужные плагины, виджеты и формы внутри CMS.

      Кстати, оценить ценность уже установленных на WordPress плагинов можно с помощью ещё одного плагина – Plugin Performance Profiler. Найдите бесполезные и удалите.

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

      Отказаться от JavaScript

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

      Если нельзя удалить, сократите для JavaScript и CSS размер кода. Будут полезны эти сервисы:

      Они убирают из кода лишние символы и ускоряют его загрузку.

      Использовать кэширование данных

      Кэширование уменьшает скорость загрузки при втором и последующих посещениях. Человек заходит на сайт – и основные элементы страниц сохраняются в кэше браузера. Когда он зайдёт в следующий раз, данные не будут загружаться снова. Это хорошо работает со статическими страницами.

      Подключить кэширование можно в своей CMS, у хостинг-провайдера или на стороне сервера.

      Использовать CDN – сервисы доставки контента

      Если ваш сайт расположен на московском хостинге, а многие посетители приходят из регионов, то скорость отклика сервера немного проседает. CDN решает эту проблему – кэширует ваш контент на многочисленных edge-серверах. В результате изображения, CSS и JavaScripts загружаются с того сервера, который физически расположен ближе к посетителю.

      Содержимое сайта кэшируется внутри сети CDN – конечная скорость загрузки растёт

      Вот несколько известных CDN:

      Перейти на выделенный сервер

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

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

      А есть компромисс – VDS (выделенный виртуальный сервер). Суть VDS та же: вы размещаете на нём свой сайт без «соседей». На одном физическом сервере располагается несколько виртуальных. Они работают немного медленнее физического, но обойдутся дешевле.

      Проблема в том, что виртуальные выделенные серверы (как и физические) нужно настраивать и администрировать. Это сложно, надо привлекать специалиста.

      VDS часто предоставляют хостинг-провайдеры. Мы используем выделенные серверы компании Firstvds.

      Использовать AMP – ускоренные мобильные страницы

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

      У таких страниц очень высокая скорость загрузки – обычно не больше 2-3 секунд. Но есть и минусы: урезанная функциональность, блеклый внешний вид. AMP плохо подходит для e-commerce. В основном эту технологию используют блоги, новостные порталы и информационные сайты.

      • в WordPress создавать AMP можно в несколько кликов через специальный плагин;
      • в Joomla – через плагин wbAMP.

      Ускоренные страницы часто попадают в «карусель» выдачи Google. Вы получаете больше трафика

      На страницы AMP приходит много посетителей из Google. В Яндексе они ранжируются хуже.

      Дополнительные рекомендации

          • Перенесите скрипты из верхних секций страницы в нижние – так они не будут «отъедать» часть времени загрузки. А вот CSS-файлы могут быть в хэдере.
          • Отправьте тяжёлые файлы на сторонние сервисы. Лучше залить видео на YouTube и вставить на страницу код, чем загружать ролик на сайт.
          • Уберите 301-редиректы и сократительные ссылки. Распознать все редиректы поможет сервис Screaming Frog.

      Если сайт тяжёлый и убрать с него всю «красоту» никак нельзя, используйте прогресс-бар. Он убирает фактор неопределённости, поэтому люди могут ждать загрузки в несколько раз дольше. Это компромиссный способ – проблему не решит, но поможет сократить число отказов.

      Пример симпатичного прогресс-бара. Ещё чуть-чуть и страница загрузится

      Что в итоге?

          1. Чем выше скорость загрузки сайта, тем лучше для поведенческих факторов и продвижения в поиске. Идеально, если сайт загружается за 1-2 секунды.
          2. Чтобы ускорить сайт, нужно убрать всё лишнее и сфокусироваться на простоте. Используйте меньше тяжёлых графических элементов. Оптимизируйте всё, что можно (вес изображений и страницы, код CSS).
          3. Скорость нужно измерять регулярно. Если она начнёт падать, вы это вовремя заметите и сможете найти причину.

      Даже простая оптимизация страниц и графики поможет отыграть несколько драгоценных секунд. Используйте хотя бы несколько способов – не теряйте посетителей.

      Источник: http://promo.altera-media.com/information/expert/8-sposobov-uvelichit-skorost-zagruzki-sajta/

      Скорость загрузки страницы: метрики, инструменты и способы повышения

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

      Из статьи вы узнаете:

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

      Для тех, кто хоть немного знаком с SEO, не новость, что скорость загрузки страницы является фактором ранжирования. Google официально объявил об этом еще в 2010 году, правда, тогда этот фактор влиял только на десктопную выдачу. С 2018 года скорость загрузки стала фактором ранжирования и в мобильной выдаче.

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

      Есть масса исследований, которые это подтверждают. Например, в аналитическом отчете Akamai указано, что если страница открывается более 3-х секунд, то 53 % пользователей ее покинут, не дождавшись загрузки. Выглядит это так: пользователь перешел по URL, подгрузились элементы из раздела , счетчик зафиксировал переход, но контент не загрузился, и человек ушел. В итоге трафика нет, конверсии нет, и в пассиве сайта лишь очередной отказ.

      Именно поэтому важно работать над ускорением сайта. И это головная боль не только SEO-специалистов, которым нужны позиции, но и маркетологов, и владельцев бизнеса, которым нужны конверсии. Разберемся, из каких этапов состоит загрузка страницы и как ее оптимизировать.

      1 Последовательность загрузки страницы

      Упрощенно этапы загрузки страницы выглядят так:

      1. Ввод адреса страницы в браузере и обработка DNS-запроса к серверу, на котором размещается площадка.
      2. Обработка HTTP-переадресаций при загрузке страницы.
      3. Подключение браузера к серверу.
      4. Ответ сервера. Данные передаются от HTTP-сервера к браузеру.
      5. Обработка загруженной информации браузером и отрисовка элементов.
      6. Полная загрузка страницы (со всеми скриптами, картинками, стилями и т. д.).

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

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

      2 Скорость загрузки страницы: основные метрики

      Раньше для оценки производительности сайта учитывались 2 события:

      • DOM Content Loaded (DCL). Время, когда страница загрузилась, а скрипты только начали выполняться.
      • Loaded. Время, когда страница полностью загружена и с ней можно взаимодействовать.

      Но с помощью этих двух метрик нельзя провести развернутый анализ производительности сайта и выявить все узкие места. Эту проблему решили новые метрики, которые сейчас используют многие сервисы, в частности, Google.

      Первая отрисовка (FP). Это время, спустя которое пользователь видит белую пустую страницу в браузере впервые. Любое первоначальное изменение на экране считается первой отрисовкой.

      Первая отрисовка контента (FCP). Время, спустя которое на экране появляется первый контент. Это может быть часть панели поиска, фрагмент текста или изображения. FCP помогает найти проблемы при загрузке сайта на уровне соединения. Также длительная первая загрузка контента указывает на то, что подгружаемые ресурсы очень тяжелые и их доставка требует времени.

      Это очень важный показатель, по которому пользователь понимает, что сайт начал загрузку. Нормативные значения такие (согласно Google):

      • высокая скорость — менее 1 с;
      • средняя скорость — от 1 до 2,5 с;
      • низкая скорость — более 2,5 с.

      Первая значимая отрисовка (FMP). Время, спустя которое весь основной контент появляется на экране. Таким контентом считается:

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

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

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

      Время загрузки для взаимодействия (TTI). Метрика показывает, сколько времени требуется странице, чтобы стать доступной к взаимодействию (интерактивной). Интерактивной страница становится при таких условиях:

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

      Первая задержка ввода (FID). Это период времени от первого взаимодействия пользователя с вашим сайтом (клик по ссылке, кнопке, использование элемента управления на основе JavaScript) до реакции браузера на это взаимодействие.

      • высокая скорость — менее 50 мс;
      • средняя скорость — от 50 до 250 мс;
      • низкая скорость — более 250 мс.

      Индекс скорости (SI). Показывает, насколько быстро страница заполняется видимым контентом. Чем меньше значение этого индекса, тем лучше.

      Визуально готово (VR). Эта метрика в анализе производительности страницы показывает время, когда страница на 100 % загружена и готова к использованию.

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

      3 Инструменты для проверки скорости загрузки страницы

      Оценить скорость загрузки можно с помощью специальных сервисов.

      Google PageSpeed Insights

      Самый популярный инструмент измерения и оптимизации времени загрузки страницы — Google PageSpeed Insights. В 2018 году сервис обновили — теперь в нем используются данные Lighthouse (на этом расширении для Google Chrome мы еще остановимся).

      Инструмент находится в свободном доступе. Для работы достаточно ввести URL проверяемой страницы и нажать кнопку «Анализировать». Данные выдаются в разрезе десктопной и мобильной версии.

      Страница в сервисе оценивается по 6 метрикам. Эти данные сравниваются с показателями лучших сайтов и переводятся в баллы.

      Шкала выглядит так:

      • низкая скорость (красный) — 0-49;
      • средняя (оранжевый) — 50-89;
      • высокая (зеленый) — 90-100.

      Инструмент дает рекомендации, как исправить ошибки, чтобы оптимизировать скорость загрузки (заменить формат изображений, включить сжатие текста, уменьшить код и т. д.) и показывает, сколько времени будет сэкономлено при исправлении ошибок.

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

      Lighthouse

      Бесплатное расширение Lighthouse для браузера Google Chrome используют для выявления ошибок на сайте. С помощью этого инструмента можно провести не только анализ скорости загрузки страницы, но и юзабилити сайта, и SEO-оптимизации.

      После установки расширения значок Lighthouse появляется в верхнем углу браузера справа. Чтобы провести аудит, надо открыть интересующую страницу в браузере и нажать кнопку «Generate report».

      Отчет открывается в новом окне браузера и выглядит так:

      Страница оценивается по пяти направлениям:

      • Performance. Оценивается скорость загрузки страницы. Именно эти данные подтягиваются в сервис PageSpeed Insights.
      • Accessibility. Показывает уровень доступности страницы для пользователей с разными потребностями. При расчете анализируется ряд метрик, учитывающих контрастность цветов, адаптацию сайта под приложения для чтения с экрана и т. д.
      • Best Practices. Показывает, насколько сайт соответствует лучшим мировым практикам. Среди пунктов аудита, например, наличие HTTPS, HTTP/2, правильное соотношение сторон изображений и т. п.
      • SEO. Показывает уровень оптимизации страницы под требования поиска Google.
      • PWA. Показатель оценивает соответствие страницы стандартам Progressive Web Ap.

      Lighthouse выдает развернутый отчет по каждому направлению и рекомендации по улучшению.

      Web Page Test

      Еще один удобный сервис для измерения скорости сайта — Web Page Test. Для высокой точности результатов он проводит три проверки подряд и предлагает сравнить результаты каждой из них. В настройках можно выбрать устройство и местоположение сервера.

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

      4 Как повысить скорость загрузки сайта

      Есть много подходов, позволяющих повысить скорость загрузки страниц. Остановимся на тех, которые сможет самостоятельно внедрить каждый, кто обладает базовыми знаниями HTML, CSS и JavaScript. Практика показывает, что описанных способов вполне достаточно для перехода в «оранжевую» и даже «зеленую» зону PageSpeed Insights.

      Переход на PHP 7.2

      Переход на PHP 7.2 позволяет не только увеличить скорость загрузки страниц. Если у вас сайт на WordPress, это необходимая мера для обеспечения безопасности, ведь версия 7.0 лишена поддержки безопасности, 7.1 — активной поддержки, 5.6 — любой поддержки.

      Перейти на PHP 7.2 просто. Делается это в панели управления хостингом. Например, в панели Plesk необходимо зайти в раздел «Настройки PHP», выбрать в выпадающем списке версию PHP и нажать «Применить».

      Серверное кэширование

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

      Есть много разных способов настроить кэширование, но самый простой и эффективный — с помощью файла .htacсess. Хранится он в корневой папке сайта. Откройте его и вставьте эти строки:

      Работа с файлом .htacсess требует аккуратности, поскольку малейшая ошибка может привести к поломке сайта. При отсутствии опыта рекомендуем обратиться к специалистам.

      Сроки кэширования отдельных типов данных можете корректировать. Главное, чтобы они были не слишком короткими, иначе метод перестанет быть эффективным.

      Уменьшение количества плагинов

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

      По его результатам обновите устаревшие и отключите неиспользуемые плагины. Кроме того, по возможности реализуйте функции плагинов с помощью PHP или команд в .htacсess (например, для серверного кэширования используйте не плагин, а команды в .htaccess).

      Правильное расположение JavaScript и CSS

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

      CSS, наоборот, необходимо располагать в самом верху. Так сразу после начала загрузки страницы начнут отображаться стили, и будет больше шансов удержать пользователя. Более этого, критически важные стили (например, отвечающие за отрисовку шапки сайта и основного контента) Google рекомендует прописывать в разделе с помощью тега . Остальные же стили — подгружать из файла (style.css и др.).

      Оптимизация шрифтов

      Для дизайна сайтов принято использовать веб-шрифты. Но практика показывает, что они плохо влияют на скорость отрисовки страницы. Чтобы повысить скорость загрузки страниц, рекомендуется использовать шрифты в формате WOFF2.

      Сжатие изображений

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

      Для сжатия есть бесплатные сервисы TinyPNG, Compressor.io, Optimizilla. Изображения уменьшаются в размере от 30-40 % до 80 %, при этом их качество заметно не страдает.

      Сжатие данных

      Чтобы информация быстрее передавалась от сервера браузеру, ее тоже надо сжать. Самый простой способ — настроить GZIP-сжатие. Для этого в файле .htaccess пропишите такие строки:

      Проверить, настроено ли сжатие на вашем сайте, можно с помощью сервиса Ciox.

      Сокращение размера кода CSS и JavaScript

      Коды CSS и JavaScript довольно громоздкие. Чтобы сделать их меньше, необходимо удалить лишние символы — пробелы и комментарии. Плагины лучше не использовать. Для сжатия CSS воспользуйтесь сервисом CSS Compressor. Скопируйте код из файла style.css или другого и вставьте его в поле «CSS Source Code Input». Затем выберите уровень сжатия (Compression Level) и нажмите «Compress». Скопируйте полученный код и замените им старый.

      Для сжатия JavaScript есть аналогичный сервис — JavaScript Compressor.

      Заключение

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

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

      Хотите больше узнать о SEO-продвижении? Запишитесь на интенсивные курсы от обучающего центра Cybermarketing. За 8 занятий вы пройдете путь от основ SEO до внутренней и внешней оптимизации, а также аналитики SEO.

      Источник: http://blog.cybermarketing.ru/skorost-zagruzki-stranicy-metriki-instrumenty-i-sposoby-povysheniya/

      Разгоняем скорость загрузки страниц до молниеносной — 12 технических советов

      Патрик Кертис, владелец крупного (MAU > 2 миллионов посещений в месяц) финансового коммьюнити Wall Street Oasis делится советами по технической оптимизации сайта.

      Каждый раз, когда специалисты проекта фокусируются на скорости загрузки страниц, Google щедро вознаграждает сайт поисковым трафиком. У WSO 80% всего трафика — органика, а общее число визитов за прошедший 2018 год превысило 24,5 миллионов.

      Давайте перенимать опыт коллег.

      Краткий обзор условий, в которых находится сайт Wall Street Oasis:

      ПО на сервере — LAMP

      Система кэширования — Varnish и Memcashed

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

      5 шагов, чтобы ускорить бэкенд

      Здесь под «бэкендом» понимается всё, что отвечает за хранение данных — база и серверы.

      Шаг 1. Убедитесь, что у вас настроен обратный прокси-сервер

      В WOS используют Varnish. Польза обратного прокси-сервера (в числе прочих) в том, что он уменьшает нагрузку на основные сервера и отвечает за кэширование статистического и динамического контента. Varnish кэшируют страницы полностью и поэтому молниеносно отображает их в браузере пользователя.

      Шаг 2. Расширьте TTL кэширования

      TTL — это «время жизни» кэша, то есть, время его хранения. Обычно от нескольких минут до недель. Увеличение особенно актуально для крупных сайтов (100 000+ страниц), и если контент меняется не часто.

      Можно выставить и бессрочное хранение, но это, само собой, засорит память. В WSO TTL установлен в две недели. Золотая середина.

      Шаг 3. Прогрейте кэш

      «Прогрев» — это возможность запустить процесс кэширования данных принудительно, не дожидаясь пока пользователи или поисковые роботы посетят страницы. Зачем? Документ отрисуется быстрее даже для новых страниц. В WSO «прогревают» все URL из карты сайта.

      На графике видно соотношение «попаданий в кэш» и общего числа запросов, то процент получения данных, соответствующих последним изменениям на странице. У ребят попадание в 93% — это здорово.

      Шаг 4. Сосредоточьтесь на самых медленных запросах

      При работе с MySQL можно отслеживать журнал медленных запросов. Полезно проводить такой аудит хотя бы раз в квартал. Для проверок используется также оператор EXPLAIN. Это важный инструмент для понимании того, насколько производительны MySQL-запросы.

      Конечно, это лучше оставить разбирающимся программистам. Но теперь вы сможете задать им вопрос: «Что EXPLAIN показывает? Давай оптимизировать!» 😉

      А ещё, держите скрипт-тюнер для настройки MySQL, он умеет давать рекомендации по повышению производительности и стабильности базы данных: https://github.com/major/MySQLTuner-perl

      Шаг 5. HTTP-заголовки

      Используйте HTTP/2 (бинарная версия протокола). Она направлена именно на повышение скорости загрузки страниц за счёт push-отправки данных. Например, протокол позволяет заранее подгружать данные, которые пользователь только собирается запросить (стили, скрипты, изображения).

      HTTP/2 даёт прирост в скорости около 30%.

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

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

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

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

      Почему JS замедляет скорость? Как правило, скрипты взаимодействуют с DOM и CSSOM (объектная модель документа и их визуализация), изменяя их. На преобразование уходит больше времени, чем на загрузку готовой HTML-разметки.

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

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

      Используйте WebP, где только возможно. Это формат сжатия изображений без потерь (lossy compression) и с потерей качества. Разумеется, первый метод предпочтительнее. Можно выгодно сэкономить на физическом размере изображения, а качество для невооруженного глаза при этом не пострадает.

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

      Также старайтесь использовать корректный размер — если вёрсткой предусмотрен размер картинки 200px на 200px, не нужно загружать изображение 1000px на 1000px. Такие мелочи серьёзно влияют на скорость, особенно если их много.

      Иногда полезно настроить lazy load — подгрузку контента при скроллинге. Вы каждый день наблюдаете пример такого функционала в лентах социальных сетей. Много контента лучше загружать постепенно. Для популярных CMS вроде WordPress есть плагины, позволяющие гибко отрегулировать lazy load. Например, порог threshold, отвечающий за количество пикселей, которые нужно проскроллить, чтобы начать подгружать картинки.

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

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

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

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

      Источник: http://tools.pixelplus.ru/news/speed-up-your-site