Saveti i alati za optimizaciju brzine učitavanja web sajta

Od uspostavljanja kontakta sa klijentom, određivanja projektnih ciljeva, istraživanja, pronalaženja inspiracije, planiranja, UX design-a, dizajna wireframe-a i prototipa, mockup-a, developmenata, obezbeđivanja dobrih performansi i brzine sajta, testiranja i lansiranja.

Faktor o kome ćemo danas detaljno govoriti i koji nikako ne bi smeli zanemariti je brzina učitavanja i performanse web sajta. Biće reči o značaju brzine učitavanja za uspeh web projekta, savetima i preporukama koje treba ispoštovati da bi imali dobre performanse i podelićemo sa vama korisne alate i resurse koji će vam pomoći da to i postignete.

Zašto je brzina web sajta važna?

Odgovor je jednostavan – brzina učitavanja utiče na rang vašeg sajta na pretraživačima. Godine 2010. Google je objavio da je brzina učitavanja sajta uvrštena u faktore rangiranja, pa je prema tome ovo važan faktor za SEO. Od brzine učitavanja zavisi brzina indeksiranja stranica i posećenost. Spore web stranice negativno utiču na stope konverzije, koje su od ključnog značaja za uspeh svakog online biznisa.

S obzirom da predviđanja i statistike pokazuju da će mobilna pretraga uskoro premašiti desktop pretragu a u nekim segmentima je već premašila, brzina učitavanja na mobilnim uređajima je neizostavan faktor ukoliko želite da ostanete konkurentni.

Kako ubrzati web sajt i njegove performanse?

Ubrzavanje sajta često može biti zahtevan posao za koji je potrebno detaljno planiranje, poznavanje različitih oblasti, posedovanje odgovarajućih reusursa, sa najvećim fokusom na testiranje i evaluaciju. Često se dešava da na ovom segmentu sarađuje više timova: web developera, sistem administratora, mrežnih stručnjaka i drugih profesionalaca.

U nastavku ćemo ćemo predstaviti ček listu stvari koje je potrebno proveriti pre puštanja sajta na globalnu mrežu:

Obezbedite kvalitetne servere

Brzina i odaziv servera su prvi parametar na koji treba da obratite pažnju pre pokretanja web sajta. Rešenje koje nudi najbolje performanse su CDN mreže koje se sastoje od servera na više lokacija. Najbliži server koji može da odgovori automatski se aktivira i isporučuje sadržaj posetiocu. Pored ovoga postoji još mnogo hosting rešenja koje nude sjajne performanse. Istražite, testirajte i odaberite ono što najviše odgovara potrebama vašeg web sajta.

Smanjite broj HTTP zahteva

Svaka skripta, stylesheet, slika.., predstavlja pojedinačne HTTP zahteve. Većina vremena učitavanja stranice se potroši na preuzimanje pojedinačnih komponenti, pa se u developmentu trebamo potruditi da ovaj broj svedemo na minimum. Sledeće 5 tačaka predstavljaju tehnike kako da smanjite broj HTTP zahteva:

Kombinujte CSS i JavaScript fajlove

Kombinovanjem više skripti ili stilova  možete značajno umanjiti broj HTTP zahteva.

CSS sprites

Tehnika koja omogućava da smanjimo broj image zahteva, kombinovanjem više slika u jednu i pozivanjem njihovih pozicija pomoću CSS-a.

Budite pažljivi sa iFrame elementima

iFrame omogućava prikazivanje novog HTML dokumenta u okviru glavnog elementa. Ovo znači da imamo nove HTTP zahteve koji treba da se izvrše. Frejmovi mogu biti veoma korisni elementi, ali treba nastojati da se njihov broj minimizuje i da elementi unutar njega budu maksimalno optimizovani.

Smanjite veličinu web stranica

Potrudite se da konačna veličina HTML fajla koji se učitava u browser-u bude što  manja. Pratite sledeće tehnike:

Optimizacija slika

Velike slike su elemenat na stranici koji može da zauzima najviše memorije (količine podataka). Pre pozivanja slika u kodu stranice uradite njihovu kompresiju. Postoji više različitih načina da ovo i uradite, a jedan od najbržih i najefikasnijih je upotreba Adobe Fireforks softvera. Grafički format koji je najpogodniji za web je JPEG  – nudi najbolji odnos kvaliteta i količine podataka koju zauzima. Ukoliko koristite Fireforks odaberite opciju kompresije JPG Better Quality.

Izbegavajte prazne image src elemente

Svaki prazan image element možete smatrati dodatnim nepotrebnim HTTP zahtevom.

Održite optimalan broj fotografija na stranici

Svaka fotografija je jedan HTTP zahtev. Potrudite se da sve web stranice imaju optimalan broj slika i da one budu pozvane na pravi način.

Odaberite odgovarajući format slika

JPEG se koristi za fotografije relanih boja, GIF za slike sa flat bojama i PNG format u situacijama kada je to neophodno.

Koristite slike sa manje boja

Slike će biti manje ukoliko koristite fotografije sa manje boja.

Nemojte skalirati slike

Nemojte koristiti pravila koja će uticati na promenu dimenzije slike i njeno skaliranje. Ukoliko koristite height i width atribute onda i stvarna dimenzija slike treba da se poklapa sa njima.

Podesite favicon

Browser-i uvek rade proveru favicon fajla, bilo da ste ga već podesili ili ga uopšte nemate. Kreirajte favicon koji će imati što manju veličinu i podesite opciju Set Expires header na period koj mislite da bi bio optimalan u skladu sa učestalošću ažuriranja vašeg web sajta.

Gzip kompresija

Veoma efektivan način da smanjite veličinu fajlova za do 70%. Više informacija o metodama Gzip kompresije možete pročitati u sekciji „Resursi“ na dnu ovoga posta.

Minimizacija fajlova

Kompresijom (minifikacijom) HTML, CSS i JavaScript fajlova uklanja se prazan prostor između delova koda na stranici i time smanjuje ukupna veličina koda stranice.

Postavite CSS na vrh

Postavljanjem CSS-a u head deo postižemo da se najpre učitavaju stilovi elemenata stranice što doprinosi većoj brzini učitavanja i boljem korisnickom iskustvu jer korisnici vide progres u učitavanju web stranice.

Postavite skripte na dno

Sve dok se preuzimaju skripte blokirana su sva ostala preuzimanja. Cilj postavljanja skripti na dno je da se sve ostale spoljne komponente učitaju pre nego što skripte budu učitane. U nekim situacijama neće biti moguće postaviti sve skripte na dno, npr. ukoliko od skripte zavisi učitavanje nekog dela stranice ili skripta treba da se učita pre učitavanja dokumenta (document.write funkcija).

Koristite eksterne JavaScript i CSS fajlove

Postavljanje skripti i CSS-a u eksterne fajlove omogućava da oni budu keširani od strane browser-a. Ukoliko koristite inline stilove oni se učitavaju svaki put kada se učita web stranica.

Uklonite HTML komentare iz koda

Iako su komentari korisni zbog lakšeg održavanja oni utiču na sporije učitavanje stranica.

Uklonite sve elemente koji nisu od vitalnog značaja

Ukoliko postoje elementi na stranici čiji je cilj dokazivanje vaših dizajnerskih sposobnosti, predlažemo da ih uklonite. Fokusirajte se na jednostavnost i što bolje korisničko iskustvo.

Omogućite keširanje sadržaja

Koristite opciju Expire header da bi definisali koliko dugo treba da se koristi određena komponenta u kešu. Posetioci koji se vraćaju na sajt će uživati u mnogo većoj brzini učitavanja.

Izbegavati ugneždene full page tabele

Tabele koje su ugneždene ili zauzimaju celu stranicu će zahtevati duže vremena za učitavanje.

Proverite ispravnost linkova

Neispravni linkovi mogu uticati na sporije učitavanje stranice. Ovde se isključivo misli na linkove ka slikama, CSS i JavaScript fajlovima. Neispravni linkovi u tekstu neće negativno uticati na brzinu učitavanja, ali svakako su loši za sajt.

Budite oprezni sa CSS izrazima

Ako koristite CSS izraze da dinamički definišete neke osobine stranice to može da uspori izvršavanje koda. Rešenje je upotreba one-time izraza.

Očistite kod

Kod treba da bude besprekoran, bez upotrebe suvišnih elemenata koji će usporiti stranicu. Takođe treba obratiti pažnju na efikasnost pisanja koda (naročito javaScript-a). Uklonite nepotrebne klase iz selektore iz CSS-a. Neke korisne alate možete pogledati u sekciji resursi.

Smanjite broj DNS lookups

Svako unikatno host ime na stranici zahteva DNS lockup, pa budite svesni broja različitih host imena u vašim skriptama, objektima, slikama i ostalim komponentama.

Izbegavati redirekcije

Redirekcije nisu nikako dobre za korisnike, jer će oni morati da čekaju da browser pronađe novu stranicu.

Koristite ETags

Neki serveri kao što je Apache imaju automatsku podršku za ETags koji olakšavaju keširanje, ukoliko ih pravilno koristite. Ako nisu pravilno konfigurisani mogu usporiti vaš sajt. ETags su metod koji koriste serveri i browser-i da bi odredili da li se komponenta u kešu browser-a poklapa sa stvarnom verzijom.

Definišite skup karaktera (character set)

Definisanje character set opcije u HTML dokumentima omogućava browser-ima da automatski započnu sa parsiranjem HTML-a i izvršavanjem skripti.

Upotreba icon fontova

Icon fontovi su ekstremno korisna opcija jer omogućavaju pozivanje različitih tipova vektorskih grafika na osnovu samo jednog fajla. Dobar primer je Font Awesome.

Optimizujte bazu podataka

Veliki broj sajtova koristi bazu podataka, a ako su u pitanju kompleksniji sajtovi, baza može značajno da utiče na performanse sajta. Rešenje za bolje performanse je dodavanje indeksa tabelama baze podataka. Na ovaj način se ubzava odaziv baze, što dovodi do veće brzine učitavanja sajta.

Alati za bolje performase

• Adobe Fireworks – softver za optimizovanje grafike za web.
• PageSpeed Insights (by Google) – ekstenzija za browser-e, dostupna za Chrome i Firefox koja omogućava da dobijete podatke o pefrormancama stranica vašeg sajta i sugestije kako ih unaprediti. Funkcioniše kao deo developer alata.
• YSlow – alat za analizu web stranica koji se zasnivana Yahoo pravilima za postizanje visokih preformansi web sajtova.
• JSLint – alat za proveru kvaliteta JavaScript koda koji će vas automatski obavestiti o delovima koda koji treba da unapredite. Jedna zanimljiva rečenica koja stoji na JSLint sajtu i koja ga dobro opisuje je „Warning: JSLint will hurt your feelings.“
• Favicon generator – alat za generisanje optimizovanih favicon fajlova koji se prikazuju adresnoj liniji adresne linije.
• Refresh-SF – Online JavaScript i CSS kompresor za minimizovanje veličine fajlova.
• PageSpeed Module – Google-ov open source modul za web servere koji automatski primenjuje preporučena pravila za web performanse web stranica i povezanih aktiva (CSS, JavaScript, images) bez toga da menjate vaš postojeći workflow i sadržaj.

Resursi

• Google for developers – resurs na kome možete da pronađete alate i upustva kako da učinite web bržim. Imate mogućnost da testirate performanse vašeg sajta i na osnovu toga dobijate ocenu optimizovanosti i za desktop i mobilnu verziju. Analiza pokazuje pravila koja ste ispoštovali i ona koja možete da unapredite.
• Yahoo developer network – lista saveta i preporuka od iskusnih developera kako da učinite web sajtove bržim. Listu čini 35 saveta podeljenih u 7 kategorija radi bolje preglednosti.
• Optimizing performance – deo Google-ovog „Web Fundametals“ upustva koji detaljno objašnjava sve važne segmente koji utiču na brzinu učitavanja i UX.
• CSS sprites – šta su CSS sprites, zašto treba da ih koristite i kako se koriste.
• Gzip kompresija – kako omogućiti Gzip kompresiju na različitim tipovima servera.
• Expire headers – podešavanje keširanja preko .htaccess fajla.
• Speeding Up Your Website’s Database – Smashing magazine članak o ubrzavanju baze podataka sajta.

Zaključak

Bilo da pravite novi sajt od početka ili je on već online, možete pratiti našu ček listu i iskoristiti alate i resurse da bi podigli performanse i brzinu učitavanja na visok nivo. Vreme koje uložite u unapređenje ovog segmenta u kombinaciji sa svim ostalim elementima web dizajn workflow-a će vam se višestruko isplatiti i doneti dobre online rezultate.