Скорость загрузки: как увидеть, что именно влияет

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

В начале, еще раз о том, для чего необходимо обращать внимание на скорость загрузки, ведь, казалось бы, для Google можно отдавать страницы AMP, для Yandex — страницы Turbo, тем более, что конвертировать их не так уж и сложно. Но есть одно «но». Из личного опыта многолетних наблюдений — эффект при прочих равных от размещению рекламы на web-версии больше.

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

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

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

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

Но прежде чем перейти к «что и как менять» несколько слов о том, «как увидеть».

Самый простой способ – сервисы Google.

Можно воспользоваться web-сервисом PageSpeed Insights.

Можно установить дополнение к браузеру Lighthouse, оно, по сравнению с PageSpeed Insights более функционально, показывает не только оценку скорости загрузки, но и другие, в том числе оценку поисковой оптимизации.

Можно воспользоваться Lighthouse, встроенным в браузеры, например, в Хром или в Яндекс.Браузер.

О последнем браузерном варианте чуть подробнее.

На интересующей странице сайта нажимаем на клавиатуре кнопку «F12». Браузер откроет панель разработчиков.

Скорость загрузки: как увидеть, что именно влияет
Lighthouse в браузере

И нам нужна вкладка «Lighthouse» (Маяк) с кнопкой «Generate report» (Сформировать отчет). Нажмем на кнопку – получим результат.

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

Единственно, кнопку «Generate report» лучше не нажимать на своем сайте, если совершен вход в «админку». Как никак последняя тоже много чего «весит», да и посетителям ваш сайт в таком виде не доступен.

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

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

Скорость сайта: что делать, если все плохо – на конкретном примере разберем «по полочкам», а в результате убедимся, что значительно улучшить действительно можно и «малой кровью».

Скорость загрузки: внутренние факторы – здесь рассмотрим влияние CMS сайта, качество работы разработчиков сайта и качества размещаемого контента.

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

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

Разумеется, рассмотрим не все, но чтобы вывести скорость загрузки из красной (до 50-ти баллов) зоны хотя бы в желтую (от 51-го до 89-ти баллов), уверен, будет достаточно.

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

И если кратко, в основном сервис обращает внимание на такие моменты:

блокировка загрузки (Страница сайта, образно, длинная простыня из много каких знаков, не только текст. Если какой элемент условно говорит: «сначала я, а то что ниже — подождет» — само по себе уже нехорошо. А насколько нехорошо — зависит от времени ожидания. Совсем без такого обойтись сложно, но и за рамки приличий выходить тоже не следует, тем более? если таких элементов много);

неоправданно большой объем загружаемых элементов (например, в части изображений важен и объем файла, и его формат, и соответствие загружаемого размера месту размещения);

кеширование (как самой страницы, так и ее элементов).

Разумеется, упрощенно. Можно еще сказать так: все что в отчете после нажатия кнопки «Generate report» (Сформировать отчет) выделено красным — очень плохо, что желтым — не хорошо, но терпимо. Правда, если даже желтого, но много — в сумме тоже может получиться очень плохо.

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

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

Скорость загрузки: как увидеть, что именно влияет
Блокнот Воронеж
Скорость загрузки: как увидеть, что именно влияет
Блокнот Тамбов
Скорость загрузки: как увидеть, что именно влияет
Тамбовский курьер

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

P.S. Бытует мнение, что «сейчас то с мобильным интернетом все хорошо, чего на коде экономить?». Во многих местах – скорее да. Но точно не во всех. Даже в городах есть «мертвые» и «полумертвых зоны». О мобильном интернете в сельской местности, на трассах (даже федеральных) и в поездах можно не напоминать – и так все понятно. Когда-то будет иначе и лучше, а пока – как есть.

Есть вопрос или комментарий? Пишите!