[es] - Želeli biste da vam se sajt brže učitava?

mluddn

Član broj: 120497
Poruke: 43
77.46.205.*

Profil

Želeli biste da vam se sajt brže učitava?

^{21.11.2007. u 14:56 - pre 200 meseci}

S obzirom da je pored svih ADSL, cable i wireless mreža i dalje najzastupljeniji modemski pristup internetu od strane korisnika, verovatno se neko od vas (kao i ja) pitao kako da se još više ubrza učitavanje sajta na korisnikov računar?

Navešću par primera koji su manje više banalni, ali pomažu da se smanji vreme učitavanja stranica u pregledač (browser) korisnika:

1. Izbaciti tabele - primeniti CSS

Browseri prvo učitaju podatke o tabeli (izgled) a zatim sadržaj, što znači da korisnik ne vidi sadržaj dok se tabela potpuno ne učita;

CSS zahteva manje koda za prikaz od tabele = smanjena veličina fajla za download

CSS omogućava da birate šta će se prvo pojaviti u browseru - omogućite korisniku da prvo vidi sadržaj, a veće slike i ostalo neka se polako učitavaju...

2. Kod dugmića za navigaciju umesto slika treba koristiti text+CSS = približno dobri rezultati

Pomoću CSS-a mogu da se naprave stvarno dobri navigacioni meniji.

Ukoliko je slika u pozadini BAŠ bitna, može da se stavi kao background, a text ostaje ispred - i odmah se učita

3. Ako želite koristiti slike za "ukras" najbolje je da se pozovu kao pozadina iz CSS fajla

Takođe, ovako može da se uštedi par bajta koda koji bi se inače potrošio na alt, width, height, border tagove...

Ako sliku morate ubaciti na stranicu, onda joj obavezno stavite width i height - tako će browser saznati kolika je slika, zauzeti joj mesto na strani, i nastaviti sa učitavanjem sadržaja, dok se slika polako učitava...

4. Izbrišite nepotrebni white space, t.j. nepotrebne razmake, prazne HTML tagove

5. Koristite relativne linkove (../nešto/slika.jpg umesto http://www.sajt.kom/nesto/slika.jpg) -

6. Izbrišite nepotrebne meta tagove (ako ih imate). Uglavnom se slabo pridaje važnost ovim tagovima, osim description i eventualno keywords. Ostalo (author, robots itd.) uglavnom nisu korisni i povećavaju broj karaktera u kodu.

7. Koristite eksterne skripte (da ih izbacite iz HTML i smanjite veličinu koda)

8. Smanjite CSS fajlove sa shorthand CSS. Npr, korisitite

Code:
padding: 2px 1px 3px 4px (po pravilu: top right bottom left)

umesto

Code:
padding-top:...
padding-right:...
padding-bottom...
......

ili

Code:
font: 10px bold Verdana

umesto font-size, font-family, font-weight...

I najvažnije: izbacite sve što vam STVARNO ne treba! (sami odlučite šta je to)

Postovaću ovde ako se setim ili saznam još nešto bitno (?), a takođe ohrabrujem ostale da urade isto...

_{[Ovu poruku je menjao mluddn dana 21.11.2007. u 16:14 GMT+1]}

_{[Ovu poruku je menjao mluddn dana 21.11.2007. u 16:15 GMT+1]}

Odgovor na temu

mluddn

Član broj: 120497
Poruke: 43
77.46.205.*

Profil

Re: Želeli biste da vam se sajt brže učitava?

^{21.11.2007. u 15:13 - pre 200 meseci}

Takođe, oko slika treba povesti računa:

Pokušajte da sliku što više smanjite (njen kvalitet) a da ne prelazi donju granicu upotrebljivosti i korisnosti... Većina programa za obradu slika ima opciju save for web ili slično, izbacivanje nepotrebnih boja...

JPG GIF ili PNG? Kada je potreban kvalitet i na prvom je mestu, onda definitivno velike JPG slike (mada sam u par slučajeva zadovoljio sebe i sa GIF kvalitetom!). GIF ima mogućnost transparencije, tako da i ovo treba uzeti u obzir i uštedeti na veličini i time ubrzati učitavanje sajta.

Postoje i mnogi online optimizatori slika (koristiti "big G") pomoću kojih možete uporediti svoju sliku u par različitih varijanti. Probajte! Nekada je ušteda na veličini (fajla, ne dimenzija slike) i do 70% a da se zahtevani kvalitet zadovolji.

PNG slike nemaju problema sa kompresijom (ukoliko vam je potrebno da recimo jednu istu sliku koristite par puta u različitim veličinama na istoj strani ili sajtu, možete sve preko jednog PNG-a)

Ako imate veliku sliku koja ima dosta jednobojnih delova - možete je iscepkati na više slika, a na jednobojnim delovima koristiti background color, i složiti da se dobije prvobitni zahtev.

Nijansirane pozadine se dobijaju tako što se slika napravi u (nekoliko)px X 1px i ponovi se horizontalno ili vertikalno. Takođe, može se napraviti mali prelaz pri vrhu sajta (slika npr 300px x 1px), postavi se repeat horizontaly a ostatak se popuni bojom najdonjeg piksela na slici.

Odgovor na temu

mluddn

Član broj: 120497
Poruke: 43
77.46.205.*

Profil

Re: Želeli biste da vam se sajt brže učitava?

^{21.11.2007. u 15:33 - pre 200 meseci}

Kao što pita toplim:

Citat:

Negde sam procitao da ako jednu sliku podelimo na vise delova i ako je zbir tih delova jednak ukupnoj velicini slike, slika ce se ipak pre ucitati u browser ako je iz vise delova . Ako pak sliku podelimo na previse delova, slika ce se sporije ucitati. Ako uzmemo u obzir da niko drugi ne pokusava toj slici da pristupi istog trenutka kad i mi, od cega zavisi broj delova jedne slike? Sliku sam ovde naveo kao primer. Da li postoji neka optimalna velicina faila koji se prenosi putem weba?
Sta je bolje?
1kb+1kb+1kb+1kb+1kb

2kb+2kb+1kb

5kb

Mislim da sve zavisi od konekcije korisnika koji pregleda sajt, od browsera, od servera... Mnogi tvrde da je deljenje slika rešenje za brzi sajt, a mnogi ipak tvrde da to usporava učitavanje zbog broja obraćanja serveru. Sasvim je sigurno da ima nečeg dobrog i nečeg lošeg u obe pretpostavke.

Ali bi bilo vrlo korisno da slike iscepkate planski kako bi pojedine delove obradili sa različitim stepenom kompresije / kvalitetom. Znači podelite sliku na neke segmente koji su na neki način ograničeni (deo gde je bitan kvalitet jer ima puno boja, deo gde nije toliko bitan kvalitet pa može da se koristi npr gif, deo gde je jedna boja konstantna), pa obradite slike svaku posebno. Ovo je način da veliku sliku svedete na manje od 100 kb. još kad ukomponujete CSS sa background divovima, background slike sa textom u HTML ispred...) onda je to prava stvar!

Odgovor na temu

dejangex
Ruma

Član broj: 47740
Poruke: 36
212.200.220.*

Profil

Re: Želeli biste da vam se sajt brže učitava?

^{23.11.2007. u 00:34 - pre 200 meseci}

Ako pravite pozadinu, sirina pozadinske slicice ne bi trebalo da bude 1px nego barem 10 jer ako korisnik ima rezoluciju 1024 slika ce morati da se ponovi oko 1000 puta horizontalno. To moze da uspori browser. Ako stavite 10px ili vise dobicete samo malo na velicini slicice ali se slika nece redjati previse puta.

Sto se tice optimizacije slika, koristiti photoshop, save for web. Imate opciju da vidite izlaznu sliku naspram originala. Mozete snimiti kao jpg, gif i png.
Jpg daje najbolje rezultate sa prelazima boja, nijansama, gradijentima, fotografijama
Gif i png vole blokove solidne boje, bez prelaza (najvise 256 boja)
Treba isprobati pa videti sta najvise odgovara, tj. koji format uzeti da kvalitet bude prihvatljiv a velicina fajla mala

Btw, dobra stvar kod jpg slika...U photoshopu pre nego sto snimite jpg za web imate opciju "progressive". To omogucava browseru da iz nekoliko puta ucita sliku, svaki put sve vise povecavajuci kvalitet. Do se slika ucitava iz vise puta, ostali elementi imaju priliku da se ucitaju

Ima jos stvari, ali sad ne mogu svega da se setim :D

Odgovor na temu