Оптимизация скорости загрузки сайта

Приветствую дорогие читатели. В этой статье хочу немного рассказать о Google Page Speed, а именно, о скорости загрузки сайта и почему это важно.

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

Для чего я это делаю?

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

Во-вторых, некоторые мероприятия можно выполнить сразу, например такие как:

  1. Оптимизация изображений, конвертирование изображений в формат WebP, об этом расскажу далее.
  2. Отложенная загрузка изображений
  3. Установка атрибутов изображений: width, height, alt
  4. Правка JS скриптов которые используют метод: document.write() – динамическое внедрение скриптов и стилей

Можно расписывать множество вариантов, выделил некоторые из них.

Приемы оптимизации, которыми пользуюсь я

Оптимизация изображений

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

Конвертация формата изображений в Webp – у многих CMS есть как встроенные решения, так и отдельные модули/плагины:

  1. Modx Revo –PhpThumbOn, достаточно указать параметр в сниппете для вывода нужно формата изображений «f=webp»
  2. OpenCart - WebPwithGDOC3, модификатор который выводит нужный формат изображений
  3. WordPress – WebPExpress, плагин для вывода изображений в формате WebP

Минификация/сжатие JS и CSS файлов

Здесь все просто, по окончанию разработки сайта можно как вручную сжать эти файлы используя онлайн сервисы, так и скачать дополнительные плагины/модули под каждую CMS.

Скрытие скриптов виджетов и аналитик

По показаниям Google Page Speed, скрипты: JivoSite или других callback/чат виджетов, Яндекс метрика, Google Analytics нагружают сайт не меньше изображений, есть решение на PHP:

if(!stripos($_SERVER["HTTP_USER_AGENT" ], "Google Page Speed Insights") || !stripos($_SERVER["HTTP_USER_AGENT"], "PingdomPageSpeed") || !stripos($_SERVER["HTTP_USER_AGENT"], "Chrome-Lighthouse")){ // Скрипты виджетов }

Скрытие этих виджетов и аналитик никак не влияет на SEO и скорость загрузки сайта, НО, при анализе сайта на скорость загрузки они не учитываются, что дает плюс к показателям.

Сжатие и кеширование

По правде говоря, сколько бы я не использовал методы сжатия и кеширования – они не всегда работали, потому как это зависит еще от настроек сервера, к которым доступа у обычного пользователя нет, и даже если написать в тех. Поддержку они не всегда могут с этим помочь.  Не стану расписывать методы так как для каждого сервера и CMS они индивидуальны.

Отложенная загрузка изображений LazyLoad

Есть множество JS библиотек для отложенной загрузки изображений, но, я пользуюсь небольшим скриптом:

setTimeout(function() { [].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); img.classList.add("lazy"); }; }); }, 3000);

Данный скрипт по таймеру в 3 секунды (вы можете выставить больше или меньше) загружает изображения, важно то, что сами изображения нужно выводить немного иначе:

< img src="site/path/pixel.webp" alt="" data-src="(ссылка на изображение)" >

Как вы заметили в атрибут SRC я добавил первоначальное изображение pixel.webp

Во-первых, сам этот пиксель должен быть на сайте, весит он не много.

Во-вторых, изображения без основного атрибута SRC считается не валидным если проверить сайт через валидатор верстки W3C

Отложенная загрузка Web шрифтов

Если на сайте вы используете подключаемые шрифты, то тут достаточно указать атрибут: font-display: swap;

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

Зависимость количества отказов от скорости загрузки

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

Оптимизация скорости загрузки на мобильных устройствах

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

SEO и скорость загрузки

Важно отметить, что Google явно указывает, что скорость загрузки страницы имеет влияние на ранжирование. Однако это лишь один аспект большего понятия, известного как взаимодействие с пользователем (UX). Google придает большое значение пользовательскому интерфейсу и продвигает решения, которые облегчают использование веб-сайтов. Неоптимизированные технологии и плохая структура сайта не соответствуют растущим потребностям пользователей. В процессе SEO важно учитывать скорость загрузки не только на основе результатов Page Speed Insights, но и опираясь на общий опыт, который веб-сайт предоставляет посетителям.

Оптимизация скорости загрузки сайта

Оптимизация скорости загрузки сайта

Приветствую дорогие читатели. В этой статье хочу немного рассказать о Google Page Speed, а именно, о скорости загрузки сайта и почему это важно.

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

Для чего я это делаю?

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

Во-вторых, некоторые мероприятия можно выполнить сразу, например такие как:

  1. Оптимизация изображений, конвертирование изображений в формат WebP, об этом расскажу далее.
  2. Отложенная загрузка изображений
  3. Установка атрибутов изображений: width, height, alt
  4. Правка JS скриптов которые используют метод: document.write() – динамическое внедрение скриптов и стилей

Можно расписывать множество вариантов, выделил некоторые из них.

Приемы оптимизации, которыми пользуюсь я

Оптимизация изображений

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

Конвертация формата изображений в Webp – у многих CMS есть как встроенные решения, так и отдельные модули/плагины:

  1. Modx Revo –PhpThumbOn, достаточно указать параметр в сниппете для вывода нужно формата изображений «f=webp»
  2. OpenCart - WebPwithGDOC3, модификатор который выводит нужный формат изображений
  3. WordPress – WebPExpress, плагин для вывода изображений в формате WebP

Минификация/сжатие JS и CSS файлов

Здесь все просто, по окончанию разработки сайта можно как вручную сжать эти файлы используя онлайн сервисы, так и скачать дополнительные плагины/модули под каждую CMS.

Скрытие скриптов виджетов и аналитик

По показаниям Google Page Speed, скрипты: JivoSite или других callback/чат виджетов, Яндекс метрика, Google Analytics нагружают сайт не меньше изображений, есть решение на PHP:

if(!stripos($_SERVER["HTTP_USER_AGENT" ], "Google Page Speed Insights") || !stripos($_SERVER["HTTP_USER_AGENT"], "PingdomPageSpeed") || !stripos($_SERVER["HTTP_USER_AGENT"], "Chrome-Lighthouse")){ // Скрипты виджетов }

Скрытие этих виджетов и аналитик никак не влияет на SEO и скорость загрузки сайта, НО, при анализе сайта на скорость загрузки они не учитываются, что дает плюс к показателям.

Сжатие и кеширование

По правде говоря, сколько бы я не использовал методы сжатия и кеширования – они не всегда работали, потому как это зависит еще от настроек сервера, к которым доступа у обычного пользователя нет, и даже если написать в тех. Поддержку они не всегда могут с этим помочь.  Не стану расписывать методы так как для каждого сервера и CMS они индивидуальны.

Отложенная загрузка изображений LazyLoad

Есть множество JS библиотек для отложенной загрузки изображений, но, я пользуюсь небольшим скриптом:

setTimeout(function() { [].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); img.classList.add("lazy"); }; }); }, 3000);

Данный скрипт по таймеру в 3 секунды (вы можете выставить больше или меньше) загружает изображения, важно то, что сами изображения нужно выводить немного иначе:

< img src="site/path/pixel.webp" alt="" data-src="(ссылка на изображение)" >

Как вы заметили в атрибут SRC я добавил первоначальное изображение pixel.webp

Во-первых, сам этот пиксель должен быть на сайте, весит он не много.

Во-вторых, изображения без основного атрибута SRC считается не валидным если проверить сайт через валидатор верстки W3C

Отложенная загрузка Web шрифтов

Если на сайте вы используете подключаемые шрифты, то тут достаточно указать атрибут: font-display: swap;

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

Зависимость количества отказов от скорости загрузки

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

Оптимизация скорости загрузки на мобильных устройствах

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

SEO и скорость загрузки

Важно отметить, что Google явно указывает, что скорость загрузки страницы имеет влияние на ранжирование. Однако это лишь один аспект большего понятия, известного как взаимодействие с пользователем (UX). Google придает большое значение пользовательскому интерфейсу и продвигает решения, которые облегчают использование веб-сайтов. Неоптимизированные технологии и плохая структура сайта не соответствуют растущим потребностям пользователей. В процессе SEO важно учитывать скорость загрузки не только на основе результатов Page Speed Insights, но и опираясь на общий опыт, который веб-сайт предоставляет посетителям.

Понравилась статья?
Предыдущая статья
Следующая статья
Комментарии (0)