Brzina učitavanja stranice. 4 glavna faktora.

Oznake: SEO

Brzina učitavanja stranice. Kako povećati brzinu preuzimanja? Glavni problemi.

Preporučeno brzina učitavanja stranice Google - 2 sekunde. (a sad pogledaj svoju brzinu)

(Kako provjeriti brzinu učitavanja web stranice?Najlakši i najbrži način je otvaranje alati za razvojne programere CTRL+SHIFT+IZatim odaberite karticu "Mreža", a zatim osvježite stranicu, da biste vidjeli brzinu preuzimanja koja vam je potrebna za osvježavanje stranice, Osvježi bez predmemorije: trebate pritisnuti CTRL + F5 / CTRL + R. A ispod će biti brzina preuzimanja.)

Provjerite brzinu učitavanja stranice
pomoću Googleove usluge: PageSpeed Insights

Glavne točke koje najviše utječu:

Cache
css (stilovi)
JS (skripte)
Slike (njihova težina, veličina - da, točno veličina HxW, meta podaci - da, postoji takva stvar, ovo su njihovi podaci kao što su: datum, naslov, tema itd.)

Kako ne bih oslikavao puno nepotrebnih informacija o malim trenucima koji ne utječu posebno ili imaju zanemariv učinak, neću pisati o njima.

#1 GOTOVINA

caching (ilicache) je međuspremnik (mjesto) gdje se pohranjuju svi podaci. U našem slučaju, to su slike, kod, stilovi i još mnogo toga.

Najlakše ono što možete sami učiniti je omogućite keširanje na hostingu.
(Ako imate hosting Ukraine.com.ua, tada trebate ići na “Postavke web-mjesta” -> “Osnovne postavke” i tamo će se pojaviti stavka “Caching” i tamo odabirete potrebno vrijeme za koje će vaša stranica biti u predmemoriji. Preporučam da ga postavite na 2 tjedna - s ovim razdobljem predmemoriranja, uvid u brzinu google stranice dodaje puno bodova.)

druge metode vezane uz htaccess, oznake preglednika itd. mogu se naći na internetu za podosta članaka i ne vidim smisao u preslikavanju. O vrstama keširanja možete pročitati u članku na Habréu.

#2 CSS (stilovi)

CSS - (Cascading Style Sheets - kaskadni stilski listovi).
Što se može učiniti sa stilovima?
Dobro Prvo stisnuti ih.
Drugo smanjiti broj datoteka, tj. spojiti što je više moguće kako bi se smanjio broj poziva na poslužitelj.
Trećeugradite glavne stilove koji utječu na prikaz vidljivog dijela prvog zaslona izravno u , a ostale ostavite u datoteci.

Ostavljam i par korisnih linkova:

usluge kompresije css
kako komprimirati css datoteke

#3 JS (skripte)

Ovdje također imamo nekoliko načina za optimizaciju skripti.

Odgodi učitavanje skripte. Puhnite što je niže moguće, stavite iza ili čak niže ponekad pomaže, ponekad nije opcija. Ali točka broj 2 dolazi u pomoć.
ASYNC – asinkrono učitavanje skripte. To se radi pomoću parametra "async".
Ovdje ima više pojedinosti o async.
Malo više informacija o JS-u i njegovom utjecaju.
Manja točka.
JS se također može komprimirati. Također spojite u 1 datoteku.

#4 Slike

Uvijek možete učiniti tri stvari: gledati vatru, gledati vodu i optimizirati slike.

Tema je dosta opsežna, pa ću vam pokušati dati samo važne informacije.

Optimizirajte težinu.

Kako? Kroz program ili uslugu.

Program za masovni rad sa slikama Brza kamena slikas njim možete
Skupna promjena veličine slika. Kako i što već tu guglaju nije teško.
Preuzmite Faststone sliku.
Usluga za smanjenje veličine slika - Panda. Ili bolje rečeno TinyPNG & TinyJPG.
Glavna prednost ONLINE. Samo prenesite datoteke i vratite se u komprimiranoj verziji - kvaliteta uopće ne trpi (to je Magic).
Veze: tinypng.com & tinyjpg.com

Optimizirajte veličinu.

Veličina kao što sam gore napisao može se promijeniti pomoću programa brza kamena slika.
Veličina je visina x težina (visina po širini).

Primjer:

Veličina	Pikseli	veličina datoteke
100x100	10 000	39 KB
200x200	40 000	156 KB
300 x 300	90 000	351 KB
500x500	250 000	977 KB
800x800	640 000	2500 KB

(Ako želite saznati više o ovome, možete pročitati Googleovu pomoć na ovu temu. ČLANAK iz Googlea, ali upozoravam da je donekle štreberski)

Na primjer imamo 2 slike:
1) Težina 100 kb, veličina 500x500
2) Težina 100 kb, veličina 2500x2500
Čini se kakva je razlika, isto su teški, dakle, učitavanje bi ih trebalo biti jednako komplicirano ili jednostavno, ali nije ga bilo ako provjerite google page speed insgiht, i dalje će psovati na veću rezoluciju slika.

Rezimirajući: Veličina je bitna. Težina također. (ostalo nije toliko bitno, ali prema argumentima nekih stručnjaka i to ima utjecaja, sad govorim o metapodacima slike)

Nisam baš ništa napisao o meta podacima, pa, nema se što napisati ovdje...
Samo izbrišite sve meta podatke za sve slike, prema legendi, možete smanjiti veličinu za 2 puta. nedavno sam saznao (o učinku veličine datoteke, mislio sam da je prilično beznačajan).

Ukratko o izdanju: