01 / 08 Ръководство за производителност

Как целевата страница да изглежда премиум, без да става бавна

Посетителите решават дали една страница изглежда премиум още в първата секунда, а тя минава основно в мрежата и в първото изобразяване. Премиум усещането трябва да идва от типографията, пространството и композицията, които пристигат заедно със страницата, а не от код, който идва след нея.

Автор: Явор Колев, софтуерен архитект и продуктов разработчик

26 KB

HTML, CSS и скрипт на страниците за услуги на този сайт, компресирани, преди подобренията

0,4 s

Изобразяване на най-големия елемент на същите страници в лабораторен тест за настолен компютър

0

Заредени уеб шрифтове

02 / 08 Принцип

Премиум усещането се решава на първия екран, не в списъка с функции

Посетителят преценява качеството, преди която и да е анимация да се е заредила. Всичко, което прави първия екран обмислен, трябва да пристигне с HTML кода.

Iavor Kolev

Повечето бавни премиум сайтове се провалят по една и съща причина: впечатлението зависи от ресурси, които пристигат късно. Начален екран, който чака шрифт, видео или библиотека за анимация, първо показва празно или разместващо се съдържание и точно това впечатление остава.

Надеждният подход е страницата да се изгради на два слоя. Първият слой е цялата страница: съдържание, йерархия, типография и оформление, доставени като статичен HTML и CSS. Вторият слой е подобрението: движение, 3D и интерактивност, които се зареждат по-късно и могат да се провалят, без да отнемат нищо.

03 / 08 Бюджет

Определете бюджет в байтове, преди дизайнът да е окончателен

Бюджетът превръща „направи го бързо“ в ограничение, което дизайнерите и разработчиците могат да проверят. Тези четири реда поемат по-голямата част от него.

01 / Критичен път

Всичко, от което първият екран има нужда, и нищо повече

На този сайт HTML, CSS и скриптът за взаимодействие на една страница за услуга са общо около 26 KB в компресиран вид. Всичко извън този набор трябва да докаже защо първият екран не може да се покаже без него.

02 / Шрифтове

Постигнете премиум вида с типография, не с файлове за шрифтове

Този сайт използва само системни шрифтове: без заявки за шрифтове, без невидим текст, докато файлът се зарежда, и без разместване, когато пристигне. Мащабът, дебелината, разстоянията и контрастът вършат работата, за която обикновено се избира собствен шрифт.

03 / Медия

Всяко изображение има размер и причина да се зареди рано

Задайте размери, за да няма разместване, използвайте съвременни формати и зареждайте отложено всичко под първия екран. Видео или въртяща се галерия в началото е подобрение, освен ако не е самият продукт.

04 / Външни услуги

Всеки външен скрипт е разход

Анализи, чатове и вградено съдържание добавят заявки, работа за браузъра и задължения за поверителност. Този сайт отчита събития за конверсия със собствен сигнал, който не изпраща бисквитки или идентификатори.

04 / 08 Движение

Движението е подобрение, никога зависимост

Точно движението най-често отнема скоростта на премиум сайтовете. То може да остане, стига страницата да е цялостна и без него.

  • Първо съдържанието

    Всяка дума е в статичния HTML

    Заглавията, текстът, връзките и призивите за действие се създават още при изграждането на сайта. Страницата се чете правилно и без JavaScript, а търсачките получават цялото съдържание още при първата заявка.

  • Късно зареждане

    Тежките скриптове изчакват свободно време или първо действие

    Анимацията при превъртане и 3D скулптурата на този сайт се зареждат след първото движение на мишката, превъртане, докосване или натискане на клавиш, или след 1,4 секунди, което настъпи първо. Те никога не се конкурират с първото изобразяване.

  • Уважение към посетителя

    Намалено движение означава, че нищо не се изтегля

    Когато посетителят е поискал намалено движение от операционната си система, кодът за анимация изобщо не се изтегля, вместо да се изтегли и спре.

  • Според устройството

    Скъпите ефекти работят там, където могат да си ги позволят

    WebGL скулптурата работи само на екрани, по-широки от 820 пиксела. Телефоните получават същото съдържание в статична композиция и никога не изтеглят three.js.

Ако страницата се чупи без JavaScript, анимацията е носила съдържание, което никога не е трябвало да притежава.

05 / 08 Изработка

Премиум сигнали, които почти не струват нищо за зареждане

Повечето от това, което изглежда скъпо, се решава в CSS и в текста, не в скриптовете.

Типография

Ясна скала с премерен контраст

Използвайте малко размери, последователно, с по-голяма междуредова разредка за четене и по-плътна за големите заглавия.

Композиция

Пространство и подравняване вместо украса

Строга мрежа, тънки линии и еднакви отстояния правят страницата да изглежда прецизно изградена и не добавят заявки.

Сдържаност

Една палитра и една идея на екран

Този сайт е изцяло монохромен. Без избор на цветове йерархията зависи от мащаба и пространството, а стиловете остават малки.

Прецизност

Състояния, фокус и текст, които изглеждат завършени

Видимият фокус, ясните състояния при посочване, точните етикети и конкретните заглавия са това, което посетителите усещат като грижа. Те струват малко байтове и много внимание.

06 / 08 Измерване

Измервайте преди всяко пускане, не след него

Производителността се влошава незабелязано, скрипт по скрипт и файл по файл. Единствената надеждна защита е проверка, която спира пускането.

  • Лабораторна проверка

    Lighthouse проверява четири страници преди всяко пускане

    Началната страница и страница за услуга се проверяват за мобилно устройство и настолен компютър. Последното изпълнение даде 98 до 100 за производителност и 100 за достъпност, SEO и добри практики и на четирите.

  • Бюджети

    Числа, които спират пускането

    Скриптът за взаимодействие има таван от 8 KiB, който се проверява автоматично, а пускането спира, когато резултат от Lighthouse падне под своя праг.

  • Стабилност

    Нулевото разместване е изискване към дизайна

    Всяка проверена страница има кумулативно разместване на оформлението 0. Това идва от предварително зададени размери, не от донастройване накрая.

  • Реални данни

    Потвърдете резултата с реални посетители

    Лабораторният резултат е контролиран тест. Core Web Vitals от реални потребители в Search Console или Chrome UX Report показват дали бюджетът издържа на истински устройства и мрежи.

07 / 08 Доказателства

Вижте подхода в реални проекти

Всеки от тях е изграден по същия модел на два слоя: първо цялостна статична страница, после подобрение.

08 / 08 Следваща стъпка

Задайте тези пет въпроса на всяко предложение за целева страница

Задайте ги преди началото на дизайна. Отговорите показват дали скоростта е заложена в проекта или само се очаква.

Пет въпроса

  1. От какво има нужда първият екран и колко килобайта е това?
  2. Кои шрифтове, изображения и скриптове се зареждат преди първото изобразяване и защо?
  3. Какво става, когато JavaScript не сработи или посетителят предпочита намалено движение?
  4. Кои ефекти работят на телефони и кои само на настолен компютър?
  5. Кои числа спират пускането, ако производителността се влоши?