5 самых эффективных способов сократить время загрузки вашего сайта

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

Начальное время загрузки

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

Amazon обнаружила, что каждые 100 миллисекунд задержки стоят им 1% продаж.

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

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

Добавьте правильные измерения

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

Ниже приведены наиболее важные этапы процесса загрузки:

Измерения | Диаграмма создана на Terrastruct

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

Давайте рассмотрим, как вы можете это сделать.

Запрос браузера был отправлен для ответа:

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

Ответ отправлен на полученный ответ:

Это сложнее измерить, но один из способов сделать это — добавить метку времени, когда ваш ответ покидает ваш сервер, и сравнить его с текущим временем на стороне пользователя в первый возможный момент (тег script в заголовке HTML-кода страницы). ).

Получен ответ на первый цвет контента:

Первый цвет, содержащий содержимое, относится к моменту, когда первый элемент отображается в DOM. Это может быть что-то простое: текст, фон или карусель загрузки. Это можно измерить, запустив Lighthouse в инструментах разработчика Chrome.

От первого цвета, содержащего содержимое, до самого большого цвета, содержащего содержимое:

Самый большой содержащий цвет относится к тому, когда самый большой элемент отображается в окне просмотра браузера пользователя. Обычно это сигнализирует об окончании части «рендеринга» загрузки страницы, и пользователь видит полноэкранный режим. Это также измеряется запуском Lighthouse.

Самое большое изображение контента во времени для интерактивности:

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

Минимизируйте код

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

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

Вы получаете два улучшения скорости при минимизации кода:

• Ваше приложение быстрее передается по сети.
• Браузер пользователя заканчивает синтаксический анализ кода быстрее.

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

Или они могут работать на мобильных устройствах с еще меньшей вычислительной мощностью. Разница может быть в размере секунд.

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

Но вы не хотите вырезать функции или фактически удалять код. К счастью, существует несколько стандартных методов минимизации кода без необходимости этого делать.

• Запустите свой код через минификаторы. Минификаторы выполняют такие оптимизации, как сокращение длинных имен до коротких (signUpDarkModeButton становится ss), удаление пробельных символов и другие, чтобы сделать ваш код как можно более компактным, ничего не теряя.
• Импорт частей. Библиотеки часто переполнены вещами, которые вам не нужны, но упакованы в единый пакет. Вам может понадобиться только определенная функция служебной библиотеки, поэтому вместо того, чтобы импортировать всю библиотеку, вы можете импортировать только тот код, который вам нужен.
• Мертвый код из-за тряски деревьев. Иногда вы оставляете код для целей отладки или не полностью убрали устаревшую функцию, и даже если она есть в исходном коде, она никогда не запускается. В цепочке инструментов JavaScript есть инструменты, такие как Webpack, которые могут обнаруживать мертвый код или неиспользуемые зависимости и автоматически удалять их из рабочей среды.

Разбейте код на части

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

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

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

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

Рендеринг на стороне сервера

Поскольку браузеры должны выполнять весь этот интенсивный анализ и компиляцию, а у вас есть пользователи на Chromebook и мобильных устройствах, одним из распространенных методов сокращения времени загрузки является возложение части этой нагрузки на ваши серверы. Это означает, что вместо того, чтобы предоставлять пустую страницу и затем использовать Javascript для заполнения всего содержимого, как это делают большинство одностраничных приложений в наши дни, вы можете запустить механизм Javascript на своем сервере (обычно Node.js) и заполнить как можно больше данных и содержание по возможности.

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

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

Сокращение средств

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

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

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

Во-вторых, изображения могут быть сжаты в зависимости от их формата. В наши дни webm является предпочтительным форматом, но область веб-сжатия постоянно совершенствуется, и на горизонте появилось много новых форматов. Из-за изменения характера формата некоторые браузеры могут не поддерживать более новые версии! К счастью, технология браузера позволяет браузеру пользователя загружать любой формат, который он поддерживает.

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

Заключение

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