Как сократить время загрузки страниц на сайте частной школы

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

Как понять, что именно тормозит страницу

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

Фотографии классов и мероприятий: основной вес страницы

Условный пример. На главной стоит слайдер из пяти снимков по 1600×1000 пикселей, загруженных прямо с фотоаппарата. Блок на экране занимает 960 пикселей по ширине, а на телефоне ещё меньше. Браузер скачивает все пять крупных файлов, хотя посетитель видит один кадр. Что сделать:

• сохранять изображения под реальный размер блока и не полагаться на уменьшение в браузере;
• использовать JPEG для фотографий, PNG для логотипа и схем, а качество JPEG подбирать на глаз, обычно оно заметно ниже максимального;
• сократить слайдер до двух-трёх кадров: первый грузить сразу, остальные подгружать скриптом после загрузки страницы;
• в фотоальбомах показывать мелкие превью, а крупный снимок открывать только по клику;
• мелкие значки интерфейса объединить в один файл-спрайт, чтобы уменьшить число запросов.

Виджеты соцсетей, карты и видео

Кнопки «Мне нравится», блок группы в соцсети, интерактивная карта и ролик с видеохостинга подгружают собственные скрипты с чужих серверов. Если один из них отвечает медленно, страница может долго «висеть» в загрузке. Допустим, на странице «Контакты» стоят карта, виджет группы и видео о школе. Оставьте карту только на этой странице, а виджеты уберите с остальных. Вместо встроенного ролика покажите картинку-превью и загружайте плеер после клика. Остальные скрипты подключайте асинхронно, чтобы они не блокировали показ текста.

Скрипты, стили и шрифты в коде сайта

После нескольких смен подрядчиков в шаблоне нередко накапливаются две версии jQuery, неиспользуемые плагины и десяток файлов стилей. Попросите разработчика убрать лишнее, объединить CSS и JavaScript в минимальное число файлов и сжать их (минификация). Подключайте скрипты в конце страницы, перед закрывающим тегом body, чтобы текст появлялся раньше. С веб-шрифтами то же правило: берите только нужные начертания и подключайте кириллический набор символов, а не все языки сразу.

Сервер: сжатие, кеш и пиковые нагрузки

Проверьте, включено ли на хостинге gzip-сжатие для HTML, CSS и JavaScript. Для картинок, стилей и скриптов задайте заголовки Expires или Cache-Control, тогда при повторном визите браузер возьмёт файлы из памяти. Новости и расписание обычно меняются не каждую секунду, поэтому в CMS стоит включить кеширование страниц. Это важно в дни открытых дверей и в период приёма, когда на сайт заходят многие сразу. Динамические страницы без кеша на слабом тарифе в такие дни замедляются заметнее всего. Спросите хостинг-провайдера, как у него устроены лимиты по процессору и памяти.

Отдельный случай — документы: правила, образовательные программы, прайс-листы в PDF. Сканы сжимайте перед публикацией, а рядом со ссылкой указывайте формат и размер файла. Тогда посетитель не начнёт скачивать большой файл по мобильной сети случайно.

Проверочный список для главной и страницы приёма

• Вес и число запросов измерены до и после работ, результаты сохранены.
• Ни одно изображение не больше размера, в котором оно показано.
• В слайдере не больше трёх кадров, остальные подгружаются позже.
• Карта и видео не стоят на главной без необходимости.
• Сторонние скрипты подключены асинхронно.
• CSS и JavaScript объединены и сжаты, лишние плагины удалены.
• На сервере включены gzip и кеширование для статичных файлов.
• Страница проверена с телефона через мобильную сеть, а не только по Wi-Fi.

Скорость нужно проверять после каждого крупного обновления сайта: новый слайдер или виджет легко вернёт прежние проблемы.

Все статьи блога