Hitrost nalaganja spletnega mesta. 4 glavni dejavniki.

Hitrost nalaganja spletnega mesta. Kako povečati hitrost prenosa? Glavne težave.

Priporočeno hitrost nalaganja spletnega mesta Google - 2 sekundi. (in zdaj poglej svojo hitrost)

(Kako preveriti hitrost nalaganja spletnega mesta?Najlažji in najhitrejši način je odpiranje orodja za razvijalce CTRL+SHIFT+INato izberite zavihek »Omrežje«, nato osvežite stran, da vidite hitrost prenosa, ki jo potrebujete za osvežitev strani, Osveži brez predpomnilnika: pritisnite CTRL + F5 / CTRL + R. In spodaj bo hitrost prenosa.)

Preverite hitrost nalaganja spletnega mesta
z uporabo Googlove storitve: PageSpeed ​​Insights

(infografika vzeta iz seoprofja ©2014)

Glavne točke, ki najbolj vplivajo:

1. predpomnilnik
2. css (slogi)
3. JS (skripte)
4. Slike (njihova teža, velikost - da, točno velikost VxŠ, metapodatki - da, obstaja nekaj takega, to so njihovi podatki, kot so: datum, naslov, tema itd.)

Da ne bi slikal veliko nepotrebnih informacij o majhnih trenutkih, ki ne vplivajo posebej ali imajo zanemarljiv učinek, o njih ne bom pisal.

#1 GOTOVINA

predpomnjenje (ozpredpomnilnik) je medpomnilnik (mesto), kjer so shranjeni vsi podatki. V našem primeru so to slike, koda, slogi in drugo.

Najlažji kar lahko narediš sam omogočite predpomnjenje na gostovanju.
(Če imate gostovanje Ukraine.com.ua, potem morate iti na "Nastavitve spletnega mesta" -> "Osnovne nastavitve" in tam bo element "Predpomnjenje" in tam izberete zahtevano količino časa, za katero bo vaše spletno mesto se shrani v predpomnilnik. Sam priporočam, da ga nastavite na 2 tedna – s tem obdobjem predpomnjenja Googlov vpogled v hitrost strani doda veliko točk.)

druge metode, povezane s htaccessom, oznakami brskalnika ipd., najdeš na internetu za kar nekaj člankov in ne vidim smisla v prebarvanju. O vrstah predpomnjenja si lahko preberete v članku na Habréju.

#2 CSS (slogi)

CSS - (Cascading Style Sheets - kaskadne slogovne liste).
Kaj je mogoče narediti s slogi?
no Prvič stisnite jih.
Drugič zmanjšati število datotek, tj. čim bolj združite, da zmanjšate število klicev na strežnik.
Tretjičvdelajte glavne sloge, ki vplivajo na prikaz vidnega dela prvega zaslona, ​​neposredno v , ostale pa pustite v datoteki.

Pustim tudi nekaj uporabnih povezav:

• storitve stiskanja css
• kako stisniti datoteke css

#3 JS (skripte)

Tukaj imamo tudi več načinov za optimizacijo skriptov.

1. Preložite nalaganje skripta. Napihnite ga čim nižje, ga postavite za ali celo nižje včasih pomaga, včasih ni možnost. Toda točka številka 2 priskoči na pomoč.
2. ASYNC – asinhrono nalaganje skripta. To se naredi s pomočjo parametra "async".

   Več podrobnosti o async je tukaj.
   Malo več informacij o JS in njegovem vplivu.

3. Manjša točka.
   JS je mogoče tudi stisniti. Združite tudi v 1 datoteko.

#4 Slike

Vedno lahko storite tri stvari: Poglejte ogenj, poglejte v vodo in optimizirajte slike.

Tematika je precej obsežna, zato vam bom poskušal podati le pomembne informacije.

Optimizirajte težo.

Kako? Preko programa ali storitve.

• Program za množično delo s slikami Fast Stone Imagez njim lahko
  Skupna sprememba velikosti slik. Kako in kaj tam že googlam, ni težko.
  Prenesite Faststone Image.
  
• Storitev za zmanjšanje velikosti slik - Panda. Ali bolje rečeno TinyPNG & TinyJPG.
  Glavna prednost ONLINE. Samo naložite datoteke in jih vrnite v stisnjeni različici - Kakovost sploh ne trpi (to je Magic).
  Povezave: tinypng.com & tinyjpg.com

Optimizirajte velikost.

Velikost, kot sem napisal zgoraj, lahko spremenite s programom hitra kamnita slika.
Velikost je višina x teža (višina po širini).

Primer:

(Če želite izvedeti več o tem, lahko preberete Googlovo pomoč na to temo. Članek iz Googla, vendar vas opozarjam, da je do neke mere piflarski)

Na primer imamo 2 sliki:
1) Teža 100 kb, velikost 500 x 500
2) Teža 100 kb, velikost 2500x2500
Zdi se, kakšna je razlika, tehtajo enako, zato bi moralo biti nalaganje enako zapleteno ali preprosto, vendar ga ni bilo, če preverite z google page speed insgiht, bo še vedno prisegalo na višjo ločljivost slika.

Povzetek: Velikost je pomembna. Tudi teža. (ostalo ni tako pomembno, a po trditvah nekaterih strokovnjakov ima tudi vpliv, zdaj govorim o slikovnih metapodatkih)

Pravzaprav nisem nič napisal o metapodatkih, no, tukaj ni kaj napisati ...
Samo počistite vse meta podatke za vse slike, v skladu z legendo lahko velikost zmanjšate za 2-krat. Pred kratkim sem izvedel (glede vpliva velikosti datoteke se mi je zdel precej nepomemben).

Na kratko o izdaji:

• najpogostejše težave pri nalaganju spletnega mesta
• možnosti za njihovo rešitev
• na kaj moraš biti pozoren, da bo vse v redu

Pojdimo na video:

P.S.
Če imate kakršna koli vprašanja ali se z nečim ne strinjate, napišite o tem v komentarjih.