Как сохранить старые ссылки
После обновления сайта адрес услуги изменился, а реклама, закладки и внешние публикации ведут на прежнюю страницу. Таблица соответствий и постоянные перенаправления помогут привести посетителей к нужному материалу.
Как облегчить фотографии на сайте
После добавления фотографий страница стала медленно открываться на телефоне. Исправление начните с размеров файлов, вариантов для разных экранов и порядка загрузки — без замены всех снимков.
Подготовьте фотографии под размер блока
Выберите одну проблемную страницу и запишите, где стоят фотографии: большая обложка, карточки, галерея с увеличением. Для каждого места уточните максимальный размер отображения. Оригинал шириной 6000 пикселей обычно не нужен для небольшой карточки.
Сделайте несколько вариантов одного снимка: обрежьте под пропорции блока, уменьшите разрешение и сравните степень сжатия. Например, для блока шириной 600 CSS-пикселей можно проверить версии 600 и 1200 пикселей для экранов разной плотности. Это пример подготовки, а не универсальное требование.
Попросите разработчика настроить выбор подходящего файла через srcset и sizes, чтобы телефон не загружал вариант для большого экрана без необходимости. Принцип адаптивных изображений разобран в учебном материале web.dev. Исходники храните отдельно от опубликованных копий.
Загружайте сначала то, что видно сразу
Разделите изображения по расположению. Главная фотография в начале страницы должна запрашиваться без ожидания прокрутки. Для галереи ниже можно включить loading="lazy": браузер отложит загрузку до приближения изображения к видимой области.
В руководстве web.dev по отложенной загрузке отдельно отмечено, что loading="lazy" следует исключать у изображений первого экрана. Поэтому настройка «ленивая загрузка везде» требует проверки каждого шаблона.
Задайте изображениям width и height с правильными пропорциями. Эти размеры помогают браузеру заранее зарезервировать место, чтобы текст и кнопки не сдвигались после появления фотографии. Механизм объяснён в руководстве web.dev по изображениям в HTML.
Сравните результат в одинаковых условиях
До изменений сохраните размер загружаемых изображений и снимок процесса загрузки во вкладке Network инструментов браузера. После изменений повторите проверку с той же шириной окна, ограничением скорости и отключённым кешем. Иначе повторное открытие может показаться быстрым только благодаря кешу.
Посмотрите на страницу глазами клиента: читаются ли детали изделия, не обрезан ли важный объект, удобно ли открывать увеличенную фотографию. Если мелкие детали нужны только при увеличении, оставьте для этого отдельный крупный файл, а в сетке показывайте облегчённую версию.
Перед массовой заменой файлов сохраните возможность отката. Для сайта на WordPress подойдёт порядок из статьи о проверке резервной копии. Сначала испытайте обработку на одной странице, затем применяйте её к остальной галерее.
Источники
Частые вопросы
Какой вес фотографии считать нормальным?
Единого значения для всех изображений нет. Сравните несколько вариантов экспорта в реальном размере блока и выберите самый лёгкий, на котором сохраняются нужные детали. Затем проверьте загрузку всей страницы.
Можно ли включить отложенную загрузку для всех фотографий?
Для изображений первого экрана это обычно не подходит: посетитель должен увидеть их сразу. Отложенную загрузку применяют прежде всего к изображениям ниже видимой области.