Повышение производительности мобильного веб-сайта

Огромное количество сайтов технически устарело, так как дата создания относительно старая, а сами сайты не имеют должную поддержку. В веб-разработке новые технологии появляются постоянно, что приводит к улучшению производительности сайтов и веб-приложений. Многим разработчикам приходится поддерживать и оптимизировать сайты под мобильные устройства. Быстрая работа с мобильными устройствами имеет решающее значение для пользователей и бизнеса. Ожидания пользователей в отношении мобильных устройств постоянно растут, и крайне важно опережать этот спрос. В данной статье представлен обзор способов, которые могут помочь существенно улучшить производительность на мобильных устройствах для уже существующих веб-сайтов.

Удаление лишних подключений

Первым шагом, необходимо рассмотреть запросы, которые выполняют страницы, что можно легко сделать в Chrome DevTools (или с такими сайтами, как WebPageTest). Существуют ситуации, когда загружается слишком много контента, либо этот контент не нужен, вовсе. Например, зачем загружать изображение для мобильного устройства, если оно должно отображаться только на компьютере? Это быстрая проверка, которая поможет сэкономить много килобайт.

Еще одна вещь - неправильный порядок загрузки ресурсов, который приводит к увеличению времени загрузки страницы. Для решения данной проблемы следует обратить внимание на узкие места, указанные далее.

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

Если в приложении присутствует сторонний javascript-код, необходимо указать ему свойство async, браузер автоматически решит, когда ему следует загрузить файл.

Встроенный javascript-код нельзя загружать асинхронно, поэтому происходит блокировка рендеринга, чтобы избежать данной неприятности, необходимо поместить код перед загрузкой css.

Правильный порядок загрузки выглядит следующим образом:

1.  Шрифты
2. CSS-файлы;
3. Сторонний javascript-код
4. Изображения
5. Встроенный javascript-код

Ленивая загрузка изображений

Большинство сайтов подгружают все изображения сразу, поэтому реализация отложенной загрузки является самым логичным шагом в данной ситуации.

API Intersection Observer прекрасно справляется с данной задачей. Данный API включает в себя пакет react-intersection-observer, который немного облегчает жизнь.

Например, включение представленной технологии на тестируемой странице привело к значительному уменьшению размера изображения с 1,21 Мб до 122 Кб.

Оптимизация JavaScript

Javascript, безусловно, является наиболее тяжелым объектом для загрузки браузером, поскольку он блокирует рендеринг и приостанавливает основной поток, поэтому каждый килобайт, который возможно оптимизировать, оказывает прямое влияние на производительность.

Поэтому необходимо применять webpack-bundle-analyzer для проверки пакетов. Это очень удобный инструмент, который возможно использовать для оптимизации вашего клиентского набора скриптов, так как с его помощью очень легко увидеть, какие пакеты слишком большие по размеру, а какие пакеты не должны входить в общий набор.

Оптимизация CSS

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

Кэширование ответов на вызовы сервисов

Страницы совершают запросы на разные микросервисы, некоторые запросы персонализированные, а некоторые показывают данные в реальном времени. Эти сервисы нельзя кэшировать, но существует возможность кэшировать сервисные ответы за определенные промежутки времени.

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

Прежде всего, нужно выяснить, какой будет лучшая продолжительность кэширования, если обе стороны кэшируют ответ. Например, если обе стороны кэшируют в течение 30 минут, может потребоваться до 60 минут, прежде чем содержимое веб-сайта изменится.

Обновление до babel 7 и удаление серверной трансляции

Это что-то вроде технического улучшения под капотом. Иногда, Webpack настроен так, что он переносит код клиента на сервер, чтобы поддерживать устаревшие браузеры, в большинстве случаев от этого можно полностью отказаться.

Единственное, что на самом деле необходимо передавать - это функциональность импорта / экспорта, потому что переписывание всего require занимает много времени. Эмпирическое правило -  если отсутствует потребность в импорте, необходимо использовать require на сервере.

Обновление с 6 до 7 позволяет избавиться от большого количества килобайт, которые серверу больше не нужно обрабатывать.

Реализация возможности производительности до конца

Использование всех представленных методов не означает, что необходимость в концентрировании на быстродействии и производительности отпадает, напротив, данная потребность всегда должна стоять во главе угла.

Для достижения хорошей производительности набор javascript-скриптов должен быть ниже 150 КБ, показатель производительности Lighthouse должен быть выше 90, а метрики, ориентированные на пользователя, должны иметь несколько хороших рекомендаций от Google.

Заключение

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