Оптимизация скорости загрузки страниц сайта под требования PageSpeed Insights — следующая тема, которую я хочу затронуть в серии из нескольких статей.
Возможно, даже отдельная рубрика.
Уже в марте 2021 года Google ужесточит свои требования к оптимизации страниц сайтов, скорости их загрузки, и именно, на мобильных устройствах.
В своем сервисе Google Search Console, вкладка Удобство для мобильных, стала давно его неотъемлемой частью.
Пока все советы PageSpeed Insights носят рекомендательный характер, но с марта месяца все показатели напрямую будут влиять на ранжирование сайтов в поисковой выдаче.
Все большее количество людей пользуются различными гаджетами. Последние пару лет тема ускорения загрузки сайта становиться в тренде. Она стала актуальной не только для крупных компаний, но и простых пользователей, ведущих свой блог.
Хотя, еще очень многие не придают этому большого значения. Повторяется история с SSL-сертификатами — пока гром не грянет.
Ждут до последнего часа.
Всем нам приходиться заниматься SEO-оптимизацией своих сайтов под поисковые запросы Yandex и Google, для получения органического трафика из этих систем.
Когда закрываете вопрос трафика — его настройки, встает вопрос о конверсии. Пожалуй, самая первая и главная задача любого интернет-бизнеса. Многие рассчитывают только на рекламу — получение больше подписчиков, заявок, лидов.
А вот здесь и появляется второй, но не маловажный аспект — это те же Поведенческие факторы посетителей сайта, которые ой как учитывают поисковые системы.
Если сайт медленный, все тормозит, интерфейсы тупят — на тепловых картах видно как посетитель пару раз кликнет, подождет, на третий раз психанет и закроет сайт.
Медленная загрузка страниц напрямую связана с конверсией сайтов, тех же подписных и продающих страниц — Landing Page.
PageSpeed это продукт Lighthouse, который использует Google на своем сервисе PageSpeed Insights для замера скорости загрузки, именно, отдельных страниц (по URL-адресу, веденному в строку анализа), а не всего сайта, как некоторые, по незнанию, думают.
И не только это, но и производительность, доступность для людей с ограниченными возможностями, оптимизация сайта под SEO. И дает рекомендации — как и что можно улучшить на сайте.
Google обновил Lighthouse с версии 5.5 на 6.3. Очень скоро предстоит обновление и до 7 версии. Она уже есть в наличии.
После этого было много нареканий, что упала скорость загрузки сайта. В действительности, скорость не упала, а изменились критерии оценки.
До сих пор многие не понимают, что происходит эмуляция (имитация) на 25% выше Мобильной сети 3G, и на 25% ниже чем 4G.
Эмуляция устройства — замедление процессора устройства — Троттлинг.
Естественно, на это влияет и сам сайт — его отзывчивость и время отклика сервера, на котором расположен сайт и т.д.
Три основных составляющих:
Время отклика сервера, в реальном времени, без регистрации, можно отслеживать по ссылке:
https://ttfb.site/ru/
только вводите ссылку на свой сайт, ping обновляется постоянно.
На ранжирование сайтов влияет и отчет об удобстве пользования сайтом в браузере Google Chrome. Но эти данные обновляются только раз в месяц.
Если у Вас мощный компьютер и скоростной Интернет — 1000 Мб/с, и на нем Ваш сайт открывается быстро — это не значит, что он будет так же быстро работать на медленных устройствах.
Но если страницы сайта мгновенно открываются на медленных устройствах, значит Ваш сайт действительно Быстрый. Поэтому Lighthouse и использует Троттлинг.
Учитывая то, что пользователи используют различные устройства (ПК, ноутбуки, планшеты, смартфоны) и в сетях с разной скоростью подключения, а PageSpeed Insights с определенным набором условий, поэтому и данные могут разниться.
Более подробно можно прочитать на сервисе PageSpeed Insights в меню DOCS.
Сервис PageSpeed Insights, при помощи технологии Lighthouse, использует 6 параметров для анализа скорости загрузки страницы сайта в браузере:
Показатель времени между ответом сервера и появлением первого контента — изображения или текстового блока. Ответ самого сервера не входит в этот показатель. До FCP посетитель будет видеть белый экран. Измеряется в секундах.
До двух секунд — зеленая зона. От 2 до 4 секунд — желтая. Больше четырех — красная зона.
Время, через которое страница полностью готова к взаимодействию с пользователем. До этого времени работа со страницей̆ может вызывать затруднение (притормаживание скролла, не работают кнопки). Измеряется в секундах.
До 3.8 сек. — зеленая зона. От 3.9 до 7.3 сек. — желтая. Больше 7.4 сек. — красная зона показателя.
Показывает насколько быстро загружается содержимое первого экрана страницы сайта при отрисовке в браузере (имеется ввиду то что видно на 1-ом экране монитора ПК или мобильного
устройства). Измеряется в секундах.
До 4.3 сек. — зеленая зона. От 4.4 до 5.8 сек. — желтая. Больше 5.9 сек. — красная зона показателя.
Суммарное время всех задач от FCP до TTI, которые выполнялись дольше 50 м/с. Это параметр показывает общую загрузку основного потока. Сюда входит и применение стилей̆, и отрисовка, и выполнение Java-скриптов. Измеряется в м/секундах.
До 300 м/с. — зеленая зона. От 300 до 600 м/с. — желтая. Больше 600 м/с. — красная зона показателя.
Время, необходимое для отрисовки крупного контента 1-го экрана страницы. Это может быть изображение или текст. Остальной контент будет не полный. Измеряется в секундах.
До 2 сек. — зеленая зона. От 2 до 4 сек. — желтая. Больше 4 сек. — красная зона показателя.
Элементы могут смещаться из-за подгрузки изображений, шрифтов, рекламных блоков. Сверху или снизу. Чаще бывает сверху. Виновником может быть изображение, видео или шрифт с неизвестными размерами.
Этот показатель считывается в живых данных, даже после полной загрузки страницы. Измеряется в секундах.
До 0.1 — зеленая зона. От 0.1 до 0.25 сек. — желтая. Больше 0.25 — красная зона показателя.
Как улучшить показатели PageSpeed Insights на 100%, чтобы все страницы сайта загружались мгновенно?
Сразу скажу — автоматических методов нет. Это очень большой и кропотливый объем работы. Да, можно обратиться к высококлассному программисту — если средства позволяют.
Но, довести все показатели до приемлемой нормы — можно и самому, используя некоторые наработки, которыми я хочу с Вами поделиться в серии из нескольких статей и видео-уроков.
Очень большое значение имеет то, на каком движке или CMS создан сам сайт. У меня сайты на WordPress. Исходя из этого — все мои методы, используемые скрипты и отдельные плагины будут касаться именно этой CMS.
Часть работы уже сделана. Тема-шаблон, установленная на сайте — BeTheme.
Премиум-тема адаптивная, тяжелая, очень навороченная, с тремя редакторами и т. д. Отдельного плагина, типа AMP, для мобильной версии сайта не использую.
С более простыми и легкими темами для WordPress — работы, конечно, меньше. Тогда и не было бы смысла писать.
Важная информация! В своей работе, частично, я использовал советы и приобретенные скрипты на сайте LOADING.express у его создателей А.Белогородцева и А.Махметхаждиева.
Правда, хочу оговориться, что скрипты, которые они предлагают, подходят для самописных сайтов, самостоятельных Landig Page, сверстанных программистами.
Пример анализа загрузки страницы сайта мобильной версии на сервисе LOADING.express:
Не все можно применить на WordPress — некоторые скрипты необходимо изменить, часть осталась не у дел. Не все скрипты работают на виртуальных хостингах, только на выделенных серверах с определенными правами.
Отдельно Скрипты я не продаю, но их можно скачать, зарегистрировавшись в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog. Раздел платный.
Но, регистрация стоит намного дешевле самих скриптов. Решайте сами.
Вам я хочу предложить только то, что протестировал и применяю на своих сайтах.
А теперь, вкратце, что необходимо будет сделать на сайте WordPress, чтобы улучшить все 6 показателей PageSpeed Insights для быстрой загрузки его страниц.
Устранить всё, что блокирует первую отрисовку контента:
Определяем самый крупный контент на первом экране сайта.
Вот, в принципе, и все основные задачи, которые необходимо выполнить на сайте, чтобы оптимизировать скорость загрузки страниц под требования PageSpeed Insights.
Видео-версия, урок из учебного раздела Centr-Sit-Info Уровень Profi-bizblog:
В следующих статьях, с дополнительными видео-уроками, разберем конкретно каждый из методов увеличения производительности сайта. Применяя, по возможности, все рекомендации тестирования PageSpeed Insights.
Учитывая прошлый опыт, начнем работу со скриптами от внешних сервисов — Яндекс-метрика, Facebook, ВКонтакте, Одноклассники.
Читайте продолжение в статье — Оптимизация асинхронной загрузки кода виджетов социальных сетей.
Любой виджет из этих сервисов загружается раньше любого контента сайта, тем самым, сильно тормозит отрисовку первого экрана.
Тем, кому нужна помощь и кого заинтересовала данная тема, переходите в раздел
Centr-Sit-Info Уровень Profi-bizblog.
Нужна дополнительная информация, возникли сопутствующие вопросы? — пишите в комментариях – рад буду помочь.
Подписывайтесь на обновления Sit-Info, чтобы вовремя знать о выходе нового поста с необходимой информацией.
Не забываете нажать на кнопку Поделиться в социальных сетях.