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

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

Что чаще всего замедляет сайт клиники

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

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

Условный пример: страница «Лазерная эпиляция»

Представим типовую страницу услуги. Это иллюстрация, а не описание реального проекта. В шапке стоит слайдер из пяти больших баннеров. Ниже идёт текст, таблица цен, галерея из двенадцати фотографий «до и после», видео с сайта-хостинга, блок отзывов и форма записи. В подвале подключены три кнопки соцсетей и онлайн-консультант.

Что можно изменить без потери смысла:

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

В итоге посетитель увидит текст, цены и форму раньше, чем догрузятся второстепенные элементы.

Фотографии «до и после»: как уменьшить вес и сохранить качество

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

• Задавайте размер под реальное место на странице. Если снимок показывается шириной 300 пикселей, не загружайте файл шириной 3000 и не уменьшайте его в браузере через атрибуты.
• Для фотографий используйте JPEG, для логотипов и значков с плоской заливкой — PNG. Степень сжатия JPEG подберите на глаз, обычно заметной потери качества нет и при умеренном сжатии.
• Удалите из файлов служебные данные (EXIF), они добавляют вес. Для этого есть бесплатные оптимизаторы.
• Мелкие значки, стрелки и фоны объедините в один CSS-спрайт, чтобы браузер делал меньше запросов.
• Указывайте ширину и высоту изображений в разметке: страница не «прыгает» при загрузке и быстрее выглядит готовой.

Скрипты, шрифты и сторонние виджеты

Объедините файлы стилей в один, скрипты в один-два и минифицируйте их, то есть уберите пробелы и комментарии. Подключайте jQuery одной версией, а не несколькими плагинами, которые тянут свои копии. Если плагин нужен ради одного эффекта, возможно, проще заменить его несколькими строками CSS.

Веб-шрифты через @font-face красивы, но каждый начертание — отдельный файл. Оставьте только нужные: обычное и полужирное, и только те наборы символов, которые вы используете.

Любой внешний виджет зависит от чужого сервера. Если он отвечает медленно, замедляется ваша страница. Спросите себя, приносит ли каждый из них пользу. Кнопки соцсетей на странице с ценами нужны не всегда.

Сервер: сжатие и кеш

Попросите администратора хостинга или своего разработчика проверить три вещи:

• включено ли gzip-сжатие для HTML, CSS и JavaScript (на Apache это модуль mod_deflate);
• заданы ли заголовки Expires или Cache-Control для картинок, стилей и скриптов, чтобы повторные посещения не загружали их заново;
• не тормозит ли сама генерация страниц: если сайт работает на CMS, включите кеширование страниц, ведь цены и описания услуг меняются редко.

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

Проверочный список перед запуском правок

• Замерьте время загрузки главной, страницы услуги и страницы записи до изменений: например, в WebPagetest, YSlow или Page Speed. Запишите цифры, чтобы сравнить после.
• Проверьте, нет ли изображений больше, чем их размер на экране.
• Посмотрите, сколько всего запросов делает страница, и сократите число файлов.
• Перенесите второстепенные скрипты и виджеты в конец страницы.
• Убедитесь, что включены сжатие и кеш браузера.
• Откройте сайт с телефона через мобильную сеть, а не только по офисному Wi-Fi.
• После правок проверьте, что форма записи, телефон и галерея работают во всех популярных браузерах.

Ускорение не обязано быть разовой акцией. Каждый раз, когда на сайт добавляют новые фотографии или виджет, возвращайтесь к этому списку: так страницы не будут тяжелеть незаметно.

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