Како да оптимизујете своју веб локацију за кориснике мобилних уређаја?

Да ли сте се уверили да је ваш сајт прилагођен мобилним уређајима?

Да ли сте знали да је Гоогле увео нову политику под називом Мобиле-Фирст?

Све више и више корисника веба се удаљава од десктоп рачунара, и уместо тога, претражују и купују користећи своје мобилне уређаје.

Респонзивни веб дизајн је омогућио креирање сајтова који раде на свим платформама на равномерном нивоу. Али чак и тада, респонзивни дизајн је само делић стратегија оптимизације УКС-а за мобилне уређаје.

Ако желите истинску оптимизацију перформанси, мораћете да размотрите и друге алтернативе.

Због тога постоји тако снажан нагласак на изградњи вашег сајта као мобилно прво искуство. Једноставним речима, мобилни први значи да су ваш дизајн и садржај прво оптимизовани за кориснике мобилних уређаја.

С обзиром на то, овај пост се не односи на дизајнирање потпуно новог сајта. Уместо тога, погледаћемо неке фундаменталне принципе дизајна за мобилне уређаје. И, проведите неко време фокусирајући се на техничке детаље за оптимизацију корисничког искуства за ваше мобилне кориснике.

#1: Дизајнирање имајући на уму мобилни уређај

Веб је углавном изграђен на принципу служења десктоп корисницима. Прави веб, прави напредак у технологијама, најбоље се приказује на прелепом екрану преко целог екрана. Али паметни телефони и други мобилни уређаји су ствар и време је да почнемо да се прилагођавамо концепту дизајна на првом месту за мобилне уређаје.

Осим здраворазумског респонзивног дизајна, које друге елементе дизајна бисте требали да имплементирате у своје веб дизајне за мобилне уређаје?

  • Одређивање приоритета. Мобилни екрани су ограничени на расположиви простор за приказ. Такође, мобилни екрани представљају садржај на вертикални начин за разлику од много шире — хоризонталне — структуре за десктоп рачунаре. То значи да морате дизајнирати користећи одређивање приоритета. Које елементе су од највеће важности да корисници виде? Ако постоје ЦТА дугмад, колико је лако да их виде за мобилни корисник?
  • Прво садржај. Боја друга. Можете да урадите неке занимљиве ствари са мобилним дизајном, али свакако не у оквиру дизајна десктопа. Дакле, прво уступите место садржају. Учините своју копију и друге делове садржаја лако читљивим и доступним. Мобилни екран много мање опрашта на визуелне елементе који ометају.
  • Лака навигација. На мобилном уређају не можете једноставно да кликнете било где и вратите се на почетну страницу. Осим ако, наравно, не планирате ову врсту навигације унапред. И требало би. Експериментишите са виџетима за померање на врх, али и беспрекорним лепљивим заглављима кад год је то могуће.

Најбољи начин да проверите да ли ово радите како треба је да користите телефон (ја то радим стално!) и посетите свој сајт. Урадите темељно испитивање како се ствари осећају и како теку заједно.

Ако седите у кафићу или чекате лет на аеродрому, гурните некога по рамену и љубазно га замолите да провери ваш сајт уместо вас. Затим се завалите и чујте њихове повратне информације. Већину пута ћете сами себе изненадити начином на који људи перципирају корисничко искуство ваше веб странице.

  Како аутоматски организовати Гноме апликације у фасцикле апликација помоћу алата за поправљање апликација

#2: Оптимизација ресурса; слике, иконе итд.

Колико често користите визуелне елементе ради личних преференција, а не УКС? То се дешава, а ако желите да будете креативни, исплати се разумети како функционише оптимизација медија.

Визуелни елементи као што су фотографије, илустрације, иконе и видео снимци су највећи потрошачи пропусног опсега на веб страницама.

Просечна величина веб странице у 2018. Наведена по делатностима и различитим земљама.

Иако не постоји одређена величина веб странице коју сви морају да испуне, здрав разум је да је мања величина веб странице једнака бржем времену учитавања.

Дакле, како можете смањити неке додатне КБ или чак МБ са свог визуелног садржаја?

  • Промените величину слика. Звучи једноставно, зар не? Па, не могу да рачунам колико сам пута прегледао мобилну страницу само да би се слике резолуције 1980 к 1200 учитале у позадини. Уместо тога, фотографије у пуној величини треба да буду обезбеђене као алтернативне везе када је то потребно. Промена величине може да обрије до 80% укупне величине слике, у зависности од ваших захтеваних димензија. За мобилне уређаје, међутим, никада нема разлога да идете изнад распона од највише 600-700 пиксела.
  • Смањите величину датотеке компресијом. Компресија/оптимизација слике је процес коришћења софтвера треће стране за смањење броја боја присутних на слици. Ово се може урадити до степена да ваше фотографије не изгубе свој урођени квалитет, али могу драстично смањити величину датотеке. Ако вам је потребна помоћ око компримовања слика, не тражите даље од нашег свеобухватног прегледа алата за компресију слика.
  • Истражите алтернативне формате датотека. Сви су чули за ПНГ и ЈПЕГ формате датотека. На крају крајева, они су де фацто стандарди слике на вебу. Али не за дуго. Најновија и најбоља технологија у испоруци дигиталних слика се врти около ВебП и СВГ формати датотека. СВГ-ови, на пример, могу аутоматски скалу према величини екранасмањујући број ресурса потребних за учитавање специфичних визуелних компоненти.

Оптимизација корисничког искуства за мобилне уређаје је само важна ствар. Импулсно дизајнирање значи да не узимате у обзир дугорочне ефекте својих одлука. Док вам пажљив приступ помаже да градите имајући на уму кориснике мобилних уређаја од самог почетка.

Проницљиво: У складу са концептом интуитивног мобилног дизајна, не морате поново да користите исте визуелне компоненте на својим мобилним дизајнима. Уклањање неколико позадинских слика и њихова замена позадином у боји — на мобилном уређају — неће штетити корисничком искуству. Увек тражите начине да уштедите чак и најмању количину пропусног опсега.

#3: Претходно учитавање и лење учитавање

Да ли је неопходно учитавање свих медијских ресурса на странице за које је потребно значајно време за читање? И, може ли помоћи приказивање спољних страница пре него што их корисници посете?

Хајде да прво погледамо прелоадере, такође познате као наговештаји претраживача.

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

Уз претходно учитавање, корисник може да прикаже страницу Б пре него што кликне на везу за навигацију на страници А.

Имајте на уму да претходно учитавање не функционише увек и на претраживачу је да донесе коначну одлуку. Фактори као што су тип уређаја и пропусни опсег се мере појединачно.

  Како читати ВхатсАпп поруке без упозорења пошиљаоца

Који су најчешћи типови прелоадера?

  • Префетцх. Овај тип сугерише да ће одређени УРЛ највероватније бити следећи избор за навигацију. А, ако прегледач одобри захтев, онда ће аутоматски кеширати важне ресурсе странице, што заузврат чини да се следећа страница учитава много брже.
  • Пререндер. Док горњи тип преузима само одређене ресурсе, предрендер ће кеширати целу страницу. Сав приказани садржај се чува у меморији уређаја корисника.
  • ДНС-Префетцх. ДНС префетцх ће решити наведени ДНС и ништа друго. Као резултат тога, ако корисник направи одређено ‘укључивање’ на вашој веб локацији, у суштини губите време потребно за навигацију.
  • Прецоннецт. Исто као горе, али такође успоставља везе и руковања са ТЦП и ТЛС конекцијама.

Који су неки примери кода за прелоадере?

<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="prefetch" href="folder/script.js" as="script">

<link rel="prerender" href="customURL.com/preview.html">

Пошто програми за предучитавање користе динамичке ХТМЛ ознаке, можете унапред учитајте садржај попут Гоогле фонтова или направите прилагођену скрипту за претходно учитавање ЈаваСцрипт средстава у ВордПресс-у.

БТВ, ако користите ВордПресс онда ВП Роцкет може вам помоћи у томе да побољшате своју веб локацију.

Сада када знате више о предучитавачима, хајде да причамо о другој врућој теми: лењо учитавање.

Шта је Лази Лоадинг?

Кад год посетите нову веб страницу, било да је то пост на блогу или статички сајт — прегледач преузима цео садржај странице, а затим тај садржај служи као изворно искуство прегледања. У већини случајева, приморани сте да преузмете целу страницу, а да заправо не видите даље од прелома.

Док са лењим учитавањем, прегледачу се каже да учита (рендерује) садржај који се налази само у оквиру за приказ корисника. Дакле, ако се на одређену страницу додају фотографије или видео снимци осетљиве на величину, те датотеке ће се приказати само кад год екран прегледача дође до тог дела сајта.

А ако сте забринути због потенцијалних СЕО проблема, немојте бити. Иоаст је то потврдио Гоогле приказује странице које користе лење учитавањеи види то као само још један сигнал за побољшање перформанси.

Моја препорука за коришћење библиотеке је Лаизр.јс — једноставно и ефикасно лењо учитавање за ваше слике! Скрипта је такође активирана на почетној страници пројекта, тако да можете видети како ради у реалном времену. Корисници ВордПресс-а могу пронаћи десетине додатака који се лењо учитавају у јавном репо додатака.

#4: Веб кеширање

Веб кеширање се заснива на концепту копирања верзије странице, која се потом може представити кориснику у било ком тренутку. Странице се кешују при првој посети страници веб-сајта. Када нови корисник покуша да приступи тој страници, уместо да приказује верзију уживо, веб сервер ће приказати кеширану верзију.

Циљ било које врсте кеширања је да побољша перформансе веб локације и смањи потребне позадинске ресурсе. У зависности од вашег решења за кеширање, можете да конфигуришете прилагођене интервале и друге догађаје засноване на окидачу.

Нека од најпопуларнијих имена у веб кеширању су Варнисх, Скуид и Мемцацхед. Али будите сигурни да на тржишту постоји много других решења, посебно ако сте корисник ВордПресс-а.

Такође можете размотрити да се пријавите за ЦДН.

Шта је ЦДН (мрежа за испоруку садржаја)?

Мрежа за испоруку садржаја користи глобални кластер дистрибуираних сервера да обезбеди невероватно брзу испоруку садржаја. А ЦДН може брзо да пренесе све популарне типове садржаја на вебу: видео, фотографије, ЈаваСцрипт, итд. Ових дана већина саобраћаја на вебу пролази кроз неки облик ЦДН-а.

  Како да направите иМессаге налепнице у стилу Присма од ваших селфија

Једина ствар коју треба запамтити о мрежама за испоруку садржаја је да оне најбоље функционишу када се користе на веб локацији високе потражње. Дакле, ако услужите само неколико хиљада посетилаца месечно, приметна побољшања би се могла показати тешким. Ипак, ЦДН је одлично решење за побољшање времена учитавања ваше веб локације, смањење трошкова пропусног опсега, повећање доступности садржаја и јачање укупне безбедности.

Ако немате претходног искуства са ЦДН-овима, препоручујемо да испробате Цлоудфларе — они пружају бесплатни план заувек, и то је одлична платформа за почетак учења. А ако Цлоудфларе не испуни ваша очекивања, погледајте наш пост за најбоље бесплатне ЦДН провајдере на тржишту.

#5: АМП (убрзане мобилне странице)

Гоогле’с АМП пројекат је мобилна оптимизација на стероидима! У суштини, АМП раставља ваше странице до најосновнијих ствари како би обезбедио супер-брзо искуство учитавања, али и да би читљивост садржаја постала приоритет. С обзиром на то колико је важна брзина странице, можете ли скупити храброст да кажете не скоро тренутним временима учитавања?

У реду, све те речи звуче сјајно, али како функционише АМП?

АМП је ХТМЛ страница са одређеним ограничењима у погледу врсте садржаја који се може приказати. Ово доводи до много бржег времена учитавања и укупних перформанси због ограничења за извршавање скрипти и слично.

ЈаваСцрипт, на пример, не ради са АМП-ом. Осим ако, наравно, не користите АМП ЈС библиотека доступна на ГитХуб-у. Коришћење ЈС библиотеке вам омогућава да постигнете одређене резултате, као што је избегавање блокатора огласа, али ако желите истински учинак, онда је сирови АМП прави начин.

Занимљиве студије случаја за АМП:

#6: Тестирајте пре него што почнете

У данашње време, нема изговора да немате посебно окружење за постављање за свој пројекат. Већина платформи за хостовање у облаку подразумевано нуди окружења за постављање, па проверите код свог провајдера да ли имате приступ једном.

Шта је сценско окружење?

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

Овај сајт је оно што називате производним сајтом — верзија у реалном времену свих кода, скрипти и садржаја на којима се заснива ваш сајт. Окружење за постављање у овом контексту је копија ваше производне локације. Лажна страница ако хоћете. И у овом сценском окружењу, можете да уносите промене или додајете нове функције, а да не нарушите своју веб локацију.

Увек се сетим поста Ешли Харп, Не губите време – Тестирајте измене пре него што урезујете.

Њен став о томе како сами себе ‘преваримо’ да избегнемо одређене ствари је одличан пример како не желимо да преузмемо одговорност када погрешимо. Ипак, Ешлиин пост такође укључује везе до корисних алата за постављање локалног окружења за постављање.

Тестирање није тако страшно као што звучи. Али сигурно је страшно када случајно избришете целу своју базу података на производном серверу!

Завршна реч

Оптимизација ваше веб странице за глатко мобилно искуство није тако тешко. Све што вам треба је мало одлучности и вољно применити методе наведене у овом посту. Шансе су да сте већ упознати са стварима као што су кеширање садржаја и лењо учитавање, али шта је са окружењима за постављање или предучитавачима?

Надамо се да је овај пост бацио мало светла на тренутно стање оптимизације веб локација за мобилне уређаје.