Скорость загрузки сайта: проверка и оптимизация

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

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

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

PageSpeed Insights

Самое время спросить: что это за такие зеленые и красные зоны?

Вбиваем в поиске "page speed" или "пейджспид" и переходим в онлайн инструмент, который называется "PageSpeed Insights". Вбиваем там урл страницы вашего сайта и через некоторое время получаем результат.

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

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

Также сразу можно оценить еще один важный момент - карту эффективности. То есть момент начала загрузки контента страницы. Что тоже очень важно, так как до начала загрузки контента пользователи видят пустой экран, и если загрузка начинается к примеру с 5 или 7 секунды, то люди могут не дождаться и уйти.

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

Lighthouse

В Google Chrome есть похожий на PageSpeed Insights инструмент, который назвается Lighthouse. Открываем страницу в Chrome, нажимаем правую кнопку мыши на пустом месте и выбираем "Посмотреть код" (или можно использовать сочетание клавиш Ctrl+Shift+C) и ищем в панели Lighthouse.

Core Web Vitals

В Google Search Console есть инструмент Core Web Vitals, который оценивает эффективность страниц с точкизрения загрузки, отмеченных той же цветовой схемой: зеленые - эффективные страницы, желтые - страницы, где нужно увеличить скорость загрузки, красные - неэффективные страницы.

Яндекс Метрика

Где еще можно посмотреть? Можно использовать Яндекс Метрику: Отчеты -> Мониторинг -> Время загрузки страниц.

Оптимизация скорости загрузки

Почему, даже если разработчики сайта знают об этих инструментах, они не могут сделать так, чтобы загрузка сайта всегда была быстрой?

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

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

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

Быстрые сайты

Кто-то может спросить: бывают ли вообще быстрые сайты, которые имеют скорость загрузки 100 из 100?

Да, такие сайты есть. Например данный сайт представляет собой легкий html-шаблон, который быстро грузится - 98 из 100 по PageSpeed. Правда и функциональности у этого сайта ограниченные (хотя в данном случае дополнительная функциональность и не требуется). 

Проверь свои знания в SEO: