Скорость загрузки сайта — Гугл сделал более жесткими требования к этому параметру. Так как от этого показателя очень сильно зависит посещаемость проекта. Мне хотелось бы улучшить его показатели. Потому следую советам Гугла. Гугл сообщает, что оптимизация поможет нам ускорить загрузку страницы. Однако они не влияют на показатель производительности напрямую, но косвенное отношение есть.
Скорость загрузки сайта — google page speed
Однако в апреле 2021 все-таки я добилась улучшения скорости до 96-99%. Так что показатели мои позеленели. Произошло это в связи с установкой плагина для мобильных устройств — AMP. Например, в разделе «Возможности», Google page speed показана приблизительная экономия, как результат оптимизации — 0,75 s.
Для этого нужно сократить время до получения первого байта от сервера, для основного документа оно должно быть небольшим. В результате все прочие запросы зависят от этого показателя. Google page speed дает совет, как это улучшить. Например, такой: «Темы, плагины и спецификации сервера – все это влияет на время ответа сервера. Советуем найти более подходящую тему, тщательно подобрать плагин для оптимизации или обновить сервер».
Кстати, чтобы знать как улучшать показатели сайта. Нужно установить в браузер расширение Lighthouse. Оно покажет подробный отчет, со всеми недостатками нашего проекта и даст советы как это исправить.
Скорость загрузки сайта- обновление версии Word Press
Как раз в это время, 10.12.2020 года обновилась версия Word Press. Вследствие чего моя постоянная тема немножко повредилась. Это произошло из-за того, что программистами внесены изменения в связку версий jQuery 3.5.1 и jQuery Migrate до единой 3.3.1.
Новая версия WordPress рекомендовала блогерам использовать бесплатную тему, по умолчанию. В этой теме не было никаких красок, красивых надписей, шрифтов, рекламы и баннеров. Смотреть на нее было скучно, в ее первозданном виде. Однако при проверке расширением Lighthouse никаких недостатков не обнаружились. Все значки проверки параметров были зеленого цвета. Пустая тема просто летала, с огромной скоростью загрузки.
Но в противоположность этому, после обновления WordPress, моя старая тема утратила слайдер. Хотя все равно осталась очень красивой. Но недостатков влияющих на скорость загрузки, Lighthouse обнаружил у нее просто море.
Не останавливаюсь, а продолжаю улучшать скорость загрузки. Расширение Lighthouse сообщило в своем отчете, что нужно удалить лишние скрипты и дало адрес. Это был скрипт на мою прекрасную карусель, в самом верху сайта, как раз она сломалась. Захожу на хостинг, выбираю сайт, папку WP-content, themes, scripts custon.js. Как раз так, как было указано в сообщении программы. Удалила его совсем. Этот файл составлял всего 24 kb.
Скорость загрузки сайта -отчет расширения Lighthouse
Мой сайт оценен этой программой довольно низко, как третий уровень запросов в критической цепочке. Далее переходим к исправлению недостатков сайта.
Например, программа пишет: «Настройте предварительную загрузку ключевых запросов, для сайта «мой любимый блог». «Чтобы основные ресурсы загружались в первую очередь, используйте для них элемент <link rel=preload>». Это нужно сделать в HTML, чтобы браузер загрузил ключевые ресурсы как можно скорее.
Для этого здесь же предложен код. Слепо его копирую в блокнот notepad++ и вставляю на сайт в раздел заголовка. Между тегами: <head>коды </head/>. Внесла в самое начало.
| 1 2 3 | <link rel="preload" href="styles.css" as="style"> <link rel="preload" href="ui.js" as="script"> |
Сразу повторяю в Page Speed Insights проверку скорости загрузки сайта. Для компьютеров она немного повысилось. Было всего 45 ms, а стало 51. В результате – только и всего. Еще многие параметры необходимо улучшить.
Используйте современные форматы изображений
Это ускорит загрузку еще на 0,3s. По этому совету установила плагин для сжатия изображений — Imagify. У меня на сайтах стояли многие подобные плагины, но все они меня переставали устраивать, потому их удалила. Стала сжимать картинки онлайн и только потом загружать их на сайты. Но здесь идет речь о новом графическом формате картинок «WebP». Чтобы изображения получались более легкими, чем в старых, привычных форматах- Jpg, png, gif.
Далее включаю расширение, для повторного отчета. После установки плагина Imagify, скорость загрузки увеличилась значительно, с 17 до 37. Однако до хороших показателей еще очень далеко. Еще многое нужно исправить. Но о плагине напишу в другой статье. Производительность сайта улучшилась, как на рисунке.
Удалите неиспользуемый код CSS
Предполагаемая экономия времени загрузки – 0,16s. Чтобы сократить расход трафика, удалите ненужные правила из таблиц стилей и отложите загрузку кода CSS, который не используется в верхней части страницы.
Пробую это исправить с помощью плагина «Hummingbird» , чтобы сжать файлы Js и код CSS. У меня уже был похожий плагин, но он сломал сквозные ссылки сайта. Они перестали быть ссылками и стали просто предложениями, по ним больше стал невозможен переход.
С плагином Hummingbird тоже не повезло. После сжатия файлов, проверяю все ли в порядке, на открытом сайте. Но поиск его долго ищет, а блог совсем не открывается. Хорошо, что еще вход в консоль сохранился. Удалила его и опять вернула плагин кэширования WP Super cache. Так что сжать CSS и Js у меня пока не получилось.
Уменьшите влияние стороннего кода
На данном этапе могу исправлять постепенно еще одну вещь. Это параметр DOM, его нужно искать в кодах. DOM означает интерфейс всего сайта, и отдельных файлов. Интерфейс тоже может быть перегружен сторонними файлами CSS. Например, если мы делаем перечисления, с установкой интервалов или цифр. Тогда в HTML текста появятся селекторы «ul и li». Например, я этими значками в тексте часто пользуюсь.
По этой же причине перегрузку параметра DOM часто дает употребление селектора «div». Например, мы в тексте выделяем кавычками важные цитаты, тогда получаем код: <div class = «wrap»>. Помните, не так давно, блогеры пользовались плагином, для красивого выделения важных мыслей. Но оказывается, что все эти красивости снижают скорость загрузки сайта.
Еще удаляю из подвала сайта Яндекс метрику, но это временно. Однако метрика тоже значительно тормозит скорость загрузки и является сторонним кодом. Но пока для учета посетителей мне достаточно счетчика «LiveInternet». В результате скорость загрузки увеличилась только на 10. Было 71 %, для компьютеров, стало 81%. Однако этот показатель очень переменчив, даже в течение суток.
