Насколько плохо у данного компонента DOM-структура?

Question

[Loserver]

Пользуюсь для создания сайтов в Joomla конструктором страниц SP Pagebulder, стоит он сам по себе довольно дорого, но возникает вопрос об эффекте.
При проверке сайта Google Pagespeed Insights система показывает следующее: Сократите размер структуры DOM 1 392 элемента
В примечаниях говорится, что максимальные показатели 30 и 60.
Предлагаю к просмотру типичный код с использованием этого конструктора

<section id="section-id-1571675685329" class="sppb-section">
	<div class="sppb-row-container">
		<div class="sppb-row">
			<div class="sppb-col-md-4" id="column-wrap-id-1571675685328">
				<div id="column-id-1571675685328" class="sppb-column">
					<div class="sppb-column-addons">
						<div id="sppb-addon-wrapper-1571762775735" class="sppb-addon-wrapper">
							<div id="sppb-addon-1571762775735" class="clearfix ">
								<div class="sppb-addon sppb-addon-module ">
									<div class="sppb-addon-content">
										<div class="custom"> <span class="adress-top"><i class="fa fa-map-marker map-top"></i>г. Санкт-Петербург</span></div>
									</div>
								</div>
							</div>
						</div>
						<div id="sppb-addon-wrapper-1571762775727" class="sppb-addon-wrapper">
							<div id="sppb-addon-1571762775727" class="clearfix ">
								<div class="sppb-addon sppb-addon-module ">
									<div class="sppb-addon-content">
										<div class="custom"> <span class="adress-top"><i class="fa fa-map-marker map-top"></i>г. Санкт-Петербург</span></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="sppb-col-md-4" id="column-wrap-id-1571762775731">
				<div id="column-id-1571762775731" class="sppb-column">
					<div class="sppb-column-addons">
						<div id="sppb-addon-wrapper-1571762775730" class="sppb-addon-wrapper">
							<div id="sppb-addon-1571762775730" class="clearfix ">
								<div class="sppb-addon sppb-addon-module ">
									<div class="sppb-addon-content">
										<div class="custom"> <span class="adress-top"><i class="fa fa-map-marker map-top"></i>г. Санкт-Петербург</span></div>
									</div>
								</div>
							</div>
						</div>
						<div id="sppb-addon-wrapper-1571747256947" class="sppb-addon-wrapper">
							<div id="sppb-addon-1571747256947" class="clearfix ">
								<div class="sppb-addon sppb-addon-module ">
									<div class="sppb-addon-content">
										<div class="custom"> <span class="adress-top"><i class="fa fa-map-marker map-top"></i>г. Санкт-Петербург</span></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="sppb-col-md-4" id="column-wrap-id-1571762775732">
				<div id="column-id-1571762775732" class="sppb-column">
					<div class="sppb-column-addons">
						<div id="sppb-addon-wrapper-1571762775738" class="sppb-addon-wrapper">
							<div id="sppb-addon-1571762775738" class="clearfix ">
								<div class="sppb-addon sppb-addon-module ">
									<div class="sppb-addon-content">
										<div class="custom"> <span class="adress-top"><i class="fa fa-map-marker map-top"></i>г. Санкт-Петербург</span></div>
									</div>
								</div>
							</div>
						</div>
						<div id="sppb-addon-wrapper-1571762775741" class="sppb-addon-wrapper">
							<div id="sppb-addon-1571762775741" class="clearfix ">
								<div class="sppb-addon sppb-addon-module ">
									<div class="sppb-addon-content">
										<div class="custom"> <span class="adress-top"><i class="fa fa-map-marker map-top"></i>г. Санкт-Петербург</span></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

Это все, чтобы получить вот это:
Жду Ваших экспертных мнений и заранее благодарю!

Comments

[WapSter]

Сравни
при желании можно довести в точности как у тебя на скриншоте с той же структурой и даже уменьшить ее.

Answer 1

[Антон Неверов]

На много плохо. Какой именно ответ вы рассчитываете получить?

Comments

[Loserver]

Какая в идеале должна быть структура для вывода этих блоков с адресами в ?

[Loserver]

Что Вы имеете в виду под "на много плохо"?
По сравнению с чем?

[Антон Неверов]

Ну, сами судите насколько. Вот так выглядит идеальный вариант:

<ul class="cities">
    <li><a href="#">г. Челябинск</a></li>
    <li><a href="#">г. Челябинск</a></li>
    <li><a href="#">г. Челябинск</a></li>
    <li><a href="#">г. Челябинск</a></li>
    <li><a href="#">г. Челябинск</a></li>
    <li><a href="#">г. Челябинск</a></li>
</ul>

[Rustam Bainazarov]

Loserver, генераторы и конструкторы в угоду универсальности очень часто жертвуют рациональностью, объёмом и качеством кода.

Это нормальное явление.

Тут можно обойтись:

<ul>
   <li> 
     <i>Иконка</i> <span>название</span>
   </li>
</ul>

Ну и ссылку, если нужна.

В той мешанине классов и вложенности ничего супер-плохого нет. На SEO это не влияет. На него влияет другие вещи. Для большинства крупных сайтов такая вложенность — норма.

Google Page Speed — идеалист. Посмотрите, например, сколько вложенности в вёрстке веб-интерфейса Gmail. Тоже беда. На каждую маленькую вещь по 5 уровней.

Автоматизация верстки вкупе с универсальностью не может выдавать идеально чистый (dry) код.

[Loserver]

Антон Неверов, ну плюс еще иконка
Мда, ужас..

[Антон Неверов]

Loserver, ну, лично я иконки люблю делать через псевдвоэлементы css, чтобы HTML весил меньше.

[Loserver]

Рустам Байназаров, но ведь это влияет на скорость загрузки, а следовательно, и на позицию в поисковиках

[Rustam Bainazarov]

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

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

[Loserver]

Рустам Байназаров, сотни - это больше 1300 элементов, как у меня по тесту?)

[Rustam Bainazarov]

Loserver, нет, я имел в виду, например, 300 элементов по 10 узлов. И так несколько раз.

1300 — это не так много. Но смотря для какого сайта.

Answer 2

[Gor Mkhitaryan]

Плохо. Если хотите идеального отчета от pagespeed то этот плагин точно не для Вас.

Comments

[Loserver]

Спасибо за ответ, приму соответствующие меры.
На сколько подобная структура может влиять на SEO?
Сколько примерно процентов отбирает именно DOM-структура?

[Loserver]

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

[Gor Mkhitaryan]

Loserver, Напрямую не влияет, но может влиять на быстродействие.

[Loserver]

Gor Mkhitaryan, но ведь быстрая страница - это основа сео-оптимизации кода. Значит, все-таки влияет на SEO?

[Gor Mkhitaryan]

Loserver, Да, само собой. Я к тому что ругают не за DOM структуру, а за последствия такой структуры

[Антон Р.]

Loserver, никак это на SEO не влияет. Можешь писать странички на html в блокноте, наверно они будут быстрее. Если тебе своего времени не жалко.

[Gor Mkhitaryan]

Loserver, Но в любом случае ищите золотую середину. Быстрее чистого HTML на фронте ничего нет, но это неудобно. С другой стороны используя такой тяжелый конструктор вы сильно рискуете. Попробуйте найти какой нибудь плагин который кэшировал бы страницы, это даст заметный прирост в быстродействии (но лучше переносите сайт на WordPress, там куча плагинов для оптимизации всего что есть, в том числе и SEO)

[Loserver]

Gor Mkhitaryan, как-то очень прирос к Joomla.
Про Wordpress слушал кучу мифов, немного страшновато после этого.
Впринципе, я сжимаю HTML-код JCH Optimizer, на странице моего рабочего сайта Инсайтс показывет 92%, хотя еще стоит настроить статический код Метрики. Тоже на нем пилил сайт.

[Gor Mkhitaryan]

Loserver, да про все есть мифы, смотрите по факту что вам больше нравится.

Сжатие это не кэш, честно не знаю что делает JCH, но если страница грузится быстро то не парьтесь ;)

[Loserver]

Gor Mkhitaryan, там просто кэш тоже есть.
Коллега, вот какой реально нормальный показатель для сайта?
У моих, в основном, 70-80%, но я почему-то не удоволетворен..

[Gor Mkhitaryan]

Loserver, Это все цифры, надо смотреть по факту как работает. Если грузиться быстро то волноваться не стоит. У Яндекса есть перечень на который они обращают внимания, вот по нему оптимизируйте сайт и все будет круто

[Loserver]

Gor Mkhitaryan, если направите в сторону, где можно найти официальные показатели, буду очень благодарен

[Gor Mkhitaryan]

Loserver, https://yandex.ru/support/webmaster/

[Loserver]

Gor Mkhitaryan, спасибо

Answer 3

[Антон Р.]

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

Comments

[Loserver]

Но структура вложенности, конечно, ужас...

[Антон Р.]

Loserver, а тебе не похер? Браузер это переваривает за доли секунды, то что ты выиграешь лишние 100 миллисекунд мало что изменит.

[Gor Mkhitaryan]

Бизнес выигрывает от рекламы. Если визуальный редактор стоит задуматься о смене платформы. А данные page speed использует Google, если автор вопроса рассматривает продвижение там то конь уже не вакууме)

[Loserver]

Антон Р., хочу довести до идеала, внутренний перфекционист негодует

[Антон Р.]

Gor Mkhitaryan, я имел в виду что если тебе заказчик говорит сделать лэндос и ты его собираешь за пол дня а не за 2 недели и он выглядит хорошо, то бизнес уже в выигрыше, за счет экономии времени и удобного инструмента. Page Builder как раз для этого и сделан.

[Rustam Bainazarov]

Loserver, тогда вам придётся вручную верстать это всё, если идеального хотите кода. Конструкторы не предназначены для этого, они не знают, какого визуального эффекта вам нужно добиться, отсюда и столько обёрток и вспомогательных (утилитарных) классов.

[Антон Р.]

Loserver, кстати 39 долларов за лицензию это не дорого.

[Gor Mkhitaryan]

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

[Антон Р.]

Gor Mkhitaryan, с таким же успехом он может стать заложником любой другой cms или фреймворка, так что это не причина.
А какие будут трудности? Сколько миллисекунд браузер тратит на чтение этих дивов?

[Loserver]

Антон Р., на оф. сайте для разработчика 239 доллеров, и то по скидке, так все 3 сотни зеленых Франклинов

[Антон Р.]

Loserver, 47$ если с доступом к шаблонам:

[Loserver]

Антон Р., но лицуха на 1 сайт

[Gor Mkhitaryan]

Антон Р., Для того чтобы вам ответить нужно реально протестировать все, пока что это просто доводы (ничем не отличающиеся от результатов pagespeed)
Почитайте статью https://m.habr.com/ru/post/224187/

Я лишь могу предположить что такая структура может принести проблем. Но пока не потестишь не узнаешь.

[Антон Р.]

Loserver, а тебе на сколько надо??? На бесконечное количество? Можешь ставить сколько угодно но обновления будут работать только на одном.

[Loserver]

Антон Р., я так и делаю, но создатели его оценивают на 300 для обычных разработчиков. Не суть, про цену по ходу дела обмолвился