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

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

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

Где стоит сервер, тому и быстро

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

Это проверяемая вещь, а не рассуждение. Откройте любой сервис проверки времени ответа, поставьте точку замера в Израиле и посмотрите, за сколько сервер отдаёт первый байт. Разница между сервером в Европе и сервером за океаном видна на этой одной цифре, ещё до всякой оптимизации картинок.

Оговорюсь честно: расстояние это не всё. Сеть доставки содержимого частично закрывает вопрос с картинками и файлами, но не с самой страницей, которую собирает WordPress. Наши серверы стоят в Европе. Это не «через дорогу», но и не за океаном, и на времени ответа из Израиля разница заметна: замерьте сами, это минута работы. Израильское в услуге другое, и обещать вместо него географию серверов я не буду: компания здесь, счета с НДС, поддержка в те же часы, когда работаете вы, и разговор на вашем языке. Что входит в хостинг, расписано отдельно.

Три проверки, которые делает сам владелец

Никаких платных инструментов для этого не нужно.

Первая: вес картинок. Откройте главную страницу и посмотрите, сколько весит самое большое изображение. Фотография прямо из телефона весит несколько мегабайт, а на странице нужна в десятки раз меньше. Если на первом экране лежит снимок в 4 мегабайта, дальше можно не искать: это и есть главная причина.

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

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

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

Мобильный и десктоп это разные измерения

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

Две вещи, которые видно только на телефоне:

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

Проверяйте на своём телефоне, с мобильным интернетом, а не по вайфаю в офисе.

Что зависит от сайта, а что от хостинга

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

Практический вывод: если ответ сервера медленный, работа над картинками почти ничего не даст. И наоборот, отличный сервер не спасёт страницу, на которой десять фотографий по три мегабайта.

Что мы делаем клиентам

Порядок, по которому мы обычно идём. Он же годится как план для того, кто делает всё сам.

1. Снимок перед началом. До любой правки делается копия, к которой можно вернуться. Обновления и оптимизация иногда ломают вёрстку, и это нормально, если есть откат.
2. Картинки. Пересжатие всего, что уже загружено, и настройка так, чтобы новые загружались уже готовыми.
3. Кэш на стороне сервера и на сайте. Один кэширующий слой, настроенный под конкретный сайт, включая мобильную версию.
4. Сжатие и отдача файлов. Стили и скрипты отдаются в сжатом виде, шрифты ограничиваются нужными начертаниями.
5. Чистка. Отключаются плагины, которые не используются, и внешние скрипты, про которые никто уже не помнит, зачем они стояли.
6. Проверка после. Замер повторяется на телефоне и на компьютере, страницы просматриваются глазами: ускорение, сломавшее вёрстку, это не ускорение.

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

Чего делать не надо

• Гнаться за сотней баллов в измерителях. Цифра красивая, но человек чувствует не её, а момент, когда страница стала пригодной для чтения. Разумная цель это быстрая загрузка на телефоне, а не рекорд в отчёте.
• Ставить несколько плагинов оптимизации сразу. Они конфликтуют, и разбираться потом приходится с нуля.
• Оптимизировать до того, как замерили. Без замера до и после невозможно сказать, помогло ли, и работа превращается в веру.

Что чаще всего оказывается настоящей причиной

Список из нашей практики, в том порядке, в каком мы это встречаем. Он короткий, и в девяти случаях из десяти ответ находится в нём.

1. Фотографии в исходном размере. Снимок с телефона шириной в несколько тысяч точек, вставленный в блок шириной в пятьсот. Браузер честно скачивает всё и уменьшает уже у посетителя.
2. Слайдер на первом экране. Пять картинок, из которых человек увидит первую, грузятся все сразу, а вместе с ними отдельная библиотека.
3. Плагин ради одной страницы. Форма, калькулятор или галерея добавляют свои файлы на весь сайт, включая страницы, где их нет.
4. Шрифты. Четыре или пять начертаний вместо двух, часто ещё и с полным набором символов для языков, которых на сайте нет.
5. Внешние скрипты. Чат, два счётчика, пиксель рекламы, виджет отзывов. Каждый тянет ещё и свои соединения, и на телефоне это заметно.
6. Старая версия PHP на хостинге. Разница между версией пятилетней давности и сегодняшней видна на времени сборки страницы, а обновление занимает минуты, если есть кому его сделать и куда откатиться.
7. Тема-универсал с тяжёлым конструктором. Такая тема умеет всё, и грузит она тоже всё. Менять её на живом сайте дорого, поэтому выбирать надо на старте.

Как замерить так, чтобы результату можно было верить

Замер это половина работы. Плохой замер приводит к тому, что оптимизацию делают не там.

• Меряйте до и после одним и тем же способом. Разные сервисы дают разные числа, и сравнивать между ними бессмысленно.
• Прогоняйте замер три раза подряд. Первый обычно медленнее: кэш ещё пустой. Смотреть надо на устойчивое значение, а не на худшее.
• Меряйте на телефоне и с мобильного интернета, а не по вайфаю в офисе.
• Меряйте страницы, на которые приходят люди, а не только главную. Часто реклама ведёт на страницу услуги, а она тяжелее главной вдвое.
• Записывайте числа. Через месяц никто не вспомнит, что было до правок, и спор «стало быстрее или нет» решается только записью.
• Не сравнивайте себя с чужими скриншотами. Единственная честная точка сравнения это ваш собственный сайт неделю назад.

Сколько это стоит

Цены из нашей линейки, включают НДС.

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

Начинать я советую с замера и с картинок. Это два действия, которые ничего не стоят и чаще всего дают самую заметную разницу.