Для фотостудии сайт служит витриной, а витрина с тяжёлыми снимками открывается медленно. Человек, который выбирает фотографа для свадьбы или студию для семейной съёмки, обычно открывает несколько сайтов подряд и вряд ли станет ждать, пока на вашем появится первый кадр. Разберём, из чего складывается вес страницы и что можно изменить без полной перестройки сайта.
Почему сайты фотостудий тормозят чаще других
Главная причина — сами фотографии. Файл из камеры или после обработки в редакторе рассчитан на печать, а не на экран. Добавьте полноэкранный слайдер на главной, портфолио по жанрам, галереи на несколько десятков кадров, виджеты соцсетей и несколько шрифтов — и страница становится очень тяжёлой. Особенно это заметно у тех, кто открывает сайт с телефона через мобильный интернет.
С чего начать: выяснить, что именно весит много
Не оптимизируйте вслепую. Откройте страницу в Chrome, нажмите F12 и на вкладке Network обновите страницу: вы увидите каждый файл, его размер и время загрузки. Подсказки даст и Google PageSpeed Insights, и расширение YSlow. Как правило, основной вес — это несколько файлов изображений. Проверяйте не только главную, но и страницы, куда ведут визитки и реклама: прайс, портфолио свадебной съёмки, страницу аренды зала.
Фотографии: пиксели, сжатие, формат
- Размер в пикселях должен соответствовать месту на странице. Если колонка сайта шириной 960 пикселей, файл в 3000 пикселей только замедляет загрузку: браузер скачает его целиком, а затем уменьшит.
- Снимки сохраняйте в JPEG с качеством примерно 70–85% при экспорте для веба. Проверьте результат на тёмных кадрах и плавных градиентах: именно там появляются полосы и «грязь».
- Включите режим progressive JPEG: изображение сначала появляется в грубом виде и постепенно уточняется, поэтому страница кажется отзывчивее.
- PNG оставьте для логотипа и значков, но не для фотографий.
- Если на странице не нужны служебные данные (EXIF, встроенные профили), уберите их при экспорте. Оригиналы храните отдельно.
- Мелкие значки соберите в один CSS-спрайт — это один запрос вместо десятка.
Условный пример: страница «Свадебная съёмка» на 30 кадров
Типичная ошибка: в вёрстке миниатюра выглядит аккуратно, но файл за ней — полноразмерный.
<img src="photos/wedding-01.jpg" width="300" height="200" alt="Свадьба, прогулка в парке">Если wedding-01.jpg — кадр шириной 2400 пикселей, браузер скачивает его целиком ради картинки в 300 пикселей. Умножьте на 30 кадров: посетитель видит первые шесть, а загружается всё. Что можно сделать:
- для каждого кадра подготовить два файла: миниатюру 300×200 и крупную версию (например, 1200 пикселей по длинной стороне) для просмотра;
- в разметке подставить миниатюру, а крупный кадр открывать только по клику;
- миниатюры ниже первого экрана подгружать при прокрутке: для jQuery есть плагины отложенной загрузки, например Lazy Load, где настоящий адрес лежит в атрибуте data-original, а в src стоит маленькая заглушка;
- для посетителей с отключённым JavaScript добавить запасной вариант в теге noscript;
- сохранить атрибуты width и height, чтобы страница не «прыгала» по мере появления картинок.
В итоге при открытии страницы уходит несколько лёгких файлов, а остальные подгружаются по мере необходимости.
