Веб-производительность — это важнейший аспект веб-разработки, который фокусируется на скорости загрузки страниц, а также на том, насколько они реагируют на действия пользователя. Когда вы оптимизируете свой веб-сайт для повышения производительности, вы предоставляете пользователям лучший опыт. Улучшение пользовательского опыта во многом поможет вам достичь целей, которые вы задумали для своего веб-сайта.
Веб-производительность может показаться узкой темой, но на самом деле она одновременно обширна и довольно глубока. Учитывая глубину предметной области, очень важно, чтобы курс по веб-производительности был доступным и информативным. Первоначальный выпуск этого курса посвящен основам веб-производительности, которые новичкам должны быть информативными.
Цель каждого модуля этой серии — там, где это практически возможно, — иметь набор демонстраций, дополняющих содержание каждого модуля и демонстрирующих ключевые концепции производительности. Учитывая, что этот курс является первоначальным предложением, в ближайшие месяцы планируется опубликовать дополнительные модули.
Вот что включает в себя начальный курс Learn Performance:
Почему скорость имеет значение
Прежде чем приступить к изучению производительности, вам сначала необходимо понять ее роль в пользовательском опыте и то, как это может привести к улучшению результатов для пользователей. Этот курс начинается с краткого введения в эти темы, давая жизненно важный контекст того, почему так важно изучать производительность.
Общие соображения по производительности HTML
Каждый веб-сайт начинается с запроса HTML-документа, и этот запрос играет большую роль в скорости загрузки вашего сайта. В этом модуле рассматриваются важные концепции, такие как кэширование HTML, блокировка парсера, блокировка рендеринга и многое другое, поэтому вы можете быть уверены, что первый запрос HTML вашего веб-сайта выполнен правильно.
Понимание критического пути
Критический путь рендеринга — это концепция веб-производительности, которая определяет, насколько быстро в браузере появляется первоначальный рендеринг страницы. В этом модуле рассматривается теория критического пути рендеринга, охватываются такие понятия, как ресурсы блокировки рендеринга и парсера, а также то, как они играют ключевую роль в том, как быстро страница появляется в браузере.
Оптимизировать загрузку ресурсов
При загрузке страницы в ее HTML-коде ссылаются на многие ресурсы, которые обеспечивают внешний вид и макет страницы с помощью CSS, а также ее интерактивность с помощью JavaScript. В этом модуле рассматривается ряд важных концепций, связанных с этими ресурсами и тем, как они влияют на время загрузки страницы.
Помогите браузеру с помощью подсказок к ресурсам
Подсказки ресурсов — это набор функций, доступных в HTML, которые могут помочь браузеру загружать ресурсы раньше и, возможно, даже с более высоким приоритетом ресурсов. В этом модуле приведены несколько советов по ресурсам, которые помогут вашим страницам загружаться еще быстрее.
Производительность изображения
Изображения представляют собой большую часть данных, передаваемых сегодня на многих веб-страницах. В этом модуле рассказывается, как оптимизировать изображения, а также эффективно их обслуживать, чтобы минимизировать ненужные байты независимо от устройства пользователя.
Видео выступления
Видео — это тип мультимедиа, который часто используется на веб-страницах, но умение эффективно его обслуживать — это один из аспектов производительности, который не следует упускать из виду. В этом модуле рассматриваются некоторые ключевые методы встраивания видео таким образом, чтобы ваш веб-сайт работал быстро, а также сопутствующие вопросы производительности, которые могут возникнуть при их использовании.
Оптимизация веб-шрифтов
Веб-шрифты — это широко используемый ресурс в Интернете (и это справедливо), поскольку они добавляют к дизайну веб-сайта такие преимущества, которые не могут сделать другие ресурсы. Несмотря на это, веб-шрифты по-прежнему влияют на производительность. В этом модуле рассматривается ряд вопросов производительности и методов использования веб-шрифтов.
JavaScript с разделением кода
Некоторые ресурсы не имеют решающего значения для начальной загрузки веб-страницы. JavaScript — один из таких ресурсов, который можно отложить до момента необходимости с помощью метода, известного как разделение кода. Поступая таким образом, вы можете повысить производительность, снизив нагрузку на полосу пропускания и процессор, что является важным фактором для улучшения как начальной скорости загрузки страницы, так и скорости реагирования на ввод во время запуска.
Отложенная загрузка изображений и элементов <iframe>
Изображения и элементы <iframe> могут потреблять значительную часть пропускной способности и времени обработки ЦП. Однако не все изображения и элементы <iframe> необходимо загружать во время начальной загрузки страницы, и их можно отложить на более позднее время, когда пользователь, скорее всего, увидит их. Этот метод известен как ленивая загрузка . В этом модуле объясняется отложенная загрузка изображений и элементов <iframe> , чтобы вы могли ускорить загрузку страниц и потреблять трафик и время обработки только тогда, когда это необходимо.
Предварительная выборка, предварительный рендеринг и предварительное кэширование сервисного работника
Хотя большая часть производительности связана с тем, что вы можете сделать для оптимизации и устранения ненужных ресурсов, может показаться несколько парадоксальным предполагать, что некоторые ресурсы следует загружать до того, как они потребуются. Однако в некоторых случаях может оказаться целесообразным загружать определенные ресурсы заранее. В этом модуле исследуется этот аспект производительности, обсуждаются предварительная выборка, предварительная отрисовка и предварительное кэширование сервис-воркера.
Обзор веб-воркеров
Большая часть того, что пользователь видит в браузере, происходит в одном потоке, известном как основной поток . Однако существуют возможности, при которых вы можете запускать новые потоки для выполнения ресурсоемкой работы, чтобы основной поток мог выполнять важные задачи, с которыми сталкивается пользователь. API, который делает это, известен как Web Worker API, и в этом модуле рассматриваются его основы.
Конкретный вариант использования веб-работника
Теперь, когда у вас есть базовое представление о веб-воркерах, их возможностях и ограничениях, пришло время взглянуть на конкретный вариант использования веб-воркеров. В этой демонстрации веб-воркер используется для получения файла JPEG, извлечения его метаданных и отправки обратно в основной поток, чтобы пользователь мог видеть его в браузере.
Готовы начать изучать веб-производительность? Начните работу, прочитав сначала «Почему скорость имеет значение» .