Не тормози: 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.
Отсутствие кэширования
Грамотное использования механизмов кэширование в разы улучшает производительность веб-сайтов. Если вы вообще не используете эту технологию, то многое теряете. Она позволяет хранить часто используемые данные в «кэш-памяти». Любые повторяющиеся запросы контента обслуживаются из нее, что ускоряет процесс получения данных.
Как быть:
Настроив кэширование, вы значительно улучшите производительность сайта. Вы можете кэшировать разные сущности — от 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. Технология может сильно помочь, если посетители вашего сайта разбросаны по всему миру. Но, если расположение серверов совпадает с географическим положением вашей целевой аудитории, CDN позволит снизить на них нагрузку, доставляя статический контент.
Плохой хостинг
Выбор хостинг-провайдера имеет большое значение, когда дело доходит до производительности сайта. Да, это тоже может повлиять на скорость загрузки сайта!
Если вы уже исключили все вышеописанные причины торможения загрузки сайта, возможно, вашу проблему решит смена хостинг-провайдера. Отдавайте предпочтение провайдеру, который предлагает услуги по оптимизации инфраструктуры, включенные в стоимость хостинга.
Вывод
Скорость загрузки страниц веб-сайта зависит от множества факторов, таких как неоптимизированные изображения, большое количество HTTP-запросов, громоздкий код, проблемы с JavaScript. И это лишь некоторые из них.
Выяснить, что именно вызывает замедление загрузки сайта, не всегда просто. Но найти корень проблемы очень важно. Потому что ее решение позволит вам не терять деньги из-за несостоявшихся клиентов. В наше время каждая миллисекунда может иметь значение.
Не пропускайте полезное, подписывайтесь на блог Selectel.
Эту статью писал не эксперт и не специалист. Это делал копирайтер.
Причем, для рерайта были выбраны статьи из 2015 года.
Если бы это была тетрадь, то в помарках была бы каждая строка.
А оценка была бы - 2.
Хотите подробностей?)
печаль однако, сайт на дремучем вордпрессе с базой, пошарпанной плагинами и огромным слайдером на весь экран с кучей картинок, лучше резалт дает. Уважаемый Гуру, дадите подробности?
Короче либо тест тупит, либо хостинг иногда исполняет у вас.
Здравствуйте. Спасибо, что обратили на это внимание. Повторить замер не смог, но сам видел такие замеры, примерно раз в сутки, в нашем мониторинге, который снимает все значимые показатели каждые 15 минут.
Скорее всего дело в каком-то магистральном канале ДЦ, или загрузке агента замера PageSpeed. Мы обязательно разберемся и решим этот вопрос. Обычно показатели нашего сайта в зеленой зоне, и перезамер покажет другие результаты. В любом случае проблема с показателями есть, вы совершенно правы.
Наш сайт на VUE.JS + NUXT. Блог — на WordPress.
C плагинами, верно, если вы еще не пользуетесь ими, то обязательно попробуйте.
Слайдер...? Где?
Картинки. В нашем 117 прямом эфире мы показывали фотогалерею на 700+ фото высокого качества с молниеносной загрузкой на одной странице. Мы любим много картинок.
И кстати, спасибо, что зарегались специально для этого коммента.
А вот и настоящие скрины из PageSpeed Insights:
а есть пример ускоренного сайта на wordpress?
Сейчас если переводить на более понятную всем автомобильную тематику ваш сайт - это ускоренный корч с дизайном 2010 года, с которого даже капот сняли.
Больше впечатлил бы автобус или фура с прицепом (виджетами обратной связи и обратным звонком). А главное счетчики, особенно яндекса :). Без них ну совсем все просто.
Конечно есть!
Ничего не надо убирать с сайта, надо грамотно всё отложить и равномерно разместить в потоке загрузки.
Посмотрите тоже про Яндекс.Метрику:
Ситуация, когда сайт был создан лет 6-8 назад и никто им не занимался, — достаточно частое явление. Там будет и Flash, и возможное отсутствие кэширования, и чудовищные конструкции на JS... Советы из статьи в этом случае позволят существенно ускорить работу сайта без необходимости создания его с нуля с помощью современных инструментов (следовательно, и без серьезных затрат на это).
Ну так советы не актуальные, ничего не ускорить с их помощью в 2020.
Я понимаю, что комментарии технические и тут нужен настоящий спец по фронту, который еще и опыт ускорения сайтов имеет (к слову таких в России на пальцах пересчитать можно). Но дело в том, что статья бесполезная.
Флэша нет уже ни у кого. JS - да, но в статье про это написано не верно.
3. Слишком много Flash-контента
- это какого года статья? проснитесь, автор, adobe уже не делает flash и google его не будет поддерживать
Официальная поддержка Adobe Flasg Player заканчивается 31 декабря 2020 года.
Даже не помню когда последний раз встречал Flash на сайтах. Году в 2008 наверное.
Держите наркоманов, у них много флэша в 2020-м!
Остальное ничуть не хуже, даже лучше.
У вас просто девочка за 30 рублей контентом занимается или вы этим оправдываетесь перед клиентами?
🐌 14.
"Старайтесь не создавать несколько таблиц стилей CSS, если можно обойтись одной."
Лучше делить critical css и остальные стили текущей страницы. Это как раз деление стилей, что точно с гарантией улучшит скорость загрузки.
Странно, что автор советует обратное.
Третье.
"Формат изображения — еще один важный фактор, который стоит иметь в виду. Например, JPEG-изображения меньше таких форматов, как PNG или GIF. Страницы будут загружаться быстрее, если вы отдадите предпочтение JPEG."
Кхм. WEBP весит еще меньше и поддержка уже хорошая.
AVIF — еще меньше весит, чем webp, но поддержка пока небольшая. Лучше делать изображения в каждом формате дать возможность выбирать, что грузить.Браузер сам выберет, что оптимальнее показать. Например через тег picture.
автор вообще про WEBP не слышал, щас напугаете его...
🐌 Девятое.
FLASH? Ну серьезно. Камон...
Safari никогда не поддерживал Flash. И правильно делал. Это мертвая технология. Если у вас есть флеш, то вы где-то свернули не туда по дороге жизни. Даже комментировать нечего, потому что это
1) небезопасно
2) медленно
3) не кросс-браузерно
Покажите пару сайтов с Flash? Реально интересно стало, откуда этот совет всплыл...
у меня в портфолио на фл-ру лет пять назад все работы с флеш-анимацией похерились, на фл-ру оказывается есть соображающие...
А есть промокод на бесплатную активацию в nginx?
Дальше по пунктам.
Второе.
Вы пишете:
"Одна из наиболее частых причин медленной работы сайта. Изображения с высоким разрешением потребляют много трафика при загрузке и увеличивают размер страницы. Чем он больше, тем дольше загружается сайт."
Загрузить — наименьшая проблема. Отрисовать DOM, применить стили и выполнить весь js-код на странице — вот это задача еще та!
Хорошая статья для 2014 года, но сейчас все уже очень сильно поменялось, и нужно оптимизировать не загрузку контента а отрисовку и выполнение. Загрузка отошла на второй план, но конечно тоже важно. Спасибо за статью, понастальгировал по временам, когда ускорение сайта сводилось к выполнению подобных советов.
🐌 Седьмое.
"Асинхронная загрузка JavaScript обязательна. Она позволяет браузеру не дожидаться полной загрузки скрипта и продолжать загрузку основного HTML и других ресурсов."
Хорошее решение, это позволит улучшить первую отрисовку, но вот TTI (время до полной интерактивности страницы) точно не улучшится.
Наши технические специалисты рекомендуют самостоятельно управлять приоритетностью выполнения кода. Большинство функций анимации можно сделать на CSS без использования JS.
а как же падающий снег на сайте? скоро Новый Год, без снега никак!!!)))
Снег. Падает. Классика.)))
То чувство, когда плюсанул статью не из-за статьи, а из-за комментов.
Ребят, у вас же реально хороший хостинг, наймите копирайтеров подороже.
Лучше пусть возьмут поумнее. Дело то не в деньгах
Комментарий удален модератором
Блин, какой флэш??? Adobe в декабре 2020 завершает поддержку формата...
Попутно спалю фишку - выкидываем метрику яндекса, выкидываем живосайт, выкидываем весь хлам от рамблера, майл-ру, лайвинтернет- эгегей,и вот уже плюс 30-40 баллов от гугла!
Можно не выкидывать, а отложить в потоке загрузку на 200-300 мс и блокировка с потока снята.
хз, живосайт да(его вообще на 3 секунды оттягиваю, ибо нефиг), яндекс начинает мгновенно орать...
орать да, но собирать данные продолжает, проверено.
хм, интересно. надо протестить,как бы меня ни тошнило от сервисов яндекса...
Яндекс на самом деле очень быстро отдаёт метрику и выполняет.
Но так как метрика лезет вперёд при выполнении, то попадает в блокированный поток и выполняется очень долго. Если управлять потоком грамотно, то метрика незаметна в потоке.
Посмотрите наш эфир на эту тему: 93: Что делать с внешними скриптами аналитики, чтобы сайт не тормозил с Яндекс.Метрикой . Там Емель тайминг, смотреть удобно.
🐌 Пятое.
"По возможности используйте JPEG вместо PNG, особенно для больших изображений. На иконки правило не распространяется."
PNG нужно использовать только там, где нужна прозрачность. В остальных случаях — JPEG и WEPB в качестве альтернативы. Формату PNG больше 25 лет.)
🐌 Шестое.
Используйте инструменты мониторинга загрузки страницы, чтобы понять, как сильно изображения влияют на этот процесс.
Pingdom — точно не стоит использовать, они сами знают, что их замеры неверные, и даже подтверждают это в личной переписке. Прикрепляю, что отвечают в суппорте, если им задать пару грамотных вопросов.
Перевод вкратце такой:
Мы знаем, что наши замеры неадекватные. Мы когда-нибудь это починим. Скорее всего когда перейдем на Lighthouse (движок PageSpeed Insights).
🐌 Десятое.
"Используйте CSS-спрайты для снижения количества HTTP-запросов. Спрайты объединяют множество изображений в одно, сокращая тем самым количество обращений к серверу."
Спасибо вам. Я как на десять лет помолодел.) Вот комментарий от нашего технического отдела.
"Лучше вместо спрайтов переходить на современные svg, которые не придется спрайтить и которые можно включить в код страницы. Как показывает практика, чаще всего приходилось спрайтить иконки/логотипы/итд, а их как раз лучше использовать в векторе. Он и весит меньше и их можно сразу включить в код." (Антон Белогородцев).
🐌 17.
"CDN (Content Delivery Network) — это распределенная сеть независимых серверов, которые находятся в разных географических точках и доставляют посетителям веб-контент с высокой скоростью и производительностью.
Все входящие запросы на контент обслуживается сервером, расположенным в ближайшем к посетителю центре обработки данных. Это позволяет минимизировать время приема-передачи (round-trip time, RTT) и предоставлять запрошенный контент гораздо быстрее."
Всё так, но не всегда. Чаще всего, при подключении CDN уменьшается RTT, но увеличивается TTFB, так как соединение происходит сначала с сервером CDN, а затем с сервером хостинга.
✅ Как нужно: кэшировать на серверах CDN'ом страницы, чтобы открытие происходило непосредственно с ближайшего севрера без установки соединения с родным хостингом сайта.
"Но, если расположение серверов совпадает с географическим положением вашей целевой аудитории, CDN позволит снизить на них нагрузку, доставляя статический контент."
✅ Кэшировать нужно не только статику, но и частично динамику.
Ладно, не буду ждать ответ. А то весь хайп пропустим.
🐌
🐌
Давайте по порядку. Надеюсь, вы сможете переписать статью, учитывая правки.
Но первая правка будет самая сложная. У нас на рейтинге сайтов хостинг-провайдеров есть сайт Селектела. И он занимает 95 позицию из 96. Последний Mail.Ru Cloud Solutions.
Нагуглить его просто - так и пишите "рейтинг скорости загрузки сайтов хостинг провайдеров". Мы будем где-то в топе.
Так вот. Полная интерактивность сайта наступает после 30 секунд. Это крайне плохой результат. Учитывая это - писать такую статью было ошибкой, потому что ни один, даже самый вредный совет из неё у вас не сделан у самих.
Четвертое.
"Проверьте размер ваших изображений. Все, что превышает 1 МБ, недопустимо."
Вес ВСЕГО контента на странице — не должен превышает 1 МБ. Гугл рекомендует не более 500 килобайт. Это все изображения + скрипты + стили + прочее.
Если больше мегабайта — грузим отложено.
Например, изображения лучше откладывать до момента, пока их не будет на экране. Не каждый человек доскроллит страницу до конца. Зачем грузить лишнее, что вообще не пригодится.
🐌 Восьмое.
"Подумайте об использовании такого инструмента, как Google Tag Manager. Это система управления тегами (TMS), при помощи которой можно легко обновлять код отслеживания и другие форматы кода (теги) на сайте или в мобильном приложении."
Простите. Как GTM ускорит загрузку сайта? Установить коды конечно легче, но выполнение точно будет больше, так как сначала нужно выполнить GTM, а затем выполнить вложенный в него код.
А простота вставки кода даёт свободу и через пару месяцев ваш GTM будет пухнуть от вставленного добра, которое будет тянуть скорость сайта на дно.
🐌 11.
"Следите за количеством файлов на страницах, включая CSS, изображения, JavaScript."
Не надо за ними следить. Стили первого экрана нужно включить инлайном и асинхронно грузить основные стили, это снизит отрисовку первого контента до 1 запроса самого документа. Кроме того большой проблемой являются избыточные стили и скрипты, которых нужно избегать и делать отдельную сборку стилей и js для каждого типа страниц.
🐌 12.
"Чрезмерные пробелы, встроенные стили, пустые строки и лишние комментарии могут привести к увеличению размера таблицы стилей веб-сайта.
Удалив все эти элементы, вы сократите код, уменьшите размер файла и, как следствие, — время загрузки страницы."
Главное не размер, а как раз качество. Пробелы и комментарии — не признак некачественного кода.
🐌 13.
"Если вы далеки от написания кода или не хотите в него лезть, есть несколько инструментов, которые можно использовать для очистки и уменьшения файлов таблиц стилей. Кроме того, можно воспользоваться услугами профессиональных веб-студий."
Когда кто-то рекомендует обратиться к проф. веб-студии, то у меня сразу такой сценарий. Человек ищет рейтинг веб-студий. Выбирает из ТОП-10 которые ему понравятся и отдает им свои деньги.
Чистить код сервисами? Но зачем? Все системы сборки умеют это делать. Давайте продвигать эти инструменты. Их использование уменьшит объем лишних стилей, но например обфускация js в некоторых случаях может наоборот увеличить время выполнения.
🐌 15.
"Отсутствие GZIP-сжатия"
✅ У нас на сайте нет gzip сжатия, но есть Brotli. Это значит, что выключив Brotli и включив GZIP мы уменьшим степень сжатия?
Нет!
Используйте современные методы сжатия, это умеет уже и nginx в фоне. Степень сжатия также нужно проверять экспериментально, потому что разжатие отнимает время, и чем больше степень сжатия, тем больше ресурсов тратит браузер на распаковку.
"Если вы еще не активировали GZIP-сжатие на своем сайте, это первое, что вам следует сделать."
✅ Сейчас все хостинги имеют по умолчанию сжатие gzip, этот совет неактуален. Мы уже очень давно не видели сайты без сжатия. Другое дело, что нужно выбирать современные алгоритмы сжатия и ставить обратный вызов на gzip если нет поддержки бротли.
🐌 16.
"Рекламные объявления — это лишние HTTP-запросы, которые замедляют загрузку страницы. Используйте их только там, где они точно сработают и «окупят» свой вес."
✅ Как делаем мы: рекламу можно отложить до момента, как она появится на сайте, или до события пользователя. Кроме того, для отложенной рекламы максимально рекомендуем резервировать место на странице.
Комментарий удален модератором