Пообещать то конкретику в прошлом материале пообещал (для тех кто его еще не читал отмечу, что там указал, как именно пользоваться сервисом Lighthouse или PageSpeed Insights), но, как оказалось, сам пример с максимально возможным наличием разнообразных «недочетов» достаточно непросто подобрать. Но получилось. Встречайте!
Смотреть вместе с Google будем оценку скорости загрузки на условный смартфон в сети 3g, но сначала немного о самом сайте.
CMS: WordPress, версия 5.4.9 (устаревшая, в настоящее время актуальна версия WordPress 5.9, т.е. пропущено 28 обновлений).
Тема: Jannah, коммерческая, но не дорогая.
Явных указаний на дочернюю тему – не обнаружил, наличествовать может, признаки есть, но косвенные.
Страница, на примере которой посмотрим результаты скорости загрузки, Тамбов накроют сети: вице-президент «Ростелекома» обсудил с главой региона вопросы цифровизации региона, публикация без видео.
Результат, как видим, плохой. Чтобы соотнести оценку с вашим личным восприятием скорости загрузки просто перейдите по ссылке в браузере смартфона (wi-fi на нем отключить не забудьте, а если еще и кеш браузера перед тем как почистите, ощущения будут наиболее полными).
Редакцию, возможно, такая скорость загрузки web-версии сайта и устраивает. Но для сервисов Яндекса turbo-страницы все же использует, правда, AMP-страницы Google – не обнаружил.
Посмотрим повнимательнее, на какие проблемы указывает и что предлагает сервис Google.
Раздел Возможности
Сократите неиспользуемый JavaScript
Возможна экономия времени загрузки по оценке Google может составить почти 11 секунд.
Первая реакция – это что же за разработчик, что столько всего не нужного напихал?! Сократить немедленно!!!
Иной раз такое (напхал) действительно случается. Исполнитель ставит на сайт заранее разработанные блоки, функционал которых намного больше, чем нужно тому или иному заказчику. И если в договоре об изготовлении сайта речь именно о таком – вопрос не к исполнителю, а к заказчику.
Посмотрим повнимательнее, что именно сможет сократить разработчик на рассматриваемом сайте, если такое указание ему поступит (за дополнительные деньги или как исправление ранее допущенных «косяков» – не принципиально).
В данном случае, увы, не многое.
Из почти 30-ти позиций к домену сайта имеет отношение только одна.
Заранее предсказать, а смог бы разработчик сайта сократить именно этот код — без дополнительной информации невозможно, т.к. явно использован «чужой» шаблон темы.
Все остальное – влияние внешнего кода, сократить который возможно только удалением, т.е. либо использовать или нет:
14-ть позиций JavaScript связаны с доменом vk.com – цена за комментарии VK (при том, что у WordPress есть собственная система размещения и отображения комментариев) и виджет сообщества в соцсети, установлены скорее всего по инициативе редакции (типичный пример «любой каприз за ваши деньги»);
6 позиций – сервис push-уведомлений, который установлен скорее всего по инициативе редакции;
2 позиции — связаны с РСЯ, отображение на сайте есть, (к слову, код вызова – устаревший, новый влияет на скорость загрузки меньше), позиций от РСЯ при другой загрузке может быть и больше, в зависимости от настроек форматов рекламного блока;
1 позиция – устаревшая версия загрузчика ADFOX (новый влияет на скорость загрузки меньше, т.к. асинхронный), но реклама с его помощью на странице не отображается, скорее всего забыли удалить;
1 позиция – связана (очень похоже) с контекстно-медийной рекламой Google, но следов последней на странице не обнаружено, тоже скорее всего забыли удалить;
1 позиция – связана с плеером видео https://videojs.com/, причем на рассматриваемой странице нет загрузки видео, а на других страницах с близкими датами загрузка видео происходит через youtube, если же загружаемый плеер все же необходим, например, на старых публикациях, загружать его следует только на тех страницах, где без него не обойтись, а не на всех;
1 позиция – связана с плеером видео https://www.youtube.com/, на рассматриваемой странице нет загрузки видео, «лечится» аналогично, загрузкой только на тех страницах, на которых происходит отображение видео, а не на всех;
1 позиция – связана с виджетом агрегатора новостей «В РФ», установлен скорее всего по инициативе редакции;
1 позиция — связана с Яндекс.Метрика, пожалуй, самая «тяжелая» из наиболее популярных сервисов статистики, хотя и в некоторых случаях более удобная.
Кстати, на сайте есть коды вызова рекламы РСЯ, т.е. у сайта есть еще один счетчик Яндекс.Метрики, с более оптимизированным кодом, кстати. Правда, этот счетчик не учитывает посетителей с блокировщиком рекламы. Для кого-то потеря информации о примерно 5-ти процентах аудитории может быть критичной, для других – нет. Ведь и на рассматриваемом сайте есть и другие счетчики статистики по посетителям.
На мой взгляд, почти от всего внешнего можно избавиться безболезненно, но у редакции, может быть и иное мнение.
Отложите закадровые изображения
Возможна экономия времени загрузки по оценке Google может составить почти 9 секунд.
Напомню, что означает «отложенная загрузка» — загружать при открытии страницы не все элементы сразу, а только те, что будут в видимой части экрана, остальное – по мере надобности. Будет посетитель скролить – загрузка произойдет, не будет – и загрузки не будет. Причем, актуально не только для изображений.
Вариантов реализации такого на WordPress было и есть множество. А на рассматриваемом сайте «лечится» более чем просто, всего лишь обновлением версии CMS до актуальной, сейчас не вспомню точно, но «отложенная загрузка» именно изображений уже достаточно давно реализована прямо в ядре этой популярной и бесплатной системы управления контентом сайта.
Единственно, отложить загрузку изображений в виджете агрегатора новостей «В РФ» так просто не получится.
Сокращение неиспользуемого CSS
Возможна экономия времени загрузки по оценке Google может составить почти 6,5 секунд.
Что это такое CSS и откуда берется неиспользуемый?
Файлы CSS, упрощенно, содержат правила, согласно которым браузер отображает различные элементы страницы сайта.
Если на сайте не используют все элементы, правила отображения которых указаны в CSS, образуется неиспользуемый или избыточный код, без которого можно обойтись.
Вариант, когда на странице сайта нет ни одного элемента из подгружаемого файла CSS, тоже возможен. Кто бы и что о программистах не думал, но и они люди.
На рассматриваемом сайте из 12 позиций, по которым Google рекомендует код сократить, непосредственно к изучаемой странице относятся только 2:
Первый – связан с шаблоном темы,
причем, ссылка на файл не минимизированный (style.css, а не style.min.css – это и есть косвенный признак наличия дочерней темы),
самый простой вариант «лечения» — обновить не только ядро WordPress, но и тему, возможно, в новую версию изготовители внесли корректировки, плюс подкорректировать дочернюю, если такая все же есть,
а если не поможет – либо поменять на более подходящую, либо заказать изготовление оригинальной (последний вариант самый затратный, дополнительно потребует и постоянную поддержку, т.к. смена версий WordPress происходит часто, как следствие, высокая степень вероятности необходимости внесения изменений);
Второй – с плагином Button visually impaired (изменяет обычную версию сайта на версию для слабовидящих людей),
плагин на сайт не только установлен, но и активен (в противном случае не было бы и загрузки), а кнопки на странице сайта, при нажатии на которую изменялся бы внешний вид, не обнаружил;
вариантов «лечения» два: либо кнопку изменения версий сайта отображать, либо деактивировать и удалить плагин, если он все же не нужен.
Еще одна позиция, по которой Google рекомендует сократить код, связана с тем самым плеером видео, который не используется не только на рассматриваемой странице, но и на тех недавних, где видео есть. «Лечится», напомню, удалением, либо его загрузкой только на тех страницах, на которых происходит отображение видео, причем, не просто отображение, а отображение с помощью именно этого плеера.
От 7-ми позиций, связаных с доменом vk.com (ранее упомянутые комментарии VK и виджет сообщества в соцсети), избавиться, повторю, по моему мнению, можно безболезненно. Для посетителей точно хуже не будет.
А по еще одной – лишний код блока кнопок «поделиться» Яндекса, от него можно не просто избавиться, а поменять на другой, с аналогичным функционалом, но на более «легкий», например, на AddToAny Share.
Подавать изображения в форматах следующего поколения
Возможна экономия времени загрузки по оценке Google может составить почти 5,5 секунд.
Как считает Google,
форматы изображений, такие как WebP и AVIF, часто обеспечивают лучшее сжатие, чем PNG или JPEG, что означает более быструю загрузку и меньшее потребление данных.
Можно с Goggle спорить, тем более, что указано «часто обеспечивают», а не «всегда обеспечивают».
Но можно поставить на сайт конвертер изображений. Варианты есть.
А если так будет проще, никто не запрещает изображения сразу загружать в формате WebP, WordPress с версии 5.8 такое уже позволяет.
И снова исключение, на изображения с внешних сервисов, в частности, в виджете агрегатора новостей «В РФ» и в рекламных объявлениях РСЯ, повлиять не получится.
Эффективное кодирование изображений
Возможна экономия времени загрузки по оценке Google может составить около 3-х секунд.
Это про оптимизацию изображений.
На каком этапе ее делать, в редакции или на сайте, вопрос второй, но начинать делать нужно было не вчера, а много лет назад.
Сложно в 2022 году признать нормальным, что миниатюра изображения размером 220 на 150 пикселей на сайте «весит» более 50-ти килобайт.
Для сравнения, на этом моем сайте изображение размером 1280 на 720 пикселей, зачастую, весит не на много больше и точно не в 5-6 раз.
Правда, на оптимизацию изображений с внешних сервисов, в частности, в виджете агрегатора новостей «В РФ» и в рекламных объявлениях РСЯ, повлиять тоже не получится.
Используйте видеоформаты для анимированного контента
Возможна экономия времени загрузки по оценке Google может составить около 1 секунды.
Причина этой рекомендации – единственная, промо баннер с переходом в сообщество VK, но «весит» этот баннер (размером всего то 336 на 280 пикселей) целых 360,4 килобайт. А все потому что GIF. Да, динамический. Но очень «тяжелый». Потому что динамический GIF другим быть не может. Потому и согласен с мнением Google: такому на страницах сайта не место.
А действительно ли его нужно менять на видео? – вопрос. На мой взгляд и статичного изображения было бы достаточно. Не забываем, в формате WebP или AVIF. В крайнем случае, если какая-то динамика все же нужна, можно обойтись и HTML-баннером.
Изображения правильного размера
Возможна экономия времени загрузки по оценке Google может составить 0,75 секунды.
Указано, что в одно из мест размером 390 на 220 пикселей подано изображение размером 1024 на 576 пикселей. Быстро это место в коде страницы не обнаружил. Но само исправление – не сложное.
Устраните ресурсы, блокирующие рендеринг
Возможна экономия времени загрузки по оценке Google может составить 0,59 секунды.
Суммарная задержка уже не великая, причем, из указанных 8-ми ссылок – две на файлы того самого плеера видео, который не только не используется на рассматриваемой странице, но и на последних публикациях с видео.
Одна – относится к ядру, без него никак. Даже после обновления версии WordPress.
Одна – относится к теме, с ним варианты могут быть. Как минимум, загрузка минимизированной, а не обычной версии.
Четыре – относятся к разным плагинам, очень похоже, что ни один из них на рассматриваемой странице не используется.
Уменьшите CSS
Возможна экономия времени загрузки по оценке Google может составить 0,3 секунды.
И это про оптимизацию, но не изображений, а файлов CSS. Указан один, но тем не менее, лишние пробелы, абзацы, комментарии смысловой нагрузки для браузера не несут.
На WordPress «лечится», не просто, а очень просто.
Избегайте использования устаревшего JavaScript в современных браузерах
Возможна экономия времени загрузки по оценке Google может составить 0,3 секунды.
«Пролечится» автоматом после обновления версий WordPress и темы.
Раздел Диагностика
На этом этапе подробно рассматривать «замечания» практически по всем направлениям, пожалуй, бессмысленно с практической точки зрения, т.к. после «излечения» на основе рекомендаций первого раздела содержание и второго изменится кардинально.
Единственно, на что можно обратить внимание сразу – длительность кеширования «тяжелых» файлов сайта в браузере. Google предпочитает не менее года.
Тем, кто не в курсе, что такое кеширование в браузере и в чем его смысл, поясню.
Когда браузер открывает страницу сайта, то скачивает и большое число различных, в том числе и «тяжелых» файлов (видео, аудио, изображения, файлы CSS, скрипты). Что-то из скачиваемого относится только к открываемой странице, а что-то — и ко всему сайту. Нужно ли «гонять трафик» и каждый раз закачивать одно и тоже заново постоянным посетителям? Особенно на мобильном интернете? Ответ как бы очевиден: если можно скачать один раз и сохранить до следующего, то открытие страницы произойдет быстрее, как раз на время закачки.
И тут возникает следующий вопрос: а сколько хранить, т.е. какое время скачанное не потеряет актуальность?
Такой ответ (команду) дает браузеру сайт. Напомню, Google при оценке скорости загрузки считает такой период нормальным, если год и более.
С одной стороны, а кому будет интересна та или иная публикация, вернее, привязанные к ней, например, изображения? Вопрос, резонный, но тем не менее, если следовать рекомендации Google, то такая страница и через 360 дней откроется практически моментально. Особенно, если там будет не только изображение, но и намного более тяжелый фал видео.
С другой, ту самую команду на время актуальности не обязательно делать одной для всего. Можно разделять по видам контента. Например, для видео, аудио, изображений — год, а для файлов CSS и скриптов — месяц, неделя, день (такое может быть актуальным, если идет период донастройки сайта, а разработчику лень менять версии файлов CSS и скриптов).
Можно возразить, что такое браузерное кеширование стало повсеместным, посетители постоянно кеш у браузеров сбрасывают, т.к. память на смартфонах не резиновая, а в этом случае — все равно закачивают заново. Логично!
Возразить можно. А можно сделать так, как нравится Google. Вы многое потеряете, если Google, в связи с этим, ваш сайт понравится чуть больше? На мой взгляд, ответ очевиден. Но у вас может быть и иное мнение.
Подведем итог
Единственный сложно определяемый момент – обновление версии WordPress. За несколько лет (да, между версиями WordPress на сайте и актуальной прошло несколько лет) изменились не только цифры (5.4.9 и 5.9), но версии базы данных и PHP. А после, как следствие, необходимо будет обновить до актуального состояния и тему, и все установленные активные плагины (разумеется, после проверки обоснованности их активности).
Как говорят в подобных случаях:
только вскрытие покажет!
А в остальном – 4-6 часов работы программиста по точно сформулированному техзаданию. Правда, задание тоже нужно сформулировать. И все же, разве кто будет утверждать, что это большая «кровь»?
Разумеется, время оптимизации и конвертации всех изображений сайта программными средствами не включено.
P.S. Повторю, в этой публикации размышления не о всем рассматриваемом сайте, а о конкретной странице (типе публикации). Какие-то из приведенных моментов окажут положительное влияние на весь сайт, но в иных местах могут быть и другие нюансы, которые тоже потребуют вмешательства и дополнительных действий.
Кстати, можете самостоятельно проверить скорость загрузки этой страницы и убедиться, что почти 100 процентов негативного влияния – от всего, что связано с РСЯ. На главной странице, где, как раз для сравнения, блоков рекламы нет, результат будет намного выше.