7 причин долгой загрузки сайта и как с ними бороться
Привет! Меня зовут Максим Смирнов, я руководитель SEO-отдела компании Webtronics. В этой статье перечислю 7 самых распространенных причин зависания сайта и расскажу, как с ними бороться.
Причина №1: неоптимизированные изображения большого размера
Неоптимизированные изображения могут стоить вам денег в виде перерасхода полосы пропускания. Если выкладывать контент с добавлением изображения слишком большого формата, страница сайта может долго загружаться или вообще зависнуть.
Зависание сайта особенно критично при его просмотре со смартфонов, поскольку не везде есть быстрый мобильный интернет. В таком случае не стоит добавлять медиа больше 1 Мб. Когда нет возможности сжать размер фото, лучше использовать JPEG2000 вместо Webp: качество картинки может незначительно упасть, но её размер будет меньше.
Как бороться:
При найме сотрудников стоит выбрать именно frontend-разработчика, а не полнофункционального разработчика. Из-за различий в области разработки специалисты front-end более продвинуты в использовании JavaScript на стороне клиента и умело решают любые проблемы с JS / jQuery. А если выбор ограничен, то обязательно проверьте навык грамотной верстки, чтобы потенциальный коллега учитывал важность скорости загрузки страниц в своей работе.
Причина №2: слишком много флэш-контента
Флеш анимация сейчас достаточно редко используется, однако все равно остаются сайты, на которых она присутствует, поэтому я решил добавить ее в свой список причин.
Flash — инструмент для добавления интерактивного контента на сайт, например, рекламных баннеров, анимации, игр. Из-за большого размера таких файлов скорость загрузки страниц может снижаться в несколько раз.
Как бороться:
Уменьшение размера флэш-файлов или их полное устранение значительно повысит скорость загрузки. Если вы хотите ускорить работу своего сайта, следует поискать альтернативы HTML5 для замены существующего flash-контента.
Причина №3: проблемы с JavaScript
Наличие плагинов JavaScript или jQuery сделало добавление динамического контента на веб-сайты действительно удобным. Однако, при неправильной реализации JavaScript может снизить скорость загрузки страницы вашего сайта.
Изображение взято из открытого доступа.
Для загрузки, интерпретации и выполнения jQuery и JavaScript требуется время. Таким образом, если вы используете несколько вызовов API для отображения данных, загрузка веб-страницы может быть достаточно долгой.
Как бороться:
Раздувание скрипта — частная проблема перегруза.
- Проведите аудит JS-скриптов, чтобы оставить только то, что вам действительно нужно.
- Асинхронная загрузка обязательна.
- Рассмотрите возможность применения таких сервисов, как Segment или Google Tag Manager. Они позволяют использовать один скрипт для всех инструментов.
Причина №4: чрезмерные HTTP-запросы
Наличие множества файлов JavaScript, CSS и изображений может привести к слишком большому количеству HTTP-запросов. Когда пользователь посещает веб-страницу, браузер выполняет несколько запросов для загрузки каждого из этих файлов. В результате страница грузится долго.
Как бороться:
- Используйте спрайты для уменьшения количества HTTP-запросов.
- Сократите число файлов на страницах, где это возможно, включая CSS, изображения, javascript. Минимизация CSS и Javascript сокращает количество файлов, которые пользователям (браузерам) придется загружать.
Подключите функцию LazyLoad, с помощью которой изображение будет загружаться не сразу с открытием страницы, а по мере прокрутки.
Причина №5: грязный код
Другим распространенным виновником медлительности веб-сайта является нечистое кодирование. Чрезмерные пробелы, встроенные стили, пустые новые строки и ненужные комментарии могут привести к увеличению таблицы стилей веб-сайта.
Если удалить ненужные элементы — можно сжать код, уменьшить размер файла и улучшить общее время загрузки страницы. При отслеживании позиций, вероятно, вы также увидите повышение эффективности SEO. С технической точки зрения этот процесс известен как минимизация.
Как бороться:
- Если вам не хватает времени на кодирование, есть несколько онлайн-инструментов, которые можно использовать: Prettier, Линтинг, Husky.
- Если ваш сайт создан на WordPress или другой популярной CMS, можно установить специальные плагины и расширения, которые позволяют настроить минимизацию CSS, JS и HTML.
- Старайтесь не создавать несколько таблиц стилей CSS там, где вы можете использовать одну.
Причина №6: слишком много рекламы
Медийная реклама отлично подходит для монетизации сайтов с высокой посещаемостью и увеличения прибыли в вашем рекламном отчете. При этом мультимедийная реклама, такая как всплывающие окна, вставки и автозагрузки, может создавать сотни HTTP-запросов, из-за чего веб-сайт начинает загружаться слишком долго.
К тому же, недавно был опубликован слив данных из Яндекс 2023, где в списке отрицательных факторов ранжирования также была указана реклама на сайте, например, рекламные блоки и баннеры.
Как бороться:
Рекламные объявления являются дополнительными HTTP-запросами и замедляют время загрузки страницы. Используйте их только там, где это приемлемо. Такое ограничение позволит улучшить производительность сайта, пользовательский интерфейс и CTR вашей рекламы.
Причина №7: плохой хостинг
Поставщик услуг веб-хостинга имеет огромное значение, когда дело доходит до производительности веб-сайта. Если вы пытались устранить все вышеупомянутые причины, и все же кажется, что веб-сайт реагирует медленно, смена хостинг-провайдера может решить проблему.
Как бороться:
Обратите внимание на хостинги, которые предлагают расширения по оптимизации производительности. Если переносить сайт на другой хостинг слишком сложно, обратитесь к DevOps-специалисту, который поможет в настройке хостинга или выделенного сервера.
Другие методы борьбы с зависанием страницы
В дополнение к вышеперечисленным способам борьбы с зависанием сайта можно добавить ещё три лайфхака по увеличению скорости загрузки.
Используйте кеширование
Это метод, который позволяет хранить часто используемые данные в кэше. Любые последующие запросы на тот же контент обрабатываются из существующего кэша, что ускоряет весь процесс извлечения данных.
Применяйте сжатие gZIP
Включив сжатие gZIP, вы даете указание серверу поместить все веб-объекты (изображения, CSS, файлы JavaScript) в один контейнер, прежде чем они будут отправлены запрашиваемому браузеру.
Сжатие сокращает время отклика за счет уменьшения размера данных, передаваемых между вашим сервером и браузером посетителей. Это помогает намного быстрее обслуживать запрошенный контент.
Мониторьте сайт на наличие проблем
Для подобного метода необходимы SEO-специалисты, которые постоянно работают с сайтом. Однако человек не всегда может быстро среагировать в случае зависания.
Я перерыл весь интернет, но так и не нашел в России сервисы, которые бесплатно помогут с этим справиться. Поэтому в прошлом году решил самостоятельно создать бота code checker для мониторинга. Сейчас его использование совершенно бесплатно.
Кому подходит бот code checker
Он подходит как для владельцев сайтов, так и для самих SEO-специалистов и разработчиков, которые ведут клиентские проекты. Стоит учесть, что если на сайте установлена защита от парсинга, то бот его просто не увидит, так как он не предназначен для подобных целей.
Как работает бот
Работа в боте ведется по простому алгоритму: добавляем любой URL сайта, который хотим отслеживать, настраиваем период проверки и всё — бот начнет мониторить вашу веб-площадку.
Если сайт перестанет быть доступным, code checker пришлет уведомление со статус-кодом, например, «долгий ответ сервера», «сайт недоступен». Если же все в порядке, бот ничего присылать не будет.
Возможна ли утечка данных через бот
База данных хранится на хостинге Beget в зашифрованном виде, поэтому можно не бояться утечки.
В заключение могу сказать, что скорость загрузки страницы веб-сайта зависит от множества факторов, таких как неоптимизированные изображения, большое количество HTTP-запросов, громоздкие коды и проблемы с JavaScript, и это лишь некоторые из них. В любом случае можно найти решение и оптимизировать работоспособность площадки.