13.12.2020      332      0
 

Скорость загрузки сайта решение разных проблем


Скорость загрузки сайта у меня постоянно низкая, хотя веду его уже 7 лет. Раньше этот показатель  был лучше. Но Гугл сделал требования к скорости загрузки жестче. Так как от этого показателя очень сильно зависит посещаемость блога, мне хотелось бы его улучшить. Потому следую советам Гугла. скорость загрузки сайта

Скорость загрузки сайта – google page speed

Гугл сообщает, что оптимизация поможет вам ускорить загрузку страницы. Однако  они не влияют на показатель производительности напрямую, но косвенное отношение есть. В разделе «Возможности», 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/>. Внесла в самое начало.

&lt;link rel="preload" href="styles.css" as="style"&gt;

&lt;link rel="preload" href="ui.js" as="script"&gt;

Сразу повторяю в 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 у меня пока совсем не получилось.

Но на другой день устанавливаю плагин WP Fastest Cache, сжимающий файлы CSS и JS. Работаю в его бесплатной версии. Подробности о плагине, тоже напишу в отдельной статье

Уменьшите влияние стороннего кода

На данном этапе могу исправлять постепенно еще одну вещь. Это параметр DOM, его нужно искать в кодах. DOM означает интерфейс всего сайта, и отдельных файлов. Интерфейс тоже может быть перегружен сторонними файлами CSS. Например, если мы делаем перечисления, с установкой интервалов или цифр. Тогда в HTML текста появятся селекторы  “ul и li”. Например, я этими значками в тексте часто пользуюсь.

По этой же причине перегрузку параметра DOM  часто дает  употребление селектора «div». Например, мы в тексте выделяем кавычками важные цитаты, тогда получаем код: <div class = “wrap”>. Помните, не так давно, блогеры пользовались плагином , для красивого выделения важных мыслей. Но оказывается, что все эти красивости снижают скорость загрузки сайта.

Еще удаляю из подвала сайта Яндекс метрику, но это временно. Метрика тоже значительно тормозит скорость загрузки и является сторонним кодом. Пока для учета посетителей мне достаточно счетчика “LiveInternet”. У меня на сайте и так мало посетителей. Но когда сделала эти мероприятия, хотя далеко не все, посетителей стал в 2 раза больше.

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

Осталось еще много вариантов для улучшений. Буду продолжать.


Ваш комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *