Проверка размера страницы для SEO: Полное руководство

Узнайте о проверке размера страницы для SEO, включая советы, инструменты, лучшие практики и почему это важно.

1

Сегодня скорости интернета просто запредельные. По данным Statista, средняя скорость загрузки со стационарных широкополосных сетей составляет 105,15 Мбит/с, а с мобильных — 55,95 Мбит/с.

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

Вы не поверите, с какими размерами страниц я сталкивался в ходе SEO-аудита, самый большой из которых составлял 100 МБ (я не шучу).

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

Также необходимо взглянуть на Core Web Vitals и на то, как страница соотносится с метриками Google.

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

Общие правила для размера страницы
В идеале размер страницы HTML DOM должен быть не более 100 кб, в зависимости от вашей ниши.

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

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

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

Если вы ищете какие-либо инструменты для проверки размера HTML-страницы, то следующий инструмент на SEO Site Checkup является хорошим инструментом.

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

«Раздутый код» означает, что ненужный код значительно увеличивает размер страницы, тем самым влияя на ее скорость.

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

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

Важно отметить, что минификация не изменит ваш фактический код — только кодовые артефакты. Для достижения максимальной оптимизации кода CSS и JS на стороне сервера все равно потребуется ваш ум и навыки разработчика.

HTML DOM
Большой размер дерева DOM является значительной причиной проблем со скоростью работы страницы и может сильно замедлить ее.

Это влияет на такие вещи, как эффективность сети, производительность загрузки, производительность памяти и производительность во время выполнения, все из которых могут значительно повлиять на общую загрузку страницы и пользовательское восприятие Core Web Vitals.

Разблокировка (не предоставляется) с помощью Keyword Hero
Просматривайте все свои органические ключевые слова в GA и их конкретные показатели эффективности. Бесплатная пробная версия. Отмена в любое время. Профессиональная поддержка. 4-минутная установка.

Ваш процесс разработки должен включать в себя некоторое распределение ресурсов для оптимизации размера DOM-дерева.

Изображения
Большие изображения могут негативно повлиять на размер страницы, особенно если они мешают пользователю.

Если пользователю приходится ждать 5 минут, пока загрузится изображение размером 15 МБ, вы его уже потеряли.

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

Инструменты для проверки размера страницы
Существует множество инструментов для проверки размера страницы. Мне нравятся два из них:

Google Page Speed Insights.
Screaming Frog SEO Spider.
Google Page Speed Insights
Google Page Speed Insights — это важный инструмент для выявления проблем с размером страницы, которые могут замедлять загрузку.

По завершении просмотра выполните следующие действия, чтобы проверить размер страницы:

1. Нажмите на выпадающее меню в левом верхнем углу.

2. Выберите HTML. Это отобразит только HTML-страницы, которые были просмотрены на вашем сайте.

Шаг 1 к проверке размера страницы в Screaming Frog SEO Spider.Скриншот из Screaming Frog SEO Spider, сентябрь 2021 г.
3. Далее прокрутите страницу вправо, пока не увидите цифры размера страницы, как показано ниже.

Шаг 2 к проверке размера страницы в Screaming Frog SEO Spider.Скриншот из Screaming Frog SEO Spider, сентябрь 2021 г.
Вот как вы можете проверить размер страницы с помощью Screaming Frog SEO Spider.

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

Скорость загрузки страницы
Согласно данным Google Search Central:

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

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

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

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

По данным Google, при увеличении времени загрузки страницы с одной секунды до 10 секунд вероятность того, что посетитель мобильного сайта покинет сайт, возрастает на 123%.

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

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

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

Лучшие практики оптимизации размера страницы
Обратите внимание на следующие лучшие практики для наилучшей оптимизации размера страницы на вашем сайте:

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

Физический размер в пикселях.
Общий размер изображения.
Сохранение качества изображения.

Физический размер пикселя относится к плотности пикселей изображения. Не имеет значения, если ваше изображение уменьшится с 1600 x 1600 до 500 x 500, если плотность пикселей останется прежней.

Вы все равно получите изображения размером 1 МБ, если вы начали именно с этого.

Чтобы обеспечить правильную оптимизацию, учитывающую оба этих фактора, убедитесь, что вы воспользовались сжатием изображений без потерь с помощью таких инструментов, как Adobe Photoshop, или платных версий таких инструментов, как Smush Pro.

В настоящее время Adobe Photoshop является золотым стандартом, когда речь идет о сжатии изображений.

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

Вы также должны рассмотреть более быстрые форматы изображений, которые лучше своих предшественников, например, WebP вместо png.

Существует несколько сервисов, которые вы можете использовать для оптимизации изображений, включая ShortPixel.com и TinyPNG.com.

Если вы используете WordPress, есть несколько плагинов, которые очень полезны для этой задачи. Один из них — Shortpixel Image Optimiser, а другой — плагин Tiny Compress Images.

Не используйте пользовательские шрифты без необходимости
Мы все были там. Мы все были жертвами «я хочу этот шрифт»!

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

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

Использование безопасных для веб-сайтов шрифтов, таких как Arial, Verdana или Helvetica, — отличный выбор, и вы исключаете возможность возникновения проблем с выбранным вами пользовательским шрифтом.

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

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

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

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

Существует ряд инструментов, которые можно использовать для минификации HTML и CSS файлов, в том числе:

Плагин Toptal.com’s JavaScript Minifier
WP Super Minify
Плагин Autoptimize WordPress
Если вам нужна оптимизация минификации WordPress одним щелчком мыши, Cloudflare также предлагает эту функцию, если вы хотите перейти на их CDN (Content Delivery Network) сервис.

Инструмент на сайте Minifier.org также весьма полезен для этой цели.

Избегайте нагромождения плагинов
Добавление плагинов не так безобидно, как кажется. Если вы добавляете 5, 10 или 15 плагинов за один раз, вам, возможно, стоит сильно сократить эту практику.

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

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

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

Вам также могут понравиться Еще от автора

Оставьте ответ

Ваш электронный адрес не будет опубликован.