Что такое вес страниц и на что он влияет

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

Зачем нужен вес страниц

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

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

При ранжировании сайтов по запросам пользователей поисковые системы Google и Яндекс учитывают множество различных факторов. Вес страниц — один из них.

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

Каким бывает вес страниц

Вес бывает статический и динамический.

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

Динамический — рассчитывается исходя из факторов, которые зависят от поисковых запросов. В таком случае, текст запроса сравнивается поисковыми системами с контентом на сайте, метаданными, анкорами ссылок и другими элементами страницы. Это не постоянный вес, он изменяется в зависимости от активности пользователей на сайте: переходы по ссылкам на сайте (клики по ссылкам), количество посещений страницы, время пребывания на ней и других действий.

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

Внутренние ссылки играют важную роль в статическом и динамическом весе. Они организовываются с помощью перелинковки внутри сайта.

Перелинковка

Перелинковка — объединение страниц внутри сайта или разных ресурсов с помощью гиперссылок.

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

1. На странице не должно быть больше одной ссылки на одну и ту же страницу.
2. Страница не должна ссылаться сама на себя — содержать ссылки, которые ведут на ту же страницу, где находится пользователь.
3. Текст ссылки должен быть релевантен содержимому страницы, на которую ведет ссылка.

С грамотно организованной перелинковкой:

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

Как передается вес

Передача веса происходит очень просто — вес передается или перераспределяется с одной страницы на следующую с помощью ссылок. Чаще всего самая большая масса у главной, так как почти все страницы ресурса ведут на неё.

Приведем пример — допустим, вес главной страницы равняется 10. Тогда, при наличии одной ссылки на этой странице, страница, на которую она ведет, также будет равняться 10. При наличии четырех ссылок, вес разделится между ними поровну, то есть на каждую страницу пойдет 2,5. Чем больше ссылок будет находиться на странице, тем меньше вес она им отдаст.

Метод расчета статического веса

Определить вес страниц можно автоматически с помощью специальных сервисов и программ, например, Netpeak Spider. Для этого нужно в настройках сканирования перейти на вкладку «Параметры» и выбрать «Внутренний PageRank». После этого вес страниц будет рассчитываться автоматически.

Обязательно для расчета нужно включить параметр «Исходящие ссылки». Это важный момент, так как исходящие ссылки — это основа ссылочной связи.

Возьмем для примера небольшой сайт. Ниже — изображение с результатом сканирования:

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

Выводы

Вес страницы сайта показывает поисковым системам его «авторитетность» и влияет на ранжирование. Поэтому:

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

2. Увеличивать количество ссылающихся доменов максимально естественным образом.
3. Организовать грамотную внутреннюю перелинковку, которая будет полезна пользователям и перераспределять внутренний ссылочный вес на важные для продвижения страницы.

Что такое вес страницы и вес ссылки

• Что такое вес страницы сайта
• Как он определяется
• Что такое вес ссылки
• От чего зависит ссылочный вес
• Вес покупных ссылок (SEO-ссылок)
• Как работает ссылочный вес
• Статический вес страницы сайта
• Как рассчитывается статический вес страницы сайта
• Как увеличить статический вес с помощью внутренних ссылок
• Как мы используем статический вес страницы
• Внешние ссылки
• Как запретить передачу веса ссылки

Что такое вес страницы сайта

Вес страницы сайта — это абстрактная величина, обозначающая степень качества страницы для поисковиков.

Поисковые системы постоянно придумывают различные факторы ранжирования документов (далее термин “документ” используется в значении “страница”). Специальные алгоритмы способны оценивать как сайт в целом, так и отдельные страницы. Точные критерии, по которым они это определяют, неизвестны (поисковики скрывают об этом информацию, т.к. вебмастеры смогли бы управлять выдачей, создавая сайты для поисковых роботов, а не для пользователей). Зато, со временем, SEO специалисты узнали большое количество параметров. Существует множество параметров, которые определяют вес страницы сайта.

Как определяется вес страницы

Общий вес страницы это сумма внешних и внутренних факторов страницы.

К внешним, например относятся ссылки, которые ведут на страницу с внешних ресурсов.

Что такое вес ссылки

Вес ссылки — это абстрактная величина, означающая степень влияния ссылки на ранжирование поисковиков. Чем вес ссылки больше, тем большее влияние она оказывает.

От чего зависит вес ссылки

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

• Авторитетность ресурса, на котором размещена ссылка. Чем больше уровень доверия посетителей к сайту донору, тем лучше.

Как узнать, является ли ресурс трастовым? В Яндексе существует индекс качества сайта (ИКС), который можно проверить в Яндекс Вебмастере. “Качество сайта — показатели качества“. Также вы можете сравнить этот показатель с показателями у конкурентов.

К тому же существует множество инструментов и сервисов (например, https://pr-cy.ru/). Анализ сайтов у них происходит по внутренним алгоритмам, поэтому не нужно воспринимать информацию оттуда слишком серьёзно, но для примерного сравнения с конкурентами они подходят хорошо;

• Популярность страницы среди посетителей. Если на странице часто бывают пользователи, значит она более весома по сравнению с другими.
• Сумма ссылок на странице. Авторитет, который способна передать страница, делится между ссылками.
• Правильный анкор ссылки. Хороший анкор соответствует тематике документа (на который ведёт ссылка) и не содержит в себе большое количество ключевых слов.
• Тематика. Если она размещена на тематической странице, то считается более значимой.
• Ссылочный возраст. Авторитет ссылки растёт по мере её “взросления”, но это происходит до определённого момента, т.к. практически любая информация устаревает и, рано или поздно, ссылочный вес начинает падать.
• Расположение. Например, самые значимые ссылки расположены в главном тексте страницы (их называют контекстными).
• Вид ссылки. К примеру неактивные (по ним не переходят), и редиректные (их URL отличается от URL той страницы, на которую они ведут) не передают никакой значимости. А ссылки в виде текста оцениваются выше, нежели в виде изображения.
• Количество переходов по ссылке. Если посетители часто кликают по ссылке, то это рассматривается поисковиками как хороший сигнал.
• Время нахождения на том документе, на который ссылаются. Чем дольше посетители находятся на данной странице, тем лучше.

Вес покупных ссылок (SEO-ссылок)

Яндекс рассматривает покупные ссылки как способ повлиять на ранжирование, и они не несут пользы для целевой аудитории. Их вес минимальный. К тому же, если на сайте размещено большое количество покупных ссылок, сайт с высокой вероятностью попадёт под фильтр, что отрицательно повлияет на ранжирование.

Признаки покупной ссылки:

1. Анкор ссылки оптимизирован под коммерческие запросы для документа, на который она ведёт;
2. С ней, за минимальный промежуток времени, на сайте появилось множество других аналогичных ссылок;
3. Размещена на продающем ссылки сайте. Подобный ресурс ссылается на сайты различных тематик, а тексты ссылок на нём оптимизированы под ключевые слова;
4. Бесполезна для посетителя;
5. Эта ссылка размещена в незаметном месте.

Как работает ссылочный вес

Представим 2 сайта. №1 — авторитетный, №2 — новый.

• №1 ссылается на №2. Ссылка хорошая, размещена в нужном месте и на популярной странице;
• Поисковики замечают, что трастовый сайт ссылается на новый и начинают рассматривать второй ресурс как более качественный;
• Если на новый сайт начнёт ссылаться множество авторитетных ресурсов, то шансов вырасти в позициях у него станет больше.

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

Во-первых, ссылки не должны быть покупными, иначе существует риск попасть под фильтр поисковых систем.

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

Статический вес страницы сайта

Как рассчитывается статический вес страницы сайта

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

У нас есть 4 документа на сайте. Условный вес каждого равен единице.

1. Изначально нам необходимо применить коэффициент затухания, говорящий о том, что документ не может передать весь авторитет (как правило, он равен 0,85).
2. Далее делим вес на количество ссылок, расположенных на документе.
3. Итоговый авторитет добавляем к изначальному после того, как сделаем расчёт всех документов.

Страница A. Умножаем вес документа (1) на коэффициент затухания (0,85) — 1 * 0,85 = 0,85. Затем делим на количество ссылок (3) — 0,85 : 3 = 0,283 (столько авторитета передаёт страница A остальным)

Страница B. Умножаем вес документа (1) на коэффициент затухания (0,85) — 1 * 0,85 = 0,85. Затем делим на количество ссылок (1) — 0,85 : 1 = 0,85

Расчёт веса документов C и D аналогичен документу B

Прибавляем итоговые значения к изначальным:

На документ A ссылается документ B. Прибавляем вес, который передаёт документ B к изначальному авторитету документа A — 0,85 + 1 = 1,85

Расчёт веса документов C и D аналогичен расчёту документа A — 0,85 + 1 = 1,85

На документ B ссылается 3 документа A, C и D — 0,283 + 0,85 + 0,85 +1 = 2,983

Авторитет документа B больше остальных, т. к. на него ссылается 3 документа. На этом вычисления не заканчиваются. Дальше нам необходимо сделать те же вычисления, но уже с новыми значениями:

Как видим, документ A имеет больше авторитета, чем документы C и D. Для точности вычислений, необходимо дополнительно сделать несколько итераций, но для примера хватит и этого.

Как увеличить статический вес с помощью внутренних ссылок

Основные правила увеличения веса документа с помощью внутренних ссылок:

1. Чем больше документов внутри сайта имеют ссылки на нужный нам, тем лучше;
2. Чем качественнее и весомее эти документы, тем больше веса ссылок они смогут передать;
3. С повышением количества ссылок на документе, передающем вес, падает авторитет, который он способен передать каждому отдельному документу;
4. Внутренняя ссылка должна быть полезна пользователю.

Как мы используем статический вес страницы

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

Рассмотрим на примере (для упрощения вес всех ссылок одинаковый и вес страницы зависит только от их количества).

1. Мы проанализировали нашу страницу и узнали, что вес нашей страницы — 5 ссылок;
2. Затем проанализировали страницу конкурента и узнали, что у него ссылок 20;
3. Делаем вывод. Для того, чтобы догнать конкурента по статическому весу страницы, нам нужно сделать дополнительно 15 ссылок на сайт. В идеале, сделать больше.

Внешние ссылки

Внешние ссылки делятся на искусственные и естественные

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

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

Как запретить передачу веса ссылки?

Бывают ситуации, когда вебмастер не хочет передавать авторитет ссылки. Например, его посетители часто вставляют ссылки на другие сайты в комментарии или он просто не уверен в качестве ресурса, на который ссылается.

Для того, чтобы запретить передачу веса ссылки, можно использовать значение атрибута “rel” (расположенный в теге <a>) “nofollow”. Атрибут говорит поисковым роботам, что данную ссылку не нужно сканировать, и, соответственно, ссылочный вес странице не присвоится.

Пример:

<a href=»http://site123.ru» rel=»nofollow«>Неизвестный сайт</a>

Как уменьшить вес страницы на вашем веб-сайте [Краткое руководство]

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

И люди делают замечают, как долго загружается страница. На самом деле, согласно данным Pingdom, 24% пользователей покинут сайт, загрузка которого занимает четыре секунды, и 38% пользователей покинут страницу, если загрузка займет пять секунд.

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

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

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

Что такое размер страницы?

«Размер страницы» — также называемый весом страницы — относится к общему размеру конкретной веб-страницы.

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

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

Чтобы помочь вам оценить вес вашей страницы, мы изучили средний размер веб-страницы (как для настольных компьютеров, так и для мобильных устройств) в период с 1 февраля 2020 г. по 1 марта 2020 г.:

Размер изображения

В 2020 году средняя веб-страница для ПК весила 2080 КБ , а средняя мобильная веб-страница весила 1885 КБ — это разительное отличие от 2017 года, когда средняя веб-страница для ПК весила 1532 КБ средняя мобильная веб-страница весила 1354 КБ.

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

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

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

Но в целом нужно стремиться к при или ниже среднего.

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

Возьмем, к примеру, Amazon — используя Google PageSpeed ​​Insights, я провел поиск на Amazon.com и увидел, что они набрали всего 51% из 100% производительности страницы:

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

Однако, если вы не уверены, может ли вес вашей страницы непропорционально снизить общее качество страницы, попробуйте ввести свой собственный веб-сайт в Google PageSpeed ​​Insights, чтобы оценить общую производительность.

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

5 советов по уменьшению размера страницы

1. Изменение размера и сжатие изображений

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

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

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

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

Если вы ищете инструмент для сжатия, вот некоторые из наших фаворитов:

• Compressor. io
• Compressjpeg.com
• Jpegmini.com

Если вы являетесь пользователем HubSpot, вам повезло: COS HubSpot поддерживает автоматическое изменение размера и сжатие изображений.

«Если пользователь загружает изображение размером 5000 x 5000, но отображает его на веб-сайте только как 500 x 500, то использование автоматического изменения размера изображения поможет сократить время загрузки браузера. С другой стороны, сжатие изображения , уменьшает размер файла, сохраняя при этом качество загруженного изображения», — объясняет Мэгги Химба из HubSpot.

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

2. Используйте спрайты CSS

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

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

Введите спрайты CSS.

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

Для пояснения ниже приведено более наглядное объяснение. Пример A включает отдельные файлы изображений для каждой из иконок браузера общим размером 70,7 КБ. Пример B использует спрайты CSS — одно изображение, которое использует CSS для отображения частей этого изображения — для отображения одной и той же точной информации. Общий размер этих изображений меньше половины примера A.

Источник: Tutorial Republic

3. Удалите ненужные пользовательские шрифты

Пользовательские шрифты — это весело.

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

К счастью, есть решение, если вы считаете, что пользовательские шрифты необходимы для дизайна вашего веб-сайта: создание файла WOFF2.

Как пишет Джошуа Стоппер, ведущий разработчик Wholegrain Digital: «Возможно, самое простое изменение, которое можно сделать и которое не имеет недостатков, — это преобразование [настраиваемого] шрифта в самый современный и эффективный формат, доступный в браузерах, WOFF2.. … в нашем случае мы добились сокращения на 60 %, просто загрузив файл WOFF2 поверх TTF».

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

4. Минимизация ресурсов

Можно ли уменьшить один из ваших ресурсов путем минимизации?

«Минификация — это процесс удаления ненужных или избыточных данных, не влияющий на то, как ресурс обрабатывается браузером — например, комментарии и форматирование кода, удаление неиспользуемого кода, использование более коротких имен переменных и функций и т. д.», — объясняют разработчики Google. .

Согласно Google, вот как вы должны подходить к минимизации ваших ресурсов:

HTML

Создайте оптимизированную версию HTML-кода с помощью инструмента PageSpeed ​​Insightstool. Используйте этот анализ, чтобы запустить HTML-страницу и просмотреть правило «Минифицировать HTML». Наконец, нажмите «Просмотреть оптимизированный контент», чтобы получить доступ к уменьшенному HTML-коду.

CSS

Ознакомьтесь со следующими инструментами:

• Компрессор YUI
• cssmin.js

JavaScript

Ознакомьтесь со следующими инструментами:

• Компилятор закрытия
• JSMin
• Компрессор YUI

5. Используйте сеть доставки контента (CDN)

Под сетью доставки контента понимается «взаимосвязанная система кэш-серверов, которые используют географическую близость в качестве критерия для доставки веб-контента», согласно TechTarget.

Что это значит? И почему вас это должно волновать?

Допустим, все элементы вашего веб-сайта хранятся в Бостоне, штат Массачусетс. Это отличная новость для жителей Бостона или любого другого жителя Соединенных Штатов, которые пытаются получить доступ к страницам вашего сайта. Но как насчет того верного посетителя, который проделал весь путь в Лондоне? Вполне вероятно, что им потребуется значительно больше времени для загрузки ваших страниц только из-за того, где находится ваш сервер.

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

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

Готовы к взвешиванию?

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

А если вам нужен более подробный отчет об общей производительности вашего веб-сайта, ознакомьтесь с обновленным Web Grader от HubSpot. Вы получите бесплатный персонализированный отчет, который оценивает ваш сайт по ключевым показателям, включая производительность, мобильную готовность, SEO и безопасность.

Темы:

SEO-стратегия

Не забудьте поделиться этим постом!

Вес страницы | 2021 | Веб-альманах по HTTP Archive

Часть IV Глава 19

Дата публикации: 01.12.2021

Последнее обновление: 02.07.2022

Автор

Джон Тиг

Отзыв от

Сиа Карамалегос
а также

Ребекка Холмлунд

Проанализировано

Джесс Пек

Под редакцией

Барри Поллард

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

За последнее десятилетие средний вес веб-страницы вырос на колоссальные 356 процентов, в среднем с 484 килобайт до 2205 килобайт. Это увеличение можно объяснить как функцию спроса и предложения. Более быстрые компьютерные процессоры, передача данных, а также способы хранения и предоставления данных были усовершенствованы, чтобы не отставать от растущего использования изображений, видео, аудио, шрифтов, сбора и обработки данных, а также подключенных сервисов, таких как функции аналитики, мониторинга и оповещения для веб-сайты и веб-приложения.

Кажется, все в порядке, если вам посчастливилось владеть высококлассным смартфоном, настольным компьютером или ноутбуком стоимостью в тысячи долларов, и вы подключены к дорогому высокоскоростному интернет-провайдеру или тарифному плану 5G. Но удовольствие от принадлежности к этому классу интернет-пользователей начинает теряться, когда вы вынуждены использовать медленный тарифный план 3G или 4G с непредсказуемым подключением к Интернету. Для большого сегмента пользователей Интернета ожидание страницы, которая может никогда не загрузиться полностью, нарушает обещания Интернета, вплоть до того, что в чрезвычайных ситуациях жизнь подвергается риску.

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

Теперь Google наказывает веб-сайты в поисковом рейтинге за те, которые не достигают хороших показателей Core Web Vitals. Одним из их показателей для оценки успеха или неудачи является вес страницы. Если вам интересно, вы можете протестировать свой сайт с помощью Google PageSpeed ​​Insights и Google Measure. Оба дают ценную информацию о том, как решить проблемы с производительностью и взаимодействием с пользователем, вызванные тяжелыми веб-страницами.

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

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

• HTML-код, из которого состоит сама страница.
• Изображения и другие медиафайлы (видео, аудио и т. д.), встроенные в страницу.
• Каскадные таблицы стилей (CSS), используемые для оформления страницы.
• JavaScript для обеспечения интерактивности
• Сторонний ресурс, содержащий одно или несколько из перечисленных выше.

Каждый из этих ресурсов имеет свою стоимость в виде веса (размера байта) и вычислительных ресурсов для передачи, обработки и отображения в веб-браузере. Хотя в некоторых отношениях они имеют одинаковую стоимость (хранение и передача), стоимость ЦП для некоторых типов ресурсов может быть более высокой в ​​этих отношениях, чем для других.

Процесс управления ресурсами веб-страницы для использования по запросу быстро изменился за последние десятилетия. Часть этих изменений была основана на том, чтобы сделать ресурсы веб-страницы более эффективными и более быстрыми для передачи по запросу. Давайте рассмотрим три влияния веса страницы на ресурсы:

Хранение

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

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

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

Трансмиссия

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

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

Многие оптимизации могут сократить время передачи/загрузки, например, сжатие и объединение определенных файловых запросов, использование протоколов HTTP/2 или более новых HTTP/3, а также использование возможностей современного браузера для предварительного подключения и предварительной загрузки определенных файлов для ускорения загрузки. весь процесс, но в конечном итоге вес страницы все еще будет иметь влияние. В главе «Производительность» рассматривается широкий спектр факторов, влияющих на скорость загрузки страниц.

Рендеринг

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

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

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

Как объяснялось в главе за прошлые годы, за прошедшие годы мы практически не изменили типы ресурсов, используемых на веб-страницах, но есть несколько заметных исключений.

Изображения

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

Форматы изображений, такие как PNG и JPEG, широко поддерживаются всеми браузерами. Популярность получили более современные форматы изображений, такие как WebP и AVIF, которые предлагают более высокое качество при меньшем размере файлов. WebP поддерживается большинством современных браузеров, тогда как AVIF новее и менее поддерживается. С , вы можете использовать современные форматы изображений, предоставляя запасные варианты JPEG и PNG. Убедитесь, что ваши изображения оптимизированы для Интернета — в главе «Медиа» это описано более подробно. Неправильный размер и сжатие изображений для вашего сайта приведет к высокой цене на производительность.

Примечание . Если вам нужен онлайн-сервис, который оптимизирует и позволяет сравнивать различные форматы размеров изображений, я не нашел лучшего источника, чем приложение Google Squoosh. Точно так же SVGOMG Джейка Арчибальда отлично подходит для оптимизации SVG.

Несколько слов о распространении использования JavaScript

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

В девяти случаях из десяти, когда сайт зависает, это блокирующий JavaScript, который приводит к тому, что ваш смартфон исчерпал вычислительные ресурсы или память. Разумное и умелое использование JavaScript может создать отличный пользовательский интерфейс. Но помните: JavaScript выполняется на стороне клиента. Он использует ресурсы клиентских компьютеров для обработки и выполнения сценария, и на каждом устройстве имеется конечное количество ресурсов. Опять же, не все прикованы к новейшему смартфону Google Pixel или Apple. Глава JavaScript содержит массу информации по этой проблеме.

Сторонние услуги

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

Кэширование

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

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

Гистограмма, показывающая распределение общего количества байтов на странице. Страницы рабочего стола, как правило, имеют больше байтов во всем дистрибутиве. 10-й, 25-й, 50-й, 75-й и 90-й процентили для мобильных страниц: 409, 928, 1923, 3749 и 6890 КБ на страницу.

Рисунок 19.1. Распределение общего количества байтов на страницу.

Мы приближаемся к 6,9 МБ веса страницы на мобильных устройствах и 8,1 МБ на настольных компьютерах в 90-м процентиле.

Гистограмма, показывающая среднее количество байтов на странице для изображений, JavaScript, CSS и HTML. Средняя страница рабочего стола, как правило, имеет больше байтов. Средняя мобильная страница содержит 877 КБ изображений, 470 КБ JS, 66 КБ CSS и 27 КБ HTML.

Рисунок 19.2. Медиана байтов на страницу по типу контента.

Более внимательное изучение медианы показывает, что изображения остаются самым большим ресурсом, за которым следует JavaScript.

Давайте посмотрим на рост с течением времени:

Линейный график, показывающий постоянное увеличение размера страницы с 522 КБ на настольных компьютерах и 202 КБ на мобильных устройствах в июне 2011 г. до 2202 КБ на настольных компьютерах и 1948 КБ на мобильных устройствах в июле 2021 г.

Рисунок 19.3. Средний вес страницы с течением времени.

Тенденция роста веса страницы не может быть более четкой. Мы находимся на восходящей траектории, которая не показывает никаких признаков ослабления.

запросов

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

Гистограмма, показывающая распределение запросов на страницу. Страницы рабочего стола, как правило, загружают больше запросов. 10-й, 25-й, 50-й, 75-й и 90-й процентили для мобильных страниц: 23, 41, 69, 110 и 170 запросов на страницу.

Рисунок 19.4. Распределение запросов по страницам.

Распределение запросов показывает, что разница между настольными и мобильными устройствами незначительна, при этом настольные компьютеры лидируют.

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

Еще кое-что, на что стоит обратить внимание: средний запрос на десктопе в это время такой же, как и в прошлом году (74), но вес страницы увеличился (141 КБ).

Гистограмма, показывающая среднее количество запросов по типу контента. Среднее количество запросов изображений на мобильную страницу составляет 23, 20 для JS, 7 для CSS и 2 для HTML. Настольные и мобильные устройства, как правило, похожи: страницы настольных компьютеров загружают немного больше изображений и JS-запросов.

Рисунок 19.5. Среднее количество запросов по типу контента.

Изображения снова составляют наибольшее количество запросов, хотя JavaScript сокращается, так как разрыв немного сократился за последний год. На изображениях видно, что за два года количество запросов уменьшилось на 4 — возможно, это результат более ленивой загрузки, поскольку она стала доступна через простые HTML-атрибуты?

Форматы файлов

Коробчатая диаграмма распределения размеров изображений по форматам: gif, ico, jpg, png, svg и webp. JPG выделяется как имеющий самое высокое распространение с 90-м процентилем, превышающим 190 КБ на изображение, по сравнению с предыдущим годом. WebP обогнал PNG, заняв второе место с размером около 93 КБ в 90-м процентиле. PNG сейчас занимает третье место с меньшим 90-м процентилем, чем у WebP, его 75-й процентиль выше. gif, ico и svg имеют относительно небольшие дистрибутивы.

Рисунок 19.6. Распределение размеров изображений по форматам.

Мы знаем, что изображения составляют большую часть веса веб-страницы. На приведенном выше рисунке показаны основные источники веса изображения и распределение веса. Топ-3: JPG, WebP и PNG. По сравнению с прошлым годом мы видим рост использования WebP, теперь он наконец поддерживается во всех основных браузерах. PNG остается популярным для таких случаев использования, как значки и логотипы.

байт изображения

Гистограмма, показывающая распределение байтов изображения на странице. Страницы рабочего стола, как правило, загружают больше байтов изображения на страницу во всем дистрибутиве. 10, 25, 50, 75 и 90-й процентиль для мобильных страниц: 62, 257, 877, 2324 и 4992 КБ изображений на странице.

Рисунок 19.7. Распределение размеров ответа изображения на страницу.

Глядя на общее количество байтов изображения, мы видим, что этот показатель практически не изменился по сравнению с предыдущим годом. Одной из причин этого может быть увеличение количества изображений, обслуживаемых сетями распространения контента (CDN), которые применяют строгую оптимизацию к изображениям по мере их загрузки на свои серверы, тем самым контролируя любой рост новых изображений.

Насколько важно, чтобы веб-страницы были легкими? Общий вес страницы влияет на скорость загрузки страницы, а скорость загрузки страницы влияет на взаимодействие с пользователем. Программа Google Web Vitals ориентирована на удобство работы пользователей, особенно мобильных пользователей, что напрямую влияет на рейтинг в поиске Google. Таким образом, есть реальный стимул и реальное последствие в том, чтобы сделать веб-страницы как можно более легкими.

This entry was posted in Популярное