Не тормози: 10 причин, почему ваш сайт медленно грузится
И несколько простых способов это изменить.
Все знакомы с пословицей «тише едешь — дальше будешь». Но когда речь заходит о производительности сайта, это скорее рецепт провала. Знаем минимум 10 причин, из-за которых может медленно загружаться ваш сайт, и разбираем их с экспертом Selectel.
Неоптимизированные изображения
Одна из наиболее частых причин медленной работы сайта. Изображения с высоким разрешением потребляют много трафика при загрузке и увеличивают размер страницы. Чем он больше, тем дольше загружается сайт.
Формат изображения — еще один важный фактор, который стоит иметь в виду. Например, JPEG-изображения меньше таких форматов, как PNG или GIF. Страницы будут загружаться быстрее, если вы отдадите предпочтение JPEG.
Как быть:
Проверьте размер ваших изображений. Все, что превышает 1 МБ, недопустимо.
- По возможности используйте JPEG вместо PNG, особенно для больших изображений. На иконки правило не распространяется.
- Используйте инструменты мониторинга загрузки страницы, чтобы понять, как сильно изображения влияют на этот процесс.
Ошибки JavaScript
Плагины JavaScript облегчили добавление динамического контента на веб-сайты. Но при неправильном использовании JavaScript может снизить скорость загрузки страниц сайта.
Для загрузки и выполнения кода JavaScript требуется время. Поэтому, если вы используете множественные вызовы API для визуализации данных посредством JavaScript, это в большинстве случаев приведет к значительным задержкам при загрузке.
Как быть:
Ваши скрипты могут быть «раздутыми» (bloat), или перенасыщенными. Проверяйте сценарии JavaScript, чтобы увидеть, что вам действительно нужно, а что можно удалить.
Асинхронная загрузка JavaScript обязательна. Она позволяет браузеру не дожидаться полной загрузки скрипта и продолжать загрузку основного HTML и других ресурсов.
- Подумайте об использовании такого инструмента, как Google Tag Manager. Это система управления тегами (TMS), при помощи которой можно легко обновлять код отслеживания и другие форматы кода (теги) на сайте или в мобильном приложении.
Помогаем работать без ошибок.
Слишком много Flash-контента
Flash-баннеры некогда были отличным инструментом для повышения интерактивности сайта, но такой контент значительно утяжеляет страницу. Обычно они имеют большой размер, а чем тяжелее файл, тем медленнее он загружается. Что логично.
Как быть:
Постарайтесь уменьшить размер Flash-баннеров.
- Может, вам вообще не нужен Flash-контент? Мода на него давно прошла.
- Подумайте о HTML5 в качестве альтернативы.
Слишком много HTTP-запросов
Наличие большого количества файлов JavaScript, CSS и изображений приводит к чрезмерному росту HTTP-запросов. Когда пользователь заходит на страницу сайта, браузер выполняет несколько запросов для загрузки каждого из этих файлов, что снижает скорость открытия страницы.
Как быть:
Используйте CSS-спрайты для снижения количества HTTP-запросов. Спрайты объединяют множество изображений в одно, сокращая тем самым количество обращений к серверу.
- Следите за количеством файлов на страницах, включая CSS, изображения, JavaScript.
Решение проблем на фронтенде и бэкенде сайта — это гигиенические нормы для любого уважающего себя бизнеса. Здесь поможет простая оптимизация визуального контента, удаление лишнего, сжатие слишком большого, чистка кода. Такие «процедуры» рекомендуется проводить раз в несколько месяцев. В целом, с такой работой справится рядовой IT-специалист.
Отсутствие кэширования
Грамотное использования механизмов кэширование в разы улучшает производительность веб-сайтов. Если вы вообще не используете эту технологию, то многое теряете. Она позволяет хранить часто используемые данные в «кэш-памяти». Любые повторяющиеся запросы контента обслуживаются из нее, что ускоряет процесс получения данных.
Как быть:
Настроив кэширование, вы значительно улучшите производительность сайта. Вы можете кэшировать разные сущности — от HTTP и запросов к базе данных до изображений. Только не перестарайтесь, кэширование вызывает повышенную нагрузку на веб-сервер!
Грязный код
Еще одна распространенная причина медленной работы сайта — плохое качество кода. Чрезмерные пробелы, встроенные стили, пустые строки и лишние комментарии могут привести к увеличению размера таблицы стилей веб-сайта.
Удалив все эти элементы, вы сократите код, уменьшите размер файла и, как следствие, — время загрузки страницы. Кстати, возможно, после такой «чистки» вы также заметите улучшения по части SEO-оптимизации.
Если вы далеки от написания кода или не хотите в него лезть, есть несколько инструментов, которые можно использовать для очистки и уменьшения файлов таблиц стилей. Кроме того, можно воспользоваться услугами профессиональных веб-студий.
Как быть:
- Чистота — залог «здоровья»! Следите за гигиеной кода.
Не ленитесь использовать CSS (Cascading Style Sheets) — код, который вы используете для стилизации веб-страницы.
- Старайтесь не создавать несколько таблиц стилей CSS, если можно обойтись одной.
Отсутствие GZIP-сжатия
Сжатие передаваемого трафика веб-сервером — простой и действенный способ увеличить скорость загрузки сайта. GZIP обеспечивает значительное (до 90%) уменьшение объема веб-трафика (HTML,CSS, файлы JavaScript и т.д.). В результате браузер клиента получает трафик в сжатом виде, который распаковывается при получении.
Как быть:
Если вы еще не активировали GZIP-сжатие на своем сайте, это первое, что вам следует сделать.
Много рекламы
Конечно, реклама помогает монетизировать сайт с высоким трафиком. Но она не должна влиять на его производительность или удобство пользователей .
Каждый рекламный баннер — это дополнительный HTTP-запрос, а порой и вызовы скриптов, на обработку которых тратится время загрузки. Всплывающие окна, межстраничные переходы и автоматическая загрузка видеорекламы могут создавать сотни HTTP-запросов, с которым ваш сервер, на котором расположен сайт, просто не справится.
Как быть:
Рекламные объявления — это лишние HTTP-запросы, которые замедляют загрузку страницы. Используйте их только там, где они точно сработают и «окупят» свой вес.
Отсутствие CDN
CDN (Content Delivery Network) — это распределенная сеть независимых серверов, которые находятся в разных географических точках и доставляют посетителям веб-контент с высокой скоростью и производительностью.
Все входящие запросы на контент обслуживается сервером, расположенным в ближайшем к посетителю центре обработки данных. Это позволяет минимизировать время приема-передачи (round-trip time, RTT) и предоставлять запрошенный контент гораздо быстрее.
В деле устойчивости работы вашего сайта или приложения расстояние имеет значение. Например, ваш хостинг находится в Санкт-Петербурге. Чтобы клиенты во Владивостоке не страдали от долгой загрузки сайта, лучше использовать сеть доставки контента. Контент закэшируется на ближайшем к Владивостоку CDN-сервере, и ваш сайт будет загружаться у пользователей так же быстро, как если бы они жили в Санкт-Петербурге. У Selectel более 37 точек присутствия в России, странах СНГ и Европе, более 300 кэш-серверов, а емкость сети составляет более 10 Тбит/с.
Как быть:
Настройте CDN. Технология может сильно помочь, если посетители вашего сайта разбросаны по всему миру. Но, если расположение серверов совпадает с географическим положением вашей целевой аудитории, CDN позволит снизить на них нагрузку, доставляя статический контент.
Плохой хостинг
Выбор хостинг-провайдера имеет большое значение, когда дело доходит до производительности сайта. Да, это тоже может повлиять на скорость загрузки сайта!
Если вы уже исключили все вышеописанные причины торможения загрузки сайта, возможно, вашу проблему решит смена хостинг-провайдера. Отдавайте предпочтение провайдеру, который предлагает услуги по оптимизации инфраструктуры, включенные в стоимость хостинга.
На что смотреть при выборе хостинг-провайдера? Во-первых, отдавайте предпочтение проверенным игрокам, которые не первый год на рынке, — будет возможность изучить отзывы в интернете. Также стоит рассмотреть перечень дополнительных сервисов. Подойдет ли провайдер, если вы начнете расти и вам понадобятся решения более высокого порядка? Лучше подумать заранее, так как обычно переезд на другой хостинг — трудоемкая и не всегда приятная процедура. Узнайте, где заканчивается зона ответственности провайдера за работу вашего сайта. Несет ли он какие-то денежные обязательства за падение и простой сервера? Наконец, толковый хостинг-провайдер проконсультирует вас и поможет решить возникшие проблемы.
Вывод
Скорость загрузки страниц веб-сайта зависит от множества факторов, таких как неоптимизированные изображения, большое количество HTTP-запросов, громоздкий код, проблемы с JavaScript. И это лишь некоторые из них.
Выяснить, что именно вызывает замедление загрузки сайта, не всегда просто. Но найти корень проблемы очень важно. Потому что ее решение позволит вам не терять деньги из-за несостоявшихся клиентов. В наше время каждая миллисекунда может иметь значение.
Не пропускайте полезное, подписывайтесь на блог Selectel.
Эту статью писал не эксперт и не специалист. Это делал копирайтер.
Причем, для рерайта были выбраны статьи из 2015 года.
Если бы это была тетрадь, то в помарках была бы каждая строка.
А оценка была бы - 2.
Хотите подробностей?)
печаль однако, сайт на дремучем вордпрессе с базой, пошарпанной плагинами и огромным слайдером на весь экран с кучей картинок, лучше резалт дает. Уважаемый Гуру, дадите подробности?
Короче либо тест тупит, либо хостинг иногда исполняет у вас.
Ситуация, когда сайт был создан лет 6-8 назад и никто им не занимался, — достаточно частое явление. Там будет и Flash, и возможное отсутствие кэширования, и чудовищные конструкции на JS... Советы из статьи в этом случае позволят существенно ускорить работу сайта без необходимости создания его с нуля с помощью современных инструментов (следовательно, и без серьезных затрат на это).
3. Слишком много Flash-контента
- это какого года статья? проснитесь, автор, adobe уже не делает flash и google его не будет поддерживать
Официальная поддержка Adobe Flasg Player заканчивается 31 декабря 2020 года.
Даже не помню когда последний раз встречал Flash на сайтах. Году в 2008 наверное.
Держите наркоманов, у них много флэша в 2020-м!
Остальное ничуть не хуже, даже лучше.
У вас просто девочка за 30 рублей контентом занимается или вы этим оправдываетесь перед клиентами?