Korisničko iskustvo više nije faktor koji definiše brzinu veb stranice, jer je brzina veb stranice ključni faktor rangiranja koji može ili da napravi ili da pokvari vašu SEO strategiju. Gugl je jasno stavio do znanja; brzina stranice je važna. I pod pretpostavkom da nastavite da prikazujete prenaduvane JPEG i PNG datoteke, gubite značajan potencijal.Dobre vesti?Današnji formati slika mogu znatno smanjiti učitavanje stranica, a kvalitet slika ostaje netaknut, što će vam pružiti veliku prednost u pretrazi.
Zašto je optimizacija slika vaše tajno SEO oružje
Poznato je da slike zauzimaju polovinu ili više veličine datoteke veb stranice. To je zapanjujuća brojka kada se setimo da jedna sekunda kašnjenja pri konverziji stranice može smanjiti konverzije za punih 7 procenata i značajno povećati broj odbijanja. Performanse slika su veoma značajne u Google Core Web Vitals pokazateljima, što su merenja koja utiču na rangiranje rezultata pretrage.
Jedan od tri osnovna pokazatelja veba je najveće prikazivanje sadržaja (LCP), što je metrika brzine pojavljivanja najvećeg elementa sadržaja na ekranu. Taj element je slika na većini veb stranica. Pod pretpostavkom da je vaša glavna slika ogroman JPEG od 2MB i da joj je stoga potrebno sati da se učita, vaš LCP je oštećen, kao i vaš potencijal za rangiranje.
Još jedan ključni veb važan faktor je kumulativno pomeranje rasporeda (CLS), što je mera vizuelne stabilnosti. Slike nedefinisanih veličina će dovesti do promene rasporeda prilikom učitavanja, što frustrira korisnika i loše utiče na vaše rezultate. Ovi trzaji se izbegavaju pravilno optimizovanim slikama sa odgovarajućim atributima veličine.
Neizbežna je činjenica da što više optimizujete svoje slike, poboljšavate svoje osnovne veb pokazatelje i povećavate svoje SEO performanse.
Stara garda: JPEG i PNG
JPEG i PNG su korišćeni za kontrolu veb slika pre mnogo godina i još uvek su izuzetno rasprostranjeni. JPEG-ovi su veoma dobri u kompresovanju fotografskih podataka sa milionima boja, i to rade sa kompresijom sa gubicima, što implicira da podatke koje izgube ionako ne možete videti. PNG datoteke su, sa svoje strane, zasnovane na kompresiji bez gubitaka i omogućavaju transparentnost, što ih čini idealnim za logotipe, ikone i drugu grafiku koja ima oštre ivice.
Problem je, međutim, što su ovi formati izmišljeni davno, u vreme kada ekrani visoke rezolucije nisu postojali, pregledanje orijentisano na mobilne uređaje nije bio fenomen, a korisnici osetljivi na propusni opseg nisu bili nova realnost. Iako je JPEG ili PNG datoteka relativno velika datoteka, ona je mnogo veća nego što bi zapravo trebalo da bude u poređenju sa trenutnim opcijama koje mogu postići isti vizuelni kvalitet.
Nastavljate da prikazujete sve svoje slike u JPEG i PNG formatima, što takođe znači da koristite tehnologiju od juče da biste rešili problem današnjih performansi. Veličine datoteka mogu se smanjiti do 25 procenata ili više bez smanjenja percipiranog kvaliteta datoteke, a da se i dalje smatraju istom datotekom u modernim formatima.
Upoznajte WebP: Moderni standard
Zauzvrat, WebP je moderni veb standard koji je zaslužio svoje razloge. Omogućava kompresiju sa i bez gubitaka, transparentnost i animaciju, odnosno ima najbolje od JPEG, PNG i GIF formata upakovane u jednu datoteku.
Bonusi za učinak su visoki. WebP slike su obično 25-35 procenata manje od sličnih JPEG slika i 26 procenata manje od PNG slika. U slučaju sajta koji ima desetine slika, to se prevodi u megabajte podataka koji se čuvaju i vreme koje se štedi u smislu vremena učitavanja.
WebP trenutno ima odličnu podršku za pregledače, sa više od 95 procenata svetskih korisnika na prirodnim pregledačima koji ga podržavaju. WebP je podržan u Chrome-u, Firefox-u, Edge-u, Safari-ju (od 2020. godine) i čak mobilnim pregledačima. Ovaj široko usvojeni WebP je bezbedna, proizvodno spremna opcija.
Može se koristiti na jednostavan način korišćenjem HTML elementa <picture> koji vam omogućava da obezbedite rezervnu sliku pregledačima koji ne podržavaju ovu funkciju:
html
<slika>
<source srcset=“image.webp“ type=“image/webp“>
<img src=“slika.jpg“ alt=“Opis“>
</picture>
Ova strategija postepenog poboljšanja je da se osigura da svi dobiju sliku, dok savremeni pregledači uživaju u smanjenoj veličini WebP datoteke.
AVIF: Najsavremeniji
AVIF (AV1 format datoteke slike) je najsavremenija tehnologija za obradu slika. AVIF, zasnovan na AV1 video kodeku, pretraživač komentara na Jutjubu ma čak i bolju kompresiju od WebP-a: sa istim nivoom kvaliteta, obično ima veličinu koja je 20-50 puta manja. Format je posebno savršen sa fotografijama visoke rezolucije i složenim slikama.
AVIF subvencioniše mogućnosti koje ga čine neverovatno fleksibilnim: širok raspon boja (HDR), visoka dubina bita, kompresija sa i bez gubitaka i transparentnost. Na sajtovima koji su prepuni grafike i gde je kvalitet slika od suštinskog značaja, AVIF može postići fantastične rezultate sa delićem konvencionalne veličine datoteke.
Podrška za AVIF u pregledačima se brzo povećavala. AVIF podržavaju Chrome, Firefox i Edge, ali Safari ga nije podržavao do kraja 2023. godine. To jest, preferiraćete AVIF i vratiti se na WebP i JPEG:
html
<slika>
<source srcset=“image.avif“ type=“image/avif“>
<source srcset=“image.webp“ type=“image/webp“>
<img src=“slika.jpg“ alt=“Opis“>
</picture>
Ova trostruka rezervna opcija će pružiti optimalnu podršku najnaprednijim pregledačima, a istovremeno će biti kompatibilna sa svim ostalima.
SVG: Vektorska grafika za jasne logotipe i ikone
SVG (Scalable Vector Graphics) je nenadmašan kada su u pitanju logotipi, ikone, ilustracije i bilo koja druga grafika napravljena od oblika i linija, za razliku od fotografskih podataka. SVG datoteke su XML datoteke koje su takođe vektorske i mogu se menjati veličinom neograničeno bez pogoršanja; takođe su generalno male veličine.
Performanse nisu jedina prednost SVG-a koja je povezana sa SEO-om. Vašu grafiku tehnički može pretraživač pretraživati jer može da čita SVG kod. SVG-ovi su takođe nezavisni od rezolucije, što znači da se mogu besprekorno prikazivati na ekranu sa visokom DPI rezolucijom bez potrebe za više verzija datoteke.
Takođe su dostupni alati kao što je SVGO za dodatnu optimizaciju SVG datoteka eliminisanjem suvišnih metapodataka i komentara koji obično rezultiraju datotekom koja je 50-70 procenata originalne veličine bez vizuelne razlike.birač komentara na Jutjubu. Ide do te mere da je moguće ugraditi male SVG-ove u vaš HTML, čak eliminiše potrebu za slanjem HTTP zahteva.
Lenje učitavanje: Ne učitavajte ono što vam ne treba
I dalje je gubljenje vremena učitavati sve slike trenutno čak i sa optimizovanim formatima. Lenje učitavanje učitava slike samo kada su neposredno pre ulaska u prozor, što značajno poboljšava performanse učitavanja prve stranice.
U trenutnim veb pregledačima, nativno lenje učitavanje može se implementirati korišćenjem jednog atributa:
html
<img src=“image.webp“ alt=“Opis“ učitava se=“lenjo“>
Samo ovaj atribut može smanjiti težinu prve stranice za polovinu ili više na stranicama sa puno slika. Gugl posebno identifikuje lenje učitavanje kao najbolju praksu i izračunava brzinu stranice na osnovu toga.
Ali budite taktični: nemojte odloženo učitavati ništa iznad pregiba, posebno vaš LCP element. Odlaganje učitavanja glavne slike je zapravo gore jer će nepotrebno odložiti proces učitavanja.
Responzivne slike: Prava veličina za svaki uređaj
To je kao da pokušavate da sipate vatrogasno crevo slike širine 3000 piksela u mobilni uređaj sa ekranom od 375 piksela. Rešenje za ovo su responzivne slike, koje nude više verzija slike i prepuštaju izbor koju će koristiti pregledaču.
Ova optimizacija se može izvršiti pomoću atributa srcset:
html
<img src=“image-800w.webp“
srcset=“image-400v.vebp 400v,
slika-800v.vebp 800v,
slika-1200v.vebp 1200v,
slika-1600v.vebp 1600v“
veličine=“(maksimalna širina: 600 piksela) 100vw, 50vw“
alt=“Opis“>
Ova strategija će osigurati da mobilni korisnici preuzimaju slike odgovarajuće veličine, što će uštedeti propusni opseg i dovesti do bržeg vremena učitavanja, što su takođe važni faktori koje treba uzeti u obzir, jer je Google prvenstveno orijentisan na mobilne uređaje u indeksiranju.
Mreže za isporuku sadržaja: Geografsko povećanje brzine
Distribucija CDN-a pomaže čak i savršeno optimizovanim slikama. CDN čuva podatke o vašim slikama na serverima svuda i pruža ih na mestima najbližim vašim klijentima. Ova fizička blizina čini latenciju izuzetno niskom.
Cloudflare, Fastly i CloudImage, kao primeri modernih CDN-ova, takođe pružaju automatsku optimizaciju slika i konvertuju vaše slike u najefikasniji format koji pregledač podržava za svakog korisnika. Ovo ne zahteva ručnu konverziju formata i svi ljudi dobijaju najbolju moguću datoteku.
Postoje CDN-ovi koji nude i druge funkcionalnosti kao što su kompresija u hodu, inteligentno obrezivanje i obrada slika sa automatskim odgovorom u skladu sa karakteristikama uređaja. Ove usluge mogu olakšati vaš proces optimizacije i pružiti bolje performanse.
Merenje vašeg poboljšanja
Bezmerna optimizacija je nagađanje. Da bi se analizirale performanse slike i prepoznale mogućnosti, može se koristiti nekoliko alata:
Google PageSpeed Insights procenjuje vaš sajt i njegove osnovne veb pokazatelje, a takođe daje savete za optimizaciju slika vašem sajtu. Prepoznaje slike prevelike veličine, nedostatka dimenzija i mogućnosti nadogradnje.
WebPageTest pruža složene grafikone vodopada koji se mogu videti u trenutku kada se svaka slika učita i kakav efekat ona ima na ukupne performanse stranice. Možete testirati na različitim mestima i brzinama veze da biste videli performanse u svetu.
Chrome DevTools ima karticu „Pokrivenost“ koja prikazuje broj korišćenih bajtova u poređenju sa preuzetim. Ovo se koristi za određivanje slika koje se nikada ne pojavljuju nakon učitavanja – mrtvi teret koji šteti performansama.
Strategija implementacije u stvarnom svetu
Prelazak na moderne formate slika ne znači da morate ponovo napisati ceo sajt za nekoliko sati. Počnite sa stranicama sa visokim uticajem: vašom početnom stranicom i vašim najpopularnijim odredišnim stranicama i vašim najpopularnijim objavama na blogu. Pretvorite ove slike u WebP (i AVIF ako ste hrabri) zajedno sa JPEG rezervnom kopijom.
Automatizujte da biste ovaj proces učinili efikasnijim. Konvertori slika Grupno konvertujte slike pomoću squoosh CLI, ImageOptim ili Sharp. Optimizacija se automatski vrši pomoću WordPress plaginova kao što su ShortPixel ili Imagify. Kod prilagođenih izrada, razmotrite optimizaciju slika u vašem sistemu za izradu pomoću alata za izradu kao što su webpack ili Gulp.
Definišite pravila za slike svojim zaposlenima: maksimalna rezolucija i veličina, opcije kvaliteta, potrebni formati. Ovo će izbeći buduće nazadovanje u kome bi pojedinac objavio PNG datoteku od 5 MB jednostavno zato što nije znao.
Uticaj SEO-a: Spajanje svega zajedno
Hajde da napravimo da tačke izađu. Kada primenite inteligentne formate slika i optimizaciju:
Brzina učitavanja stranica se značajno povećava, često za nekoliko sekundi na stranicama sa slikama.
Došlo je do poboljšanja u rezultatima osnovnih veb pokazatelja, posebno LCP-a i CLS-a koji su direktni faktori rangiranja.
Performanse na mobilnim uređajima su takođe bolje poboljšane, što je u skladu sa strategijom indeksiranja „prvo mobilne uređaje“ koju je razvio Gugl.
Povećanje pokazatelja interakcije korisnika – smanjenje broja napuštanja stranice, povećanje vremena provedenog na stranici, povećanje broja stranica po sesiji, a sve to su signali rangiranja na Guglu.
Efikasnost budžeta za pretraživanje je povećana jer botovi za pretraživanje bolje koriste vreme koje im je dodeljeno za pretraživanje više stranica kada se te stranice brzo učitavaju.
Kumulativni efekat rezultira pozitivnim ciklusom: što su bolje performanse, to su bolje rangiranje, veći saobraćaj, veća je angažovanost i samim tim, bolji je kvalitet u pogledu pretraživača.
Zaključak
Optimizacija brzine veb sajtova korišćenjem pametnijih formata slika nije samo tehnička fines, već je konkurentska prednost. Tamo gde vaši konkurenti podržavaju preopterećene zastarele formate, vi možete ponuditi izuzetno brza iskustva koja korisnici vole, a pretraživači nagrađuju.
Tehnologija postoji i danas.Široko je podržan u pregledačima. Implementacija je jednostavna uz pomoć alata. Pitanje je da li ćete iskoristiti ovu priliku i nastaviti to da radite ili ćete dozvoliti da sporo učitavanje slika uništi vaš SEO potencijal.
Počnite danas sa najznačajnijim stranicama. Okrenite se WebP-u, koristite lenje učitavanje, uverite se da postoje prilagodljive slike.Izmerite rezultate.Pogledajte kako vam se poboljšavaju osnovni veb pokazatelji i vaš plasman. Njihova interakcija će nagraditi vaše korisnike, kao što će vas Google nagraditi povećanom vidljivošću.
