Сокращение времени загрузки сайта. Часть 2-я. Клиентская оптимизация

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

    Оптимизация критического пути CSS и JS

    Критический путь рендеринга – это база ресурсов, требующихся для начала процедуры рендеринга в браузере. Зачастую в этот перечень входят:

    • HTML-документ;
    • CSS-стили;
    • веб-шрифты;
    • JS-код.

    Данный путь должен быть сокращен по временным характеристикам (учитывая сетевые задержки) и трафику (учитывая плохое соединение).

    Проще всего вычислить критический путь посредством аудита в Google Chrome (раздел на панели разработчика). Структура и время каждого из этапов с учетом указанных осложняющих факторов прописываются на вкладке плагина Lighthouse. Техника ускорения при этом предполагает удаление всего лишнего или переведение в статус отложенного.

    Оптимизация веб-шрифтов

    Подключаемые веб-шрифты – это практически стандарт современного дизайна. Негативное влияние на время рендеринга оказывается из-за тяжести файловой структуры данных элементов, а также по причине скрытия указателей на веб-шрифты в CSS-объектах. Когда в эту последовательность добавляется сетевой сервис шрифтов типа Google Fonts, задержки становятся максимальными.

    Исправляется ситуация только за счет уменьшение объема пропускаемого трафика и сокращения схемы получения шрифтов. Рекомендуется для этого использовать современный формат WOFF2 (или WOFF для настройки совместимости с устаревшими версиями веб-приложений). При этом опционально должны быть подключены только используемые сайтом наборы символов.

    Контролировать скорость отрисовки можно посредством атрибута rel = «preload» и свойства font-display CSS. Ссылка, указывающая на необходимость загрузки дополнительных файлов, заведомо предупреждает браузер, а свойство предопределяет поведение приложения:

    • ожидание;
    • прорисовка запасного шрифта;
    • отказ от ожидания при выходе за определённый временной интервал.

    Эта стадия разгона интернет-проекта зачастую является одним из этапов проверки при комплексном аудите, предваряющем SEO-оптимизацию сайта.

    Оптимизация изображений

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

    • PNG для графики с прозрачным фоном и текстовыми элементами;
    • JPEG для сложных иллюстраций и фотоснимков;
    • SVG – векторная графика.

    Альтернативой им может быть, например, универсальный формат WebP от Google, сочетающий в себе функциональные возможности всех вышеперечисленных типов, а также анимационные эффекты от GIF.

    Что касается инструментов, сжимающих изображения, то их множество (см. табл.).

    PNGoptiPNG, PNGout, EWWW Image Optimizer и тд.
    JPEGMozilla JPEG, JPEGtran (оптимизация без потерь), cjpeg (с потерями)

    Кэширование заголовков

    Это простейший подход к оптимизации клиентской части. Схема направлена на добавление в кэш редких элементов (графика, CSS, JS-файлы, шрифты или даже HTML-документ). Как итог: ресурс запрашивается с сервера единоразово, а в дальнейшем подгружается из браузера.

    Администраторам, использующим Nginx, можно добавить следующую директиву:

    add header Cache-Control "max-age=31536000, immutable";

    Кэширование будет осуществляться браузерами на срок до 1 года (с учетом периодической чистки кэша со стороны клиента этого диапазона вполне достаточно для комфортной работы).

    Параметр «immutable» указывает на неизменность ресурса в дальнейшем. Если такие изменения неизбежны, то можно в имя HTML-файла добавлять версию, либо просто сократить срок хранения кэша.

    Сжатие данных

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

    1. Следует отрегулировать степень сжатия, сделав её практически максимальной.
    2. Возможна реализация статического сжатия с добавлением заранее уменьшенных в размере файлов на какой-либо информационный носитель. Сервер гораздо быстрее найдёт и передаст эти данные.
    3. Повысить эффективность сжатия можно, дополнив gzip альтернативным форматом zopfli (между собой они полностью совместимы). Еще один вариант, актуальный исключительно при работе с HTTPS-протоколом, – brotli-сжатие (новый алгоритм).

    Максимизировать сжатие можно, предварительно осуществив чистку текста (удаление ненужной информации, лишних пробелов и прочих символов). Это специфический процесс, индивидуальный для каждого формата.

    Промежуточные выводы

    Обрабатывая клиентскую часть, вы должны учитывать интересы каждого пользователя своего веб-сайта. Предпочтительно изначально обратиться в профильную веб-студию, компетентные и ответственные специалисты которой смогут в кратчайшие сроки реализовать все этапы оптимизации, удовлетворив техническим требованиям и запросам клиента. Можно заказать поисковое продвижение сайта с предварительным SEO-аудитом проекта, что значительно повысит его качественный уровень. Желаем успехов!

    0
    Комментарии
    Подписаться
    Уведомление о
    Встроенные отзывы
    Просмотр всех комментариев
    Яндекс.Метрика
    Top.Mail.Ru