Как вывести сайт в желтую, а лучше в зеленую зону по PageSpeed Insights?

Question

[Юлия Г]

У моего сайта было много проблем, на которые ругался гугл - часть удалось устранить своими силами.
Основная проблема осталась что гугл ругается на сторонние библиотеки JS (jquery, fancybox и т.д.) и сторонние скрипты - метрика, аналитика, пиксель от фейсбука.
Если делать отложенную загрузку - почему-то не помогает - грешу, что я что-то не так прописываю.

И ещё один момент - когда только взялась за сайт у PageSpeed Insights показателя CLS был показатель в красной зоне. Устранила смещение макета 9проблема была в слайдере на главном экране) - CLS горит зелёным.
Но тут один момент - какой показатель показывает правильно. Тот CLS что сверху на картинке или снизу.


Изначально и верхний и нижний показатели были в красной зоне.

Подскажите, какой показатель показывает правильно?!
И есть вообще решение с подключенными на сайте метриками, аналитиками и библиотеками чтобы вывести сайт хотя бы в жёлтую зону.

Библиотеки, сторонние скрипты и аналитика подключены в head сайта. Перенести их вниз - нет возможности. Сайт перестаёт функционировать корректно, если jquery и другие библиотеки перенести вниз.
Сайт - интернет-магазин. Отключить их тоже не могу.

Как быть в данной ситуации?

Comments

[Дмитрий]

1 теги к вопросу стоит расставить правильно - так больше шансов получить ответ
2

Подскажите, какой показатель показывает правильно?!

оба правильно. у гугла один показатель - то, что просиходит сейчас, он приходит из текущего теста
второй показатель - телеметрия пришедшая от пользователей хрома, гугл анадитики и прочего. Эти данные показывают, что и как было за последние сколько-то дней (там даже русскими буквами про это чуть выше написано).
Для этих данных вполне нормально не отражать текущие правки.
3

Может кто подскажет, как быть в данной ситуации?

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

[Юлия Г]

Дмитрий,
"оба правильно. у гугла один показатель - то, что просиходит сейчас, он приходит из текущего теста
второй показатель - телеметрия пришедшая от пользователей хрома, гугл анадитики и прочего. Эти данные показывают, что и как было за последние сколько-то дней (там даже русскими буквами про это чуть выше написано).
Для этих данных вполне нормально не отражать текущие правки." - я видела этот текст. Вроде как и поняла, что там не сразу могут отобразиться изменения, так как написано ЗА ПОСЛЕДНИЕ 28 ДНЕЙ.
Подумала, может я что-то неверно истолковала - по этому и решила спросить у более опытных специалистов.

Спасибо, что объяснили.

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

Все советы сводятся к тому, чтобы удалить всё это из сайта или отложить загрузку.

[Дмитрий]

Юлия Г, а кто сказал, что будет просто?)
>Перенести их вниз - нет возможности
тут выбирать - либо переписывать, либо оставлять как есть

[Юлия Г]

Дмитрий, на "простое решение данных проблем" я и не претендую)
Ищу решение, которое подойдет для данного сайта.

[Дмитрий]

Юлия Г,
1 переписать, чтоб jquery и прочее можно было грузить из футера
2 посмотреть, что из аналитики действиетльно нужно, оставить только нужное
3 остатки аналитики попробовать проксировать через свой домен (сразу скажу, спорное решение)

я бы ограничился 1 и2 пунктами.

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

[Юлия Г]

Дмитрий, Да тут даже не идет речи о 100 по гуглу. Хотя бы в желтую зону по мобильной версии вывести.
Просто с таким количеством библиотек в head сайт возможно ли это вообще.
js/jquery-1.11.2.min.js"
js/new.js"
js/page_template.js"
js/page_template2.js
js/korzinas_03_2018.js"
js/template_novel_2.js"
js/owl.carousel.min.js
js/page_oforml.js"
js/jquery.maskedinput.min.js
gl/jquery.fancybox.pack.js"
js/jquery.form.js"

Если все это отключить - в жёлтую зону попадаю.
Но, как и писала, функционал сайта ломается - если отключить.

Гугл так же пишет - удалите неиспользуемый JS и CSS/
Но как я могу его удалить, если на той странице что я тестю этот CSS не нужен, а на другой странице он нужен.
Это же не лендинг - где только одна страница.

[Дмитрий]

Юлия Г, а нужно ли все это количество библиотек в хедере на всех страницах?
ну и опять же, стоит посмотреть, может какие=то другие оптимизации помогут попасть в желтое с меньшими трудо затратами?

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

[Юлия Г]

Дмитрий, Спасибо за подсказку. Изучу калькулятор более детально. Может и найду какое-то решение.

Answer 1

[ThunderCat]

LCP смотрите, он у вас как-то неприлично высок, это полная загрузка элементов первого экрана. Скорее всего у вас несколько тяжелых картинок в шапке или бэкграунде шапки/макета. Попробуйте тегом<picture>настроить несколько вариантов этих изображений для разных разрешений.
По коду жс - да, там сложно, скорее всего ничего особо не сделаешь, если все эти библиотеки нужны, я пока не нашел толкового решения, кроме как часть скриптов переписать или заменить на более легковесные. А с аналитиками вообще пока решения не видел.

Comments

[Юлия Г]

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

Answer 2

[Антон]

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

Comments

[ThunderCat]

это никак не решает проблему скорости ВЫПОЛНЕНИЯ этих скриптов, так как зачастую скорость СКАЧИВАНИЯ гораздо быстрее именно с какого-то цдн, чем с хостинга за 3 рубля, а выполняются они одинаково отовсюду.