В статье простым языком описаны причины низкой скорости сайта и практические способы ускорения загрузки сайта. Эта статья – продолжение статьи «Как скорость сайта влияет на SEO, трафик и продажи». Информация будет очень полезна веб-разработчикам, маркетологам, SEO-специалистам, руководителям интернет-проектов и владельцам сайтов.
Итак, Вы уже понимаете, как измерить скорость загрузки сайта, получили базовое представление о том, как пользоваться для этого инструментом Lighthouse и получили результаты тестов.
Тестирование скорости показало, что всё плохо. Что с этим делать и как с этим жить? J Разобраться в этой теме на самом деле не сложно, если уже есть понимание того, что это для Вас реально важно.
Но, если Вы далеки от веб-разработки и не хотите вникать в технические моменты, то вероятно, Вам будет проще сразу обратиться за помощью к профильному техническому специалисту и заказать комплексный аудит сайта или хотя бы аудит скорости сайта. Специалист проверит скорость загрузки сайта, а потом расскажет Вам простым языком, в чём проблема и как ускорить сайт.
На скорость сайта влияет много факторов, вот основные:
· Качество интернет-канала на Вашем устройстве;
· Хостинг (география сервера, тип хостинга, тарифный пакет);
· Версия используемого протокола HTTP;
· Сервис CDN, если он используется;
· Наличие и полнота кэширования;
· Версия PHP на сервере (если только у Вас не что-то другое, а вероятность этого точно не больше 10%);
· Некоторые технические моменты устройства сайта;
· Используемый контент.
Разберём эти пункты подробнее...
Качество интернет-канала
Тут, наверное, всё просто и очевидно. Если Вы подключены к Интернету из дома, по кабелю или WiFi соединению, у Вас хороший пакет услуг от Вашего интернет-провайдера, хороший маршрутизатор или модем, то скорость обычно будет высокой.
А вот если Вы подключаетесь к Интернет через общий WiFi в большом офисе или, тем более, по мобильному интернету в людном месте… Тогда, пропускная способность канала делится на всех пользователей и даже с самым быстрым сайтом, Вы получите очень медленную загрузку страниц.
Как устройство сайта влияет на скорость загрузки страниц
Хостинг и его влияние на скорость сайта
Важный фактор скорости загрузки страниц сайта – хостинг. Первый момент – удаленность сервера от целевой аудитории. Проводя аудиты сайтов и анализ скорости загрузки страниц, часто вижу ситуации, когда основная целевая аудитория находится, к примеру, в Екатеринбурге, а сервер, на котором размещен сайт, в Германии или даже в США.
Хостинг может быть и самый качественный, но есть одна проблема. На большом расстоянии до потребителя получается, что «сигнал идёт слишком долго». Это чисто техническое ограничение проявляется в большой задержке ответа сервера.
Вывод простой – ищите хостинг с сервером в том же регионе, что и основная целевая аудитория, тогда скорость ответа сервера будет заметно выше. Обратите внимание: надо искать не компанию в нужном регионе, а именно компанию с дата-центром в нём, потому что многие хостинговые компании держат свои сервера в нескольких разных дата-центрах и об этом надо спросить техподдержку хостинга.
Этот момент надо согласовывать и при заказе хостинга, т.к. по умолчанию можно получить размещение не на том сервере, который Вам нужен.
Еще один важный момент – качество услуг хостинга. Если Вы выбрали самый дешевый тариф с малым количеством оперативной памяти и малым процентом доступной мощности процессора, то не ждите хорошей скорости.
На таких тарифах рядом с Вашим проектом на том же сервере будут находиться десятки или даже сотни проектов, а сервер будет загружен до предела. Часто сайт даже будет физически находиться не на быстром SSD-диске, а на медленном обычном винчестере. Проявляется это обычно тормозами при работе сайта.
Выделенный хостинг может быть хорошим решением, но тут почти всё то же самое, что и с дешёвым хостинговым пакетом на Shared хостинге, там мало оперативной памяти и доступно слишком мало процессорного времени. На младших пакетах качество будет слишком низким, а технических знаний для настройки выделенного хостинга понадобится гораздо больше.
Для большинства сайтов, оптимальный вариант – использовать средний тариф обычного хостинга, но обязательно на быстрых SSD-дисках с виртуализацией (это очень важный момент). В этом случае, для каждого сайта есть ограничение в потреблении ресурсов и невозможна ситуация, когда один сайт периодически будет создавать пиковые нагрузки, которые приведут к временной недоступности сразу всех сайтов соседей по серверу.
На таком хостинге Вы можете подобрать оптимальный пакет, который будет дешевле выделенного хостинга, ничуть не медленнее и одновременно значительно проще в настройке и обслуживании.
Протокол HTTP2
Если хостинг достаточно качественный, то он должен поддерживать не только давно используемый протокол версии HTTP1.1, но и более современную версию – протокол HTTP2. Он позволяет загружать много ресурсов параллельно (одновременно), чем заметно сокращается общее время загрузки сайта.
На некоторых хостингах, даже если он есть, HTTP2 не включен по умолчанию и может понадобиться включить его в настройках.
Сервисы CDN
Что делать владельцам сайтов, которые рассчитаны на аудиторию из разных регионов? Ведь перенести сервер в один регион автоматически означает отдалить его от другого? В этом случае, есть решение – можно использовать услугу CDN.
Обычный хостинг размещает все данные сайта в одном месте, а сервис CDN содержит множество серверов в разных регионах. Вы получаете возможность приблизить свой сайт к целевой аудитории всех регионов, в которых у CDN-провайдера есть свои серверы.
Если очень кратко, то статические файлы (картинки, скачиваемые файлы, стили и многие скрипты) загружаются с ближайшего к конкретному пользователю сервера CDN, а всё остальное – по-прежнему с Вашего сайта.
Такой подход позволяет значительно уменьшить нагрузку на сервер Вашего хостинга и значительно ускорить загрузку для всех регионов присутствия CDN, а как Вы уже знаете, высокая скорость загрузки сайта = больше трафика и продаж.
Когда нужен CDN? Если практически вся Ваша целевая аудитория находится в одном регионе или у сайта небольшой трафик, то смысла в этом недешёвом сервисе нет. Использовать CDN выгодно международным и просто крупным интернет-проектам с большим трафиком, например, федеральным интернет-магазинам с аудиторией, разбросанной по всей стране.
Важный момент! Если вы используете для российского сайта CDN Cloudflare с серверами в США или Европе, то почти гарантированно, получаете и заметно более медленный сайт с более слабыми поведенческими факторами. По нашему опыту, такие сайты, почти всегда значительно медленнее.
Кэширование
Один из важных факторов скорости загрузки сайта – использование кэширования. Существуют разные виды кэширования, но в целом, суть заключается в том, что страница (или её часть) генерируется сервером и сохраняется в кэше в готовом виде.
При первом обращении к странице, когда её ещё нет в кэше, никакой экономии не получается, но при повторном обращении, в том числе другому пользователю, сервер отдаёт уже готовую страницу из кэша, не тратя время на её генерацию, а это происходит значительно быстрее.
Если у Вас более-менее серьезный интернет-проект, например, в сфере e-commerce, и он не использует кэширование, то обязательно стоит подумать об этом всерьез. Финансовый выигрыш для серьезного интернет-проекта с большим трафиком может быть очень значительным.
Используйте сжатие контента на стороне сервера
Текстовые файлы, файлы стилей и скриптов JavaScript можно уменьшить за счёт удаления ненужных переносов строк и пробелов. Для человека при просмотре сайта ничего не изменится, а вот файл получается существенно меньше весом и грузится быстрее.
Чаще всего сжатие контента на стороне сервера делается с помощью Gzip или более эффективного Brotli. На хорошем хостинге, сжатие контента можно включить парой кликов, но возможно, надо будет ещё прописать инструкции для сервера в файле .htaccess в корне Вашего сайта.
Обратите внимание, уровень сжатия лучше устанавливать не на максимум, а не выше 70-75%! На сжатие тратятся ресурсы процессора и, выигрывая в весе файлов, можно потерять в скорости генерации страниц. Тут важно не жадничать и суметь найти оптимальный баланс, рекомендую просто выбрать 70% или 75%.
Отказ от тяжёлого контента
Рекомендуем отказаться от использования на сайте фонового видео, звука для интерактивных элементов и автоматически загружаемой музыки на сайте. Может это и смотрится очень круто, но создаёт очень сильные тормоза и тогда ожидать большого трафика и продаж не стоит.
Если без этих элементов никак, то по возможности, используйте загрузку по клику с применением Ajax-технологии. Если нужна загрузка видео с YouTube, то рекомендую сразу перейти на использование вставки видео с Rutube или Вконтакте, так Вы не потеряете тех пользователей, которые не умеют пользоваться VPN-сервисами (да, их реально очень много).
Если Вы используете широкие панорамные фоновые фото на весь экран, особенно фоновые слайдеры, то стоит снова обратиться к дизайнеру и пересмотреть дизайн. Основная задача – найти удачный баланс между скоростью и красотой страницы.
Значительно облегчить вес графики можно заменой тяжелых фото в JPG или PNG на более современный формат WEBP. Он позволяет сохранить фото в том же качестве с заметно меньшим весом файла. Попробуйте сохранить его с качеством порядка 60-75% и сравните размеры картинок. За несколько попыток Вам удастся подобрать самое удачное сочетание соотношения качество/вес.
Адаптивные картинки
Суть в том, что картинки крупного размера, рассчитанные на большой экран, грузить пользователю со смартфоном не имеет никакого смысла. Разница в весе картинки для смартфона и десктопа может быть в разы.
Физически, разницы в качестве между обычной картинкой и огромной, при сопоставимом качестве, пользователь со смартфоном не увидит, а скорость загрузки файла у него (часто это медленный мобильный интернет) может быть кратно меньше, чем на компьютере с быстрым стационарным интернетом. Поэтому выгоднее использовать технологию адаптивных картинок.
Если кратко, то суть в том, что для каждой картинки можно задать разные файлы для разной ширины экрана пользователя. Это даёт возможность не только облегчить вес файла, а еще и использовать картинку с другой пропорцией сторон для вертикального экрана смартфона.
Конечно, это заметно усложняет задачу вёрстки, добавляется необходимость подготовки дополнительных файлов картинок и не всегда возможно в рамках некоторых систем управления контентом, но это позволяет реально получить значительно более быструю загрузку страниц.
Переход на PHP версии не ниже 8.1
При переходе сайта с PHP5.6 или PHP7.2 на PHP8 и старше сайт получит заметное ускорение генерации страниц. Это связано с улучшениями в восьмой версии, влияющими на скорость.
Обратите внимание, некоторые скрипты младших версий PHP могут отказаться работать на восьмой версии, или будут выдавать ошибки. Переписывание может занять много времени и не всегда будет оправданным. Если после тестов видите проблемы, то сначала лучше полностью исчерпать все резервы ускорения сайта за счёт других факторов.
Если у Вас сайт на популярном движке CMS Wordpress (на нем работает примерно 2/3 сайтов в мире), то скорее всего, такой проблемы у Вас не будет. Если только тема не разработана очень давно, тогда есть шансы.
Минимум подключаемых файлов
Каждый подключаемый файл создает задержку в формировании страницы. При передаче данных, время тратится на соединение с файлом или базой данных. Чем больше количество подключаемых ресурсов, тем больше раз имеем задержку. В этом плане выгодно сократить количество файлов, если это возможно.
Чаще всего, разработчики, которые не думают о скорости загрузки страниц, подключают большое количество файлов стилей, отвечающих за внешний вид сайта. При проведении аудитов сайтов, мне приходилось видеть и по два-три десятка подключаемых файлов стилей. То же самое и со скриптами, которых бывает и сильно больше.
Что с этим делать? Стили можно объединить в один файл и загружать только его. Со скриптами обычно сложнее, но тоже, во многих случаях это возможно. В результате, кратно числу файлов, сокращается время на ожидание соединения с сервером при загрузке каждого файла.
Обратите внимание, если Вы используете CMS Wordpress, для этого движка есть много плагинов, которые могут выполнять такую задачу автоматически.
По тому же принципу, можно объединить и файлы мелких картинок типа иконок в одну картинку (спрайт), если их много, но это заметно усложняет написание стилей.