Как и зачем делать быстрые сайты или мейк вебсайт фаст эгейн

[special by dzendigital 25 апреля 2025]

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

Оглавление

• 1) Как работают сайты в интернете
• 2) Какая информация о странице и сайте учитывается поисковой системой?
• 3) Что сделать, чтобы ваша страница была в поиске выше чем у конкурентов
• 4) Интерпретирую конкретные показатели на основе своего опыта
• 5) Как измерить эффективность ускорения?
• 6) Как я делаю 100% скорость загрузки страниц
• 7) Какие выводы сделать и как применить полученную информацию, итоги статьи

1) Как работают сайты в интернете

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

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

Дмитрий Башаркин Поисковые роботы обходят все сайты в интернете, как опытные исследователи ищут новые острова в цифровом океане.

2) Какая информация о странице и сайте учитывается?

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

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

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

3) Что сделать, чтобы ваша страница была в поиске выше чем у конкурентов?

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

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

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

Факт Скорость загрузки сайта является одним из основных показателей качества сайта в современном интернете.

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

4) Интерпретирую конкретные показатели на основе своего опыта

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

Медленные сайты можно разделить на 2 категории.

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

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

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

В двух приведенных мной примерах, яндекс.музыка и вконтакте, сайт работает как браузерное-приложение, после клика на ссылку для запроса страниц, информация запрашивается без перезагрузки (ведь это приложение). Кстати, это является одной из причин, почему вкладки ВКонтакте, Яндекс и Гугл "кушают" много оперативной памяти (больше 1ГБ на вкладку) даже в неактивном режиме. Потому что, даже будучи неактивными браузерные-приложения продолжают обмениватсь с центральным сервером данными, используя ресурсы браузера постоянно.

б) Есть сайты, которые стали медленными из-за недостатка понимания, или внимания, к показателю скорости загрузки страниц.

Например, объем медиафайлов на некоторых страницах вынужнает пользователя загружать графику/картинки/видео, до которых он может никогда не долистать прокруткой. Сколько будет загружаться страница с 10 фотографиями по 4мб в браузер пользователя с интернет скоростью загрузки 1мб. Загрузка только 10 картинок для одного такого пользователя занимает 40 секунд (почти минуту), и это только 10 картинок, а ведь на странице есть и другие материалы. Необходимость страницы загружаться почти минуту ведет к проблеме с загрузкой контента, и замедляет показатели скорости страницы (Speed Index).

Неправильное расположение элементов на странице может привести к проблеме с отрисовкой крупного контента (Largest Contentful Paint). Поисковые роботы считают, что пользователю сайта не должен показываться контент, который занимает большую часть страницы. Другими словами масштаб каждого отдельного элемента по отношению к соседним имеет значение. На скриншоте ниже для человека нет ничего ошибочного в разметке страницы, но роботы pagespeed считают иначе и занижают оценку качества сайта.

Последовательность отображения контента тоже имеет значение. Если на мобильных устройствах показать пользователю страницу, где первым блоком будет большое изображение/видео, то браузер пользователя будет пытаться в первую очередь загрузить контент в начале страницы - а значит, много вычислительных ресурсов будет выделено на загрузку и отрисовку первого элемента на странице (First Contentful Paint), что сказывается на скорости зарузки всей страницы.

В блоке "Ресурсы блокирующие отображение" (Render-blocking resources) перечислены все URL-адреса, блокирующие первую отрисовку вашей страницы. Цель состоит в том, чтобы уменьшить влияние этих URL-адресов, блокирующих рендеринг, путем встраивания критически важных ресурсов из всех скриптов и стилей, настройка отсрочки загрузки некритических ресурсов.

Веб-программирование дает возможность создавать кодом разные JavaScript функции, которые работают прямо в браузере пользователя. Часто на страницах сайта такие скрипты написаны без понимания, требуют много ресурсов сразу, или подключаются на всех страницах, а используются только на одной. Когда JavaScript скрипты слижком требовательны, они увеличивают общее время блокировки страницы (Total Blocking Time). Количество времени, в течение которого длинные задачи скрипта блокируют основной поток и влияют на удобство использования страницы - пользователь не может выполнять действия на сайте, потому что до загрузки всех скриптов страница не работает.

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

5) Как измерить эффективность ускорения?

В интернете много интрументов проверки скорости загрузки, вот основные: Google PageSpeed и Lighthouse. Несколько раз в год поисковые компании внедряют существенные и масштабные изменения в свои поисковые алгоритмы и системы. После апдейтов немного изменяются критерии оценки сайта, и если до гугл-обновления ваш сайт был "зеленый", то после, благодаря обновлению алгоритма, он может вылететь в "желтую" зону, стать медленнее.

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

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

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

6) Как я делаю 100% скорость загрузки страниц

Нужно понять, что инструмент google pagespeed это исскусственная среда, намеренно медленная, для того, чтобы проверки были максимально строгими.

И вот почему. Когда googlе page speed тестирует сайт, то создает искуссветную среду, которая имеет ограничение пропускной способности сети. При тестировании робот будет загружать ваш сайт по каналу 1.6мбит/cек из Азии - т.е он намерено замедли скорость интернета при тестировании, чтобы проверить как сайт будет отображаться при медленном интернете.

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

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

Поэтому не нужно быть слишком требовательным к проверкам, достаточно (а) устранить явные ошибки, (б) сделать скорость на зеленом уровне больше 80-90%.

Через какие действия я повысил скорость загрузки сайта?

• сократить объем изображений без потери их качества
• выполнить оптимизацию форматов jpeg\png в webp, mp4 в webm
• настроить отложенную загрузку, поэтому оно не замедляет страницу
• устранить ресурсы, блокирующие отображение контента, например медленные скрипты

7) Выводы

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

И вот основные тезисы:

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

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

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

• Инструментам для проверки скорости загрузки сайтов: Google PageSpeed и Lighthouse для оценки производительности сайта. Результаты помогают выявить узкие места и определить, какие изменения необходимы для улучшения скорости.

• Разница между искусственной средой тестирования и реальной скоростью загрузки: Google PageSpeed создает искусственную среду с ограничением сети для проверки сайта на медленных соединениях. Однако реальные замеры на ПК и смартфонах показывают более высокие результаты. Это важно для понимания того, как сайт будет восприниматься реальными пользователями.

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

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

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

Поэтому приглашаю вас протестировать скорость своего сайта с помощью инструментов Google PageSpeed и поделиться результатами со мной.