Сайт загружается медленно вот как это исправить

Скорость загрузки сайта — критически важная характеристика. Как для разработчиков, так и для пользователей. Никто не захочет ждать загрузки страницы 5–10 секунд. Прождав хотя бы пару, клиент уйдет к конкурентам. А потерянные посетители — это потерянная прибыль. Поэтому так важно следить за производительностью своего ресурса и постоянно оптимизировать скорость загрузки страниц.

Далее рассмотрим распространенные причины медленной загрузки сайта и методы их решения.

JavaScript, блокирующий рендеринг страницы

Большая часть интерактива сайтов пишется на языке JavaScript. При отсутствии должной оптимизации скрипты, созданные с помощью JS, могут приводить к чересчур медленной работе сайта. Ведь браузер в первую очередь попытается подгрузить именно скрипт. От него зависит, как быстро посетитель увидит содержимое страницы. Поэтому стоит:

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

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

Отсутствие системы CDN

CDN расшифровывается как Content Delivery Network, что в переводе означает «сеть доставки контента». Это множество серверов по всей планете, на которых хранится один и тот же веб-сайт. И независимо от того, из какой части света посетитель заходит на ресурс, он получит данные с ближайшего сервера, что позитивно скажется на скорости загрузки.

Существует несколько провайдеров CDN-систем. Например, Cloudflare. Сервис дает возможность разместить свой сайт в нескольких частях планеты (конкретнее можно узнать на официальном сайте сервиса). Нередко вебмастера подгружают jQuery и другие компоненты с CDN-серверов, чтобы не тратить на их обработку ресурсы арендованного VDS.

Избыток информации в базе данных

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

Бывали случаи, когда базу данных на несколько гигабайт увеличивали параметры планировщика задач Сron. От этого время загрузки страницы увеличивалось до 10 секунд.

Необходимо провести чистку и оптимизацию БД. Нужно удалить лишние записи из таблиц options и postmeta. Если вы пользуетесь WordPress, то можно активировать плагины Clean Options или Plugin Garbage Collector.

Также рекомендуется следить за структурой базы данных и кэшировать популярные запросы.

Неправильно настроенные или неоптимизированные CSS-файлы

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

1. Прописывайте тег @media, чтобы ваш ресурс знал, какой CSS-файл нужно задействовать в конкретной ситуации (на мобильном устройстве, в полноэкранном режиме).
2. Не создавайте слишком много внешних CSS-файлов. Старайтесь объединять их (лучше в один).
3. Используйте CSS-код прямо в HTML (по возможности). Тогда сайту придется меньше обращаться к внешним файлам.

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

Выключенный OPcache

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

Система кэширования и акселерации PHP у Timeweb включена по умолчанию. У других провайдеров может потребоваться ручная настройка модуля.

Чтобы запустить OPcache вручную, надо:

• Создать на сайте файл PHP.ini.
• Ввести туда команду zend_extension=opcache.so.
• Сохранить внесенные изменения.

Теперь проверим, работает ли OPcache, создав файл phpinfo.php и отыскав там строчку Opcode Caching. Если напротив нее написано Up and Running, то дополнительные настройки не потребуются.

Настройка кэширования и устранения связанных неполадок

Кэширование — важная составляющая производительности любого сайта и веб-приложения. Тут можно работать сразу в двух направлениях: настроить кэширование данных на стороннем ресурсе (как в СDN-cистемах) и оптимизировать хранение кэша в браузере посетителей.

Можно подключиться к системе кэширования сайтов Cloudflare. Это стоит недорого и позволяет перенести всю нагрузку на их серверы. Они кэшируют даже скрипты и стили.

Во втором случае нужна настройка кэша на сервере и в браузере пользователя. Для сайтов, работающих на WordPress, есть плагины WP Super Cache и Proxy Cache Purge. С помощью них можно отправить запрос на удаление кэш-файлов с устройства пользователя. Таким образом, удастся избежать проблем, если вдруг скопившееся кэш-файлы повредятся и станут помехой при загрузке страницы.

Неоптимизированные изображения

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

Можно сделать это прямо на компьютере, уменьшив разрешение картинки или воспользовавшись утилитой в духе Squash. А можно подключить к своему сайту плагин-оптимизатор. Например Robin, Image Optimizer, WP Compress либо один из их аналогов.

Такие плагины автоматически сокращают размер загружаемых изображений на 40–80%, практически не влияя на их качество (удаляются EXIF-данные и некоторые цвета).

Скрипты конфликтуют с другими элементами страницы

При неправильной настройке или обращении к несуществующим элементам JavaScript-код может негативно повлиять на загрузку сайта. Вплоть до полного «зависания».

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

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

Можно воспользоваться сервисами Pingdom, Web Page Test или GTmetrix, чтобы проверить, влияют ли на скорость загрузки страницы подключенные к сайту скрипты.

Не загружаются файлы из внешних источников

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

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

Плагины в CMS слишком тяжелые

Внушительная часть ресурсов вашей VDS или виртуального хостинга могут уходить на поддержку CMS. То есть систему управления данными наподобие WordPress, Joomla или Drupal. А если установить в них увесистые плагины, то можно лишиться еще части ресурсов, выделенных на работу сайта.

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

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

Избыток рекламы

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

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

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

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

Отсутствие gZip-компрессии

Избыточный размер компонентов сервера — основной ответ на вопрос «почему мой сайт работает медленно». К счастью, файлы сайта можно сжать. Если активировать gZip-компрессию, то сервер получит команду упаковать все веб-объекты (включая изображения, стили, JavaScript и т.п.) в один контейнер (архив), перед тем как отправить его в браузер, запросивший данные.

Компрессия сократит время ответа сервера за счет сокращения размера передаваемой информации между VDS и компьютером пользователя.

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

Вирусы

Такое бывает редко, но бывает. На сервер тоже может проникнуть вирус, как и на локальный компьютер, особенно если ваш VDS работает на базе Windows. На этой ОС словить «заразу» куда проще. Но и Linux не защищен на 100%.

Вирусы на сервере, как и на обычном ПК, могут съедать часть ресурсов и заметно замедлять его работу. Решение — антивирус. Проверить сайт можно с помощью специального онлайн-сервиса. А вот чтобы провести комплексную чистку и удалить менее распространенные угрозы, придется установить профессиональное решение. Например Ai-Bolit. Он сможет найти подозрительные скрипты, незащищенные каталоги и странные переадресации.

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

Медленный хостинг

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

Выбрать Timeweb, к примеру, если еще не сделали этого. Одни из самых шустрых серверов в РФ. Есть специализированные решения с 5-герцовыми процессорами, адаптированные под CMS Битрикс. Есть серверы в Европе. Поэтому сомневаться в производительности или доступности VDS на базе Timeweb не придется.

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

Проблемы на стороне клиента

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

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

Но это стоит делать только в том случае, если вы на 100% уверены в наличии проблем на стороне клиента.

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

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

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

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

Если ваш сайт создан с использованием HTML, CSS, JavaScript, PHP (или любого другого бэкенд-языка) — наши рекомендации наверняка окажутся полезными. 

Проблемы с нагрузкой и ресурсами на хостинге

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

Как проверить, сколько ресурсов потребляет сайт

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

В панели управления хостингом RU-CENTER потребление ресурсов можно посмотреть в разделе «Статистика». Обратите внимание, сколько оперативной памяти и процессорного времени сайт потреблял за последние дни, неделю, месяц. 

Вот как выглядит превышение ресурсов на графиках в панели управления хостингом RU-CENTER:

Потребление памяти в норме, потребление процессорного времени выросло

Потребление памяти и нагрузка на CPU (центральный процессор) выросли

Потребление памяти высокое, CPU в норме, но есть пик потребления

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

Чаще всего потребление ресурсов растет из-за следующих причин:

• Увеличилась посещаемость сайта.
• Боты ведут вредоносную активность на сайте.
• Есть проблемы в работе скриптов.

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

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

Проблемы с оптимизацией CSS и JavaScript

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

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

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

Начните анализировать сайт с помощью инструмента PageSpeed Insights. Сервис изучит ваш ресурс, подскажет, что надо исправить и как изменения ускорят работу сайта. 

Что делать, если замедляется рендеринг страницы

1. Настроить отложенную загрузку JavaScript. Пусть самые большие JS-файлы будут загружаться в самом конце и не тормозить отображение остального контента. Чтобы настроить отложенную загрузку, настройте вызов внешнего JS-файла перед тегом </body>.
2. Использовать асинхронную загрузку скриптов. При синхронной загрузке страница часто отображается в браузере с задержками, так как браузер не отобразит страницу, пока не обработает CSS- и JS-файлы. Асинхронная загрузка дает браузеру возможность загрузить HTML-страницу, даже если он пока не обработал файлы js и css. 
3. Разместить ссылки на CSS-файлы перед ссылками на Javascript-файлы. Так страница будет загружаться постепенно: заголовок, логотип, рубрики, верхние блоки и т. д. Если разместить CSS-файлы после ссылок на файлы со скриптами, браузер будет тормозить и стараться загрузить все элементы одновременно — через несколько секунд ожидания. 
4. Удалить все неиспользуемые элементы кода: пустые строки и переносы строк, ненужные комментарии, лишние пробелы, символы табуляции. Это уменьшит объем файла, и браузер будет быстрее его загружать. 

Лучше хранить две версии файлов: вариант для разработки (где сохранены все комментарии и удобное форматирование) и минифицированный вариант для размещения на сайте. 

Не загружаются данные из внешних источников в браузере

В коде сайта могут быть ссылки на внешние источники. Например, иногда для экономии места на диске хостинга картинки и видео хранят на стороннем сервере (CDN). 

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

Ссылки на внешние источники можно проверить через консоль браузера Google Chrome*:

1. откройте нужный сайт в браузере и нажмите F12;
2. откройте вкладку Network;
3. вызовите меню правой кнопкой мыши; 
4. включите столбцы URL и/или Domain;
5. изучите контент, размещенный на вашем домене и на внешних ресурсах.

Не загружаются данные из внешних источников на сервере

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

Еще одна частая проблема — сайт обращается сам к себе. Например, на сайте с условным именем TEST.RU может встречаться код, при помощи которого разработчик хочет подключить еще один файл к скрипту на языке PHP:

require_once(“https://test.ru/somefile.txt”).

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

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

Не настроено кеширование

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

Популярные виды кеширования 

• Кеширование через подключение к системе СDN-сервиса — например, Cloudflare. Внешний сервер кеширует любые элементы, даже скрипты и стили. Это снизит потребление ресурсов хостинга, на котором располагается сайт. Но такой способ кеширования поможет, только если CDN-сервер работает стабильно. Иначе страницы сайта начнут загружаться еще медленнее. Про CDN и принципы его работы мы писали отдельную статью.
• Кеширование запросов к базе данных — об этом мы подробно рассказываем в дальше в статье — в разделе «Проблемы со скриптами и базой данных». 
• Кеширование в PHP — например, с помощью расширения OPcache. Это будет полезно для всех сайтов, использующих CMS. Расширение позволит ускорить выполнение скриптов, написанных на языке PHP, но это незначительно увеличит потребление оперативной памяти. На виртуальном хостинге RU-CENTER это расширение включено по умолчанию. 
• Кеширование статических файлов в браузере. Вы можете указать период, в течение которого статические файлы будут храниться у пользователя в кеше браузера. Это делается в настройках веб-сервера в панели управления хостингом, в файле конфигурации веб-сервера или в файле .htaccess. 
• Кеширование результатов генерации HTML-страниц на диске. Если все страницы вашего сайта генерируются скриптами сайта, но не обновляются каждую секунду, можно сохранять уже сгенерированные страницы в виде файлов. Затем эти страницы путем минимальных преобразований будут сразу же передаваться в браузер пользователя. 

Существует множество плагинов, чтобы настроить кеширование данных для сайтов на CMS. Например, WP Super Cache или W3 Total Cache. Перед установкой плагина лучше посоветоваться с веб-мастером — он подскажет, какой плагин лучше подойдет для вашего сайта.

Не используется сжатие данных

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

GZIP-сжатие подключается на стороне веб-сервера: в панели управления, как на хостинге RU-CENTER, в конфигурационном файле веб-сервера или через файл .htaccess. Включить сжатие можно также в настройках CMS.

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

Проблемы со скриптами и базой данных 

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

Оптимизация скриптов. На их выполнение должно уходить минимум оперативной памяти и времени. Вот несколько советов: 

• Кешируйте данные, которые редко обновляются. Если для генерации страницы нужно выполнить запрос к БД, данные которой не обновляются каждые несколько минут, имеет смысл сохранять результаты запроса в файле. Если файл небольшой, получить готовый результат из файла проще, чем обратиться к БД. Можно кешировать результаты генерации HTML-кода, как описано выше.
• Используйте актуальную версию PHP. Переход на новую версию PHP почти всегда повышает производительность сайта. К тому же с новым релизом закрываются уязвимости и появляются новые возможности, удобные для разработчиков. Но учтите, что смена версии PHP — это сложно, долго и часто требует доработки кода сайта. Но замена версии PHP оправдана, если другие способы повышения производительности не сработали. 

Оптимизация запросов к БД. Главные требования:

• используйте индексы во всех запросах для выборки данных; 
• старайтесь создавать запросы так, чтобы при их выполнении по минимуму использовались временные файлы и операции сортировки в файле (filesort);
• минимально используйте временные файлы и операции filesort.

Чем быстрее сервер базы данных выполняет запросы, тем быстрее он получит необходимые данные, сформирует ответ клиенту и освободит память.

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

Иногда медленные запросы появляются случайно, например, как результат мгновенной нагрузки на сервере. Но если ситуация повторяется системно, значит, проблема в неэффективных запросах. Для сайтов на WordPress проверить наличие медленных запросов к базе можно с помощью плагинов Query Monitor или Debug Bar. 

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

Мы советуем периодически проверять базу данных, считать число записей в таблицах и удалять лишние и неактуальные. Для сайтов на WordPress для таких задач подойдет плагин WP-Sweep. 

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

Проблемы с медиаконтентом 

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

Как оптимизировать картинки 

• Вручную перед загрузкой на сервер, например, с помощью утилиты Squash.
• Подключить к сайту плагин-оптимизатор, который вдвое уменьшает размер изображений, почти не влияя на качество. Например: Image Optimizer, WP Compress, Optimus, Robin. 
• Если скрипты вашего сайта добавляют на загружаемые картинки ваш логотип или какие-либо «водяные знаки», нужно убедиться, что они не добавляют эти элементы каждый раз заново. Достаточно сделать это единожды при первой загрузке изображения, а дальше хранить на сервере уже обработанную картинку.

Как оптимизировать видео 

• Использовать специальные программы, которые уменьшают размер видео без ухудшения качества, например: Blazemp или HandBrake.
• Конвертировать видео в совместимые с HTML5 форматы: MP4 или WebM. Для этого удобно использовать video.online-convert.com. 
• Убирать звук на видео, если от этого не пострадает информативность. Если ваше видео уже без звука, не забудьте убрать данные об аудио. Это можно сделать в любом редакторе, например ffmpeg.org.

Почему большое количество рекламы на сайте — это плохо 

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

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

Проблемы с интернетом-провайдером или сетью

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

Как понять, что есть сложности с работой сети

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

Какие могут быть проблемы в работе сети: 

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

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

На сайте вредоносный код

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

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

Боты

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

Запросы ботов увеличивают нагрузку на сервер и могут замедлять работу сайта. Чтобы исключить эту проблему, проверьте логи доступа к сайту на наличие большого числа обращений от ботов. Самые популярные боты — mj12, semrush, ahrefs. Их активность можно ограничить, например, запретив доступ к сайту. Это можно сделать через файл .htaccess на хостинге, добавив код:

RewriteCond %{HTTP_USER_AGENT} ahrefs [NC,OR]

RewriteCond %{HTTP_USER_AGENT} semrush [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mj12 [NC]

RewriteRule .* — [F,L]

Также для борьбы с ботами будет полезен Антивирус RU-CENTER. Он поддерживает WAF (Web Application Firewall), который сканирует трафик и блокирует запросы ботов. WAF работает на большинстве популярных CMS — подробнее о нем мы рассказали в статье об Антивирусе.

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

1. Проверьте, сколько ресурсов на хостинге потребляет сайт и не превышаются ли тарифные лимиты. Если тарифные лимиты превышены, проверьте логи доступа к сайту и посмотрите запросы. Увеличилась посещаемость сайта — нужен новый тариф. Проблема в атаке ботов или работе скриптов — ищите рекомендации в этой статье. 
2. Проверьте, правильно ли подключены файлы JavaScript и CSS. 
3. Проверьте скорость загрузки данных из внешних источников.
4. Настройте кеширование данных сайта. Пункты 4–9 мы советуем выполнить, даже если у сайта нет проблем со скоростью. 
5. Настройте сжатие данных сайта с помощью gzip. 
6. Оптимизируйте скрипты и запросы к базе данных. Очистите базу данных от неактуальной информации. 
7. Оптимизируйте картинки, видео и рекламу на сайте. 
8. Проверьте, нет ли проблем в работе сети.
9. Проверьте сайт на наличие вирусов и большого количества обращений от ботов.

*Информация в статье не является рекламой и представлена в ознакомительных целях.

Время на прочтение
5 мин

Количество просмотров 56K

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

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

Введение: как загружаются сайты

В материале под названием «Что происходит, когда пользователь вбивает адрес сайта Google.com» очень подробно описаны все процессы, связанные с посещением сайта. Если говорить кратко, то между тем, как посетитель сайта вобьет в адресную строку его URL и получит ответ, в общем виде проходит несколько этапов:

1. Сначала браузер осуществит DNS-запрос по имени сайта.
2. Далее инициируется TCP-подключение к серверу, на котором этот сайт расположен.
3. Следом устанавливается соединения http или https.
4. Потом запрашивается нужная страницы и загружается ее HTML-код.
5. Стартует парсинг HTML.
6. После этого браузер начинает подгружать внешние ресурсы, связанные со страницей (стили, изображения, скрипты и так далее).
7. В итоге рендерится финальная версия страницы со всем контентом.
8. Затем исполняется JS-код — скрипты могут потребовать обработки дополнительных сетевых запросов, изменять страницу или её шаблон, так что возможен и новый круг рендеринга.

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

Первый шаг: понять, что тормозит

Бывший инженер Facebook и основатель стартапа Pave Джастин Митчел в треде на Quora так описывал начало работы по оптимизации загрузки сайта:

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

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

Существует несколько важных метрик быстродействия сайта. Одна из них — это время до первого байта (TTFB — time to first byte), которая показывает, как быстро браузер начинает получать данные от сервера после отправки запроса. Также важно замерять начало рендеринга страницы и время загрузки (load time).

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

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

Расширение ресурсов сервера

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

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

Кэширование

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

Изображение: CrazyEgg

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

Изображение: CrazyEgg

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

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

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

Существует несколько инструментов для компрессии изображений, среди которых TinyPNG, Kraken.io и JPEGmini. Кроме того, имеет смысл попробовать включить конвертацию изображений в формат WebP. Он был разработан Google, и по данным компании такие изображения на 26% легче PNG-файлов и на 25-34% меньше JPEG-картинок.

Чтобы активировать конвертацию, можно добавить в файл .htaccess следующий код:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(path/to/your/images.+).(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

К сожалению, на данный момент формат WebP поддерживается далеко не всеми браузерами — пока среди них только Chrome и Opera.

CDN

Еще один «инфраструктурный» метод снижения задержек — использование сетей доставки контента (content delivery network, CDN). Такие сети состоят из серверов в разных точках мира. При подключении сайта к сети на входящих в нее серверах создают копии файлов веб-ресурса, а затем пользователю отдают данные с ближайшего к нему сервера — в итоге скорость загрузки увеличивается.

Использование Gzip

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

Включить использование Gzip довольно просто — нужно просто добавить несколько строк кода в файл .htaccess. К примеру, при использовании веб-сервера Apache веб-мастерам доступен модуль mod_gzip, чтобы активировать Gzip в таком случае нужно внести в .htaccess такой код (подробнее — в туториале на SitePoint):

mod_gzip_on Yes
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^application/json$
mod_gzip_item_include mime ^text/.*$
mod_gzip_item_include file .html$
mod_gzip_item_include file .php$
mod_gzip_item_include file .js$
mod_gzip_item_include file .css$
mod_gzip_item_include file .txt$
mod_gzip_item_include file .xml$
mod_gzip_item_include file .json$

Оптимизация кода сайта

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

Также стоит избегать инлайн-CSS и JS-кода. В таком случае браузеры будут кэшировать эти внешние ресурсы, что позволит сэкономить время загрузки. Также JS и CSS следует минифицировать – сделать это можно с помощью инструментов вроде JSMIN, YUI Compressor и Packer.

Использование связки Nginx+Apache

Для увеличения скорости загрузки страниц можно использовать связку Apache и Nginx. Это два самых распространённых веб-сервера в мире, популярность объясняется мощью Apache и скоростью Nginx. Помимо плюсов, у каждого инструмента есть и свои недостатки: например, в Apache есть ограничения памяти сервера, в то время как Nginx, эффективный для статических файлов, нуждается в помощи php-fhm или аналогичных модулей для загрузки динамического контента.

Тем не менее можно и даже нужно объединить два веб-сервера для большей эффективности, используя Nginx, как статический фронтенд и Apache — как бэкенд. Такое решение положительно скажется на скорости загрузки страниц сайта.

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

Ниже мы собрали ряд полезных статей на русском и английском языке:

• Как ускорить сайт или факторы, влияющие на загрузку сайта
• Очень шустрый блог на WordPress при помощи связки nginx + PHP-FPM + MariaDB + Varnish (продолжение)
• Топ-10 советов о том, как увеличить скорость загрузки страницы
• Ruhighload – ресурс со статьями по теме оптимизации
• Топ-15 бесплатных инструментов проверки производительности сайта
• Как ускорить работу сайта: лучшие практики Yahoo
• 10 способов ускорить сайт и увеличить конверсию

Почему мой сайт работает медленно и что делать

Общее время загрузки сайта складывается из:

• времени отклика серверов (время запросов и ответов DNS и веб-серверов, к которым относится сайт),
• времени генерации сайта на сервере и в браузере (суммарное время загрузки всех файлов сайта).

Эта информация находится в Инструментах разработчика используемого браузера. Откройте в браузере нужную страницу, а затем консоль разработчика (в браузерах Google Chrome, Firefox для этого нажмите клавишу F12). Перейдите во вкладку Network (Сеть):

Во вкладке All (Все) будет отображаться список всех файлов сайта и общее время загрузки, показатель Load:

Чтобы узнать время загрузки отдельного файла, кликните по интересующему в списке и затем перейдите в раздел Timing (Тайминги):

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

Показатели Queueing (Очередь), Stalled (Заблокировано), DNS Lookup (Поиск DNS), Initial connection (Соединение) составляют время отклика сервера и, как правило, суммарно занимают менее 0,1 с. В случае возникновения проблем на этом этапе загрузки сайта их быстро исправляют, так как они несут массовый характер и влекут множество жалоб.

Также сложности возникают с параметром Waiting (Ожидание). TTFB (Time to First Byte) — это время от момента ввода пользователем запроса, за которое на экран выводится первый байт информации. Также этот показатель отвечает за прогрузку интерактивных элементов страницы. Иными словами, он описывает то, насколько быстро сайт (со всеми скриптами и данными) загрузился и готов к использованию. Также он показывает степень загруженности сервера. Причин снижения показателя TTFB несколько. Ниже мы перечислим основные проблемы и способы их решения.

Основные причины медленной работы сайта

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

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

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

Чтобы определить, статический или динамический файл нуждается в оптимизации, обратите внимание на расширение элемента, который долго грузится, в списке всех файлов сайта (Инструменты разработчика — Network — All):

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