Как сократить время загрузки страниц на сайте переводческого бюро

Клиент ищет перевод документов или технического текста, открывает несколько сайтов и работает с тем, который открылся быстрее. У сайтов переводческих бюро есть типичные причины медленной загрузки: сканы образцов, шрифты для нескольких алфавитов, калькулятор стоимости, чат и карта. Ниже разберём, как найти и убрать самые заметные задержки.

С чего начать: замерить, а не угадывать

Откройте главную, страницу услуги и страницу заказа в Chrome. В DevTools на вкладке Network включите ограничение скорости (например, Fast 3G) и перезагрузите страницу. Запишите три числа: время ответа сервера на первый запрос, общий вес страницы и количество запросов. Дополнительно проверьте страницы в WebPageTest и Google PageSpeed Insights. Используйте их как источник подсказок, а не как цель набрать максимум баллов. Замеры делайте до правок и после каждой, иначе будет непонятно, что сработало.

Сканы, сертификаты и фото: как не отдавать оригиналы

Бюро охотно показывают образцы переводов, дипломы, сертификаты и фото команды. Часто это файлы по несколько мегабайт, которые вставлены в блок шириной 400 пикселей. Что сделать:

• на странице показывать миниатюру нужного размера, а оригинал открывать по клику;
• готовить изображения под реальную ширину блока, с запасом для экранов с высокой плотностью, и подключать несколько размеров через srcset;
• сжимать JPEG с умеренным качеством и проверять результат глазами, особенно на сканах с мелким текстом;
• загружать картинки ниже первого экрана только при прокрутке (сейчас это делается скриптом);
• логотипы и значки языков отдавать в SVG или одним спрайтом, а не тридцатью отдельными файлами.

Шрифты для многоязычного сайта

Дизайнер подключил шесть начертаний, а версия на другом языке добавила ещё один шрифт. Каждое начертание — отдельный файл, и браузер ждёт его, чтобы показать текст как задумано. Оставьте два-три начертания, подключите только нужные наборы символов (кириллица и латиница) и проверьте, что шрифты отдаются в сжатом формате WOFF/WOFF2. Для редких языков, например арабского или китайского, не грузите веб-шрифт на весь сайт. Достаточно подключить его на страницах этих языков и задать запасной системный шрифт.

Калькулятор, чат, карта: лишние скрипты

Типичный набор: онлайн-чат, обратный звонок, счётчики, карта с адресом офиса, слайдер, форма с загрузкой файлов, калькулятор стоимости. Если всё подключено в начале страницы, браузер не показывает контент, пока не обработает скрипты. Что помогает:

• подключать скрипты с атрибутом async или defer, если они не нужны для первого экрана;
• показывать вместо интерактивной карты картинку-заглушку и загружать саму карту после клика;
• запускать чат через несколько секунд после загрузки страницы;
• подключать калькулятор и библиотеку загрузки файлов только на страницах, где они есть;
• отключить плагины CMS и библиотеки, которыми никто не пользуется.

Сервер, кэш и сжатие

Если сервер долго отвечает на первый запрос, оптимизация картинок этого не исправит. Проверьте, что страницы услуг, которые редко меняются, отдаются из кэша, а не собираются при каждом заходе. Это особенно важно для языковых версий, где тексты берутся из базы. Включите сжатие текстовых файлов (gzip) и задайте срок хранения для картинок, стилей и скриптов, чтобы повторный визит не скачивал их заново. Уточните у хостинга, работает ли HTTP/2 вместе с HTTPS. Если заказчики приходят из разных стран, имеет смысл оценить CDN.

Условный пример: страница «Перевод документов»

Представим типичную страницу, которая плохо оптимизирована. В шапке слайдер из пяти фото шириной 1920 пикселей. Подключено шесть начертаний шрифта. Чат, карта и калькулятор загружаются в начале страницы. В блоке «Образцы» двенадцать сканов в полном размере. Как можно её переработать:

• слайдер заменить одним изображением подходящего размера с заголовком и кнопкой «Рассчитать стоимость»;
• оставить два начертания шрифта;
• скрипты перенести в конец страницы и подключить с defer;
• карту показывать по клику в блоке контактов;
• образцы показывать миниатюрами по 400 пикселей, оригинал открывать в увеличенном виде.

Конкретные цифры зависят от сайта, поэтому сравнивайте только свои замеры до и после.

Проверочный список перед запуском правок

• Записаны время ответа сервера, вес и число запросов для главной, страницы услуги и страницы заказа.
• Ни одно изображение не больше, чем нужно в своём блоке.
• Сканы образцов открываются по клику, а на странице стоят миниатюры.
• Подключено не больше трёх начертаний шрифта, лишние наборы символов убраны.
• Скрипты чата, аналитики и виджетов не блокируют показ первого экрана.
• Карта и калькулятор загружаются только там, где они нужны.
• Включены кэш страниц, сжатие и сроки хранения статических файлов.
• После каждого изменения проверено, что форма заказа и загрузка файлов работают на телефоне.

Вносите правки по одной и каждый раз повторяйте замер. Так будет видно, что дало эффект, и можно быстро откатить то, что сломало форму или вёрстку.

Все статьи блога