Скорость загрузки сайта — один из основных факторов конверсии. По статистике, собранной Google — если сайт грузится дольше 3 секунд — о серьезной конверсии говорить не приходится.
При возможности использовать высокоскоростное соединение и производительные устройства, мы все равно продолжаем сталкиваемся с медленными сайтами с которых есть огромное желание уйти не дожидаясь загрузки страницы. Чтобы избежать этого на своем сайте, требуется просмотреть его на наличие проблем и исправить их.
Получите бесплатно стратегию в которой мы:
- Проведем всесторонний аудит вашего сайта
- Покажем точки роста
- Составим прогноз роста трафика и лидов
Проверка производительности сайта
Сервис PageSpeed Insights от Google позволяет получить данные о производительности сайта как на мобильных устройствах, так и на компьютерах. Отчет представляется в виде общей оценки скорости, результатов имитации загрузки и предложений по оптимизации.
Google Page Speed Insights – это бесплатный онлайн инструмент для определения фактической производительности и выбора путей оптимизации скорости загрузки сайта. Не показывает абсолютную скорость страницы, а анализирует эффективность динамики загрузки и отрисовки в браузере клиента, и постоянно развивается. В настоящий момент выдает 2 оценки — для мобильных и для десктопов. Также выдает рекомендации для исправления. Про него ходят неподтвержденные слухи, что показатель, который сервис выдает при проверке сайта влияет на ранжирование сайта в органической выдаче google, но документальных подтверждений этому нет.
Имеет ряд особенностей, которые можно назвать “ложные срабатывания”, и его рекомендациям можно доверять по моим ощущения процентов на 80.
Оптимизация изображений
В первую очередь нужно убедиться, что на сайте не выводятся слишком большие изображения. Тут важно понимать, что у изображений есть такой показатель как физический размер (количество пикселей на каждой стороне) и размер файла (может изменяться в зависимости от дополнительной информации, которая хранится в файле (мета-теги, гео-теги, качество jpeg и проч.). При размещении фотографии 1200×800 в окне, составляющем половину экрана браузера, данная фотография факсически сначала полностью загружается на компьютер посетителя, а потом браузер посетителя ее сжимает, используя специальные инструкции, расположенные в CSS файле. CSS это язык разметки, который говорит браузеру какой элемент как отображать.
Сервис PageSpeed как раз помогает найти не оптимальные фотографии на странице и предлагает настроить их физический и файловый размер. В отчете он сообщает о том, что происходит изменение размера с помощью CSS , чего в идеале происходить не должно, так как сервер должен возвращать изображения сразу в нужном размере или что размер файлов фотографий не оптимален и его можно уменьшить, тем самым снизив нагрузку на сеть.
Во многих популярных CMS есть возможность изменить размер или обрезать изображение на лету, или встроены сервисы, которые делают несколько копий загружаемого через админку изображения под наиболее популярные размеры. Если в вашей CMS есть такая функция — нужно ее использовать.
Тут важно упомянуть, что на современных сайтах подавляющее большинство форматов изображений ограничивается всего двумя.
- JPG — файл, изображения сжатый особым образом, когда изображение описывается не координатами точек, составляющих его, а набором сложных функций, описывающих изображение.
- PNG — файл, также описывающий состав изображения функциями, но с возможностью построить не прямоугольное изображение, а с кривыми границами. Формат используется при расположении на сайте например фотографий авторов статьи с прозрачным фоном.
При оптимизации изображений также стоит проверить, используется ли формат JPG для изображений без прозрачности, так как PNG в этом случае будет оцениваться системой намного хуже. Если использование PNG необоснованно — надо менять такие фотографии на JPG формат, используя различные конвертеры изображений.
Перед вставкой изображения на сайт его следует сжать, чтобы не сильно нагружать страницу.
- Для PNG — файлов в этом поможет сервис TinyPNG, который позволяет сжимать изображения без потерь качества.
- Для JPG файлов есть оффлайн инструмент FastStoneImageViewer, который позволяет пакетно обрабатывать любое количество изображений
- Для массового сжатия существующих картинок на сайте существуют плагины для CMS, например EWWW Image Optimizer для WordPress.
Прозрачно покажем на сколько вы сможете увеличить продажи с сайта
- Проведем всесторонний аудит вашего сайт
- На основе аудита составим прогноз по трафику, конверсии, лидам и продажам
- Покажем прогнозные сроки окупаемости
Ресурсы, блокирующие отображение
Все современные популярные CMS строятся на 3 китах:
- php-код на сайте (работает на стороне сервера) — работает с данными и отдает браузеру HTML-код страниц
- js-обработчики (работают в браузере клиента) — выполняют возможность взаимодействия со страницей — нажатие кнопок, анимация, изменение части страницы без ее перезагрузки, все это выполняется средствами JS.
Для работы js-обработчиков — ваш браузер должен получить их код с сайта, поэтому часто в верхней части страницы подключается много ресурсов, которые не позволяют быстро отобразить первый экран, а при отображении первой страницы сайта они не требуются.
Для выполнения такой рекомендации PageSpeed необходимо максимальное количество js-обработчиков переносить в подвал страницы, в футер, для выполнения рекомендации поэтому переносим туда все скрипты, которые только можно, или выполняем их загрузку после загрузки страницы.
Как пример можно привести стандартную страницу контактов с картой проезда до офиса. Скрипт, который подгружает интерактивную карту на ваш сайт “выкачивает” данные с серверов google или yandex — смотря что вы выбираете при создании страницы. Только это действие на мобильных может занимать до 4 секунд, а в первые 3-5 секунд никто и никогда не начинает работать с картой. Для снижения времени загрузки страницы вместо интерактивной карты на страницу ставится ее “скриншот” в виде оптимизированного JPG файла, а скрипт мы незаметно подгружаем при наведении мышки на эту картинку.
Время ответа сервера
TTFB (Time To First Byte) — время получения первого байта страницы от сервера с момента отправки запроса браузером. Чем меньше время, тем быстрее начнет загружаться страница. По сути это время, которое сервер тратит на то, чтобы получить запрос, его обработать, подготовить ответ и отправить ответ получателю в виде HTML кода страницы.
Очевидно что на данный показатель влияют разные факторы.
Факторы, на которые не зависят от кода самого сайта:
- географическое расположение пользователя (Запрос из Австралии на сервер в России произойдет очевидно в разы медленнее чем из Москвы в Санкт-Петербург например.)
- Проблемы с сетевым оборудованием на серверах или у хостинг-провайдеров.
- Плохое соединение или проблемы с браузером на стороне пользователя
Факторы которые зависят от настроек сервера
- Оптимизация кеширования
- Выбор подходящего под контент сайта сервиса обработки запросов
- Оптимизация базы данных
Факторы которые зависят от кода самого сайта
- Неоптимизированные запросы к базе данных
- Не оптимальные циклы в коде
- Отсутствие кеширования части страниц
При работе с уменьшением показателя TTFB анализируются и настраиваются все вышеперечисленные факторы.
Например стандартная рекомендация Pagespeed по увеличению жизни кеша ресурсов в разы сократить TTFB. Сервер отправляет заголовки, которые позволяют браузеру кэшировать ресурсы, необходимые для отображения страницы. Таким образом все нужные файлы будут скачаны браузером один раз и при последующих переходах по сайту будут забираться из локального кэша браузера. Например для Apache в файл .htaccess добавляется что-то вроде этого:
| <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg «access plus 1 year» ExpiresByType image/jpeg «access plus 1 year» ExpiresByType image/gif «access plus 1 year» ExpiresByType image/png «access plus 1 year» ExpiresByType text/css «access plus 1 month» ExpiresByType application/pdf «access plus 1 month» ExpiresByType text/x-javascript «access plus 1 month» ExpiresByType application/x-shockwave-flash «access plus 1 month» ExpiresByType image/x-icon «access plus 1 year» ExpiresDefault «access plus 1 month» </IfModule> |
Тем самым браузер будет в курсе, что графику можно не запрашивать еще год, а стили стоит запросить у сервера через месяц.
Еще одним способом снижения TTFB является использование кэширования страниц. При данном методе серверу не приходится на каждый запрос страницы выполнять код, чтобы отдать ответ браузеру. Вместо этого результат выполнения записывается в файл и при новом запросе отдается уже готовый html. Для динамических частей страницы лучше использовать JS, либо искать возможность использовать динамическое кэширование. К примеру, для WordPress кэширование страниц позволяет реализовать плагин WP Super Cache в котором также есть возможность динамического кэширования.
Также важным моментом является использование сервером gzip сжатия: оно позволяет передавать данные меньшего размера, соответственно браузер быстрее получит запрашиваемые данные.
Надо смотреть и на код самого проекта. Например в Bitrix есть встроенный инструмент измерения скорости загрузки блоков сайта. На одном из проектов, средняя скорость загрузки которого составляла 12 секунд (а это был сайт детских товаров) было выявлено, что 10 секунд занимает построение 594 страниц с товарами, что совершенно не нужно пользователю. Код сайта был изменен и время загрузки удалось сократить до 3,5 секунд. Это сразу отразилось и на конверсии и на количестве посетителей и на органической выдаче.
На другом интернет магазине — при проведении комплексного анализа — выяснилось, что при имеющихся 6 Гигабайтах оперативной памяти база данных использует только 1. в результате выполнения настроек на сервере время TTFB сократилость с 1200 мс. до 250 мс.
В целом TTFB — один из самых важных и сложных для правки показателей при оценке скорости загрузки сайта. Нормой является показатель до 400 мс. на всех страницах сайта.
Расскажем как быстро увеличить продажи с сайта уже на третий месяц работ
Заполните форму, чтобы получить пошаговый план
- Разработаем персональную стратегию для вашего сайта
- Проведем в zoom разбор стратегии совместно с нашей командой
Количество HTTP запросов
HTTP — запрос — это обращение браузера к серверу. К примеру — 1 запрос — получить заголовки, 2 запрос — скачать CSS инструкции, 3 запрос — скачать JS код, 4 запрос — получить код сайта и проч.
Очевидно, что чем меньше таких запросов, тем быстрее загрузится страница, НО стандартные CMS всегда содержат 10-15 CSS файлов, 3-20 JS файлов в заголовках. Это как правило обуславливается установленными расширениями, плагинами и логикой работы самой CMS.
Чтобы улучшить этот показатель — необходимо для начала сократить количество подключаемых файлов CSS и JS путем объединения файлов каждого типа в один. Для этого в WordPress например есть специальные плагины, а в bitrix такой функционал встроен в ядро. Выполнив это вместо примерно 50 запросов мы получим только два.
Много мелких изображений (логотип, иконки элементов управления, иконки соц. сетей) также собирается в один файл, таким образом получив всего один запрос. Использовать можно, например, этот инструмент.
Так как отображение страницы сайта в начальный момент времени ограничено высотой экрана устройства, на котором ее просматривают — например это статья в блоге или листинг товаров в интернет-магазине, есть смысл не подгружать изображения/видео/другой контент, которые не видны на данный момент. В этом может помочь плагин jQuery Lazy, который позволяет подгружать контент только по мере скролла к нему.
Заключение
Повышение скорости работы сайта — очень интересный но трудоемкий процесс. Для его исполнения есть много различных инструментов и технологий, использование которых требует специальных навыков, знаний и опыта. Не существует волшебной кнопки “Ускорить сайт” которая бы работала так, как требуется. А учитывая важность этого показателя для бизнеса — оптимизацию скорости загрузки, на мой взгляд, надо проводить примерно 1 раз в пол-года.
С другой стороны фанатичное стремление к 100 баллам в Pagespeed тоже требует очень много ресурсов, но не дает нормально использовать сайт. Это как с тюнингом авто — после 8 секунд до 100 км/ч стоимость каждого следующего улучшения растет экспоненциально и накладывает ограничения на эксплуатационные характеристики автомобиля.
В настоящий момент “нормальным” мы считаем показатель 65/80 для мобильных и 85-100 для десктопов по оценке Pagespeed для всех страниц сайта.
При всей сложности и трудоемкости данной работы — в результате ее выполнения, используя аналогию с автомобилем, ваш сайт сможет нормально двигаться в потоке, сохраняя при этом свои функции бизнес-грузовика.
