Как обойти тест google «PageSpeed Insights»?

Question

[Алексей Иванов]

Всем доброго времени суток!

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


Методом тыка было установлено, что мешает заголовок h1. Я перепробовал все варианты прописывания стилей в head, ничего не помогает, хоть об стену убейся!(( При удалении h1 или переименовании тега, к примеру, в h2 или p

Самое "интересное" то, что тест другой страницы выдает вполне положительный результат. Обе страницы построены на одном шаблоне, у обоих есть h1, расположенный в верстке совершенно идентично. Просто мистика...

Опытные коллеги, быть может вы видите что-то, что я упустил?

Answer 1

[xmoonlight]

https://jonassebastianohlsson.com/criticalpathcssg...

Comments

[Алексей Иванов]

Спасибо, но я не понял, как это может мне помочь? Минификация стилей в хеде никак не влияет на результат теста от гугл.

[xmoonlight]

Алексей Иванов, нужно вставить инлайном базовый стиль для визуализации сетки шаблона. Так называемый critical css.
(Написано же у Вас в скрине...)

[Алексей Иванов]

xmoonlight, так ведь в хеде есть инлайн стили...или я что-то путаю?

[xmoonlight]

Алексей Иванов, только это там:

<style>
 body{ color:#202020 }

</style>

[Алексей Иванов]

xmoonlight, вот список инлайн стилей в хеде:

.header-slider .main-slider {
    margin-top: 0;
    padding: 0;
    width: 500px;
    display: inline-block;
}
#featured {
    width: 800px;
    overflow: hidden;
    margin: 0 auto;
}
.header-slider .main-slider>div {
    width: 500px !important;
}
.header-slider .main-slider>div img {
    height: auto !important;
    width: 500px;
}
.header-slider .main-slider>div img {
    height: auto !important;
    width: 500px;
}
.container.new-catalog {
    margin-top: 20px;
}
.new-header {
    margin-top: 40px;
    background: url(/assets/templates/images/icons/6-pattern-karbona-dlya-sayta.png);
    background: #d6d6d6;
    padding: 20px;
}
#logot{ position:relative;float:left;z-index:10;left:50%;margin-left:-269px;margin-top:100px }
.dopadd { position: relative;float: left;z-index: 1;left: 70%;margin-left: -253px;margin-top: 121px; }
.dopadd h5 { margin: 0;font-size: 19px; }
.dopadd .company-address1 {
    color: #003e9a;
}
@media only screen and (max-width:480px) {
#logot{ min-height:60px;margin-top: 160px!important;display:block;position:relative;margin: 70px 0;left: 0;z-index:10;text-align: center; }
.dopadd h5 { text-align:center; }
}
@media only screen and (max-width:1024px) {
#logot { margin-top: 135px; }
.dopadd h5 { text-align:center; }
}
@media only screen and (max-width: 770px){
#hamburger { display: block!important;z-index: 10; }
}
#hamburger {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
}
@media (max-width: 770px){
	.responce-phone {
		display: block;
		top: 15px;
		right: 20px;
		position: fixed;
		color: #02ff00;
		font-weight: 800;
		font-size: 23px;
		z-index: 10;
		float: right;
	}
	.title-menu {
    padding-left: 20px;
    padding-top: 13px;
    padding-bottom: 15px;
    color: #fff;
    background: #0f0e0e;
	}
	.container.new-catalog {
        width: 400px;
    	margin-top: 20px;
    }
}
p {
    font-size: 15px;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
h1{ font-size: 30px!important;line-height: 1.2!important;text-align: center!important; }

[xmoonlight]

Алексей Иванов, да...
Вот ТЕПЕРЬ он стал ЗНАЧИТЕЛЬНО больше)
1. читаем тут: https://developers.google.com/speed/docs/insights/...
2. читаем тут: https://developers.google.com/speed/docs/insights/...

[Алексей Иванов]

xmoonlight, этот код у меня изначально и был, вот в чем прикол! Я изучал доки про необходимость этих онлайн-стилей в хеде для начальной загрузки видимой части сайта. Почему тогда на этой странице с идентичным онлайн-кодом всё ОК?????

[xmoonlight]

Алексей Иванов, разница в отсутствии js-скрипта... нужно скрипт вынести вниз перед тегом </body> или попробовать загрузить его асинхронно.

[Алексей Иванов]

Вы будет смеяться, но он внизу...и там, и там...

Если я уберу из контента h1, то гугл тут же перестанет ругаться на js скрипт в верху кода...

[xmoonlight]

Алексей Иванов, тогда сверху уберите с той, где всё плохо)

[Алексей Иванов]

xmoonlight, я прошу прощения, уже дураком себя чувствую, самооценка ниже плинтуса, но все спрошу: что сверху убрать?)) Js-скрипт и так внизу, перед закрывающим тегом body, это видно в исходном коде страницы.

[xmoonlight]

Алексей Иванов,

После получения всех данных HTML с сервера удалось отобразить только 67 % от общего объема содержания из верхней части страницы (открыть скриншот показать оригинал).

https://developers.google.com/speed/docs/insights/...

[Алексей Иванов]

xmoonlight, эээх, не понимаем мы друг друга!((((

Я сейчас поменял на этой странице тег h1 на h2, больше вообще ничего не касался. И вот результат

Разумеется, всё это касается мобильной версии, было 71%, стало - 90%. Просто из-за того, что один html-тег сменил...

[xmoonlight]

Алексей Иванов, на js перестало ругаться. Видимо, скрипт там зависал, когда 2 тега h1 находил...

Answer 2

[ThunderCat]

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

Comments

[Алексей Иванов]

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

Я так и не смог решить проблему с этим "странным" заголовком h1 на главной странице. Напоминаю, что на другой странице, ровно с таким же шаблоном движка, гугл реагирует на порядок благосклоннее...

Пришлось поставить "костыль":

<p><span>Вывески. Изготовление световых, несветовых вывесок</span></p>
<h1 style="display: none;">Вывески. Изготовление световых, несветовых вывесок</h1>

Тегу span прописал инлайн стили в шапке, схожие с h1.
Ужас, конечно, но это сработало! ; \ Остается надеяться, что поисковые машины примут такой вариант заголовка h1