Дизайн — статьи о сайтах
Сайт аудиторской компании чаще всего открывают с конкретной целью: понять, чем занимается фирма, найти описание услуги, посмотреть состав команды или скачать документ. Такой посетитель сравнивает несколько компаний, и страница, которая долго показывает пустой экран, проигрывает остальным. Ускорять сайт «вообще» неэффективно. Сначала нужно найти, что именно занимает время, и убрать это.
С чего начать: измерение до правок
Откройте самую важную страницу, например описание ключевой услуги, в Chrome. Нажмите F12, перейдите на вкладку Network, включите «Disable cache» и обновите страницу. Внизу видны общее число запросов, объём передачи и время загрузки. Отсортируйте список по размеру: обычно несколько файлов занимают большую часть объёма. Затем включите в DevTools имитацию медленного мобильного соединения и повторите проверку. Для сравнения подойдут также PageSpeed Insights и WebPageTest. Запишите исходные цифры, чтобы после правок сравнить результат с ними.
Условный пример: страница услуги «Аудит бухгалтерской отчётности»
Представим типичную страницу, собранную из готовых блоков. Это не описание реального проекта, а модель для разбора.
- В шапке слайдер из четырёх фотографий офиса, загруженных в исходном размере с камеры.
- Ниже текст об услуге и блок из двенадцати логотипов клиентов, каждый логотип отдельным файлом.
- Фотографии руководителей проектов в оригинальном размере, хотя на странице они показаны маленькими.
- Сканы свидетельств и дипломов в PNG, открывающиеся прямо в тексте.
- Онлайн-консультант, карта, два счётчика статистики и шрифт в четырёх начертаниях.
Текста здесь мало, тяжёлыми получаются картинки и сторонние подключения. Порядок работы: убрать или упростить слайдер, привести фотографии к реальному размеру показа, заменить сканы уменьшенными превью со ссылкой на полный файл, подключить чат и карту только после действия посетителя, оставить два начертания шрифта.
Изображения и документы: самый крупный резерв
Фото с камеры бывают в несколько мегабайт, а блок на странице шириной 300 пикселей не использует это разрешение. Сохраняйте файл в размере, близком к показываемому, с запасом для экранов с высокой плотностью пикселей. Фотографии лучше хранить в JPEG со сжатием, логотипы и значки — в SVG, если есть векторный исходник. Несколько мелких логотипов можно собрать в один файл (спрайт), чтобы сократить число запросов.
Для сканов лицензий, свидетельств и писем достаточно превью. Полный файл открывается по клику. PDF с образцами заключений, анкетами и перечнями документов указывайте вместе с размером файла, например «PDF, 1,2 МБ». Посетитель увидит, что скачивает, а тяжёлый файл не будет подгружаться вместе со страницей. Перед публикацией сожмите PDF и проверьте, не встроены ли в него лишние изображения.
Скрипты, шрифты и виджеты
Каждый внешний скрипт добавляет обращение к чужому серверу, и вы не контролируете его скорость. Составьте список всего, что подключено: счётчики, чат, формы обратной связи, кнопки соцсетей, карты, видео. Для каждого пункта задайте вопрос: кто смотрит эти данные и что изменится, если убрать виджет? Лишнее удалите. Оставшиеся скрипты подключайте с атрибутами async или defer, чтобы они не блокировали показ текста.
Карту на странице контактов часто заменяют статичным изображением со ссылкой на интерактивную версию. Видео с YouTube можно подгружать после нажатия на превью. Для шрифтов оставьте только нужные начертания и наборы символов, например кириллицу и латиницу. Лишние варианты начертаний увеличивают объём загрузки без пользы для чтения.
Сервер, кэш и CMS
Если пустая страница отвечает медленно, оптимизация картинок не поможет. В DevTools смотрите время ожидания первого ответа сервера. Большое значение указывает на медленный хостинг, тяжёлые запросы к базе данных или перегруженную CMS. Проверьте, включены ли сжатие текстовых файлов (gzip), кэширование статики в браузере и серверное кэширование страниц. Для сайта на HTTPS уточните у подрядчика возможность HTTP/2: он ускоряет загрузку множества мелких файлов.
В CMS отключите неиспользуемые плагины и модули. Лента новостей или материалов о изменениях в отчётности не должна при каждом открытии загружать все записи: достаточно пагинации и коротких анонсов. Скрипты и стили объединяйте и минифицируйте, но после этого проверьте формы и меню.
Проверочный список для владельца
- Зафиксированы время загрузки, вес и число запросов ключевых страниц до изменений.
- Проверка выполнена и на имитации мобильного соединения.
- Размеры изображений соответствуют их показу на странице.
- Сканы документов заменены превью, у PDF указан размер.
- Слайдеры, чаты и карты оставлены только там, где они действительно нужны.
- Подключены не более двух начертаний шрифта, лишние скрипты удалены.
- Включены сжатие и кэширование, проверено время ответа сервера.
- После правок проверены формы, меню, скачивание файлов и повторные замеры.
Такой список позволяет поставить подрядчику измеримую задачу: не «ускорить сайт», а сократить вес конкретной страницы и время ответа сервера, а затем подтвердить это повторным замером.
