Веб-производительность

Производительность — ключевой аспект пользовательского опыта. То, как быстро загружаются страницы и как быстро они реагируют на действия пользователя, может оказать существенное влияние на то, как пользователи воспринимают ваш сайт, и может повлиять на то, останутся ли пользователи на вашем сайте или покинут его. На этой странице вы найдете массу информации по различным вопросам производительности в Интернете, которая поможет вам сделать ваш веб-сайт быстрым и поддерживать его быстродействие.
Новичок в производительности? Мы подготовили для вас комплексный курс, который поможет вам начать работу.
Узнайте больше о трех показателях Core Web Vitals, о том, как они работают и почему они важны для хорошего пользовательского опыта.
После того как вы ознакомитесь с метриками Core Web Vitals, эти руководства помогут вам понять, как лучше всего их оптимизировать.
Углубитесь в основные веб-показатели с помощью коллекции руководств, в которых метрики рассматриваются более подробно.
Откройте для себя новые функции для повышения производительности, которые теперь доступны в версии Baseline Newly.
Прочтите о том, как компании улучшили свои основные веб-показатели и в результате увидели рост своих бизнес-показателей.
Узнайте, как использовать Chrome DevTools для устранения проблем с производительностью вашего веб-сайта.
КУРС

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

Изучите производительность!

Метрики Core Web Vitals представляют собой набор из трех метрик, ориентированных на взаимодействие с пользователем. Они измеряют производительность и удобство использования страниц, включая воспринимаемое время загрузки, визуальную стабильность и скорость реагирования на действия пользователя. Если вы новичок в Core Web Vitals, эти руководства познакомят вас с тем, как они работают, и дадут отправную точку для их оптимизации.
LCP — это показатель, измеряющий время, необходимое для появления на странице наибольшего фрагмента контента. Страницы с низким LCP сигнализируют пользователям о том, что ваша страница загружается быстро.
Узнать больше
CLS — это метрика, которая измеряет стабильность макета, наблюдая за страницей на предмет неожиданных изменений макета. Страницы с низким CLS сигнализируют пользователям о том, что макет страницы стабилен и не изменится неожиданно при попытке взаимодействия с ней.
Узнать больше
INP — это показатель, который измеряет, насколько страница реагирует на ввод пользователя. Страницы с низким INP сигнализируют пользователям о том, что страница быстро реагирует на взаимодействие с ними, что делает ваш веб-сайт более надежным и приятным в использовании.
Узнать больше

Оптимизация основных веб-показателей

Каждый из показателей Core Web Vitals можно оптимизировать для улучшения пользовательского опыта. В каждом из этих руководств подробно показано, как можно применить проверенные методы для повышения производительности и надежности вашего веб-сайта, чтобы пользователи оставались более вовлеченными и с меньшей вероятностью уходили.
Узнайте, как оптимизировать LCP для ваших пользователей, чтобы они могли видеть наиболее важный контент на вашей странице как можно быстрее.
Узнать больше
Узнайте, как оптимизировать CLS для ваших пользователей, чтобы они могли рассчитывать на то, что ваш веб-сайт останется стабильным и более удобным в использовании.
Узнать больше
Узнайте, как оптимизировать INP для ваших пользователей, чтобы они могли ожидать, что ваш веб-сайт будет быстро реагировать на взаимодействия.
Узнать больше

Погрузитесь глубже в основные веб-показатели

Три показателя Core Web Vitals и способы их оптимизации — отличное начало, но вокруг них есть еще больше тем, которые стоит усвоить. Эта коллекция контента поможет вам понять, как их измерять, отлаживать, а также некоторые дополнительные рекомендации по уведомлениям о файлах cookie, каруселям и другим распространенным проблемам пользовательского интерфейса.
Узнать больше
Повышение производительности не только улучшает пользовательский опыт, но и может помочь вашему бизнесу расти. Узнайте, как эти компании улучшили свои основные веб-показатели и заметили рост своих бизнес-показателей.
Узнайте, как Disney+ Hotstar увеличила количество просмотров карточек в неделю на 100 % на устройствах в гостиной, снизив INP на 61 %.
Узнать больше
Узнайте, как платформа управления согласием PubTech снизила INP на веб-сайтах своих клиентов до 64 %, а также улучшила видимость рекламы до 1,5 %.
Узнать больше
Узнайте, как компания Taboola использовала API длинных анимационных кадров (LoAF) для повышения INP до 36 % на веб-сайтах своих партнеров-издателей.
Узнать больше

Базовый уровень сигнализирует веб-разработчикам, когда функции веб-платформы можно безопасно использовать во всех основных браузерных движках. Вот некоторые функции, связанные с производительностью в Интернете, которые теперь доступны в базовой версии.
Свойство CSS content-visibility стало Baseline Newly, доступным в сентябре 2024 года.
Формат изображения AVIF стал Baseline Newly, доступным в январе 2024 года.
Предварительная загрузка модуля стала базовой версией, доступной в сентябре 2023 года.
Заголовок ответа HTTP Server-Timing стал базовым, доступным в марте 2023 года.

Chrome DevTools — это набор инструментов для разработчиков для отладки веб-приложений, в том числе инструменты, которые помогут вам понять и улучшить производительность ваших веб-приложений.
Панель «Сеть» в DevTools показывает все ресурсы, загружаемые страницей, и время, потраченное на их загрузку. Узнайте, как использовать эту панель для выявления проблем с производительностью, связанных с загрузкой ресурсов.
Узнать больше
Панель «Производительность» в DevTools показывает невероятно подробную информацию о производительности страницы во время сеанса записи, включая активность в основном потоке, сетевую активность и дополнительные инструменты, которые могут помочь вам выявить и устранить проблемы с производительностью.
Узнать больше
Панель «Память» показывает, сколько памяти используется JavaScript страницы. Научившись использовать эту панель, вы сможете обнаруживать и устранять проблемы, связанные с памятью, вызванные JavaScript страницы.
Узнать больше