Vprašanje za pohitritev spletne strani

Pozdravljeni, z google aplikacijo mi napiše, da bi bilo potrebno združiti več slik v eno samo " The following images should be combined into as few images as possible using CSS sprites. " in jih brati s pomočjo css. Sedaj me pa zanima ali je velika razlika pri hitrosti, če se nalaga vsaka slikca posebaj ali pa če se naloži ena slika na enkrat. Upam da sem povedal dovolj natančno :). Prosil bi pa tudi, če mi lahko kdo pove kako lahko združim vse slike v eno.

Hvala

14 odgovorov

Odvisno od razbite celotne slike in njenih delov. Pri meni se je to precej poznalo ko sm združil v celoto tudi pri hitrosti nalaganja strani. Kako to naredis? Poiščeš slike, ker ih je verjetno več, zalavfaš photoshop in akcija. Saj ti bere potem iz enega soursa ne iz 5 ali 6. Dosegel sem pa točno 8 pik v + torej trenutno na 93 % :). Poleg tega optimiziraj vse slike z kakšnim od spletnih orodij, sam uporabljam tega http://tinypng.org/

1

Evo na hitro malo branja.

Neke hude pohitritve ponavadi ni. Gre namreč za ponavadi že tako majhne datoteke.

1

sej ni point v prisparanju tisitih par kb ampak da je cimmanj requestov na server... ce imas nekaj tisoc obiskovalcev se to posteno pozna...

3

Ja, to je res. Ampak vprašanje je bilo koliko se pozna pri hitrosti.

1

Matjaž:
Evo na hitro malo branja.

Neke hude pohitritve ponavadi ni. Gre namreč za ponavadi že tako majhne datoteke.

Odvisno od velikosti slik, če gre za večje npr ozadje in je razbito na 3 dele ali podobno se zelo pozna na hitrosti, če so kakšne manjše se niti ne splača oz niti ne vpliva na hitrost strani. Preverjeno!

1

Matjaž:
Ja, to je res. Ampak vprašanje je bilo koliko se pozna pri hitrosti.

veliko... hitrost se ne gleda samo v velikost... browserji namrec delajo tako, da konkurencno pibirajo vec stvari hkrati (vec slik, cssjev, javascript, etc)...vsak request na server, posebej ce je ta obremenjen nekaj casa traja... manj requestov, hitrejse nalaganje... ce imas recimo 20 requestov za datoteke po 3kb ... je to precej vec kot 60kb, ker ob vsakem requestu server poslje se cel kup headerjev nazaj vkljucno s cookiji... in se bo to velik pocasnej nalozilo kot 1 request recimo z 70kb ali celo 80kb... verjemi

4

Poleg tega moraš računati še čas, ki je potreben za request, če jih je veliko to upočasni nalaganje strani. Request neke datoteke je običajno sestavljen iz:

  • dns poizvedve
  • povezovanje
  • pošiljanje podatkov
  • čakanje na odgovor
  • prejemanje

Kar skupaj potem nanese.

PS: Brskalnik ima tudi omejeno št. sočasnih requestov, strežnik pa običajno servira veliko klientom, tako da zahtev ne izvršuje instantno.

4

Aha, najlepša hvala vsem za obrazložitev :). Potem se bom pa kar spravil na delo.

1

Se kar konkretno pozna v vseh primerih.

Recimo da imaš za naložit 20 datotek (html, css, js, slike), ima brskalnik določeno maksimalno število hkratnih zahtevkov. Recimo, da naredi 4 hkrati moraš v tem primeru kar malo počakat da vse naloži vse. Tako lahko recimo neko slikco z zamikom vidiš. Zato se kar splača združit css-e, js-je in tudi slike.

Prav tako brskalnik shrani sliko in jo ob naslednjem req. ne zahteva še enkrat in jo prikaže iz cacha. V primeru da uporabljaš sprites, tudi če ne uporabiš vseh delov slikc na trenutno strani, boš na naslednji strani že imel na voljo to slikco.

Nekako imajo sprites-i kar veliko plusov tako za uporabnika kot za sam strežnik.

Pozdravljen,

lahko si tudi pomagaš z tole aplikacijo http://spriteme.org/. Dodaš si na zaznamek, greš na svojo spletno stran, klikneš na ta app in ti bo združilo vse slike iz tvoje strani.

To sliko si seveda potem shraniš in dodaš na server. Preostane ti še spreminjanje poti slik v css-ju in izbris originalnih. Kako vpišeš pot si pa poglej tukaj http://www.w3schools.com/css/cssimagesprites.asp

Lep dan še naprej.

2