Екран за учитавање (прелоадер) је слика или анимација преко странице док се она учитава. Неки сајтови изгледају уредно са њим, а други делују спорије него што јесу. Разлика није у самој идеји, него у томе како је подешен. У овом чланку објашњавамо шта екран за учитавање може, а шта не може, и како да га подесите тако да помаже првом утиску уместо да смета брзини.
Шта екран за учитавање заправо ради
Док се страница учитава, прегледач је исцртава део по део: прво текст, па фонтови, па слике које померају све испод себе. Екран за учитавање прекрива тај тренутак и подиже се када је страница спремна, па посетилац одмах види готову страницу.
Важно је разумети једно: екран за учитавање не убрзава сајт. Страница се учитава исто као и без њега. Он само мења оно што посетилац види док чека. Зато је добар када сакрива неуредно исцртавање, а лош када продужава чекање.
Када помаже
- Продавнице и сајтови са много слика, где се производи и банери иначе појављују један по један.
- Сајтови са јаким брендом, где лого дочека посетиоца пре странице.
- Портфолио и презентације, где је први утисак део онога што продајете.
- Глатки прелази између страница, када се екран кратко спусти при клику и подигне када је нова страница спремна.
Када смета
- Када траје предуго. Екран који чека сваку спору скрипту или рекламу држи посетиоца испред затворених врата.
- Када се приказује на свакој страници, и при десетом клику. Први пут је дочек, десети пут је сметња.
- Када је анимација тежа од странице. Велика анимација која се прва учитава одлаже све остало.
- На корпи и плаћању. Купац који плаћа не треба да чека ни секунд више него што мора.
- Када страница може да остане прекривена јер се скрипта екрана није учитала или ју је додатак за брзину одложио.
Како да га подесите како треба
1. Ограничите трајање
Потребне су две границе. Најкраће трајање (око пола секунде) спречава да екран само трепне када страница долази из кеша. Најдуже трајање (неколико секунди) је сигурносна мрежа: екран се подиже и када се нека спора слика или скрипта још учитава.
2. Прикажите га једном
За већину сајтова најбоље је „само на првој страници посете“. Посетилац добије дочек када дође, а даље се креће без застоја.
3. Изаберите лаку анимацију
Спинер направљен у CSS-у не учитава ниједан фајл и појављује се одмах. Мали лого на провидној позадини је такође добар избор. Lottie анимације су лепе, али бирајте мале фајлове и учитавајте их са свог сајта, не са туђег сервера.
4. Изузмите корпу и плаћање
Кораци куповине, повратак са странице банке после плаћања картицом и странице налога треба да се отварају без екрана за учитавање.
5. Поштујте „смањи покрете“
Неки посетиоци у телефону или рачунару укључе „смањи покрете“ јер им анимације сметају. За њих екран треба да мирује и да се одмах подигне.
6. Проверите како ради са додацима за брзину
Додаци за брзину често одлажу или спајају JavaScript. Ако одложе и скрипту екрана за учитавање, екран може да остане предуго. Добро решење се само изузима из одлагања и има мали тајмер у самој страници који га подиже и када је скрипта блокирана. Без JavaScript-а екран не треба ни да се прикаже.
Како да измерите брзину са екраном за учитавање
Алати као што је PageSpeed Insights мере када се садржај странице стварно појави и колико се помера док се учитава. Екран за учитавање не мења колико брзо сервер шаље страницу, али дугачак екран одлаже тренутак када посетилац види садржај. Зато:
- измерите страницу и са екраном и без њега, па упоредите;
- ако се разлика види, скратите најдуже трајање или изаберите „подигни чим је текст спреман“ уместо чекања свих слика;
- праву брзину поправљајте кешом, мањим сликама и мањим бројем додатака, а не екраном за учитавање.
Како то ради NikolicWP Завеса
Све из овог чланка је уграђено у NikolicWP Завеса. Приказује Nika, маскоту NikolicWP, спинер, ваш лого или Lottie анимацију. Има најкраће и најдуже трајање, приказ једном по посети, прескаче корпу и плаћање и поштује „смањи покрете“. Сама се изузима из одлагања JavaScript-а код познатих додатака за брзину, а мали тајмер у страници је подиже и када је скрипта блокирана. Њен CSS је неколико редова у заглављу, а скрипта има око 3 KB. Са ?nwp_zavesa_off=1 у адреси страница се отвара без ње, па брзину лако мерите и са њом и без ње.
Честа питања
Да ли екран за учитавање лоше утиче на Google?
Не, ако је кратак и лак. Google чита исти садржај странице као и без њега. Проблем настаје само када екран дуго држи садржај сакривеним, па га зато ограничите најдужим трајањем.
Колико треба да траје?
Колико траје учитавање, а не дуже. На брзом сајту то је делић секунде, уз најкраће трајање од око пола секунде да не би трепнуо. Најдуже трајање од неколико секунди је само сигурносна мрежа.
Може ли страница да остане заувек прекривена?
Код доброг решења не. Екран се подиже после најдужег трајања и када је скрипта блокирана, а без JavaScript-а се уопште не приказује.
Да ли ми уопште треба?
Не мора. Брз сајт без екрана за учитавање је одличан. Екран има смисла када желите уредан дочек, јачи утисак бренда или глатке прелазе, и када га подесите тако да не продужава чекање.
Укратко: екран за учитавање не убрзава сајт, али може да сакрије неуредно исцртавање и да остави леп први утисак. Нека буде кратак, лак, приказан једном по посети, без корпе и плаћања и са сигурносном мрежом. Тако помаже, а не смета.
