Посетитель сайта пекарни часто заходит с телефона: хочет посмотреть ассортимент, узнать адрес или заказать торт к празднику. Пока страница не загрузилась, он не видит ни цен, ни телефона. Ниже разберём, из-за чего обычно медленно открываются сайты пекарен и что можно изменить без полной переделки.
С чего начать: найти, что именно тормозит
Откройте главную страницу в браузере Chrome, нажмите F12 и перейдите на вкладку Network. Отключите кэш и обновите страницу. Вы увидите список всех файлов с их размером и временем загрузки. Отсортируйте его по размеру: в начале списка почти всегда окажутся фотографии. Дополнительно проверьте сайт в Google PageSpeed Insights и WebPageTest: они укажут на неоптимизированные картинки, отсутствие сжатия и кэширования. Эти сервисы дают ориентиры, но не гарантируют результат сами по себе.
Фотографии выпечки: главный источник лишнего веса
Фотография багета или торта с камеры или телефона может иметь размеры в несколько тысяч пикселей. Если её просто загрузить в слайдер или каталог, браузер скачает файл целиком и только потом уменьшит его на экране. Что с этим делать:
- готовьте картинку под реальный размер блока на странице, а не «с запасом»;
- фотографии сохраняйте в JPEG с умеренным сжатием: чаще всего разница в качестве на экране не заметна, а файл заметно меньше. PNG оставьте для логотипа и значков;
- не вставляйте в картинку текст: прайс, акции и режим работы должны быть обычным текстом, он весит меньше и читается на любом экране;
- сократите слайдер на главной до одного-трёх кадров. Пять больших фотографий, загружаемых сразу, заметно замедляют первый экран.
Пример: карточка товара в каталоге
Допустим, в каталоге тридцать позиций, а на странице каждая показана миниатюрой 200×150 пикселей. Частая ошибка: в разметке указан маленький размер, но файл остался исходным.
<!-- Было -->
<img src="/upload/napoleon.jpg" width="200" height="150" alt="Торт «Наполеон»">
<!-- файл 2000×1500, прямо с камеры -->
<!-- Стало -->
<img src="/upload/thumb/napoleon-200x150.jpg" width="200" height="150" alt="Торт «Наполеон»">
<!-- отдельная миниатюра нужного размера -->На экране оба варианта выглядят одинаково, но во втором страница тянет тридцать маленьких файлов вместо тридцати огромных. Крупное фото загружайте только после клика по карточке. Атрибуты width и height пусть остаются: браузер заранее зарезервирует место, и текст не будет «прыгать» при подгрузке картинок. Если каталог большой, разбейте его на разделы («Хлеб», «Торты», «Пирожные») или добавьте кнопку «Показать ещё».
Какие внешние элементы стоит убрать или отложить
Кроме фотографий, страницу пекарни замедляют сторонние блоки, каждый из которых запрашивает свои скрипты и стили:
- Интерактивная карта на главной. Перенесите её на страницу «Контакты» или покажите на главной статичное изображение со ссылкой на подробную карту.
- Виджеты соцсетей с лентой новостей и списком подписчиков. Часто достаточно ссылок-иконок.
- Декоративные шрифты. Оставьте одно-два начертания и подключайте только нужные наборы символов. Для длинных текстов подойдёт обычный системный шрифт.
- Счётчики и онлайн-консультанты. Подключайте их асинхронно, чтобы они не задерживали отображение страницы.
- Лишние jQuery-плагины. Если слайдер, галерея и всплывающие окна сделаны тремя разными библиотеками, оставьте одну или упростите решение.
Настройки сервера и CMS, которые дают быстрый эффект
Попросите разработчика или хостинг-провайдера проверить четыре вещи. Первая: включено ли сжатие gzip для HTML, CSS и JavaScript. Вторая: настроено ли кэширование статических файлов, чтобы постоянный клиент не скачивал логотип и стили при каждом визите. Третья: объединены ли и минимизированы ли файлы CSS и JS, чтобы запросов было меньше. Четвёртая: как быстро сервер отвечает на запрос страницы. Если ответ медленный, причина может быть в тяжёлых запросах к базе данных каталога, лишних модулях CMS или перегруженном тарифе хостинга. Для сайта на конструкторе возможности ограничены, но размер картинок и набор виджетов вы контролируете сами.
Короткий список для проверки сайта пекарни
- Самый большой файл на главной не превышает разумного размера, а фотографии подготовлены под размер блока.
- В каталоге используются миниатюры, а не исходники.
- Слайдер содержит минимум кадров, цены и акции набраны текстом.
- Карта и виджеты соцсетей не мешают показу первого экрана.
- Подключено не больше двух начертаний декоративного шрифта.
- Включены gzip и кэширование статики, CSS и JS объединены.
- Сайт проверен с мобильного устройства при обычной скорости соединения.
Договоритесь, чтобы сотрудник, который выкладывает новые фото к праздникам и сезонным акциям, получил короткую инструкцию: какой размер и формат загружать. Тогда оптимизация не пропадёт после первого же обновления витрины.
