Перформансите на веб-страницата се деловна одлука, а не проблем на програмерите

Кога една страница е бавна, инстинктот е да им се предаде на инженерите со барање да ја поправат. Тоа врамување го промашува вистинскиот проблем. Перформансите не се технички дефект — тие се производна одлука со последици по приходот, а нивното поправање бара исто меѓуфункционално размислување како и кој било друг проблем со раст.

Деловниот аргумент не е суптилен. Истражувањата на Google покажаа дека едносекундно доцнење во вчитувањето на мобилна страница може да ги намали конверзиите за до 20%. Стапките на напуштање растат нагло како што се зголемува времето на вчитување. А од 2021 година, Core Web Vitals се директен сигнал за рангирање во Google Search — што значи дека бавните страници не само што губат клиенти откако тие ќе стигнат, туку го губат и органскиот сообраќај што воопшто би ги довел.

Ако буџетот за платено пребарување е единственото нешто што ви ги држи бројките за придобивање клиенти додека органскиот сообраќај крвари, перформансите на веб-страницата се дел од дијагнозата.

Што всушност мерат перформансите

Најкорисната рамка за нетехничките учесници се Core Web Vitals, сетот показатели што Google ги користи за да го оцени искуството од вчитување и користење на една страница. Три бројки ја вршат најголемата работа:

Largest Contentful Paint (LCP) мери колку време треба главната содржина на страницата да се појави — главната слика, насловот или фотографијата на производот што му кажува на корисникот дека нешто се вчитало. Целта е под 2,5 секунди. Над 4 секунди е негативна оценка.

Interaction to Next Paint (INP) мери колку брзо страницата реагира на дејство од корисникот — клик, допир, притисок на копче. Тромавиот одговор тука е она нескладно чувство поради кое луѓето мислат дека страницата е расипана дури и кога содржината е вчитана.

Cumulative Layout Shift (CLS) мери визуелна стабилност — дали содржината скока додека страницата се вчитува, предизвикувајќи погрешни кликови и дезориентација. Реклама што се вчитува доцна и го поместува копчето што сте сакале да го притиснете е CLS проблем.

Секоја страница можете бесплатно да ја проверите според овие показатели со Google PageSpeed Insights или Lighthouse во Chrome DevTools. Оценките се насочувачки, а не прецизни, но покажуваат каде се проблемите.

Од каде всушност доаѓаат проблемите со перформансите

Претпоставката е дека перформансите се работа на квалитетот на кодот. Честопати не се. Најчестите виновници во вистински проекти:

Слики што никогаш не биле подготвени за веб. Фотографија на производ качена со 4 MB останува 4 MB на страницата ако нешто не ја конвертира. Неоптимизираните слики се најчестата единечна причина за слаб LCP. Современите формати како WebP и AVIF можат да ја намалат големината за 30–70% без видлива загуба на квалитет.

Скрипти од трети страни. Секоја аналитичка ознака, виџет за разговор, алатка за A/B тестирање и банер за колачиња што ќе ги додадете вчитува надворешен JavaScript што прелистувачот мора да го преземе, разложи и изврши пред да заврши со прикажувањето. Страница со дванаесет маркетинг ознаки лесно може да додаде две-три секунди на времето на вчитување — а секоја ознака ја додал некој што имал добра причина.

Фонтови. Прилагодените веб-фонтови често се вчитуваат на начин што го прави текстот невидлив додека не пристигне датотеката со фонтот. Ова се поправа со една линија CSS или со промена на стратегијата за вчитување, но честопати се превидува.

Хостинг и кеширање. Страница на споделен хостинг во податочен центар на источниот брег на САД се вчитува побрзо во Вирџинија отколку во Калифорнија, и многу побрзо во Калифорнија отколку во Германија. Мрежата за испорака на содржина (CDN) го решава ова со послужување ресурси од локации блиску до корисникот. Да не се користи е директен данок врз перформансите.

Зошто дизајнот и маркетингот се одговорни за дел од ова

Перформансите не се проблем само на инженерскиот тим, зашто не инженерите се тие што додаваат скрипти од трети страни, избираат пет прилагодени дебелини на фонт или качуваат некомпресирани слики преку CMS.

Маркетарите што додаваат уште еден пиксел за следење, дизајнерите што бараат позадински 4K видеа преку цела ширина и производните тимови што испорачуваат функционалност по функционалност без да го проверат JavaScript-от што го додаваат — тоа се постепените одлуки што од брза страница прават бавна. Инженерите можат да изградат инфраструктура што дел од тоа ќе го фати и компресира, но не можат да ги преиначат одлуките што се носат во други делови од организацијата.

Решението е перформансите да се третираат како заедничко ограничување, исто како што би ги третирале пристапноста или доследноста на брендот. Дефинирајте буџет за перформанси — максимална дозволена тежина на страница, целен LCP или праг за INP — и направете го дел од дефиницијата за „завршено“ за секоја нова работа, без оглед кој тим ја работи.

Практична почетна точка

Ако никогаш не сте правеле проверка на перформансите, редоследот што дава најмногу резултат со најмалку нарушување:

1. Пуштете Lighthouse на вашата целна страница со најмногу посети и на текот за наплата или регистрација. Забележете ги конкретно оценките за LCP и CLS.
2. Идентификувајте и проверете ја секоја скрипта од трета страна што се вчитува на тие страници. Отстранете сѐ што не се користи активно или не може да се оправда со мерлива деловна вредност.
3. Проверете ги сликите. Дали се послужуваат во современи формати и со големина соодветна на димензиите на приказ? Ако не, ова е поправката со најголем ефект што ви е достапна.
4. Прегледајте ја стратегијата за вчитување фонтови. Ако текстот е невидлив додека фонтовите се вчитуваат, применете font-display: swap.

Ниту еден од овие чекори не бара голема инженерска иницијатива. Првите три честопати може да ги направи за еден ден некој што знае каде да гледа.

Подлабоката архитектонска работа — одложено вчитување, прикажување на серверот, кеширање на работ на мрежата — доаѓа подоцна и е поважна при поголем обем. Но повеќето страници на мали и средни бизниси не ги направиле основите, а основите носат најголем дел од добивката.

---

PNK WORKS гради и проверува веб-страници и веб-апликации со перформансите вградени од самиот почеток, а не додадени подоцна. Разговарајте со нас.