Cikkek

Az oldal betöltési sebessége. 4 fő tényező.

Címkék: SEO

Az oldal betöltési sebessége. Hogyan lehet növelni a letöltési sebességet? Fő problémák.

Ajánlott a webhely betöltési sebessége Google - 2 másodperc. (és most nézd meg a sebességedet)

(Hogyan ellenőrizhető a webhely betöltési sebessége?A legegyszerűbb és leggyorsabb módja a nyitás fejlesztői eszközök CTRL+SHIFT+IEzután válassza ki a „Hálózat” lapot, majd frissítse az oldalt, a letöltési sebesség megtekintéséhez frissítenie kell az oldalt, Frissítés gyorsítótár nélkül: meg kell nyomnia a CTRL + F5 / CTRL + R billentyűket. És lent lesz a letöltési sebesség.)

Ellenőrizze a webhely betöltési sebességét
a Google szolgáltatásának használatával: PageSpeed ​​​​Insights

(az infografika a seoprofy ©2014-től származik)

A leginkább befolyásoló főbb pontok:

  1. Gyorsítótár
  2. css (stílusok)
  3. JS (forgatókönyvek)
  4. Képek (súlyuk, méretük - igen, pontosan a HxW méret, Meta adatok - igen, van ilyen, ez az információjuk, pl.: dátum, cím, téma stb.)

Annak érdekében, hogy ne festessek sok felesleges információt a nem különösebben befolyásoló, vagy elhanyagolható hatású apró momentumokról, nem írok róluk.

#1 KÉSZPÉNZ

gyorsítótárazás (vagygyorsítótár) egy puffer (egy hely), ahol bármilyen adatot tárolnak. Esetünkben ezek képek, kódok, stílusok és egyebek.

A legegyszerűbb amit te magad tehetsz meg engedélyezze a gyorsítótárazást a tárhelyen.
(Ha rendelkezik Ukraine.com.ua tárhellyel, akkor a „webhelybeállítások” -> „alapbeállítások” menüpontra kell lépnie, és ott lesz egy „Caching” elem, és ott kiválaszthatja a szükséges időtartamot, ameddig a webhely működni fog. Saját magamtól azt javaslom, hogy állítsam be 2 hétre – ezzel a gyorsítótárazási periódussal a google oldalsebesség insights sok pontot hozzáad.)

a htaccess-hez kapcsolódó egyéb módszerek, böngésző címkék stb., az interneten jó néhány cikknél megtalálható és nem látom értelmét az újrafestésnek. A gyorsítótárazás típusairól a Habréról szóló cikkben olvashat.

#2 CSS (stílusok)

CSS – (Cascading Style Sheets – lépcsőzetes stíluslapok).
Mit lehet kezdeni a stílusokkal?
Jól Először szorítsd össze őket.
Másodszor csökkentse a fájlok számát, pl. a lehető legnagyobb mértékben egyesítse a kiszolgálóhoz érkező hívások számának csökkentését.
Harmadszoraz első képernyő látható részének megjelenítését befolyásoló fő stílusokat közvetlenül a -ba ágyazzuk be, a többit pedig hagyjuk a fájlban.

Hagyok egy-két hasznos linket is:

  • css tömörítési szolgáltatások
  • hogyan lehet tömöríteni a css fájlokat

#3 JS (szkriptek)

Itt több módszerünk is van a szkriptek optimalizálására.

  1. A szkript betöltésének elhalasztása. Puffad a lehető legalacsonyabbra, tedd mögé vagy még lejjebb néha segít, néha nem opció. De a 2-es pont megsegít.
  2. ASYNC – aszinkron szkript betöltése. Ez az „async” paraméterrel történik

    Az aszinkronnal kapcsolatos további részletek itt találhatók.
    Még egy kis információ a JS-ről és hatásáról.

  3. Kisebb pont.
    A JS tömöríthető is. Szintén egyesítsd 1 fájlba.

#4 Képek

Mindig három dolgot tehet: nézze meg a tüzet, nézze meg a vizet, és optimalizálja a képeket.

A téma meglehetősen kiterjedt, ezért igyekszem csak fontos információkat közölni.

Optimalizálja a súlyt.

Hogyan? Programon vagy szolgáltatáson keresztül.

  • Program tömegmunkához képekkel Fast Stone Imagevele lehet
    Képek tömeges átméretezése. Hogyan és mit már google ott nem nehéz.
    Töltse le a Faststone képet.
  • Szolgáltatás a képek méretének csökkentésére - Panda. Vagy inkább TinyPNG és TinyJPG.
    Az ONLINE fő előnye. Csak töltse fel a fájlokat, és térjen vissza a tömörített verzióra - A minőség egyáltalán nem romlik (ez a Magic).
    Linkek: tinypng.com & tinyjpg.com

Méret optimalizálása.

A méret ahogy fentebb írtam a program segítségével módosítható gyors kőkép.
A méret magasság x súly (magasság szélesség szerint).

Példa:

A méretPixelekfájl méret
100x10010 00039 KB
200x20040 000156 KB
300 x 30090 000351 KB
500x500250 000977 KB
800x800640 0002500 KB

(Ha többet szeretne tudni erről, olvassa el a Google súgóját ebben a témában. CIKK a Google-tól, de figyelmeztetem, hogy bizonyos mértékig bunkó)

Például van 2 képünk:
1) Súly 100 kb, méret 500x500
2) Súly 100 kb, méret 2500x2500
Úgy tűnik, hogy mi a különbség, egyforma a súlyuk, ezért a betöltésük egyformán bonyolult vagy egyszerű legyen, de ez nem volt ott, ha a google oldalsebesség alapján leellenőrzi, akkor is nagyobb felbontásra esküszik kép.

Összegzés: A méret számít. Súly is. (a többi nem annyira fontos, de egyes szakértők érvelése szerint ennek is van hatása, most a képmetaadatokról beszélek)

Nem igazán írtam semmit a metaadatokról, nos, itt nincs mit írni ...
Csak törölje az összes kép metaadatát, a legenda szerint 2-szer csökkentheti a méretet. Nemrég tudtam meg (a fájlméret hatásáról szerintem elég jelentéktelen).

Röviden a megjelenésről:

  • leggyakoribb webhelybetöltési problémák
  • megoldási lehetőségek
  • mire kell odafigyelni, hogy minden rendben legyen

Menjünk a videóhoz:

P.S.
Ha bármilyen kérdése van, vagy nem ért egyet valamivel, írja meg a megjegyzésekben.