Дизайн — статьи о сайтах
Посетитель приходит на сайт типографии с конкретной задачей: узнать цену тиража, посмотреть образцы, отправить макет. Страницы здесь быстро тяжелеют из-за фотографий бумаги и готовой продукции, калькуляторов и форм загрузки файлов. Если страница открывается долго, особенно с телефона по мобильному интернету, часть людей уйдёт к конкурентам. Ниже порядок действий, который можно обсудить с разработчиком.
С чего начать: выяснить, что именно тормозит
Не нужно оптимизировать всё подряд. Откройте самые важные страницы (главную, раздел с визитками или листовками, страницу с калькулятором) и посмотрите, из чего они состоят. Для этого подойдут вкладка Network в инструментах разработчика браузера, сервис WebPageTest или Google PageSpeed Insights. Вам нужны три цифры: общий вес страницы, число запросов и время до появления первого экрана.
Как правило, самые тяжёлые файлы — изображения, на втором месте скрипты. Вы увидите это в списке запросов, отсортированном по размеру. Попросите разработчика сделать такой замер до правок и после них, иначе вы не поймёте, помогла ли работа.
Фотографии продукции: как не отдавать лишние пиксели
Типичная ошибка: фотограф передал снимок 4000×3000 пикселей, его загрузили в карточку товара, а на странице он показывается в блоке шириной 360 пикселей. Браузер всё равно скачивает полный файл. Что делать:
- Готовить каждое изображение под реальный размер вывода, с небольшим запасом для экранов с высокой плотностью.
- Сжимать JPEG с разумным качеством. Для фото образцов обычно хватает среднего уровня, потери заметны только при сильном увеличении.
- Для больших фото сохранять JPEG в прогрессивном виде: картинка проявляется сразу, а не строка за строкой.
- Использовать PNG только там, где нужна прозрачность или чёткая графика, например для схем вылета под обрез.
- Для мобильных экранов подключать уменьшенные версии через атрибут srcset или элемент picture.
В портфолио не выводите сразу сотню работ. Покажите первые 12–16, остальные подгружайте по кнопке или при прокрутке.
Калькулятор, слайдеры и виджеты: что можно отложить
Калькулятор тиража часто написан на тяжёлой библиотеке и подключается на всех страницах, хотя нужен на двух-трёх. Тот же приём работает и для слайдера, галереи, онлайн-консультанта, виджета соцсети и карты. Каждый такой блок — это отдельные запросы к чужим серверам, и пока они не ответят, страница может «подвисать».
Что проверить:
- Подключается ли скрипт калькулятора только там, где он есть.
- Загружаются ли скрипты в конце страницы или с атрибутом async, чтобы они не блокировали показ текста.
- Нужен ли главный слайдер. Одна хорошо подобранная картинка с кнопкой «Рассчитать стоимость» часто работает лучше четырёх сменяющихся баннеров и весит меньше.
- Не дублируются ли счётчики и не подключены ли старые, которыми никто не пользуется.
- Карту с адресом можно показывать после клика или в самом низу страницы.
Шрифты, сжатие и кэш: настройки, которые делаются один раз
Для фирменного стиля на сайт часто подключают несколько начертаний шрифта. Каждое — отдельный файл. Оставьте два-три действительно нужных начертания и не грузите наборы символов, которых нет на сайте.
На стороне сервера попросите проверить три вещи. Первая: включено ли сжатие gzip для HTML, CSS и JavaScript. Вторая: заданы ли для картинок, стилей и скриптов заголовки кэширования, чтобы повторный посетитель не скачивал их заново. Третья: объединены и минифицированы ли файлы стилей и скриптов. Если сайт работает на популярной CMS, у неё обычно есть встроенное или подключаемое кэширование страниц, а медленные запросы к базе данных, например в каталоге с множеством фильтров, стоит искать в логах. Протокол HTTP/2 уже поддерживается современными браузерами, и если хостинг его предлагает, это стоит обсудить, но сначала уберите лишний вес.
Условный пример: страница «Визитки»
Представим страницу, которую мы придумали для иллюстрации. Сверху слайдер из четырёх фотографий во всю ширину экрана, ниже шесть карточек с видами бумаги, затем калькулятор, форма загрузки макета, виджет онлайн-чата и карта.
Что здесь можно изменить без потери смысла:
- Слайдер заменить одним изображением с заголовком и кнопкой, остальные фото убрать или перенести в галерею ниже.
- Карточки бумаги отдавать в размере карточки, а не исходными снимками.
- Калькулятор и форму загрузки подключать только на этой странице и после основного содержимого.
- Чат запускать с задержкой, уже после загрузки страницы.
- Карту оставить в блоке контактов.
Цену и описание тиража посетитель увидит сразу, а остальное дозагрузится, пока он читает.
Проверочный список для разработчика
- Замерены вес и время загрузки главной, раздела каталога и страницы калькулятора.
- Размеры изображений соответствуют блокам, в которые они вставлены.
- Портфолио и каталог не выводят все элементы сразу.
- Скрипты калькулятора и галереи подключены только на нужных страницах.
- Сторонние виджеты и счётчики перечислены, лишние удалены.
- Шрифтов не больше двух-трёх начертаний.
- Включены gzip и кэширование статических файлов.
- После правок замеры повторены на телефоне и на обычном компьютере, результаты сохранены.
Начните с картинок и лишних скриптов: эти правки обычно самые простые и заметные. Настройки сервера и переработку калькулятора планируйте следом, когда станет ясно, что ещё тормозит.
