Kako optimizirati sajt za mobilne uređaje

Zašto je mobilna optimizacija kritična

Preko 60% globalnog web prometa dolazi sa mobilnih uređaja, a u nekim industrijama taj postotak prelazi 80%. Google je 2019. godine prešao na mobile-first indeksiranje za sve nove sajtove, a od marta 2021. koristi isključivo mobilnu verziju sajta za indeksiranje i rangiranje. To znači da ako vaš sajt ne funkcionira dobro na mobilnim uređajima, ne funkcionira dobro ni u Google pretraži - bez obzira koliko je desktop verzija savršena.

Mobilni korisnici imaju drugačija očekivanja od desktop korisnika. Očekuju brzo učitavanje (53% korisnika napušta sajt koji se učitava duže od 3 sekunde na mobilnom), jednostavnu navigaciju jednom rukom, čitljiv tekst bez zumiranja, touch-friendly dugmad i forme, i minimalan unos podataka. Sajt koji ne ispunjava ova očekivanja gubi posjetitelje, konverzije i pozicije u pretraži.

Mobile-first indeksiranje

Šta to znači u praksi

Mobile-first indeksiranje znači da Google bot prvenstveno crawluje i indeksira mobilnu verziju vašeg sajta. Ako imate sadržaj koji je vidljiv samo na desktop verziji ali ne i na mobilnoj, Google ga neće indeksirati. Ovo je kritično za sajtove koji koriste responsive dizajn sa skrivenim sadržajem na mobilnom (display:none) ili sajtove sa posebnom m.domain.com mobilnom verzijom koja ima manje sadržaja od desktop-a.

Kako provjeriti mobilnu verziju

Koristite Google Search Console za praćenje mobile-first indeksiranja. U Coverage izvještaju možete videti da li Google crawluje mobilnu ili desktop verziju vašeg sajta. URL Inspection tool pokazuje kako Google vidi konkretnu stranicu. Mobile Usability izvještaj prikazuje probleme poput premale veličine teksta, preklapajućih elemenata ili preblizu postavljenih linkova. Google Mobile-Friendly Test (search.google.com/test/mobile-friendly) brzo testira da li je konkretna stranica mobilno optimizirana.

Responsive web dizajn

Osnove responsive-a

Responsive web dizajn je pristup gdje se layout sajta automatski prilagođava veličini ekrana korisnika. Umjesto posebnih verzija za desktop i mobilni, imate jedan sajt koji fluidno mijenja raspored elemenata. Ključni elementi responsive dizajna su viewport meta tag koji govori browseru da prilagodi širinu sadržaja širini uređaja, CSS media queries koji primjenjuju različite stilove za različite veličine ekrana, fleksibilne slike koje se skaliraju sa kontejnerom i fluid grid koji koristi postotke umjesto fiksnih piksela za širine elemenata.

Mobile-first pristup kodiranju

Najbolja praksa je kodiranje od mobilnog ka desktop-u (mobile-first). Osnovni CSS stilovi su za mobilni prikaz, a media queries dodaju stilove za veće ekrane. Ovo ima dve prednosti: mobilni uređaji ne moraju da preuzimaju i procesiraju CSS koji se zatim overriduje (bolje performanse), i forsira vaš da prioritizujete sadržaj i funkcionalnost za najmanji ekran. CSS framework-i poput Tailwind CSS-a i Bootstrap 5 koriste mobile-first pristup sa breakpoint-ima za sm, md, lg i xl ekrane.

Česte greške u responsive dizajnu

Najčešće greške uključuju fiksne širine elemenata u pikselima (koristite max-width i postotke), horizontalni scroll na mobilnom (provjerite da nijedan element ne prelazi širinu ekrana), premala dugmad i linkovi (minimalna touch target veličina je 48x48 piksela prema Google smjernicama), neoptimizirane slike (velika desktop slika se učitava i na mobilnom), pop-up-ovi koji prekrivaju cijeli mobilni ekran (Google penalizuje intrusive interstitials) i forme sa previše polja (minimizirajte unos na mobilnom, koristite autocomplete).

Optimizacija brzine na mobilnom

Zašto je brzina važnija na mobilnom

Mobilni uređaji obično imaju sporije internet konekcije (4G/LTE nasuprot fiber-u), manje procesorske snage za renderiranje stranica i manje RAM-a za obradu JavaScript-a. Google Page Speed Insights (ili naš besplatan alat za mjerenje brzine) prikazuje zasebne rezultate za mobilni i desktop - mobilni rezultat je gotovo uvek niži i to je rezultat koji više utiče na rangiranje.

Optimizacija slika za mobilni

Slike su najčešći razlog sporog učitavanja na mobilnom. Koristite responsive slike sa srcset atributom koji servira različite veličine slike za različite ekrane - mobilni dobija sliku od 400px umjesto desktop slike od 1600px. Format slike je također bitan: WebP i AVIF formati su 30-50% manji od JPEG-a uz isti kvalitet. Lazy loading (loading="lazy" atribut) odlaže učitavanje slika koje nisu vidljive na ekranu. WordPress od verzije 5.5 automatski dodaje lazy loading na sve slike.

JavaScript optimizacija

JavaScript je često glavni krivac za spore mobilne sajtove. Minimizirajte količinu JavaScript-a - svaki kilobajt JS-a zahtijeva preuzimanje, parsiranje i izvršavanje, a na mobilnom procesoru to traje znatno duže nego na desktop-u. Koristite code splitting da učitate samo JS koji je potreban za trenutnu stranicu. Odložite učitavanje ne-kritičnog JavaScript-a sa async ili defer atributima. Izbjegavajte velike JS framework-e za jednostavne sajtove - ako vam treba samo slider i hamburger meni, ne treba vam React ili Angular.

Critical CSS

Critical CSS tehnika izdvaja CSS potreban za renderiranje above-the-fold sadržaja i ubacuje ga inline u HTML, dok se ostatak CSS-a učitava asinhrono. Na mobilnom, above-the-fold sadržaj je manji (manja visina viewporta) pa je critical CSS također manji. Alati poput Critical, Penthouse i CriticalCSS.com automatski generiraju critical CSS. WordPress plugini poput WP Rocket i Autoptimize imaju ugrađenu podršku za ovu optimizaciju. Detaljnije o ubrzanju pročitajte u našem vodiču za ubrzanje sajta.

AMP (Accelerated Mobile Pages)

Šta je AMP

AMP je Google-ov framework za kreiranje ultra-brzih mobilnih stranica. AMP stranice koriste ograničen podskup HTML-a, inline CSS do 75KB, i minimalan JavaScript (samo AMP biblioteka). Google kešira AMP stranice na svojoj CDN mreži, što rezultira gotovo trenutnim učitavanjem. AMP je bio posebno popularan za novinske sajtove i blogove gdje je brzina čitanja kritična.

Da li vam treba AMP

AMP više nije obavezan za Google Top Stories karusel (od juna 2021) i nije direktan ranking faktor. Ako vaš sajt već ima dobre Core Web Vitals rezultate, AMP vam vjerovatno ne treba. Međutim, AMP može biti koristan za sajtove sa visokim bounce rate-om na mobilnom (AMP drastično smanjuje vrijeme učitavanja), novinske sajtove i blogove sa velikim brojem člankova, sajtove sa slabom infrastrukturom gdje Google CDN keširanje značajno pomaže i email marketing (AMP for Email omogućava interaktivne email-ove). Za WordPress, AMP plugin od Google-a i XWP-a automatski generira AMP verzije vaših stranica.

Core Web Vitals na mobilnom

LCP (Largest Contentful Paint)

LCP mjeri vrijeme učitavanja najvećeg vidljivog elementa na stranici - obično hero slike ili glavnog naslova. Na mobilnom, cilj je LCP ispod 2.5 sekunde. Najčešći problemi su velike neoptimizirane slike, spor server response time (TTFB) i render-blocking resursi. Preload-ujte LCP sliku sa link rel="preload", koristite optimiziran format (WebP) i odgovarajuću veličinu, i minimizirajte render-blocking CSS i JS.

INP (Interaction to Next Paint)

INP je zamenio FID kao Core Web Vital metriku i mjeri odzivnost sajta na korisničke interakcije. Na mobilnom, INP ispod 200 milisekundi je dobar rezultat. Česti problemi su dugotrajni JavaScript task-ovi koji blokiraju main thread, kompleksne DOM manipulacije i previše event listener-a. Rješenja uključuju razbijanje dugih task-ova na manje (yield to main thread), debouncing event handler-a i korištenje web worker-a za računarski intenzivne operacije.

CLS (Cumulative Layout Shift)

CLS mjeri vizualnu stabilnost stranice - koliko se elementi pomjeraju tokom učitavanja. Na mobilnom, CLS ispod 0.1 je dobar rezultat. Najčešći uzroci lošeg CLS-a su slike bez width i height atributa (browser ne zna koliko prostora da rezervira), dinamički ubačene reklame koje guraju sadržaj, web fontovi koji mijenjaju veličinu teksta pri učitavanju (FOUT) i sadržaj ubačen iznad existing sadržaja. Uvek definira dimenzije za slike i video, koristite font-display: swap za web fontove i rezervirajte prostor za reklame.

Testiranje mobilne optimizacije

• Google PageSpeed Insights: Detaljni izvještaj o performansama sa specifičnim preporukama za mobilni i desktop.
• Chrome DevTools Device Mode: Simulira različite mobilne uređaje u browseru za testiranje layout-a i funkcionalnosti.
• BrowserStack i LambdaTest: Testiranje na pravim mobilnim uređajima u cloud-u - različiti modeli, OS verzije i browseri.
• Google Search Console: Mobile Usability izvještaj identifikira stranice sa problemima na mobilnom.
• WebPageTest: Napredni alat za testiranje brzine sa opcijom za mobilne uređaje i spore konekcije.
• Lighthouse: Google-ov alat za sveobuhvatnu analizu performansi, pristupačnosti, SEO-a i best practices.

Zaključak

Mobilna optimizacija nije opcija - to je obaveza za svaki sajt koji želi da bude vidljiv u Google pretraži i pruži dobro korisničko iskustvo. Responsive dizajn sa mobile-first pristupom, optimizirane slike, minimalan JavaScript i dobre Core Web Vitals metrike su temelj uspješne mobilne optimizacije. Na BeoHosting-u, svi hosting paketi su optimizirani za brzo serviranje sadržaja na mobilnim uređajima sa LiteSpeed web serverom, server-side caching-om i besplatnim CDN-om koji ubrzava učitavanje za korisnike širom svijeta.