Всегда ли сайты на конструкторе = плохой код? Как узнать качество кода и на что оно влияет

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

С вами команда no-code платформы Taptop и сегодня мы поговорим не о внешней красоте сайтов, а об их внутреннем содержании. Ведь оно напрямую влияет на работу ресурса и его дальнейшее развитие. Начнем с того, чем вообще отличается специфика создания сайтов на конструкторах от стандартной веб-разработки с точки зрения получаемого результата.

Предположим, что вы делаете сайты для своей компании или на заказ. Если у вас есть команда разработчиков (или фрилансеры на аутсорсе), то они полностью отвечают за перевод дизайн-макета на язык браузера. Вы можете сказать — хороший код пишите, плохой не пишите — и они всё сделают «по красоте».

Но если хочется оптимизировать расходы денег и времени, то вполне логично делегировать создание кода конструкторам сайтов. Может быть, с помощью no-code получится сделать не все проекты, но многие задачи он может взять на себя.

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

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

Когда разработчики видят код сайтов, созданных на конструкторах, они часто говорят, что он плохой и грязный. Они имеют в виду, что в нем много лишнего и он создан неоптимальным образом. Почему так получается?

Конструкторы переводят то, что пользователи создали на странице визуального редактора, в html, css и js-код. Каждая платформа делает это по-своему. Это, в том числе, зависит от того, как реализован принцип работы с элементами.

Предположим, конструктор дает пользователю возможность рисовать на холсте, как в графическом редакторе. Для дизайнеров это удобно. Но при этом элементы и их настройки не сопоставляются с реальными элементами и свойствами в html и css-коде. Этот подход используется, например, в Тильде.

Конструктор сам интерпретирует, как ему перевести картинку в работающий код. Отсюда появляется, например, массовое абсолютное позиционирование элементов, что создает впоследствии сложности с адаптацией и поддержкой сайта.

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

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

В этом случае пользователь сам участвует в процессе создания кода:

Подобным образом строится работа на таких платформах, как Webflow и Taptop.

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

Для сравнения заглянем внутрь сайтов, созданных на платформах Taptop и Tilda.

В этом примере на обоих конструкторах были созданы аналогичные по дизайну блоки. При этом html-файл в Tilda получился в 3 с лишним раза длиннее — на скрине его пришлось обрезать, т.к не помещался.

Разобраться, что сгенерировал конструктор по собранной в редакторе странице, можно с помощью веб-инспектора в браузере (открыть Inspect по правой кнопке мыши). В нем можно оценить длину файла, посмотреть, как он структурирован и как строится работа со стилями.

Еще один способ — воспользоваться сервисами проверки производительности сайта, например, PageSpeed Insights. Здесь можно увидеть скорость загрузки сайта и получить рекомендации по его оптимизации. Данные по html показаны в трех параметрах:

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

Посмотрим на примере — проверим производительность сайтов, созданных на Taptop и на Tilda.

Кроме оценки структуры, сервис проверки производительности покажет предупреждение, если на сайте есть проблемы с загрузкой js или css, а также присутствует устаревший или неиспользуемый код JavaScript.

Качественный чистый код, не перегруженный лишними элементами и соответствующий современным практикам веб-разработки, добавляет сайту качества и возможностей:

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

Часто в минусы конструкторов записывают то, что сайт привязан к определенному ресурсу. Его перенос либо вовсе невозможен, либо требует много дополнительных затрат времени. Также бывает, что платформа позволяет скачать ресурсы проекта, но запрещает вносить в них изменения и оставляет за собой авторские права. Такой вариант используется, например, в Tilda.

Хорошая новость в том, что не для всех конструкторов характерна такая закрытая система. Примеры платформ с открытым кодом — Webflow и Taptop. В них вы можете скачать html, css и js-файлы проекта и — дорабатывать или использовать на других платформах. Это ваша полная собственность.