Веб-производительность и скорость: лучшие методы
Опубликовано: 2021-08-30Скорость загрузки и веб-производительность у всех на слуху в сообществах SEO и webperf, а также в более широком смысле в области электронного маркетинга и электронной коммерции.
Как напоминает нам Энди Дэвис, консультант и эксперт по веб-производительности:
«Контекст влияет на опыт,
опыт влияет на поведение,
поведение влияет на доходы бизнеса».
Так что, пытаетесь ли вы увеличить свой доход, SEO или и то, и другое, вы должны знать, что быстрые страницы необходимы для качества вашего взаимодействия с пользователем. Скорость также помогает подавать правильные сигналы в Google, который учитывает скорость с момента обновления Page Experience.
Как вы также знаете, сайт должен соответствовать ожиданиям пользователей, прежде чем соответствовать ожиданиям поисковых систем. Таким образом, скорость отображения и интерактивность являются частью предпосылок для качественного взаимодействия с пользователем, в первую очередь для повышения вовлеченности и конверсии! Обратите внимание, например, что, согласно исследованию Google, 77% пользователей Интернета более склонны делать заказы на сайте или в приложении, которое позволяет им быстро завершить покупку.
Но какие методы оказывают наиболее заметное влияние на ваших посетителей, чтобы предложить им плавный просмотр и реальное ощущение скорости?
Вот контрольный список, организованный по рычагам оптимизации для повышения скорости отображения и интерактивности.
Оптимизировать скорость отображения сайта
Чем светлее страница, тем меньше времени требуется для ее отображения.
В дополнение к оптимизации ресурсов вы можете установить скорость отображения и размеры различных элементов, составляющих страницу, чтобы улучшить ощущение скорости и удобства использования. Вот несколько важных техник:
- Сжатие изображений в наиболее эффективные форматы
Форматы нового поколения WebP (рекомендуется Google) и AVIF (предлагает еще лучшие результаты) позволяют уменьшить вес изображений до 50% по сравнению с JPEG, сохраняя при этом оптимальное визуальное качество. Зная, что вес изображений составляет около 50% веса страниц, это важный рычаг для ускорения работы ваших страниц. - Адаптируйте отображение мультимедиа и изображений к разным экранам
Изменяйте размер и определяйте размер мультимедиа и изображений в зависимости от того, посещает ли пользователь ваш сайт с мобильного или компьютера. - Уменьшить вес ресурсов страницы
Оптимизируйте свой код: минимизация (удаление ненужных символов) файлов HTML, JS и CSS, а также сжатие ресурсов (форматы Gzip и Brotli), а в некоторых случаях и конкатенация — все это хорошие практики для уменьшения веса страниц и, следовательно, ускорения отображение в браузере. - Ленивая загрузка
Этот метод заключается в загрузке только того, что видно на экране, вместо загрузки всей страницы. Другими словами, браузер обеспечивает только строго необходимые усилия по отношению к тому, что посетитель должен увидеть на своем экране. - Оптимизировать шрифты
Вы можете оптимизировать формат ваших шрифтов (например, WOFF2, который экономит от 30 до 50% размера файла), а также выбрать отображение текста, даже если шрифт еще не загружен браузером, чтобы ускорить рендеринг. - Устраните блокирующие ресурсы и загрузите их асинхронно
Избегайте блокировки рендеринга ваших страниц: предпочитайте асинхронную загрузку ресурсов, особенно для CSS (критический CSS), JS (асинхронный и отложенный) и шрифтов (отображение: подкачка).
Конечно, если у вас нет выбора, потому что некоторые ресурсы необходимы в начале загрузки страницы, эти ресурсы должны быть как можно более легкими. - Примите правильную стратегию кэширования
Чтобы страницы отображались максимально быстро для ваших пользователей, кешируйте статические элементы.
Для этого нужно заранее определить динамический контент и статический контент, а также определить правила кеширования статического контента: на какой срок и на какой кеш (браузер, источник или CDN).
[Пример успеха] Управление сканированием ботов Google
Читать тематическое исследованиеУлучшение интерактивности: мгновенно реагирующие страницы
В дополнение к скорости, с которой элементы отображаются в браузере, возможность взаимодействия необходима для обеспечения полного удовлетворения ваших пользователей.
В противном случае вы подвергаете их разочарованию, которое выражается в поведении, таком как яростные клики, лихорадочное движение мыши по странице или случайная прокрутка, чтобы проверить, работает ли страница.
В худшем случае ваши посетители вернутся на предыдущую страницу, либо навсегда покинут ваш сайт, чтобы выполнить новый поиск в Google, либо перейдут к вашим конкурентам.
Помните, что в случае негативного опыта 43% интернет-пользователей перейдут за следующей покупкой на сайт конкурента. Поэтому вы должны предоставить себе средства для привлечения, а также для удержания ваших посетителей.
Чаще всего причиной плохой интерактивности могут быть сторонние скрипты и Javascript. Действительно, пока браузер занят извлечением, анализом и выполнением JavaScript, он не может реагировать на действия пользователя.
Здесь снова есть методы оптимизации вашего кода и ваших третьих лиц, чтобы ваши посетители могли наслаждаться оптимальным опытом:
- Уменьшите влияние третьих лиц, задержав их загрузку
Вы можете начать загрузку и выполнение скриптов после того, как приоритетные элементы контента будут отображены на вашей странице. Но будьте осторожны: имейте в виду, что отсрочка загрузки JavaScript не делает его бесплатным с точки зрения производительности!
Можно отложить загрузку некоторых функций (чат, виджеты, отслеживание...) после отображения основных элементов, чтобы успокоить пользователя, но это не отменяет время, необходимое браузеру для обработки кода, это только сдвигает его во времени. - Сокращение времени выполнения JavaScript
Разделите задачи, которые занимают время вашего браузера (длительные задачи), а также обязательно отдайте предпочтение короткой обработке в ответ на взаимодействие с пользователем (например, избегайте активного прослушивания определенных событий, таких как прокрутка; и используйте время, когда браузер свободное время для выполнения определенной обработки JavaScript). - Уменьшить работу основного потока
Браузер сможет быстрее реагировать на взаимодействия, уменьшив количество запросов и размер обменов.
Экономьте и время: автоматизируйте методы оптимизации вашего сайта
Мы только что рассмотрели два очень важных аспекта взаимодействия с пользователем: скорость отображения и интерактивность. Хорошая новость заключается в том, что все оптимизации, которые мы только что упомянули в этом контрольном списке, могут быть автоматизированы!
Кроме того, вы, возможно, связались с двумя базовыми веб-визитами Google, которые позволяют вам оценить эти аспекты соответственно: самая большая содержательная отрисовка и первая задержка ввода.
Конечно, вы также должны подумать об улучшении визуальной стабильности своих страниц для оптимального взаимодействия с пользователем, работая над своим кумулятивным показателем сдвига макета.
Вы должны знать, что эти 3 показателя (LCP, CLS и Total Blocking Time, или TBT, эквивалент FID) составляют 70% оценки, приписываемой PageSpeed Insights.
Таким образом, логически все, что вы делаете для ускорения своих страниц и оптимизации этих показателей, окажет положительное влияние на ваших пользователей, а также на ваши показатели производительности.
Короче говоря, вы можете применить к своему UX тот же подход, что и к SEO: качественный контент и опыт гарантируют удовлетворенность пользователей и способствуют лучшей индексации Google.
Кроме того, как и в SEO, оптимизация webperf должна поддерживаться с течением времени.
Это требует времени и опыта, потому что методы и показатели быстро развиваются. Более того, даже в больших командах у технических ресурсов не всегда есть время или знания для эффективного поддержания скорости сайта; и развертывание ресурсов и энергии для операции коммандос, которая падает, как суфле, очень расстраивает и даже обескураживает.
Итак, вместо того, чтобы тратить время на обслуживание, бояться побочных эффектов при каждой эволюции сайта и умножать плагины с риском перегрузить его, лучше автоматизировать применение всех методов оптимизации фронтенда с помощью одного инструмента!
Вы должны знать, что в большинстве случаев для сайтов электронной коммерции с высоким трафиком ROI решения по оптимизации webperf легко измерить.
Действительно, Google подсчитал, что -0,1 секунды времени загрузки могут привести к конверсиям +8%, чего можно очень легко достичь с помощью решения для оптимизации внешнего интерфейса.
В Fasterize мы обнаружили, что часто даже увеличения коэффициента конверсии менее чем на 1 балл достаточно для обеспечения рентабельности нашего решения SaaS; не говоря уже о времени, сэкономленном техническими командами.
Бизнес - это сухожилия войны, вы можете сделать расчет самостоятельно, и это легко сделать! Это позволяет вам понять интерес к автоматизации оптимизации производительности, а также убедить и привлечь ваши внутренние команды.
Экономьте время на всех фронтах!