Производительность страниц: что это, почему важно и как повысить?

Поисковая оптимизация

Производительность страниц – одна из важнейших метрик при продвижении сайта. О том, почему она так нужна, как влияет на проект и как ее повысить, расскажу в статье ниже. Это перевод материала, опубликованного на red-gate.com.

Почему производительность так важна? 

На это есть две главные причины: 

  1. Пользователи не любят ждать загрузки страницы. Инфографика на Kiss Metrics сообщает, что 47% посетителей сайтов электронной коммерции ожидают, что страница загрузится в течение 2 секунд. Если этого не происходит, высока вероятность, что люди покинут сайт.
  2. Google использует этот показатель для ранжирования сайтов: чем быстрее они загружаются, тем выше в выдаче.

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

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

Компоненты производительности сайта

Ее можно разделить на две основные области: производительность серверной части и интерфейса.

Производительность серверной части

Когда вы переходите на страницу, браузер отправляет запрос на сервер. Когда сервер получает этот запрос, ему чаще всего необходимо динамически создать хотя бы часть содержимого на этой странице. Время, в течение которого сервер может создать контент и вернуть его браузеру, является мерой производительности серверной части страницы. Эффективность запросов к базе данных, время, необходимое для выполнения любых вызовов веб-служб, и производительность кода C# или VB.NET (популярные языки программирования), если вы используете платформу ASP.NET, – все это способствует производительности внутреннего модуля.

Производительность интерфейса

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

На примере загрузки домашней страницы для simple-talk.com продемонстрируем разницу между внешней и внутренней производительностью страницы.

Консоль Chrome Web Tools

Мы видим, что загрузка HTML-кода для главной страницы simple-talk.com заняла в общей сложности 495 миллисекунд. Если мы щелкнем по первой строке в таблице (с надписью www.simple-talk.com ) и перейдем на вкладку тайминга, то сможем увидеть разбивку по времени для этого ресурса.

2269-1-558f4c5c-3eaf-491f-b98a-18f264745

Мы хотим обратить особое внимание на значение «Ожидание (TTFB)». Эта цифра включает время, которое потребовалось для обработки запроса на сервере и для передачи HTTP-запроса по сети. В данном случае значение составляет 296 мс – это относительно быстро.

Записав на видео загрузку сайта, мы смогли измерить время, которое прошло с момента ввода URL-адреса в браузер до того, как страница начала отображаться на экране и стала визуально завершенной. Через 1,97 секунды браузер начал отображать страницу на экране, и на отметке 2,4 секунды уже была визуально полная страница.

2269-simpletalkloading.gif

Нужно понимать разницу между двумя метриками: одна сообщает, сколько времени потребовалось для загрузки начальной HTML-страницы (495 мс), а другая показывает, сколько времени прошло до того, как страница стала готовой для пользователя (2,4 секунды). Эта разница отражает производительность интерфейса страницы. Многие статьи на Simple Talk за эти годы были сосредоточены на внутренних компонентах производительности (сервер и база данных). Из этого примера видно, что аспекты внешнего интерфейса также важны и часто могут составлять гораздо большую часть времени, которое пользователь тратит на ожидание отображения страницы. Итак, разберемся, что происходит между моментом, когда HTML для страницы был загружен, и тем, когда страница отобразилась для пользователя.

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

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

Домашнюю страницу Simple-Talk.com, которую мы рассмотрели в примере выше, можно улучшить. Однако скорость в 2,4 секунды на самом деле является приемлемой. Довольно часто попадаются страницы, которые загружаются в течение нескольких секунд. Данных из Kissmetrics должно быть достаточно, чтобы убедить вас в том, что мы можем и должны минимизировать время, которое пользователь проводит в ожидании загрузки. Чтобы достичь этого, надо понимать факторы, влияющие на производительность страниц, научиться определять и устранять проблемы загрузки интерфейса.

Что влияет на производительность интерфейса?

Размер страницы и скорость соединения

Общий размер страницы и всех ее ресурсов определяет, насколько быстро она загрузится и отобразится для пользователя. Для любого сайта в общедоступном интернете мы должны предполагать, что пользователь подключается через, условно говоря, медленное сетевое соединение. Широкополосные соединения сильно разнятся в зависимости от того, где вы находитесь, но в среднем в мире это всего 5 Мбит/с. Скорость подключения из мобильных сетей еще ниже, часто около 4 Мбит/с или меньше. Эти числа, как правило, представляют собой лучшие сценарии, а не когда сеть перегружена во время пикового использования.

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

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

Количество сетевых запросов

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

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

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

Упорядочивание компонентов на странице

Порядок, в котором ресурсы CSS и JavaScript появляются на странице, тоже важен для скорости загрузки. Лучше, чтобы все ресурсы CSS отображались в заголовке документа, а весь JavaScript – в конце, прямо перед закрывающим тегом body. Почему так?

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

С другой стороны, JavaScript всегда должен стоять в конце документа, прямо перед закрывающим тегом body. Многочисленные примеры показывают, что теги сценария помещаются в заголовок документа, но это неправильный подход с точки зрения производительности. Одна из характерных черт всех браузеров – они не будут отображать какой-либо элемент DOM, расположенный под тегом <script>, пока содержимое этого тега не будет загружено и проанализировано. Таким образом, имея элементы JavaScript в заголовке документа, вы фактически блокируете отрисовку страницы. Во всех случаях для загрузки и анализа JavaScript потребуется некоторое время, поэтому размещение JavaScript в любом месте, кроме конца документа, приводит к задержке. Если по какой-либо причине JavaScript загружается долго, возможно, из-за медленного сетевого подключения, пользователь увидит только белый экран.

Анализ ваших страниц

К счастью, сегодня есть бесплатные инструменты, которые позволяют быстро анализировать страницу и предоставляют отчеты по элементам, которые необходимо исправить. Первым из этих инструментов является Google PageSpeed ​​Insights, который может анализировать любой общедоступный в интернете сайт. Ниже показан пример результатов анализа.

2269-1-ed5379a5-2d5b-4871-9d14-a75600009

Как видите, рекомендации отмечены как имеющие высокое, среднее или низкое влияние на производительность страницы. Нажав на каждую, вы также получите дополнительную информацию о том, почему PageSpeed ​​Insights ее дает.

Похожий инструмент – YSlow, который изначально был разработан Yahoo. YSlow содержит более обширный набор правил, чем PageSpeed ​​Insights, и доступен как расширение браузера для Chrome, Firefox, Safari и Opera. Поскольку YSlow работает в браузере, его также можно использовать для анализа страниц, находящихся за вашим брандмауэром.

2269-1-1700ce1f-8780-4c3d-95ce-a91e482a7

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

Оптимизация страниц

Все рекомендации по повышению производительности страниц с объяснением их влияния собраны в документации сервисов:

  • https://developers.google.com/speed/docs/insights/rules
  • https://developer.yahoo.com/performance/rules.html

Перечислим наиболее распространенные советы.

Включите сжатие – сжимая данные, вы можете значительно снизить требуемые для страницы ресурсы сети. В IIS (наборе серверов, разработанном Microsoft) сжатие статического содержимого (HTML, CSS, JavaScript) включено по умолчанию, но для сжатия динамического содержимого, такого как JSON или XML, необходимо установить модуль динамического сжатия в IIS.

Кэшируйте статические ресурсы – изображения, CSS и JavaScript меняются относительно нечасто, поэтому вы можете значительно сэкономить пропускную способность, указав браузеру кэшировать эти ресурсы. Вы можете добавить в файл web.config фрагмент кода, подобный приведенному ниже.

<system.webServer>

    <staticContent>

     <clientCache cacheControlMode=»UseMaxAge» cacheControlMaxAge=»90.00:00:00″ />

    </staticContent>

  </system.webServer>

Это даст указание IIS кэшировать все статические файлы в этом каталоге и во всех подкаталогах на указанное время, в данном случае 90 дней. Имея отдельные файлы web.config для каждого каталога, вы можете эффективно определять разные политики кэширования для каждого дерева каталогов.

Проведите объединение и минификацию CSS и JavaScript. Минификация – это удаление всех лишних пробелов и комментариев из файла CSS или JavaScript, чтобы в браузер отправлялся минимально возможный синтаксически правильный файл. Объединение нескольких файлов вместе позволит браузеру сделать только один запрос для всего пакета вместо нескольких для отдельных файлов. В ASP.NET 4.5 встроено объединение и минификация. Если вы используете более старую версию ASP.NET, библиотека Cassette предоставляет почти те же функции. Еще лучше в этих библиотеках то, что они будут автоматически добавлять соответствующие заголовки в ваши пакеты, чтобы браузер кэшировал эти ресурсы, а также добавлял хэш SHA1 к URL-адресу для пакета. Если вы когда-нибудь обновите свой CSS или JavaScript, браузер будет знать, что нужно загрузить новую версию.

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

Во-вторых, используйте такие инструменты, как PNGCrush или Kraken.io, чтобы применить сжатие без потерь. Для изображений JPEG небольшое изменение настройки качества может заметно уменьшить размер файла с незначительными визуальными различиями.

Поместите все файлы CSS и теги <style> в заголовок документа – прежде чем браузер сможет создать макет страницы, он должен загрузить все файлы CSS, о чем мы уже говорили выше.

Поместите JavaScript в нижнюю часть страницы – браузер не будет отображать какой-либо элемент DOM под тегом <script>, пока сценарий, указанный в теге, не будет загружен и проанализирован. Поэтому JavaScript должен находиться в конце документа непосредственно перед закрывающим тегом <body>, чтобы страница отображалась как можно быстрее и не задерживалась в ожидании загрузки файла JavaScript.

Резюме

Чтобы сайты были быстрыми, мы должны учитывать проблемы производительности как внешнего, так и внутреннего интерфейса. В случае проблем с производительностью внешнего интерфейса такие инструменты, как PageSpeed ​​Insights и YSlow, могут быстро проанализировать страницы, выявить проблемы и дать рекомендации по устранению. Но важно пользоваться ими регулярно, чтобы отслеживать скорость загрузки и своевременно выявлять возможные проблемы. Кроме того, необходимо оптимизировать страницы. Помните: чем выше производительность сайта, тем больше он нравится пользователям и поисковым роботам.

Подпишись на рассылку дайджеста новостей от Webline Promotion

Оцените статью
Webline Blog
Добавить комментарий