Скорость загрузки сайта: почему это важно и как ускорить
Каждый из нас хотя бы раз закрывал вкладку, не дождавшись, пока откроется страница. Белый экран, крутящийся значок, медленно проступающие картинки — и палец уже тянется к кнопке «назад». Теперь представьте, что так поступают посетители вашего сайта. Вы потратили время на статью, на оформление, на продвижение, а человек ушёл, так и не увидев первой строки. Скорость загрузки — одна из тех вещей, которые незаметны, когда всё хорошо, и губительны, когда всё плохо. В этой статье разберёмся, почему она так важна, как её измерить и что можно сделать своими руками, даже если вы не программист.
Почему скорость так важна
Есть три причины, по которым о скорости стоит думать с первого дня существования сайта.
Первая — поведение людей. Терпение пользователей в интернете очень ограничено, особенно на мобильных устройствах. Исследования поведения разных лет сходятся в одном: с каждой дополнительной секундой ожидания доля ушедших посетителей заметно растёт. Человек, который пришёл из поиска, всегда может вернуться к выдаче и выбрать другой результат.
Вторая — поисковые системы. Скорость загрузки и удобство страницы входят в число сигналов, которые учитываются при ранжировании. Это не главный фактор, и быстрый, но бесполезный сайт не обгонит медленный, но полезный. Однако при прочих равных быстрый сайт получает преимущество. Об остальных факторах можно почитать в материале об основах поисковой оптимизации.
Третья — деньги. Если сайт зарабатывает на рекламе, партнёрских ссылках или продаже услуг, каждый ушедший посетитель — это упущенный доход. Для интернет-магазинов связь между скоростью и продажами вообще прямая.
Ориентир для новичка: основное содержимое страницы должно появляться на экране за пару секунд даже на среднем мобильном интернете.
Как измерить скорость загрузки
Прежде чем что-то ускорять, нужно понять, насколько всё плохо и где именно проблема. Для этого существуют бесплатные онлайн-сервисы проверки скорости, в том числе от самих поисковых систем. Вы вводите адрес страницы, и сервис выдаёт оценку, набор метрик и список рекомендаций.
Не пугайтесь обилия терминов. Для начала достаточно понимать несколько основных показателей:
- время до появления основного содержимого — когда пользователь видит главный элемент страницы, например заголовок или крупное изображение;
- отзывчивость — как быстро страница реагирует на действия, например на нажатие кнопки;
- визуальная стабильность — не прыгают ли элементы во время загрузки, когда человек уже начал читать или пытается нажать на ссылку;
- время ответа сервера — сколько проходит от запроса до того, как сервер начал отдавать страницу.
Проверяйте не только главную, но и типичные страницы: статью, рубрику, страницу с большим количеством изображений. И обязательно смотрите отдельно мобильную версию — именно она обычно оказывается самой медленной.
Помните, что результаты таких проверок немного колеблются от запуска к запуску. Делайте несколько замеров и смотрите на общую картину, а не на одну цифру.
Изображения: главный источник лишнего веса
Если сайт медленный, в большинстве случаев виноваты картинки. Фотография прямо с камеры или телефона может весить несколько мегабайт, а на странице их бывает десяток. При этом на экране она отображается размером с ладонь, и всё лишнее качество просто тратит трафик и время.
Что можно сделать с изображениями:
- Уменьшать размер в пикселях. Нет смысла загружать фото шириной в несколько тысяч пикселей, если колонка текста намного уже.
- Сжимать. Специальные программы и онлайн-сервисы уменьшают вес картинки в разы почти без видимой потери качества.
- Выбирать правильный формат. Для фотографий подходят форматы со сжатием с потерями, для схем и логотипов — форматы без потерь. Современные форматы изображений дают лучшее сжатие и поддерживаются всеми популярными браузерами.
- Включить ленивую загрузку. Картинки, которые находятся ниже первого экрана, загружаются только тогда, когда пользователь до них прокручивает. Многие CMS делают это по умолчанию или через простой плагин.
- Указывать размеры. Если браузер заранее знает размер изображения, он резервирует под него место, и текст не прыгает при загрузке.
Если сайт работает на популярной CMS, существуют расширения, которые автоматически сжимают все загружаемые изображения. Это одно из самых выгодных вложений времени: настроили один раз — и проблема решена для всех будущих материалов.
Хостинг и сервер
Даже идеально оптимизированная страница будет грузиться медленно, если сервер долго думает перед ответом. Дешёвый виртуальный хостинг, на котором вместе с вами живут сотни других сайтов, может вполне справляться с небольшой нагрузкой, но проседать в часы пик.
На что обратить внимание:
- расположение сервера — чем ближе сервер к вашей основной аудитории, тем быстрее ответ;
- ресурсы тарифа — при росте посещаемости может понадобиться более мощный тариф или виртуальный сервер;
- актуальные версии программного обеспечения — свежие версии серверных языков и баз данных обычно заметно быстрее старых;
- поддержка кеширования и сжатия на уровне сервера.
Если время ответа сервера стабильно большое, а все остальные оптимизации уже сделаны, это повод задуматься о смене тарифа или провайдера. Подробнее о критериях выбора — в статье о том, на что смотреть при выборе хостинга.
Кеширование
Кеширование — это сохранение готового результата, чтобы не вычислять его заново. Когда посетитель открывает статью на сайте с CMS, сервер обычно собирает страницу из кусочков: достаёт текст из базы данных, подставляет его в шаблон, добавляет меню и боковые блоки. Это занимает время. Если же готовая страница сохранена в кеше, сервер просто отдаёт её, не повторяя всю работу.
Есть несколько уровней кеширования:
- кеш страниц на сервере — готовые страницы хранятся и отдаются мгновенно;
- кеш в браузере — файлы оформления, скрипты и картинки сохраняются у посетителя, и при переходе на следующую страницу их не нужно скачивать заново;
- сеть доставки контента — копии статических файлов хранятся на серверах в разных регионах, и каждый посетитель получает их с ближайшего.
Для большинства CMS есть плагины кеширования, которые включаются в несколько кликов. После включения обязательно проверьте, что сайт работает корректно: формы отправляются, комментарии появляются, изменения в статьях видны.
После любых изменений на сайте, связанных с кешированием, откройте его в режиме инкогнито и пройдитесь по основным страницам. Так вы увидите сайт глазами нового посетителя.
Лишние скрипты, плагины и шрифты
Сайт постепенно обрастает дополнениями: счётчик, виджет соцсетей, онлайн-чат, слайдер, ещё один счётчик, кнопки «поделиться», всплывающее окно подписки. Каждое из них по отдельности весит немного, но вместе они способны замедлить страницу в несколько раз.
Проведите ревизию:
- удалите плагины, которыми не пользуетесь, а не просто отключите их;
- откажитесь от тяжёлых виджетов, если их можно заменить простой ссылкой;
- оставьте один-два счётчика аналитики, а не пять;
- ограничьте количество шрифтов: два семейства с парой начертаний обычно более чем достаточно;
- проверьте, не грузятся ли скрипты слайдера или галереи на тех страницах, где их нет.
Отдельная тема — рекламные блоки. Они часто ощутимо замедляют загрузку. Если вы зарабатываете на рекламе, ищите баланс между количеством блоков и скоростью, а не ставьте всё, что предлагает сеть.
Тема оформления и вёрстка
Многие готовые темы оформления создаются с расчётом на максимальную универсальность: десятки вариантов шапки, встроенный конструктор, анимации, слайдеры. За эту гибкость приходится платить скоростью. Простая лёгкая тема, в которой есть только то, что вам действительно нужно, почти всегда работает быстрее.
При выборе темы обращайте внимание на отзывы о её скорости, проверяйте демонстрационную страницу в сервисе измерения и не гонитесь за эффектами. Читателю информационного сайта важнее быстро добраться до текста, чем любоваться плавным появлением блоков. Если вы делаете дизайн самостоятельно, пригодятся советы из статьи о дизайне сайта без дизайнера, где простота — один из главных принципов.
Регулярная проверка
Скорость — не разовая настройка. Вы устанавливаете новый плагин, добавляете виджет, публикуете статью с двадцатью фотографиями — и сайт постепенно тяжелеет. Поэтому полезно периодически, например раз в месяц или после заметных изменений, снова прогонять ключевые страницы через сервис проверки.
Простой чек-лист для регулярной проверки:
- Измерить скорость главной и пары типичных статей на мобильном и компьютере.
- Сравнить с прошлыми результатами.
- Если показатели ухудшились, вспомнить, что менялось на сайте за последнее время.
- Проверить вес изображений в свежих публикациях.
- Посмотреть список плагинов и удалить ненужные.
Итог
Скорость загрузки влияет на всё сразу: на то, дочитают ли люди вашу статью, как высоко её покажет поисковик и сколько денег принесёт сайт. При этом большинство проблем решается без программирования. Сожмите и уменьшите изображения, включите ленивую загрузку и кеширование, избавьтесь от лишних плагинов и виджетов, выберите лёгкую тему и достойный хостинг. Измеряйте результат до и после каждого изменения, чтобы понимать, что действительно помогает. Быстрый сайт — это уважение к времени читателя, и он обязательно это почувствует.