Kako optimizirati stran za mobilne naprave

Zakaj je mobilna optimizacija kritična

Več kot 60 % svetovnega spletnega prometa prihaja z mobilnih naprav, v nekaterih panogah ta odstotek presega 80 %. Google je leta 2019 prešel na mobile-first indeksiranje za vse nove strani, od marca 2021 pa za indeksiranje in razvrščanje uporablja izključno mobilno različico strani. To pomeni, da če vaša stran ne deluje dobro na mobilnih napravah, ne deluje dobro niti v Googlovem iskanju — ne glede na to, kako popolna je namizna različica.

Mobilni uporabniki imajo drugačna pričakovanja kot namizni. Pričakujejo hitro nalaganje (53 % uporabnikov zapusti stran, ki se na mobilni napravi nalaga dlje kot 3 sekunde), enostavno navigacijo z eno roko, berljivo besedilo brez povečevanja, gumbe in obrazce, prilagojene dotiku, ter minimalen vnos podatkov. Stran, ki teh pričakovanj ne izpolnjuje, izgublja obiskovalce, konverzije in položaje v iskanju.

Mobile-first indeksiranje

Kaj to pomeni v praksi

Mobile-first indeksiranje pomeni, da Googlov bot prednostno pregleduje in indeksira mobilno različico vaše strani. Če imate vsebino, ki je vidna samo v namizni različici, ne pa tudi v mobilni, je Google ne bo indeksiral. To je kritično za strani, ki uporabljajo odzivno oblikovanje s skrito vsebino na mobilnem (display:none), ali za strani s posebno mobilno različico m.domain.com, ki ima manj vsebine kot namizna.

Kako preveriti mobilno različico

Za spremljanje mobile-first indeksiranja uporabite Google Search Console. V poročilu Coverage lahko vidite, ali Google pregleduje mobilno ali namizno različico vaše strani. Orodje URL Inspection prikaže, kako Google vidi konkretno stran. Poročilo Mobile Usability prikazuje težave, kot so premajhna velikost besedila, prekrivajoči se elementi ali preblizu postavljene povezave. Google Mobile-Friendly Test (search.google.com/test/mobile-friendly) hitro preveri, ali je konkretna stran mobilno optimizirana.

Odzivno oblikovanje spleta

Osnove odzivnosti

Odzivno oblikovanje spleta je pristop, pri katerem se postavitev strani samodejno prilagaja velikosti uporabnikovega zaslona. Namesto posebnih različic za namizne in mobilne naprave imate eno stran, ki tekoče spreminja razporeditev elementov. Ključni elementi odzivnega oblikovanja so meta oznaka viewport, ki brskalniku pove, naj širino vsebine prilagodi širini naprave, CSS media queries, ki uporabijo različne sloge za različne velikosti zaslona, prožne slike, ki se skalirajo s svojim vsebnikom, in fluid grid, ki za širine elementov uporablja odstotke namesto fiksnih pik.

Mobile-first pristop h kodiranju

Najboljša praksa je kodiranje od mobilnega proti namiznemu (mobile-first). Osnovni CSS slogi so namenjeni mobilnemu prikazu, media queries pa dodajajo sloge za večje zaslone. To prinaša dve prednosti: mobilne naprave ne rabijo prenašati in obdelovati CSS-a, ki se nato prepiše (boljša zmogljivost), poleg tega vas sili, da prednostno obravnavate vsebino in funkcionalnost za najmanjši zaslon. Ogrodja CSS, kot sta Tailwind CSS in Bootstrap 5, uporabljajo mobile-first pristop s prelomnimi točkami za zaslone sm, md, lg in xl.

Pogoste napake pri odzivnem oblikovanju

Najpogostejše napake vključujejo fiksne širine elementov v pikah (uporabljajte max-width in odstotke), vodoravno drsenje na mobilnem (preverite, da noben element ne presega širine zaslona), premajhne gumbe in povezave (najmanjša velikost dotikalne tarče je po Googlovih smernicah 48 × 48 pik), neoptimirane slike (velika namizna slika se naloži tudi na mobilnem), pojavna okna, ki prekrijejo celoten mobilni zaslon (Google kaznuje vsiljive vmesne strani), in obrazce s preveč polji (na mobilnem zmanjšajte vnos, uporabljajte samodokončanje).

Optimizacija hitrosti na mobilnem

Zakaj je hitrost pomembnejša na mobilnem

Mobilne naprave imajo običajno počasnejše internetne povezave (4G/LTE namesto optike), manj procesorske moči za izrisovanje strani in manj RAM-a za obdelavo JavaScripta. Google Page Speed Insights (ali naše brezplačno orodje za merjenje hitrosti) prikazuje ločene rezultate za mobilne in namizne naprave — mobilni rezultat je skoraj vedno nižji in prav ta najbolj vpliva na razvrščanje.

Optimizacija slik za mobilne naprave

Slike so najpogostejši razlog za počasno nalaganje na mobilnem. Uporabljajte odzivne slike z atributom srcset, ki za različne zaslone postreže različne velikosti slik — mobilni dobi sliko velikosti 400 px namesto namizne slike velikosti 1600 px. Pomemben je tudi format slike: formata WebP in AVIF sta 30–50 % manjša od JPEG-a ob enaki kakovosti. Lazy loading (atribut loading="lazy") odloži nalaganje slik, ki niso vidne na zaslonu. WordPress od različice 5.5 samodejno doda lazy loading vsem slikam.

Optimizacija JavaScripta

JavaScript je pogosto glavni krivec za počasne mobilne strani. Zmanjšajte količino JavaScripta — vsak kilobajt JS-a zahteva prenos, razčlenjevanje in izvajanje, kar na mobilnem procesorju traja precej dlje kot na namiznem. Z razdeljevanjem kode (code splitting) naložite samo JS, ki je potreben za trenutno stran. Nalaganje nekritičnega JavaScripta odložite z atributoma async ali defer. Za preproste strani se izogibajte velikim ogrodjem JS — če potrebujete samo drsnik in hamburger meni, ne potrebujete Reacta ali Angularja.

Critical CSS

Tehnika Critical CSS izloči CSS, potreben za izrisovanje vsebine nad pregibom (above-the-fold), in ga vstavi neposredno (inline) v HTML, preostali del CSS-a pa se naloži asinhrono. Na mobilnem je vsebina nad pregibom manjša (manjša višina viewporta), zato je tudi Critical CSS manjši. Orodja, kot so Critical, Penthouse in CriticalCSS.com, samodejno ustvarijo Critical CSS. WordPress vtičniki, kot sta WP Rocket in Autoptimize, imajo vgrajeno podporo za to optimizacijo. Več o pospeševanju preberite v našem vodniku za pospešitev strani.

AMP (Accelerated Mobile Pages)

Kaj je AMP

AMP je Googlovo ogrodje za izdelavo izjemno hitrih mobilnih strani. Strani AMP uporabljajo omejen nabor HTML-a, inline CSS do 75 KB in minimalen JavaScript (le knjižnico AMP). Google strani AMP shranjuje v predpomnilnik na svojem omrežju CDN, kar privede do skorajda trenutnega nalaganja. AMP je bil še posebej priljubljen pri novičarskih straneh in blogih, kjer je hitrost branja kritična.

Ali AMP potrebujete

AMP od junija 2021 ni več obvezen za Googlov vrtiljak Top Stories in ni neposreden dejavnik razvrščanja. Če ima vaša stran že dobre rezultate Core Web Vitals, AMP verjetno ne potrebujete. Vseeno je AMP lahko koristen za strani z visoko stopnjo zapuščanja na mobilnem (AMP drastično skrajša čas nalaganja), za novičarske strani in blogi z velikim številom člankov, za strani s šibko infrastrukturo, kjer Googlovo predpomnjenje na CDN-u znatno pomaga, in za e-poštno trženje (AMP for Email omogoča interaktivna e-poštna sporočila). Za WordPress vtičnik AMP, ki ga razvijata Google in XWP, samodejno ustvari različice AMP vaših strani.

Core Web Vitals na mobilnem

LCP (Largest Contentful Paint)

LCP meri čas nalaganja največjega vidnega elementa na strani — običajno hero slike ali glavnega naslova. Na mobilnem je cilj LCP pod 2,5 sekunde. Najpogostejše težave so velike neoptimirane slike, počasen odzivni čas strežnika (TTFB) in viri, ki blokirajo izrisovanje. Sliko LCP prednaložite z link rel="preload", uporabite optimiran format (WebP) in ustrezno velikost ter zmanjšajte CSS in JS, ki blokirata izrisovanje.

INP (Interaction to Next Paint)

INP je nadomestil FID kot metriko Core Web Vitals in meri odzivnost strani na uporabnikove interakcije. Na mobilnem je dober rezultat INP pod 200 milisekund. Pogoste težave so dolgotrajna opravila JavaScripta, ki blokirajo glavno nit, kompleksne manipulacije DOM-a in preveč poslušalcev dogodkov. Rešitve vključujejo razbijanje dolgih opravil na manjša (yield to main thread), debouncing obravnavalnikov dogodkov in uporabo web workerjev za računsko zahtevne operacije.

CLS (Cumulative Layout Shift)

CLS meri vizualno stabilnost strani — koliko se elementi premikajo med nalaganjem. Na mobilnem je dober rezultat CLS pod 0,1. Najpogostejši vzroki slabega CLS-a so slike brez atributov width in height (brskalnik ne ve, koliko prostora rezervirati), dinamično vstavljeni oglasi, ki potiskajo vsebino, spletne pisave, ki ob nalaganju spremenijo velikost besedila (FOUT), in vsebina, vstavljena nad obstoječo. Vedno določite dimenzije za slike in video, za spletne pisave uporabite font-display: swap ter rezervirajte prostor za oglase.

Testiranje mobilne optimizacije

• Google PageSpeed Insights: Podrobno poročilo o zmogljivosti s specifičnimi priporočili za mobilne in namizne naprave.
• Chrome DevTools Device Mode: Simulira različne mobilne naprave v brskalniku za testiranje postavitve in funkcionalnosti.
• BrowserStack in LambdaTest: Testiranje na pravih mobilnih napravah v oblaku — različni modeli, različice OS in brskalniki.
• Google Search Console: Poročilo Mobile Usability prepozna strani s težavami na mobilnem.
• WebPageTest: Napredno orodje za testiranje hitrosti z možnostjo za mobilne naprave in počasne povezave.
• Lighthouse: Googlovo orodje za celovito analizo zmogljivosti, dostopnosti, SEO-ja in najboljših praks.

Zaključek

Mobilna optimizacija ni izbira — je obveznost vsake strani, ki želi biti vidna v Googlovem iskanju in ponuditi dobro uporabniško izkušnjo. Odzivno oblikovanje z mobile-first pristopom, optimirane slike, minimalen JavaScript in dobre metrike Core Web Vitals so temelj uspešne mobilne optimizacije. Pri BeoHosting so vsi paketi gostovanja optimirani za hitro serviranje vsebine na mobilnih napravah s spletnim strežnikom LiteSpeed, predpomnjenjem na strani strežnika in brezplačnim CDN-om, ki pospeši nalaganje za uporabnike po vsem svetu.