Как увеличить скорость загрузки и количество лояльных пользователей
Сейчас много где натыкаешься на рассуждения, что скорость загрузки — это не такой уж важный фактор для успешного ранжирования сайта. Возможно, для поисковых систем он действительно не первостепенен, если только ресурс не грузится рекордные минут 10.
В первую очередь стоит обратить внимание на пользовательский опыт. Человек не захочет ждать, если страница сайта на смартфоне будет грузиться слишком долго, вероятнее всего, закроет её.
Так ли важна скорость
Начнём с того, что по сей день значительная часть SEO-специалистов продолжают публиковать успешные кейсы, в которых фигурирует оптимизация скорости загрузки сайта. И просевшие позиции при сокращении времени даже на тысячные доли секунды приводят к тому, что Яндекс реагирует положительно. И это всё в рамках того, что скорость давно списали со счетов как многие гуру оптимизации, так и сами представители поисковых систем. В Google регулярно говорят лишь о технической исправности и качественном контенте, что ближе всего к заботе о пользователях. Как раз удобство и удовлетворённость во время визитов на онлайн-площадки должны ставиться во главу угла.
Но это заявления с некоторой долей лукавства. Связана она в первую очередь с Page Experience, тем самым набором требований, ориентированных на удобство для пользователей. В этот перечень входит время загрузки страниц. В июне 2021 года Google начал детально оценивать как скорость, так и этапы открывания просматриваемых документов. Google Core Vitals — это как набор показателей, который официально заявлен как фактор ранжирования. Вот такая несостыковка.
Google Core Vitals — фактор ранжирования, поэтому недооценивать показатели скорости, с которой идёт загрузка страницы, нельзя. Чем они выше, тем больше шансы ресурса нравиться пользователям и поисковым системам одновременно.
Оцениваются три базовых параметра.
- Скорость появления контента.
Время, за которое браузер на 100 % отрисовывает и отображает крупный объект в активном экране.
- Отзывчивость.
Время ответа браузера после первого взаимодействия пользователя со страницей.
- Визуальная стабильность.
Наиболее понятная характеристика, которая предполагает оценку смещения макета и элементов вёрстки во время загрузки открываемой страницы.
Единственный момент, по которому нет споров и разногласий, — это оценка скорости инструментами Google.
PageSpeed Insights — инструмент важный, но очень неточный. Опираться только на его значения не стоит, но выход в зелёную зону — то, чего желают и вебмастера, и владельцы сайтов.
Самые распространенные способы оптимизации
Чтобы предпринять необходимые для оптимизации действия, стоит разобраться, на что уходят минуты при загрузке и на что в конечном итоге можно повлиять для ускорения процессов.
Вот этапы, которые не замечают пользователи, но на них может тратиться критически большое количество времени:
по IP происходит подключение непосредственно к серверу;
устанавливается безопасное соединение (если речь о протоколе HTTPS);
происходит запрос HTML-страницы по URL;
начинается загрузка HTML и построение очереди запросов;
начинается загрузка CSS;
загрузка JS;
рендеринг;
загрузка шрифтов из библиотеки;
загрузка визуального контента;
окончание рендеринга и применение JS-кода.
По сути, это всё то, на что можно повлиять при работе и тем самым оптимизировать время отрисовки страницы.
Тарасенко
Получите профессиональный бесплатный SEO-аудит вашего сайта. Оставьте заявку и мы обсудим детали.
Получить бесплатный SEO-аудитГлобальные изменения: хостинг или сервер
Период ответа сервера крайне негативно воспринимается поисковыми системами. Повлиять на этот параметр можно только глобально, то есть сменить поставщика услуг, подобрав предварительно надёжный и скоростной вариант, особенно если сайт «тяжёлый». Тут пригодится совет более опытных в вопросе знакомых или коллег. Можно также воспользоваться консультацией специалистов, которые помогут и сайт перенести, и провести должную проверку после переноса.
Оптимизация загрузки визуального контента
Чтобы понять, насколько «тяжелы» размещённые на сайте изображения, желательно спарсить галерею и посмотреть, сколько весит каждое. Больше 300 Кб — слишком много, но и сильно меньше 100 — это неуважение к пользователю, которому придется увеличивать картинки и смотреть в итоге на набор цветных пикселей.
В таком случае лучше применять специальные программы и сервисы по уменьшению веса без потери качества.
Например, TinyPNG (https://tinypng.com/) отлично справляется даже с облегчением анимации, при этом изменений в качестве совсем не ощущается. Можно уверенно облегчить изображения на 60 или даже 90%. Бесплатно можно изменить изображения размером до 5 Мб, а вот по подписке уже до 75.
Optimizilla (https://imagecompressor.com/) совместим с большинством современных форматов изображений. Причем можно совершенно бесплатно загружать до 20 изображений одновременно. Очень удобно, когда предстоит обработать много материала.
Imagify (https://imagify.io/optimizer/#image) – еще один инструмент, который доступен бесплатно, но подписка значительно расширяет функционал. Присутствует 3 степени сжатия, варианты изменения размера, процентное соотношение изменений и другие виды удобных быстрых настроек, которые стоит попробовать.
Конвертация форматов тоже способна помочь, например, WebP — более современный и лёгкий, причём с отличным качеством картинки без лишнего веса. Однако есть одно «но»: не все браузеры к нему лояльны. Понадобится регулярная аналитика.
Упорядочивание и чистка кода
Чистый код JS и CSS без лишних символов и слишком длинных комментариев тоже влияет на скорость. Придётся убрать избыточные элементы, названия функций. Вот здесь подсказки по сервисам будут актуальны. Например, Online Javascript Compression Tool или Online JavaScript/CSS Compression отлично подойдут для автоматизации этой работы.
Также не помешает верно расположить код на странице. Например, можно добиться ускорения, разместив CSS наверху, а JS внизу.
Если нужно подтянуть ещё
Кроме того, стоит применять способы с меньшей эффективностью, но тоже позволяющие провести оптимизацию скорости загрузки сайта в виде части комплекса мер.
Шрифты
Почистить библиотеки шрифтов нелишне. Удалить всё, что не используется, и отложить загрузку того, что ещё может пригодиться, — действенный способ улучшить показатели на несколько пунктов.
Отложенная загрузка изображений
Пока пользователь ещё не добрался до фрагмента с картинкой, её нет смысла отображать. Скролл позволяет прогружать элементы, расположенные ниже активного экрана. При этом стартовая загрузка значительно ускоряется.
Деактивация ненужного
Часто на старте работ в CMS не спешат удалять предустановленные плагины — вдруг пригодятся. Но чаще выбирают либо новые более совершенные платные варианты, либо пишут собственные, решающие индивидуальные задачи. А вот ненужное продолжает накапливаться, замедлять открывание страниц.
Лучшим решением будет постепенное удаление расширений в процессе работы, осознавая, что уже заменено или неприменимо к проекту. Подобная оптимизация инструментария в рамках CMS увеличивает продуктивность технической стороны сайта, а также помогает SEO-направлению проекта.
GZIP
Сжать большой объём данных — значит облегчить задачу серверу и позволить пользователю не подгружать огромный массив информации. Таким образом, вес открываемых страниц удаётся снизить на 50 % и даже больше. Это непременно заметят не только роботы и асессоры, но и люди, пришедшие на сайт из поиска.
Перенос видео на сторонние площадки
Нет ничего удобнее, чем расположить на странице превью видео, а для просмотра отправлять на популярный видеохостинг. Читерство? Нет, это разумный подход и экономия терпения пользователей. Так документ будет легче, и сервер не перегрузится лишними файлами. Сделать сайт удобнее это не помешает, на уровне доверия также не скажется. Конечно, если перенаправлять для просмотра на известный ресурс, а не малоизвестную площадку.
Платные решения
Быстро и просто получается оптимизировать загрузку сайта, сократив её длительность с помощью платных расширений и плагинов от разработчиков CMS и сторонних компаний. Выделим несколько наиболее эффективных и хорошо совместимых с популярными движками.
Adwex.Minified самостоятельно настроит ленивую загрузку изображений на Bitrix, ту самую, при которой пока фрагмента с картинкой нет — она не участвует в стартовой отрисовке контента.
Модуль результативен при оптимизации кода LS и CSS, сжимает файлы скриптов и работает с пробелами, убирает лишние и пустые строки.
Стоимость: около 3900 рублей (на момент написания статьи).
WP-Optimize — плагин для WordPress. Оптимизирует данные, а также позволяет сжать изображения, удалить лишние и уже неактуальные резервные копии. Также можно установить регулярные очистки в автоматическом режиме, когда всё неиспользуемое и неэффективное будет удаляться, что также поможет ускорять загрузку контента.
Стоимость: условно бесплатен, однако премиум-версия уже предполагает оплату.
PageSpeed Ninja — тоже разработка для WP, которая отлично справляется с увеличением скорости как на мобильной, так и на десктопной версии сайта.
Плагин хорош тем, что позволяет выполнять предпросмотр изображений в низком разрешении, автоматически оптимизирует отображение стилей и скриптов в нужном порядке для экономии времени. В целом расширение помогает повлиять сразу на массу показателей и улучшить техническое состояние ресурса, сделать его более удобным для пользователей.
Стоимость: в зависимости от набора функций — от условно бесплатной до 1500 рублей.
PageSpeed Module. Подойдёт для большинства популярных CMS, имеет версии, адаптированные для работы с разными движками. В SEO плагин любят за покладистость, неконфликность. Кроме того, он значительно улучшает показатели большинства характеристик:
низкая нагрузка на браузер;
ускорение стартовой отрисовки;
сжатие файлов стилей.
Устанавливается плагин быстро и без проблем — справится и SEO-специалист, и владелец ресурса.
Стоимость: от 5199 рублей.
Сайт может показывать лучшую производительность и без доплат, но это максимально простые и действенные варианты, загрузить и установить которые можно без помощи программистов.
Вся соль
Из всего сказанного выделим основные направления работ, которые помогут увеличить скорость максимально эффективно.
- Правильный выбор сервера. Он не должен быть на другом континенте, и крайне желательно, чтобы уже имел отзывы о достаточно высокой скорости.
- Для увеличения производительности визуальный контент стоит разместить на сторонних площадках. Изображения можно подгружать из облака, а видео — хранить на популярных видеохостингах.
- Страницы смогут быстро загружаться, если контент не будет тяжёлым. Изображения, если они не в облаке, необходимо сжимать. Заливать фотографии весом в десятки Мб нерационально.
- Оптимизировать скорость можно и путём чистки кода, сокращения в JS и CSS лишних пробелов и символов, пустых строк.
- Увеличивает время стартовой подгрузки хранилище ненужных плагинов и расширений в CMS.
- Сжатие всего, что поддаётся ему, также улучшает работу сайта и ускоряет открывание контента. GZIP — отличное решение для этого.
- Установка дополнительных плагинов для оптимизации способна стать самым простым решением по повышению скорости загрузки сайта, но потребует вложений.
Способов увеличить исходную скорость сайта гораздо больше. Здесь собраны самые популярные и эффективные, которые много раз проверены на практике и давали результат в отношении как положительного пользовательского опыта, так и роста видимости. Решение придётся выбирать исходя из ситуации, а если в ней разобраться проблематично, всегда доступны консультации профессионалов оптимизации.