Защо красивият сайт не продава
Кратък отговор: Красивият сайт не продава, когато дизайнът е оптимизиран за одобрението на собственика, а не за решението на купувача. Ефектните шрифтове, видео фоновете и анимациите носят измерима техническа цена - забавят зареждането, разместват съдържанието и намаляват текста, който Google изобщо вижда.
Има един разговор, който водя поне веднъж месечно.
Собственик на бизнес е платил няколко хиляди евро за нов сайт. Сайтът е красив. Наистина. Има плавни анимации, видео на началната страница, шрифт, който никой конкурент не използва. Собственикът го е показал на приятели и всички са казали "уау".
И не носи нито едно запитване повече от стария.
Правя технически одити на сайтове от години - повече за мен като SEO консултант и web developer. Обяснението почти никога не е, че дизайнерът е бил лош. Обяснението е, че никой в процеса не е представлявал купувача, а решенията, взети в негово отсъствие, имат конкретна, измерима цена. Тази статия е за цената.
Каква е разликата между красив сайт и работещ сайт?
Красивият сайт е оптимизиран за естетическа оценка - от собственика, от колеги дизайнери, от журита. Работещият сайт е оптимизиран за човек с намерение да купи. Двете съвпадат само когато естетиката е самият продукт: фотография, галерия, мода, архитектура.
В дизайна съществуват два различни занаята, които често се смесват в един и същ проект.
Art Direction е визуално изказване. Целта е усещане, впечатление, разпознаваемост. Успехът се мери с награда, с портфолио, с това дали някой е спрял и е казал "уау".
Conversion Design е инженерство на решение. Целта е човек с намерение да стигне от въпрос до действие с минимално триене. Успехът се мери със запитвания.
| Критерий | Art Direction | Conversion Design |
|---|---|---|
| За кого е | Дизайнери, журита, собственика | Купувач с намерение |
| Успех се мери с | Награда, портфолио | Запитване, продажба |
| Отношение към навика | Нарушава го умишлено | Използва го |
| Време на страницата | Цел сама по себе си | Без значение |
| Кой одобрява | Впечатленият | Данните |
Проблемът не е, че Art Direction е лош. Проблемът е, че се плаща от купувача, а сметката идва при собственика.
И ето къде се къса процесът: собственикът одобрява това, което впечатлява него. Дизайнерът се цели в нещо, което да сложи в портфолиото си. И двамата са добросъвестни. Просто никой в стаята не е човекът, който след четири месеца ще търси телефонен номер от мобилен телефон в метрото.
Защо визуалният шум намалява конверсиите?
Когато всеки елемент на страницата е акцентиран, нито един не е. Потребителят не може да изгради пътека на сканиране и вместо да реши, се отказва. Ефектът не е умора - той е невъзможност да се формира приоритет за секундите, които човек отделя.
Ще срещнете често обяснението, че "всеки допълнителен елемент уморява мозъка". Формулировката е удобна, но неточна.
Реалният механизъм е визуалната йерархия. Човек не чете страница - сканира я и за части от секундата подрежда какво е важно. Тази подредба става чрез контраст: нещо е по-голямо, по-тъмно, по-изолирано от останалото.
Когато дизайнът дава на всички елементи еднаква тежест - три бутона с еднакъв размер, пет секции с еднакъв визуален вес, hero с четири съобщения - контрастът изчезва. Няма как да се формира приоритет.
Признаци, че страницата ви няма йерархия:
- Повече от един primary бутон в един екран
- Заглавия, които не се различават по размер помежду си
- Декоративни елементи с по-силен контраст от призива за действие
- Три или повече акцентни цвята
- Секции без визуално разделение, които се сливат при скрол
Бърз тест: присвийте очи, докато гледате началната си страница, докато всичко се размаже. Кое остава разпознаваемо? Ако отговорът не е заглавието и основният бутон - йерархията е счупена.
Как нестандартните взаимодействия губят клиенти?
Всяко нестандартно решение изисква потребителят да научи нещо ново, за да ползва сайта. Скритата навигация на десктоп, прихванатият скрол и персонализираните курсори прехвърлят усилие върху човек, който не е дошъл да учи, а да реши проблем.
Хамбургер меню на десктоп. На телефон е компромис заради пространство. На десктоп пространство има в излишък и единствената причина да се скрие навигацията е естетическа. А скритата навигация по определение изисква едно допълнително действие, преди човек изобщо да види какво предлагате. Плащате с клиенти за по-чист макет.
Прихванат скрол (scroll-jacking). Когато сайтът поема контрола върху скролването, чупите едновременно: скролбара като индикатор за напредък, търсенето в страницата с Ctrl+F, клавиатурната навигация и екранните четци. Плюс, ако анимацията променя top или height вместо transform, произвеждате реални размествания на оформлението.
Персонализирани курсори и хоризонтален скрол. Всяко от тях е решение човекът да ползва интерфейс, различен от всички останали, които познава.
Правилото е просто: нарушавайте навика само когато самото нарушение е част от продукта. Ако продавате счетоводни услуги, не е.
Как ефектният дизайн уврежда SEO позициите?
Чрез Core Web Vitals - трите метрики на Google за реално потребителско изживяване. Шрифтовете и hero изображенията забавят LCP, анимациите влошават INP, а късно зареждащите се елементи повишават CLS. Това не е ранкинг фактор, но влияе пряко на потребителското изживяване и на конверсиите.
Първо да сложим тежестта на мястото ѝ, защото по този въпрос се пишат много глупости.
Core Web Vitals не е ранкинг фактор. Лоши показатели няма да потопят страница със силно съдържание и авторитет, а добри показатели сами по себе си няма да вдигнат позиции. Значението им е за реалното потребителско изживяване и конверсиите, не за класирането в Google.
Най-добрите практики за добро потребителско усещане са:
| Метрика | Какво измерва | Праг |
|---|---|---|
| LCP (Largest Contentful Paint) | Кога се появява най-големият видим елемент | до 2,5 сек |
| INP (Interaction to Next Paint) | Колко бързо реагира на действие | под 200 ms |
| CLS (Cumulative Layout Shift) | Колко се размества съдържанието | под 0,1 |
Ако техническата основа изобщо не е налице, оптимизацията на дизайна няма да компенсира - това е отделна тема, която съм разписал в как се прави SEO оптимизация на сайт.
Малка, но важна подробност: INP замени FID през март 2024. Ако четете българска статия, която още говори за FID, тя не е обновявана от две години - и вероятно не си струва.
Числата по-долу идват от двайсет сайта, които одитирах през последната година. Малка извадка е, но е българска - и в нея се повтарят едни и същи няколко решения.
Сега по елементи.
Нестандартните шрифтове
Браузърът не може да нарисува текст, преди шрифтовият файл да се свали. Какво се случва междувременно зависи от една настройка, която повечето хора никога не са докосвали:
Тук има подробност, която дори специалисти бъркат. Стойността по подразбиране в спецификацията е font-display: auto, а не block. Но auto означава "браузърът решава" - и Chrome, Firefox и Safari на практика я изпълняват като block: кратък период на блокиране от около три секунди, през който текстът е невидим, и след това безкраен период за смяна.
Това е описано и в документацията на MDN за font-display, и в обяснението на екипа на Chrome. Тоест ако не сте задали нищо, вие сте задали FOIT (Flash of Invisible Text - краткото невидимо състояние на текста, описано по-горе). А ако най-големият елемент на екрана ви е текст - при минималистичен hero почти винаги е - вашият LCP чака шрифта.
Другата често срещана стойност е swap. При нея текстът се появява веднага с резервен шрифт и се подменя, щом основният се зареди. Проблемът се измества: ако двата шрифта имат различни пропорции, при подмяната редовете се преподреждат и това влиза в CLS.
Това е поправимо и почти никой не го прави. Със size-adjust, ascent-override и descent-override резервният шрифт се настройва да заема същото място като основния и изместването изчезва. Браузърите също подобряват изчисленията си в тази посока. Но в масовия случай - сайт, на който никой не е пипал резервния шрифт - изместването е налице.
Специфичен български проблем, за който почти не се говори. Голяма част от "дизайнерските" шрифтове нямат кирилица. Дизайнерът прави макета на латиница, изглежда великолепно, клиентът одобрява, а в продукция българският текст пада към системен шрифт. Дизайнът, за който сте платили, никога не е съществувал на живо.
Тук е важно едно разграничение. Обичайното забавяне при зареждане на шрифт е временно - резервният шрифт стои секунда-две и после бива подменен. При липсващи глифи на кирилица заместването не се случва. Кирилицата остава в системния шрифт, докато латиницата се изписва с дизайнерския.
Резултатът е хибрид от два несъвместими шрифта в едно и също изречение. Вижда се най-грозно там, където двете азбуки се срещат - при имена на марки, при "SEO", "Google", при имейл адреси. Повечето собственици го усещат като "нещо не изглежда правилно", без да могат да посочат какво.
В шест от двайсетте сайта - всеки трети - избраният шрифт нямаше глифи на кирилица.
Вторият пласт: шрифтовете, които имат кирилица, обикновено се доставят с латиница, кирилица и гръцки в един файл. Изрязването само до кирилица сваля 60-70% от тежестта.
В двайсетте сайта средната тежест на изтеглените шрифтове беше 185 KB - почти винаги защото се зареждаха стилове и формати, които страницата никъде не използва.
Какво да проверите: DevTools → Network → филтър Font. Колко файла се зареждат, колко тежат общо и има ли повече от два стила на едно семейство.
Видео фонът в hero секцията
Изглежда премиум. Струва скъпо. И е почти повсеместно: единайсет от двайсетте сайта - над половината - зареждаха ротиращ слайдер или автоматично стартиращо видео на началния екран.
- Изображението-плакат (poster) на видео елемента се брои за кандидат за LCP. Ако видеото няма poster, браузърът не рисува нищо на това място и LCP пада върху друг, по-късен елемент.
- Автоматично стартиращото видео се конкурира за мрежов капацитет със самия LCP ресурс. Дори всичко останало да е перфектно, задръстването забавя показването.
- Декодирането натоварва основната нишка. На средно клас Android телефон - тоест на реалния български трафик - това е осезаемо.
Решение: оптимизиран poster с preload, preload="none" на самото видео, стартиране след LCP. На мобилни устройства - статично изображение и толкова.
Lottie анимациите
Освен самата анимация зареждате и библиотеката, която я възпроизвежда. Проверете двете поотделно в Network панела - при вградени растерни изображения един-единствен анимационен файл спокойно надхвърля всичко останало на страницата.
По-същественото: Lottie се рендва с JavaScript върху основната нишка. Дълги задачи на основната нишка означават, че когато потребителят натисне бутон, браузърът е зает и не отговаря веднага. Това е точно определението за лош INP.
Ако анимацията е над сгъвката и контейнерът ѝ няма предварително зададени размери, добавяте и CLS.
Решение: формат dotLottie, canvas renderer вместо SVG, инициализация чак когато елементът влезе в екрана. Или - по-често правилният отговор - експорт към компресирано видео или animated WebP.
Големите hero изображения
Тук е най-честият конкретен пропуск, който намирам в одити, и се поправя за минута.
loading="lazy" върху hero изображението. Конструкторите го добавят автоматично на всички изображения. Върху най-важния видим елемент това казва на браузъра нарочно да отложи заявката. LCP се срива.
През последната година работих по двайсетина сайта. Дванайсет от тях - над половината - имаха loading="lazy" върху hero изображението. Нито един собственик не знаеше, че е там. Това е най-евтината секунда, която някога ще спечелите.
Проверка: отворете изходния код (Ctrl+U) и потърсете loading="lazy" в първите редове. Ако е там, махнете го и добавете fetchpriority="high".
Второ: hero изображение, зададено като CSS фон вместо като <img> елемент, се открива едва след като браузърът е обработил стиловете. Разликата в LCP между двата подхода се измерва в секунди, не в милисекунди.
Как дизайнът намалява съдържанието, което Google вижда?
Чрез решения, които превръщат текста в изображение, в скрипт или в нищо. Текст, вграден в картинка, съдържание, зареждано само с JavaScript, и "чисти" страници със сто и петдесет думи не носят никакъв сигнал за релевантност - нито към Google, нито към AI търсачките.
Тази част се пропуска най-често, защото изглежда като проблем със съдържанието. Не е. Това са дизайнерски решения с индексационни последици.
Текст, запечен в изображение. Красивото типографско изказване, което дизайнерът е направил във Photoshop, за търсачката не съществува. Нито за Google, нито за crawler-ите на AI асистентите.
Слайдер с отделно заглавие във всеки слайд. Дублирани H1 тагове, текст, който често е върху изображението и не се чете, и разпилян сигнал за това коя всъщност е темата на страницата.
Начална страница със 150 думи. Не защото няма какво да се каже, а защото оформлението няма къде да го сложи. Страница без текст няма за какво да се класира. Магическо число няма, но под 300 думи рядко има с какво да участва. По-полезният въпрос от "колко думи" е дали текстът отговаря на това, което купувачът пита преди да се обади: какво точно правите, за кого, защо вие и колко струва.
Съдържание, рендвано само с JavaScript. Ако анимационната библиотека вкарва текста след зареждане, поемате риск дали и кога crawler-ът ще го види. В по-тежките случаи страницата изобщо не влиза в индекса - разгледал съм отделно защо Google не индексира сайт и как се проверява.
Навигация само с икони. Вътрешните връзки са един от най-силните сигнали за структура на сайта. Икона без текст не носи никакъв анкор.
Има и втори пласт, който през последните две години стана осезаем. Отговорите на AI асистентите се съставят от текст, който crawler-ът е успял да прочете и да разбере структурно. Сайт без ясна йерархия на заглавията, с текст в картинки и с празни страници, просто не участва в тази игра. Конкурентът ви участва.
Как да проверя дали дизайнът вреди на сайта ми?
С четири проверки, които отнемат под петнайсет минути: полевите данни в PageSpeed Insights, ренднатият код в Search Console, теглото на ресурсите в DevTools и картите на поведение в Microsoft Clarity. Всички са безплатни и не изискват разработчик.
1. Полевите данни, не лабораторните (2 минути)
Отворете PageSpeed Insights и въведете адреса си. Ключовото: горната секция показва данни от реални потребители (CrUX) - това е, което има значение за класирането. Долната е симулация на едно емулирано устройство и служи само за дебъгване.
Ако пише, че няма достатъчно данни, трафикът ви е малък. Тогава ползвайте отчета Core Web Vitals в Search Console.
2. Какво вижда Google (3 минути)
Search Console → Проверка на URL адрес → Тествай активния URL → Разгледай тествената страница → HTML. Търсете дали текстът от началната секция изобщо присъства.
Алтернатива без Search Console: DevTools → Ctrl+Shift+P → "Disable JavaScript" → презаредете. Това, което остава на екрана, е приблизително минимумът, върху който можете да разчитате.
3. Теглото на дизайна (3 минути)
DevTools → Network → презаредете страницата. Сортирайте по размер и вижте три неща:
- Колко тежат общо шрифтовете
- Колко тежи най-голямото изображение
- Има ли JavaScript файл над 200 KB
После потърсете loading="lazy" около hero изображението.
4. Как реално се държат хората (5 минути настройка)
Инсталирайте Microsoft Clarity - безплатен е и няма лимит. След няколкостотин посещения гледайте три неща:
- Scroll map - докъде стигат хората. Ако основното ви съобщение е под точката, до която стига 40% от трафика, то не съществува.
- Rage clicks - където хората кликат многократно от раздразнение. Почти винаги е декоративен елемент, който изглежда като бутон.
- Dead clicks - кликат нещо, което не реагира.
Rage clicks върху декорация е най-прекият възможен сигнал, че дизайнът работи срещу вас.
Какво да не използвате: bounce rate. В GA4 той е просто обратното на engagement rate и не различава "намери каквото търсеше и си тръгна" от "не разбра нищо и си тръгна". За дизайнерска диагностика гледайте дълбочина на скрола и ангажирани сесии.
Накратко
Претрупаният дизайн не е въпрос на вкус. Той има счетоводство: секунди в LCP, милисекунди в INP, точки в CLS и думи, които Google така и не прочита.
Добрата новина е, че почти нищо от изброеното не изисква нов сайт. Ако структурата и съобщението са наред, а проблемът е в шрифтовете, hero секцията и анимациите, това е работа за няколко дни, а не проект за три месеца. Направете четирите проверки, преди да поискате оферта за нов сайт.
И за да изпреваря най-честия въпрос: не, махането на анимациите няма да ви струва позиции. Ще загубите визуален ефект и ще спечелите скорост. Единственото, което може да навреди при такава промяна, е ако едновременно с това изтриете текст или смените URL адреси без пренасочвания.
Ако след четирите проверки установите, че сайтът ви плаща за неща, които не носят, разгледайте какво включва техническият SEO одит на сайт или прегледайте 10-те признака, че сайтът ви губи клиенти.