Futtass sebességtesztet a weboldaladon, és az eredmények adnak egy pontszámot, egy ajánlási listát, és szinte semmi útmutatást arra, hol kezdd. Ha tudod, hogyan gyorsíts fel egy weboldalt, azt jelenti, hogy érted, mely fejlesztések a betöltési sorozat mely részein működnek, és melyek hozzák a legnagyobb eredményt a ráfordításhoz képest. Ez a cikk bemutatja a leghatékonyabb változtatásokat, milyen sorrendben érdemes őket végigvinni, és mire számíthat egy tipikus kisvállalkozási weboldal az egyes fejlesztésektől.
A weboldal sebességét nem egyetlen javítás növeli. Több független tényező együttműködésének eredménye: mennyire nehéz az oldal, milyen gyorsan válaszol a szerver, milyen hatékonyan kézbesítik az erőforrásokat, és mennyi munkát kell végeznie a böngészőnek ahhoz, hogy megjelenítse, amit a látogató lát. A legnagyobb tényezők kezelése hozza a leggyorsabb nyereséget. Arról, hogy mely betöltési mutatók számítanak és miért, az oldalbetöltési időről és annak méréséről szóló cikkben olvashatsz.
Melyek a lassú weboldalbetöltés leggyakoribb okai?
A változtatások előtt érdemes megérteni, hol vész el valójában az idő. A lassú weboldalakban szinte mindig megvan ezek közül egy vagy több.
Optimalizálatlan képek
- A képek a legtöbb oldalon a legnagyobb fájlok, és a lassú betöltés egyetlen leggyakoribb okai
- Egy öt tömörítetlen fényképet tartalmazó oldal tízszer-húszszor nehezebb lehet a szükségesnél
- A képek javítása jellemzően a legnagyobb sebességjavulást hozza az egyes változtatások közül
Nincs gyorsítótárazás
- Gyorsítótárazás nélkül minden látogatáshoz a szervernek újra kell építenie az oldalt, a böngészőnek pedig minden fájlt nulláról le kell töltenie
- A gyorsítótárazás lehetővé teszi, hogy a visszatérő látogatók az oldalakat tárolt másolatokból töltsék be ahelyett, hogy mindent újra letöltenének
Minifikálatlan kódfájlok
- A CSS- és JavaScript-fájlok gyakran tartalmaznak szóközöket, megjegyzéseket és formázást, amelyek a fejlesztőknek olvashatóvá teszik őket, de felesleges súlyt adnak a böngészőknek
- A minifikálás eltávolítja ezt a felesleges tartalmat, és csökkenti a fájlméretet, néha 30-50 százalékkal
Lassú szerverválasz
- Minden a szerverre vár. Ha a szervernek 800 ezredmásodpercnél tovább tart válaszolni, minden más mutató az elejétől késik
- A megosztott tárhelykörnyezetek és az optimalizálatlan adatbázisok a magas Time to First Byte leggyakoribb okai
Megjelenítést blokkoló erőforrások
- A dokumentum fejlécében betöltött szkriptek és stíluslapok szüneteltetik a böngészőt, mielőtt bármit megjeleníthetne
- Ha a nem kritikus szkriptek a fő tartalom után töltenek be, megszűnik ez a szűk keresztmetszet
Hogyan optimalizáld a képeket az oldalsúly csökkentéséhez?
A képoptimalizálás a legtöbb weboldalnál a legnagyobb hatású javítás, mert közvetlenül az oldal legnagyobb fájljait csökkenti. Három változtatás együtt hozza a legjelentősebb csökkenést a képfájlok méretében.
Válaszd a megfelelő formátumot
- A WebP kisebb fájlokat ad, mint a JPEG ugyanazon vizuális minőség mellett, és a PNG-hez hasonlóan támogatja az átlátszóságot
- Válts WebP-re minden fényképnél és általános grafikánál. PNG-t csak akkor használj, ha átlátszóság kell
Méretezd át feltöltés előtt
- Ha egy 4000 pixel széles képet töltesz fel, hogy 800 pixel szélesen jelenjen meg, minden látogatót arra kényszerítesz, hogy négyszer annyi adatot töltsön le, mint szükséges
- Méretezd át a képeket a maximális megjelenítési szélességükre, mielőtt feltöltöd őket
Tömörítsd megfelelő minőségi szintre
- A veszteséges formátumoknál a 75 és 85 közötti minőségi beállítás az eredetinél 60-80 százalékkal kisebb fájlokat ad, a legtöbb fényképnél látható minőségkülönbség nélkül
- A helyes formátum, a helyes méret és a megfelelő tömörítés kombinációja egy oldal képsúlyát 80-90 százalékkal csökkentheti
A fájlformátumokat, tömörítési típusokat, lusta betöltést és reszponzív képeket lefedő teljes útmutatóért olvasd el a képek gyorsabb betöltéshez való optimalizálásáról szóló cikket.
Hogyan csökkenti a gyorsítótárazás a betöltési időt?
A gyorsítótárazás az oldalerőforrások másolatait tárolja, így nem kell minden kérésnél letölteni vagy újra előállítani őket. Két típusa van, amelyek a kézbesítési lánc különböző pontjain működnek.
Böngésző-gyorsítótárazás
- A látogató böngészője az első látogatás után eltárolja a CSS-t, a JavaScriptet, a képeket és a betűtípusokat
- Az ismételt látogatások ezeket a fájlokat a helyi eszközről töltik be ahelyett, hogy újra letöltenék, ami drámaian csökkenti az oldalbetöltési időt a visszatérő látogatóknál
- A böngésző-gyorsítótárazást a szerveren beállított gyorsítótár-fejlécek vezérlik. A legtöbb modern tárhelyplatform ezeket automatikusan beállítja
Szerveroldali gyorsítótárazás
- A szerver az oldalak előre előállított változatait tárolja, így nem kell minden kérésnél nulláról újraépíteni őket
- Ez gyorsítja a Time to First Byte mutatót minden látogatónál, az első alkalommal érkezőknél is
- A szerveroldali gyorsítótárazás a dinamikus weboldalaknál a leghatásosabb, ahol az oldalakat adatbázis-lekérdezésekből állítják elő
A böngésző-gyorsítótárazás működésének és beállításának részletes magyarázatáért olvasd el a böngésző-gyorsítótárazásról és működéséről szóló cikket.
Mit tesz a minifikálás a betöltési sebességért?
A fejlesztők által írt CSS- és JavaScript-fájlok szóközöket, sortöréseket és megjegyzéseket tartalmaznak, amelyek megkönnyítik a kód olvasását és karbantartását. A böngészőknek ezek közül egyik sem kell. A minifikálás kiveszi őket, így kisebb fájlok keletkeznek, amelyek gyorsabban letöltődnek anélkül, hogy a működésük megváltozna.
- A CSS minifikálása jellemzően 20-30 százalékkal csökkenti a fájlméretet
- A JavaScript minifikálása 30-50 százalékkal csökkentheti a fájlméretet, a sok megjegyzést és szóközt tartalmazó nagy fájloknál még többel
- A minifikálás az egyik könnyebb nyereség, mert nem igényel változtatást abban, hogyan néz ki vagy működik az oldal, és gyakran bővítménnyel vagy platformbeállítással bekapcsolható
A minifikálás CSS-nél, JavaScriptnél és HTML-nél való működésének teljes áttekintéséhez olvasd el a minifikálásról és arról, hogyan segíti a weboldalad szóló cikket.
Hogyan csökkenti a CDN a látogatók betöltési idejét?
A tartalomkézbesítő hálózat csökkenti a fizikai távolságot a látogató és a fájljaidat kézbesítő szerver között. CDN nélkül minden látogató egyetlen helyen lévő egyetlen szerverhez csatlakozik. CDN-nel minden látogatót a hozzá legközelebbi szerverről szolgálnak ki.
- Az eredeti szerverhez közeli látogatóknál a CDN sebességjavulása mérsékelt
- Más országokban vagy régiókban lévő látogatóknál a CDN a Time to First Byte értékét több száz ezredmásodperccel csökkentheti
- A CDN-ek a nemzetközi közönségű vagy jelentős médiatartalmú weboldalaknál a leghatásosabbak
- Egyes tárhelyplatformok automatikusan tartalmaznak CDN-kézbesítést. Ahol benne van, nincs szükség további beállításra
A CDN-ek működésének és annak teljes magyarázatáért, kinek van szüksége rá, olvasd el a CDN-ről és arról, hogyan segíti a weboldalad szóló cikket.
Mi a lusta betöltés, és hogyan csökkenti a kezdeti betöltési időt?
A lusta betöltés késlelteti a hajtás alatti képek és más erőforrások letöltését, amíg a látogató a közelükbe nem görget. Ez csökkenti azt az adatmennyiséget, amelyet a böngészőnek le kell töltenie, mielőtt az oldal használhatóvá válna.
- Egy húsz képet tartalmazó oldalon a lusta betöltés azt jelenti, hogy a böngésző csak a három-négy olyan képet tölti le, amely az oldal első megnyitásakor látható a képernyőn
- A többi kép a görgetéssel töltődik be, így a letöltés az időben szétoszlik, nem előre terhelődik
- A lusta betöltés közvetlenül javítja a Time to Interactive mutatót, és észrevehető hatással lehet a Largest Contentful Paint mutatóra, ha a hajtás feletti tartalom nem képnehéz
- Ne alkalmazz lusta betöltést a hajtás feletti képeknél. Azoknak azonnal be kell töltődniük
A lusta betöltés működésének és megvalósításának teljes útmutatójáért olvasd el a lusta betöltésről és működéséről szóló cikket.
Hogyan lassítják az oldalt a megjelenítést blokkoló erőforrások?
Amikor a böngésző szkriptet vagy stíluslapot talál a dokumentum fejlécében, szünetelteti a megjelenítést, amíg az a fájl be nem töltődik. A látogató eközben semmit nem lát. Ezt hívják megjelenítést blokkoló erőforrásnak.
Hogyan csökkentsd a megjelenítés blokkolását
- Told át a nem kritikus JavaScriptet a dokumentum végére, vagy használd a
defervagyasyncattribútumot, hogy a szkriptek ne szüneteltessék a megjelenítést - Azonosítsd, mely CSS kell azonnal (a hajtás feletti stílusok), és melyik tölthető be később
- Szüntesd meg vagy cseréld le azokat a harmadik féltől származó szkripteket, amelyek nem nélkülözhetetlenek. A csevegő modulok, a közösségi média beágyazások és a követőszkriptek mind blokkolási időt adnak hozzá
Mi a helyzet a szerver válaszidejével?
Minden más fejlesztést korlátoz az, hogy mennyire gyorsan válaszol a szerver eleve. A lassú szerver késleltetést ad hozzá, mielőtt a böngésző bármilyen erőforrás betöltését elkezdhetné.
Mi befolyásolja a szerver válaszidejét
- A tárhely minősége: a megosztott tárhelykörnyezetek a CPU-t és a memóriát sok oldal között osztják el, ami kiszámíthatatlan válaszidőt okoz
- Az adatbázis teljesítménye: a lassú vagy optimalizálatlan adatbázis-lekérdezések késleltetik, hogy a szerver választ tudjon előállítani
- Szerveroldali gyorsítótárazás: gyorsítótárazás nélkül minden kérés az oldal teljes újraépítését váltja ki az adatbázisból
- A szerverhez mért földrajzi távolság: még CDN nélkül is a látogatótól távol lévő szerver késleltetést ad hozzá
A jó Time to First Byte 800 ezredmásodperc alatt van. Ha a TTFB következetesen efölött van, a tárhely javítása vagy a szerveroldali gyorsítótárazás bevezetése olyan nyereséget hoz, amelyet semmilyen frontend-optimalizálás nem tud megismételni.
Hol kezdd a weboldal felgyorsítását?
Ha először dolgozol sebességjavításokon, ez a sorrend hozza a leggyorsabb nyereséget a legkisebb erőfeszítéssel egy tipikus kisvállalkozási weboldalon.
Prioritási sorrend a legtöbb weboldalnál
- Először: optimalizáld a képeket. Ez az oldalsúly legnagyobb forrását kezeli, és gyakran az elkerülhető betöltési idő 60-80 százalékáért felel
- Másodszor: kapcsold be a gyorsítótárazást. A böngésző- és a szerveroldali gyorsítótárazás csökkenti a minden látogatásnál végzett munkát, különösen a visszatérő látogatóknál
- Harmadszor: minifikáld a CSS-t és a JavaScriptet. Kisebb ráfordítás, megbízható javulás a fájlátviteli időkben
- Negyedszer: adj hozzá CDN-t, ha a közönséged földrajzilag elosztott, vagy ha a médiakézbesítés jelentős része az oldaladnak
- Ötödször: kezeld a megjelenítést blokkoló erőforrásokat és a szerver válaszidejét, ha a fenti lépéseket végrehajtottad, és a pontszámok még mindig gyengék
A változtatások bármely csoportja után futtass sebességtesztet, hogy megmérd a javulást, mielőtt a következő területre lépnél. A sebességteszt-eredmények pontos értelmezéséhez olvasd el a weboldalad sebességének teszteléséről szóló cikket. Az ezekkel a fejlesztésekkel érintett konkrét mutatók áttekintéséhez olvasd el a Core Web Vitals mutatókról szóló cikket.
Hogyan csökkenti a WEMASY a weboldal betöltési idejét
A WEMASY weboldalépítője automatikusan kezel több leggyakoribb sebességjavítást. A képeket feltöltéskor tömöríti és WebP formátumra alakítja. A böngésző-gyorsítótár fejléceit alapból beállítja. A platform által kiszolgált CSS- és JavaScript-fájlok minifikáltak. A CDN-kézbesítés minden csomagban benne van, a statikus fájlokat az egyes látogatókhoz legközelebbi helyről szolgálja ki.
Az oldalsebesség-pontszámok és a Core Web Vitals adatok láthatók a WEMASY analitikai vezérlőpultján, oldalankénti javaslatokkal, amelyek jelzik a megmaradt problémákat. Így bármilyen tartalmi vagy dizájnbeli változtatás után figyelheted a javulást anélkül, hogy kézzel kellene külső teszteket futtatnod.
Nézd meg, mi tartozik hozzá, a WEMASY weboldalépítőnél, vagy nézd át a csomagokat az árak oldalon.
Gyakran ismételt kérdések
Mi a leggyorsabb módja egy weboldal felgyorsításának?
A képek optimalizálása hozza a legnagyobb sebességjavulást a legkisebb erőfeszítéssel a legtöbb weboldalnál. A tömörítetlen képek az oldalsúly egyetlen legnagyobb hozzájárulói, és a WebP formátumra váltás megfelelő tömörítéssel és helyes méretekkel 80-90 százalékkal csökkentheti a képfájlok méretét. A képek után a böngésző-gyorsítótárazás bekapcsolása és a CSS- és JavaScript-fájlok minifikálása a következő leghatásosabb fejlesztések. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon is beállíthatod.
Befolyásolja a weboldal sebessége a keresési helyezéseket?
Igen. A keresők a Core Web Vitals mutatókat, amelyek konkrét betöltési, interaktivitási és vizuális stabilitási mutatókat mérnek, rangsorolási jelekként használják. Azok az oldalak, amelyek jól pontoznak a Largest Contentful Paint, az Interaction to Next Paint és a Cumulative Layout Shift mutatón, rangsorolási előnyt élveznek a rosszul pontozókkal szemben, különösen, ha a versengő oldalak tartalmi minősége hasonló. A Core Web Vitals pontszámokat emelő sebességjavítások hozzájárulhatnak a jobb keresési láthatósághoz.
Mi számít jó weboldal-betöltési időnek?
A Core Web Vitals esetében az elsődleges cél a Largest Contentful Paint 2,5 másodperc alatt. A gyakorlatban az az oldal, amely mobilkapcsolaton három másodpercen belül teljesen interaktív, megfelel annak a küszöbnek, amely a látogatói élmény és a keresési helyezések szempontjából a legfontosabb. A mobilon öt másodperc alatti teljes oldalbetöltés észszerű mérce a legtöbb kisvállalkozási weboldalnál.
Honnan tudom, mi lassítja a weboldalam?
Futtass oldalsebesség-tesztet olyan eszközzel, amely a laboratóriumi adatok mellett terepi adatokat is mutat. Az összpontszám helyett a megbukottként jelzett konkrét mutatókat nézd. A 800 ezredmásodperc feletti TTFB szerverproblémákra utal. A gyenge LCP pontszám általában kép- vagy a megjelenítést blokkoló erőforrás-problémára utal. A magas Total Blocking Time JavaScript-végrehajtási problémákra utal. Mindegyik mutató a vizsgálat egy másik területét jelöli ki.
Befolyásolja a tárhely a weboldal sebességét?
Igen, jelentősen. A tárhely minősége befolyásolja a Time to First Byte mutatót, amely meghatározza, milyen gyorsan kezdheti el a böngésző bármilyen erőforrás betöltését. A megosztott tárhelykörnyezetek a feldolgozási teljesítményt sok oldal között osztják el, ami ingadozó válaszidőhöz vezet. A szerveroldali gyorsítótárazást és CDN-kézbesítést tartalmazó tárhely csökkenti a TTFB-t, és javítja a kézbesítési sebességet minden látogatónál, az oldalon végzett egyéb optimalizálásoktól függetlenül.
Felgyorsíthatom a weboldalam fejlesztő nélkül?
Igen, a legnagyobb különbséget hozó fejlesztések többségénél. A képoptimalizálás, a megfelelő fájlformátumok kiválasztása és az alt szöveg hozzáadása mind elvégezhető kód érintése nélkül. A böngésző-gyorsítótárazást és a minifikálást gyakran automatikusan kezeli a weboldalplatform, vagy beállításokkal bekapcsolható. Fejlesztőre jellemzően csak a haladó változtatásokhoz van szükség, például egyedi szerverkonfigurációhoz, a megjelenítést blokkoló erőforrások megszüntetéséhez kézzel kódolt oldalakon, vagy az adatbázis-lekérdezések optimalizálásához.