Проводя аудит посредством инструмента Google PageSpeed Insights, на основании которого поисковая система определяет показатели работоспособности сайта и как следствие его ранжирование, можно выявить целый ряд ошибок. Недоработки непосредственно влияют на скорость загрузки страницы и их необходимо устранить. Собственно, данный сервис является одним из основных при работе нашей команды специалистов. Шаг за шагом исправляя аудиты, мы достигаем 100% оценки Google на сайтах, над которыми работаем. Таким образом, их конверсия увеличивается в разы, ведь поисковая система не видит с ними проблем, соответственно и ставит на высокие позиции при ранжировании.
Важно! При анализе подсказок PageSpeed Insights и попытке их исправления нельзя просто следовать всем рекомендациям системы. Это может даже навредить сайту. Необходимо разработать чёткий алгоритм в каждом конкретном случае.
Одной из рекомендаций, которую можно увидеть в результате диагностики сайта, является : предотвратите чрезмерную нагрузку на сеть. При этом, сервис показывает общий размер в килобайтах.
Чем чревата чрезмерная нагрузка на сеть
В качестве пояснения аудита, PageSpeed Insights предупреждает, что это может стать причиной длительной загрузки, которая побудит пользователя к тому, чтобы покинуть сайт. Более того, использование подобной страницы для юзера становится финансово не выгодным. Особенно в случае, когда он использует мобильные устройства с лимитированным интернетом. Ведь чем страница больше, тем больше ресурсов она потребляет для полноценного взаимодействия.
В качестве рекомендаций сервис предлагает использовать фрагментарный показ записей с применением тега More, уменьшить число записей, которые отображаются на одной странице или разбивать длинные материалы на несколько страниц. Одним из эффективных решений станет и отложенная загрузка комментариев. Но, это далеко не все инструменты, которые можно и необходимо использовать при проведении оптимизации, чтобы не допустить чрезмерной нагрузки на сеть.
Что приводит к возникновению чрезмерной нагрузки на сеть
Если вы увидели рекомендацию: «Предотвратите чрезмерную нагрузку на сеть», с высокой вероятностью придётся заниматься всесторонней оптимизацией сайта. Данную ошибку вызывают не минифицорованные скрипты, тексты, стили, визуальный контент. Здесь же отображается и количество виджетов, которые подключены на сайте. Среди них счётчики, в том числе и лишние, карты, онлайн-консультанты. Поэтому, работы предстоит много и лучше поручить её профессионалу.
Нажмите View Details, чтобы увидеть запросы вашей страницы. Самые большие запросы в нём будут отображены в первую очередь. Уменьшите размер запросов, чтобы уменьшить общий размер полезной нагрузки. Предоставленная вам информация будет выглядеть приблизительно таким образом:
| URL | Размер КБ |
| /pagespeed/ | 133 KB |
| …1/6a16791….js | 85 KB |
| …fonts/fontawesome-webfont.woff2 | 76 KB |
| …fonts/woodmart-font.woff | 12 KB |
Для начала необходимо исправить те недочёты, на которые сервис указал непосредственно. А затем, тщательно проверить весь имеющийся контент на предмет его соответствия требованиям.
Как исправить проблему
Для уменьшения чрезмерной нагрузки требуется разработка стратегии. Как правило, она включает несколько обязательных пунктов. Вот некоторые из них:
1. Использование отложенных запросов до момента, пока они не понадобятся пользователю. Это осуществляется с применением стратегии PRPL-шаблона
2. Кэшируйте запросы, чтобы страница не перезагружала ресурсы при повторных посещениях
3. Оптимизируйте все имеющиеся запросы, чтобы они весили как можно меньше. Возможные методы включают в себя:
● Сжатие текста
● Сокращение HTML, JS, CSS и других кодов и сценариев
● Оптимизация изображений. К примеру, эффективным решением является уровень сжатия изображений до значения 85
● Использование современных форматов изображений, к примеру WebP вместо JPEG или GIF
● Использование видео форматов вместо анимированных картинок
Маяк PageSpeed Insights суммирует общий размер в байтах всех ресурсов, которые запрашивала страница. В качестве базовой, сервис применяет целевую оценку 1600 КБ, с учётом того, что она может загружаться посредством 3G-соединения и пользователь должен получить данные максимально быстро даже в этих условиях.
Как предотвратить чрезмерную нагрузку на сеть при использовании файлов Youtube
Если на своём сайте вы используете файлы youtube, с большой долей вероятности аудит Google будет на вас за это ругаться. Это происходит в тех случаях, когда на страницу вставлены непосредственно фреймы с видео. Данная ситуация требует, чтобы в процессе загрузки страницы, были подтянуты все скрипты и стили сервиса. При этом, не имеет значения, собирается пользователь просматривать данное видео, или оно ему не нужно вовсе.
Чтобы изменить ситуацию, необходимо вместо фрейма установить соответствующий код. Выглядеть он будет приблизительно следующим образом:
1.<img class=»videothumb» src=»урл-изображения» alt=»» />
2. <script>
3. jQuery(«.videothumb»).click( function() {
4. var source = jQuery(this).attr(«data-src»);
5. jQuery(this).replaceWith(‘<div class=»widescreen flex-video»><iframe width=»100%» height=»315″ src=»‘+source+'» frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe></div>’); }); </script> 1 2 3 4 5 6 7 8 <img class=»videothumb» src=»урл-изображения» alt=»» /> <script> jQuery(«.videothumb»).click( function() { var source = jQuery(this).attr(«data-src»); jQuery(this).replaceWith(‘<div class=»widescreen flex-video»><iframe width=»100%» height=»315″ src=»‘+source+'» frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe></div>’);
6. });
7. </script>
Таким образом, в футер перед «,» необходимо поставить подобный скрипт:
1.<script defer>
2. function init()
3. { var vidDefer = document.getElementsByTagName(‘iframe’);
4. for (var i=0; i<vidDefer.length; i++) {
5. if(vidDefer[i].getAttribute(‘data-src’))
6. { vidDefer[i].setAttribute(‘src’,vidDefer[i].getAttribute(‘data-src’));
7. }
8. }
9. }
10. window.onload = init;
11. </script>
После проведения всех необходимых манипуляций, пользователь получит видео по запросу. Это значит, что загрузка контента начнётся исключительно после того, как данный процесс будет инициирован. Следовательно, основная страница загрузится гораздо быстрее.
