В июне вступят в силу новые правила Google по оценке онлайн-ресурсов — Core Web Vitals. То есть при ранжировании сайтов Google будет учитывать группу новых факторов:
- время отрисовки самого большого элемента страницы (Largest Contentful Paint);
- интерактивность страницы (First Input Delay);
- стабильность страницы (Cumulative Layout Shift).
С факторами Core Web Vitals поисковик станет особенно высоко ценить скорость работы сайта и удобство его использования. Как сделать так, чтобы сайт летал и хорошо ранжировался — рассказывают руководитель TechOps-отдела HOSTiQ и Senior SEO-специалист Promodo Александр Уткин.
Для перекрёстного интервью собрали самые наболевшие вопросы. Поехали!
Отвечает Head of TechOps
Для каких сайтов подходит тот или иной вид хостинга, и как понять, что пора переходить на более дорогой тариф?
Есть четыре основных типа хостинга:
На виртуальном хостинге вы делите один сервер с другими клиентами. Вы получаете ограниченное количество ресурсов и ограниченные возможности по внесению изменений на сервере, потому что ваша учетная запись не должна мешать соседям. Зато тут все уже настроено для запуска сайта и такой хостинг подойдет даже новичкам, которые делают это впервые.
Облачный хостинг похож на виртуальный: вы тоже делите один сервер с другими клиентами, ресурсы ограничены, а хостинг предоставляется в состоянии «под ключ». Отличие в том, что здесь ваши данные дублируются одновременно на несколько носителей. И если один из серверов выйдет из строя, то сайт продолжит работать с другого. Такой тип хостинга подходит для сайтов, которым важно быть в онлайне без перебоев 24/7.
VPS — это виртуальный приватный сервер. Он имитирует работу отдельного физического сервера. На носителях VPS-хостинга гораздо меньше клиентов, и влияния соседей на вашу учётную запись тоже меньше. Кроме того, у вас будут права суперпользователя, с которыми вы настроите на сервере почти любое программное обеспечение. Такой тип хостинга подходит для крупных проектов с опытными разработчиками и для сайтов, которые требуют более тонкой отладки ПО.
Выделенный сервер — это отдельная физическая машина, которую используете только вы. Такие серверы обычно выбирают для высоконагруженных проектов.
Определить, что пора переходить на другой тариф или другой тип хостинга, бывает непросто. Чаще всего об этом задумываются, когда не хватает ресурсов хостинга: зашкаливает использование ОЗУ или процессора. В такой ситуации в первую очередь нужно убедиться, что сайт хорошо оптимизирован, потому что ОЗУ или процессор могут потреблять ненужные плагины или лишние запросы к базе данных. Проверить оптимизацию сайта можно с помощью онлайн-ресурсов, например, Google PageSpeed или GTmetrix.
Если вы уже сделали всё возможное для оптимизации сайта, но ресурсы хостинга всё равно на пределе — тогда можно попробовать перейти на более просторный тариф.
Какая разница в скорости загрузки сайтов в зависимости от типа диска сервера: HDD vs SSD vs NVMe?
SSD — более быстрая альтернатива механическому накопителю HDD. Сайты на SSD-носителях работают быстрее, чем на HDD. На SSD-дисках оперативнее подгружается статический контент: картинки, медиафайлы, HTML-страницы. Также быстрее считывается динамический контент: обрабатываются PHP-файлы, создаются и заполняются временные файлы.
NVMe-диски же должны считывать информацию еще быстрее, чем обычные SSD. Там присутствуют те же SSD-накопители, но они подключаются через другой интерфейс передачи данных — через PCI-E шину. А традиционные SSD-диски подключаются через более традиционные интерфейсы — SAS и SATA, которые изначально разрабатывались для более медленных HDD-дисков.
То есть у SSD есть преимущество по сравнению с HDD, а у NVMe SSD — по сравнению с обычным SSD. Это более высокая скорость чтения и записи и, как следствие, способность справляться с более тяжелыми рабочими нагрузками.
Какой веб-сервер быстрее: LiteSpeed или nginx?
Веб-сервер — это связующее звено между браузером посетителя сайта и сервером, где этот сайт находится. Именно веб-сервер принимает и обрабатывает запросы браузера.
Мы тестировали работу пробных WordPress-сайтов на нескольких веб-серверах с разными конфигурациями:
- OpenLiteSpeed/LiteSpeed с LSPHP;
- настроенный по умолчанию nginx с PHP-FPM.
Тестировали на сервере с такими спецификациями:
| CPU | 2 ядра |
| RAM | 3 GB |
| Диск | 40 GB (SSD) |
| Сервер баз данных | MariaDB 10.3 |
| Версия PHP | 7.2 и 7.3 |
Для веб-сервера nginx с PHP-FPM использовали кэширующий плагин W3 Total Cache, для веб-сервера LiteSpeed — LiteSpeed Cache. Дополнительно на пробных площадках настроили сервис кэширования Memcached 1.4.15.
Замеряли количество запросов в секунду и скорость отклика. Итог:
| Среднее количество запросов в секунду | Среднее время ответа в миллисекундах | Минимальное время ответа | Максимальное время ответа | |
| LiteSpeed | 13.29 | 150 | 63 | 3486 |
| nginx | 3.53 | 6147 | 620 | 15488 |
В этом замере LiteSpeed показал себя с лучшей стороны. Nginx нужно дополнительно настраивать, чтобы получить такие же или превосходящие LiteSpeed показатели.
CDN — что это такое, как влияет на скорость работы сайта и почему?
CDN — это сеть кэширующих серверов, которые находятся в разных географических локациях. Она нужна, чтобы сократить время передачи контента — сайт будет открываться с ближайшего к пользователю сервера.
Простой пример: Amazon расположен на серверах в США, и у посетителя из Украины их сайт должен открываться медленнее, чем у жителей Америки. Но компания использует CDN-сервис, у которого есть серверы в Украине, поэтому amazon.com для украинцев тоже загружается быстро.
Стоит ли выводить картинки и видео на отдельный сервер?
Если изображения — это часть сайта, выводить их на отдельный сервер стоит, когда они занимают неоправданно много места или их очень много. В противном случае при открытии ваш сайт будет запрашивать изображения с третьестороннего ресурса, что увеличит суммарное количество запросов, и страница будет грузиться медленнее. Если все же нужно вынести изображения на отдельный сервер, используйте на нем кэширующий прокси-сервер Varnish, чтобы подгружать медиафайлы прямо из RAM.
Итого, когда речь идет о средних размеров интернет-магазине с небольшим количеством изображений, лучше хранить их локально. В случае с видео почти в 100 % ситуаций лучше не хостить видео на том же сервере, что и сайт, а выделять для них отдельные мощности.
Влияет ли тип баз данных на скорость загрузки сайта? Что лучше: MySQL vs PostgreSQL?
На скорость загрузки сайта больше влияет количество запросов к базе данных и типы этих запросов.
Тем не менее, PostgreSQL даёт набор функций и функционала, которых нет в MySQL. А ещё PostgreSQL считается более производительным сервером баз данных. Хотя в случае большого количества простых запросов чтения из БД всё же выигрывает MySQL. Кроме того, PostgreSQL требует больше ресурсов для работы: около 10 MB RAM дополнительно для каждого нового клиентского подключения.
Нужно ли размещать БД на том же сервере, что и основные файлы сайта?
Это не обязательно, но желательно для ускорения работы сайта. Если база данных находится на отдельном сервере, который географически удалён от сервера с сайтом, ресурс будет медленнее грузиться. К тому же выделенные серверы баз данных зачастую одновременно обслуживают много БД разных сайтов. Из-за высокой нагрузки на такие серверы ваш сайт может работать медленнее.
Лучше всего взять отдельный сервер для сервиса БД, на котором будет ограниченное количество баз данных, поставить его рядом с сервером, на котором находится сам сайт, и обеспечить между ними хороший канал связи.
Какие плюсы даёт протокол HTTP/2, и для кого он не подходит?
HTTP — это протокол, в котором описаны правила передачи данных в интернете. По этим правилам браузер загружает веб-страницы, а сервер получает информацию, которую пользователь ввёл на сайте.
HTTP/1.1 — улучшенная версия протокола, которая появилась еще в 1999 и пробыла стандартом долгие годы. В 2015 году на замену HTTP/1.1 инженеры разработали протокол HTTP/2.
HTTP/2 протокол построен на бинарном, а не на текстовом формате, и поэтому работает быстрее. Обновленный протокол может отправлять и принимать больше информации в каждом цикле обмена данными между клиентом и сервером. Ещё один плюс — это сжатие заголовков и усовершенствованный алгоритм приоритезации загрузки файлов: более важные файлы будут загружаться в первую очередь.
Если вы хотите перейти на протокол HTTP/2:
- Спросите у своего хостинг-провайдера, поддерживает ли сервер HTTP/2.
- Установите для сайта SSL-сертификат.
Из минусов — протокол подходит для сайтов с SSL, но не всегда подходит сайтам без него: в таких случаях скорость будет ниже. Также HTTP/2 требует больше памяти, чем HTTP/1.1. А если речь идёт о приложениях, где много операций с большими файлами и аудио- или видеостримингом, HTTP/2 будет работать медленнее, чем его предшественники.
Ещё один негативный момент — плохая скорость загрузки сайтов по HTTP/2 через мобильные устройства, использующие 3G-интернет. В случае использования 3G время ожидания составит свыше 300 ms и может колебаться. А HTTP/2 плохо показывает себя при длительной задержке ответа. При таких условиях HTTP/1.1 будет быстрее, чем HTTP/2.
Итого, HTTP/2 стоит использовать для сайтов с SSL, и не стоит использовать, если необходима работа с аудио- и видеопотоками или большими файлами.
85 % пользователей не будут покупать через веб-сайт, если они не уверены, что их данные передаются безопасно.
Защитите свой сайт с SSL-сертификатом и не теряйте клиентов!
Отвечает Senior SEO-специалист Promodo Александр Уткин
Как хостинг влияет на скорость загрузки сайта?
Чтобы сайт быстрее грузился на стороне хостинга, обратите внимание на его аппаратное и программное обеспечение:
- Диски: мы рекомендуем NVMe.
- Процессор: чем быстрее он будет, тем лучше. Ориентироваться можно на количество баллов на сайте cpubenchmark.net.
- Программное обеспечение: больше всего на скорость отдачи контента влияет веб-сервер. Рекомендуем использовать LiteSpeed или nginx. Также имеет значение версия PHP и различные системы кэширования, например, Redis.
Но даже самый лучший хостинг увеличивает скорость загрузки лишь частично. Хостинг не повлияет значительно на результаты, если есть проблемы с архитектурой сайта, например, тяжелые запросы к базе или не оптимизированные картинки.
Какой фактор больше других влияет на скорость работы сайта?
Наличие сторонних скриптов, всевозможных всплывающих окон, которые в Google Tag Manager больше всего замедляют работу сайтов. У нас был случай, когда больше всего тормозили работу сайта переменные в GTM — даже не теги.
Что делать с онлайн-консультантами и другими всплывающими окнами, которые сильно замедляют первоначальную загрузку страниц?
Такие всплывающие окна по умолчанию загружаются вместе с основными элементами страницы. Они негативно влияют на параметры Core Web Vitals и не нужны пользователю с самого начала. Также они не несут в себе полезный контент, который мог бы оценить Google для SEO.
Лучший выход — это просто отложить их загрузку до тех пор, когда первый экран уже полностью загрузится и станет интерактивным. То есть, когда параметры Core Web Vitals уже будут посчитаны, а пользователь начнет взаимодействовать со страницей. Загрузку таких элементов можно просто отложить по таймеру, который есть в Google Tag Manager, например на 6 секунд. И проблема будет полностью решена.
Что такое LCP и как улучшить этот показатель?
Largest Contentful Paint (LCP) — это время, за которое браузер отрисовывает наибольший элемент страницы сайта, видимый в первом экране устройств. Он должен загружаться как можно раньше относительно остальных элементов страницы.
Это может быть текстовый блок, изображение или окно ввода данных. Этот элемент может отличаться даже для одной и той же страницы при загрузке на устройствах с разным разрешением экрана. Зависит от того, какая доля страницы попадёт в первый экран.
Браузер Google Chrome определяет LCP у пользователей и отправляет замеры на серверы Google. Эти замеры можно посмотреть в браузере в консоли разработчика, на вкладке Performance и Lighthouse. Простой вариант, как определить наибольший элемент на первом экране — стандартный PageSpeed Insights. Внизу в рекомендациях он явно указывает, что посчитал LCP во время своего теста.
Как ускорить первую отрисовку контента?
First Contentful Paint — это первая отрисовка значимого содержимого страницы.
Чтобы её ускорить, нужно улучшить всё, на что может повлиять хостинг, и что описано в ответах выше. Также нужно отложить загрузку всего, что не понадобится пользователю в первую секунду, например, счётчиков аналитики и Facebook Pixel. Если этого не сделать — сайт будет загружаться слишком долго и это может не понравиться не только Google, но и посетителям.
Кумулятивный сдвиг макета — как его обнаружить?
Кумулятивный сдвиг макета (CLS) — это перемещение элементов страницы с места на место во время её загрузки. Например, сначала загрузился текст, а только потом загружается картинка, которая смещает весь текст вниз. Обнаружить CLS можно в консоли Google Chrome во вкладке Performance или при помощи любого онлайн-инструмента, который делает скриншоты загрузки страницы.
Чтобы избежать сдвига макета, у каждого элемента должна быть своя зарезервированная область, где он появится. Также можно использовать плейсхолдеры — серые прямоугольники, которые сообщают пользователю, что скоро на этом месте появится контент, и нужно немного подождать.