Weboldal gyorsítás – Oldalsebesség optimalizálása WordPresshez: Útmutató a jobb weboldal teljesítményhez
Weboldal gyorsítás – Oldalsebesség optimalizálása WordPresshez: Útmutató a jobb weboldal teljesítményhez
Weboldaladon lévő szövegeid minden bekezdése fenomenális tartalmat és lenyűgöző illusztrációkat tartalmaz. Mindezek ellenére a felhasználók elhagyják weboldalad, mi olyan kiábrándító benne, mi történhetett?
Megnézted, mennyi ideig tart a weboldalad betöltése? Mert lehet, hogy ez a probléma lényege.
Évről évre (ha nem napról napra) elveszítjük a koncentrációs képességünket. Régen (a 2000-es évek elején) 12 másodpercig figyeltünk egyetlen témára. Mostanra már 7 másodpercre csökkent, és nagy valószínűséggel nem emelkedik vissza, hanem lejjebb fog esni.
Ez weboldaltulajdonosként azt jelenti, hogy gyorsabban betöltődő honlapra van szükséged. A felhasználók valószínűleg elveszítik érdeklődésüket egy oldal meglátogatása iránt, ha túl sok időt vesz igénybe annak betöltése. És itt a túl sok ezredmásodpercben mérhető.
2018-ban a Google közzétette kutatásai eredményét mobiloldal sebességéről. Felmérték a felhasználói viselkedést és az elégedettség szintjét az oldalakkal való interakció során. A Google kutatása szerint a felhasználók 90%-kal nagyobb valószínűséggel hagyják el a weboldalt, ha az 5 másodpercnél tovább töltődik.
De még ne vonj le elhamarkodott következtetéseket! Természetesen ez nem jelenti azt, hogy a kevesebb médiafájl megmenti a helyzetet. Valójában a színesebb látványvilág javítja a felhasználói élményt, és segít az oldalon tartani a felhasználókat. Ha úgy érzed, hogy ellentmondás van, az nem teljesen igaz.
Rendben, menjünk lépésről lépésre.
Mi lassítja a weboldalt
Rendben, mi lehet lassú? Mi lassírhatja oldalam?
Ha nem tudod, milyen sebességérték a jó referencia, itt van egy kis alapinformáció róla.
Ha ideálisról beszélünk, akkor a 0,1 másodperces válasz a cél. Ezen az időszakon belül a felhasználók azonnali választ kapnak. Sajnos ma már egy statikus weboldal esetében is irreális, nem beszélve a dinamikusokról. Tudjuk, hogy az emberek több mint fele elhagyja az oldalt, ha az nem töltődik be 3 másodpercen belül. Ezt figyelembe véve azt mondjuk, hogy 2-re vagy kevesebbre kell törekedned, minél gyorsabb, annál jobb.
Ha lehetetlennek tűnik számodra, mindjárt elmagyarázzuk miért nem lesz az. Kezdésként tekintsük át, mi rejlik a felszínen. Íme egy lista azokról a dolgokról, amelyek lassítják a folyamatot:
Nagy fileok
Nyilvánvaló, hogy a sok fájl, plugin, widget és miegymás hosszabb betöltést eredményez. A felfújt kódszerkezetek sem jók (Megjegyzés: csak akkor szerkeszd manuálisan a kódot, ha tisztában vagy azzal, hogy mit csinálsz!).
Szerver csatlakozás és hardver kapacitás
Az egész weboldal egy szerveren található. Ez egy tárolóegység, és mint minden tárolónak, megvan a maga teherbíró képessége. Minél nagyobb a sávszélessége, annál több adatot lehet átvinni egy műveletenként. Ez a nagyobb sebesség és a jobb teljesítmény egyik kulcsa. A régi vagy nem rendszeresen frissített hardver viszont lefelé húzza a weboldal teljesítményét.
Elavult elemek
Néha nem is olyan hasznos, ami hatalmas tárhelyet foglal el. Az elavult fájlok és tartalmak növelik a betöltési folyamatra nehezedő nyomást.
Gondolkozz el, és nézd meg, hogy található-e ilyen problémák weboldaladon, futtass egy tesztet is.
A teljesítmény mérése
Ha úgy gondolod, hogy nincs probléma a weboldal betöltési sebességével, akkoris javasolt a teszt lefuttatása.
Ne feledd, hogy az oldalsebességgel kapcsolatos tapasztalataid eltérhetnek (és valószínűleg eltérnek) a felhasználók tapasztalataitól. Mivel valószínűleg gyakran töltöd be honlapod, így már a gyorsítótáradban kell lennie. Még az első látogatónak még nem lesz gyorsítótárazva. Ezért ragaszkodunk ahhoz, hogy használj oldalsebesség-mérő eszközöket.
Az olyan böngészők, mint a Chrome vagy a Firefox, beépített fejlesztői eszközök konzolt használnak. Sok hasznos információt mutathat meg, beleértve az oldalsebesség teljesítményét. A DevTools rendelkezik a Hálózat lappal, ott találsz egy grafikát, amely megmutatja, hogy mit tölt be az oldal és mennyi ideig.
Ha rámutatsz egy adott elemre, megjelenik egy felugró ablak a bejelölt fő paraméterek részletes leírásával.
A grafikon segít azonosítani, mi befolyásolja leginkább az oldal sebességét.
Természetesen nem ez az egyetlen eszköz erre a célra. Sok cég ingyenes sebességellenőrző eszközöket biztosít.
Ezek az eszközök elemzik a weboldal paramétereit, és segítenek meghatározni a fejlesztési referenciaértékeket. Közülük a legjobbak nem csak a pontszámot mutathatják meg. Részletesen lebontják ezeket a paramétereket, és még tippeket is javasolnak a javításhoz. Így konkrét számokat láthatsz ezáltal sokkal kézzelfoghatóbbá téve.
Első ránézésre még bonyolultnak találhatod.
Cumulative layout shift a felhasználó által látott elrendezés váratlan változásainak mérése. Minél alacsonyabb, annál jobb.
Speed index azt jelzi, hogy mennyi idő telik el, amíg egy oldal láthatóan megjelenik.
First contentful paint az az idő, amely alatt a weboldal megjeleníti a tartalom első részét.
Largest contentful paint szintén azt mutatja, hogy mennyi ideig tart a legnagyobb tartalomelem megjelenítése.
Time to interactive leméri, hogy mennyi időbe telik, amíg egy oldal interaktívvá válik.
Total blocking time azt jelenti, hogy az oldal mennyi ideig nem reagál semmilyen felhasználói bevitelre.
Ez csak néhány elemző adat a legszélesebb körben használtak közül, de ennél még több is van. Tartsd szem előtt azt is, hogy az oldalsebesség-mérő eszközök eltérő eredményeket adhatnak, mivel különböző mutatókon alapulnak. A kapott pontszám relatív, és nem mindig mutatja a teljes képet. Semmi értelme az egyik pontszámot a másikkal összehasonlítani. Ha össze szeretnéd hasonlítani az eredményeket, győződj meg arról, hogy ugyanazt használod, mint korábban.
A legjobb gyakorlat azonban az, ha különböző eszközökkel és több helyről méred fel az oldal sebességét. GTMetrix például ezt teszi. Van egy pár ingyenes és prémium helyszínük:
Weboldal gyorsítás
Elérkeztünk a legizgalmasabb részhez. Miután azonosítottad a problémát, ideje megszüntetni.
Szerezz kiváló tárhelyet
Egy jó tárhely többet jelent, mint gondolnád. A szolgáltató által használt szerverek drámaian befolyásolhatják az oldal sebességét, ezért érdemes jól átgondolni melyik tárhely szolgáltatóra bízzuk weboldalunkat. Egy kis megtakarított pénz az elején a későbbiekben sokba kerülhet. A túl olcsó tárhelyen néha több weboldalt tárolnak, mint amennyit el tudna bírni a szerverük. Így a többiekkel összezsúfolva együtt leszel egy lassú szerveren, egy lassú honlappal.
Bizonyosodj meg arról, hogy weboldalad HTTPS-t használ
Ez nem egy egyszerű lehetőség, de ma a HTTPS-weboldalak gyorsabban töltődnek be, mint a HTTP-verzióik. Még a sebességoptimalizálástól eltekintve is kulcsfontosságú, hogy legyen HTTPS protokoll weboldaladon.
CDN használata
A CDN (tartalomelosztó rendszer) a világ különböző pontjain található szerverek halmaza. A statikus fájlok, például képek, JavaScript és CSS másolatait tárolják.
Mivel a CDN több helyen tárolja a tartalmat, a felhasználó, amikor hozzáfér a honlapodhoz, a legközelebbi szerverről tölti be azokat. Használatukkal szép sebességnövekedést érhetsz el weboldalad számára.
Ez nem a Te tárhelyed, vagy nem helyettesítheti azt. Ez a gyors és megbízható tárhely kiegészítése lehet, amely segít a jobb teljesítményben.
Szerezd be a legújabb PHP verziót
Ez egyszerű: maradj naprakész, végezd el wordpress weboldalad frissítéseit. A 7-es verzió megjelenésével például a PHP kétszer olyan gyors lett, mint korábban.
Távolítsd el a felesleget
Szabadulj meg azoktól a dolgoktól, amelyekre nincs szükséged. Ezek lehetnek beépülő modulok is (a népszerűek általában túl sokat foglalnak). A honlapodon végzett munka során előfordulhat, hogy sok belőlük halmozódott fel. Figyelj arra, hogy csak azokat tartsd meg, amelyeket használsz, a többit pedig töröld.
Egy másik probléma, hogy a bővítmények törléskor nyomokat hagynak maguk után. Hosszú táblázatok vannak az adatbázisodban, pedig már régen eltávolítottad a káoszért felelős plugint.
Amit megtehetsz, az az, hogy ezeket a táblákat kézzel töröld a phpMyAdminban; van azonban egy kényelmesebb módja. Telepítheted az Advanced Database Cleaner plugint (igen, ironikus, de ez hasznos). Felismeri az adatbázisban maradt összes árva táblát. Ez egy prémium bővítmény, de jól végzi a dolgát.
A probléma néha a témában (sablon) rejtőzik. Némelyikük kódolása nem olyan karcsú és könnyű. Ha weboldalad nem teljesít megfelelően a sebesség szempontjából, ennek oka lehet a használt téma is. Kapcsold ki azokat a funkciókat, amelyekre nincs szükséged, vagy válassz egy másik témát, és ellenőrizd, hogyan mennek majd a dolgok.
Tárold gyorsítótárban a tartalmad
A honlapokat nem kell minden alkalommal újra betölteni, amikor a felhasználó visszalátogat hozzánk. Hogy van ez így?
Erre való a gyorsítótár. Tárold weboldalad utoljára betöltött verzióját, és megjelenítheted, amikor a felhasználó újra kéri ezt az URL-t. Más szóval, a felhasználók megnyitják a weboldal másolatát, ahelyett, hogy újabb kéréseket és válaszokat kezdeményeznének.
A gyorsítótárazott verzió tárolási ideje a konfigurálástól függően változhat. Ehhez is vannak pluginok. Például a W3 Total Cache jelentős javulást hozhat honlapod teljesítményében. (Még egy útmutatót is ad, hogy mit, miért és hogyan kell csinálni.) A trükkös rész az, hogy ha weboldalad rendkívül dinamikus, a gyorsítótár hosszú távú tárolása haszontalanná, sőt potenciálisan félrevezetővé válik. Tehát bölcsen használd ezt a technikát.
Csökkentsd az átirányításokat
Az átirányítások közvetlenül befolyásolják az oldal sebességét. Természetesen a honlapodon lesznek átirányítások, és ezek önmagukban nem rosszak, de időnként ellenőrizd őket, némelyikük teljesen elavulttá válhat.
Ha egy link átirányítási láncot halmoz fel, az oldalnak minden betöltésekor végig kell mennie rajta. Olyan ez, mint egy teher, amelyet le kell rázni weboldalad válláról.
Gzip tömörítés
Ez a tömörítési módszer közvetlenül érinti a „First contentful pain”-t, vagyis azt az időt, amíg a weboldal megjeleníti az első tartalmat. Ez egy olyan algoritmus, amely csökkenti a CSS-, HTML- és JavaScript-fájlok méretét.
A legszélesebb körben használt böngészők ma már alapértelmezés szerint implementálják a GZIP-et, így előfordulhat, hogy nincs is szükség további telepítésre.
A W3 Total Cache is ezt a technikát használja. Miután telepítetted a bővítményt, megjelenik a Teljesítmény menü az irányítópulton. Ott a többi opció mellett a Minify is látható: ott futtathatod az algoritmust.
MEGJEGYZÉS: jobb egyesével kicsinyíteni a fájlokat, és minden forduló után ellenőrizni a weboldalt. Így, ha bármi elromlik, gyorsan megtalálhatod és megoldhatod a problémát.
A deflációs tömörítés csak a szöveges fájloknál működik jól, mivel a képek belsőleg már használják ezt a fajta tömörítést. Ennek akár fordított hatása is lehet rájuk, és ahelyett, hogy kicsinyednének, puffadnak.
Optimalizáld látványvilágod
Ahogy a Google 2018-as kutatása kimutatta, az interneten minden negyedik oldal több mint egy 4 Mb-nál nagyobb volt. Ez sokkal több, mint kellene. Ennek egyik lehetséges oka a képek lehetnek.
Sok, az interneten talált kép nagyobb a szükségesnél. A tényleges méretre (ahogyan látod) és a fájlméretre (bájtban mérve) egyaránt vonatkozik. A felhasználók túlnyomó többsége ma már okostelefonjáról internetezik, ami azt jelenti, hogy a képek viszonylag kicsinek tűnnek számukra. A legtöbb esetben könnyedén tömörítheted a képeket anélkül, hogy jelentős részleteket veszítene.
Ökölszabály, hogy mielőtt képeket teszel fel webhelyedre, azokat megfelelő méretre kell vágnod, és a megfelelő szoftverrel tömörítened kell. Az ismert optimalizálók (például a TinyPNG és ImageOptim) az összes szükséges algoritmust lefuttatják, és ennek eredményeként ugyanolyan kinézetű, de sokkal kisebb méretű képeket kapunk.
Azonban ne ess neki túl keményen a médiafájloknak, tartsd ésszerű szinten minőségüket. A sebesség javítása a látvány árán nem a probléma megoldásának módja.
Közvetlen feltöltés helyett beágyazás
A WordPress beágyazási blokkok nem hiábavalóak. Ha weboldaladon vannak videók, amelyek általában jóval nagyobbak, mint az oldal többi része, tedd közzé őket a beágyazás funkcióval. Így megtakaríthatsz némi sávszélességet ezt a videótárhelyre bízva.
Bontsd fel a megjegyzés részt oldalakra
Ez eléggé magától értetődő. Ha egy igazán interaktív, sok megjegyzést tartalmazó weboldal boldog tulajdonosa vagy, ne jelenítsd meg őket együtt. Egy adott esettől függően jó ötlet lehet 20, 15 vagy akár 10 darabos készletekre osztani.
Még mindig lassú
Bizonyos esetekben egyszerűen nem lehet tömöríteni és csökkenteni többet. Előfordulhat, hogy a képek romlottnak tűnnek, vagy az oldalaidon lévő vizuális effektusok egyszerűen nem engedik, hogy egy bizonyos sebességnél magasabbra lépj. Sőt, a weboldaladnak talán az a lényege, hogy valamilyen nehéz adatot dolgozzon fel, ami nem túl gyors oldalbetöltést eredményez. Ilyenkor nincs mit tenni a teljesítmény javítása érdekében?
Hát persze, hogy van!
Ha az összes problémát megoldottad, amelyekről itt beszéltünk, de még mindig nem tudtad elérni a kívánt két másodperc alatti betöltési időt, akkor több trükköt is kipróbálhatsz, amelyek sokat segítenek.
Lazy loading
Ez a vicces név (lazy loading, talán lusta betöltésnek tudnánk fordítani) egy oldalbetöltés-optimalizálási technikára utal. Ennek a technikának a segítségével menet közben tölti be az oldal az elemeket. Jelentősen eltér az egyszerű betöltési folyamattól, a tartalom nem jelenik meg egyszerre, csak az éppen látható rész. Ez így egy igazi időmegtakarítás.
Számos WordPress bővítmény létezik az oldal betöltési sebességének javítására. A legjobbak közül néhány A3 LazyLoad, Lazy Load for Videos, Ajax Load More erősen interaktív oldalakhoz megtalálhatod a neked legmegfelelőbbet.
Százalékos elkészültség jelző megjelenítése
Ha weboldalad olyasmit hajt végre, ami nem fér bele a normál figyelemkörbe, jelenítsd meg az előrehaladást. Így mondd el látogatóidnak, hogy az oldal nem fagyott le vagy nem romlott el. A kevesebb zavart okozó tényező magasabb elégedettségi arányt jelent.
Kutatásokkal bizonyított tény, hogy a felhasználók szívesebben nézik, milyen közel van a betöltési folyamat a végéhez, mintha csak az üres weboldalt néznék Legyen szó folyamatjelző sávról vagy bármilyen más jelzőről, amely a hátralévő időt vagy az elkészült százalékot mutatja, minden hosszadalmas folyamat esetén meg kell jeleníteni.
Animáld a folyamatot
Tegyük fel, hogy van egy galériád, amely egyes árusított árukat mutat be. Gyakran frissül, így és a képeket (vagy videókat) nem lehet sokáig tárolni a böngésző gyorsítótárában. A tartalom betöltésekor a felhasználók unatkoznak és ingerültek.
Mit tehetsz ellene?
A válasz: szórakoztasd őket. Emlékszel, hogy a Google-ban van ez az aranyos pixel dinoszaurusz játék, amellyel akkor is játszhatsz, amikor a kapcsolat megszakad? Ez egy tökéletes példa arra, hogy látogatóid végig lefoglald. Természetesen nem javasoljuk Sega emulátor vagy bármi más beállítását, de gondolj az általános elképzelésre.
Nem kell feltétlenül bevonnod a felhasználókat semmibe. Próbáld élénkebbé tenni számukra a várakozást. Például a médiafájl betöltése előtt mutass könnyű vizuális effektust. A képfoltoknak lehet olyan háttere, amely időközben fokozatosan megváltoztatja a színét, bármilyen más észrevehető (de nem feltűnő) mozgás történhet. A látogatóknak meg kell érteniük, hogy a tartalom hamarosan megjelenik.
Kövesd nyomon
Nem győzzük eléggé hangsúlyozni, mennyire elengedhetetlen az oldalsebesség rendszeres ellenőrzése! Figyelj arra, hogy több helyről teszteld weboldalad, ellenőrizd a lehető legtöbb paramétert, és próbálj meg mindent a szükséges minimum szintjén tartani. Mindaddig, amíg tisztában vagy azzal, hogy honlapod mit csinál és hogyan viselkedik, jónak kell lennie.
Weboldal gyorsítás – Oldalsebesség optimalizálása WordPresshez: Útmutató a jobb weboldal teljesítményhez
Weboldaladon lévő szövegeid minden bekezdése fenomenális tartalmat és lenyűgöző illusztrációkat tartalmaz. Mindezek ellenére a felhasználók elhagyják weboldalad, mi olyan kiábrándító benne, mi történhetett?
Megnézted, mennyi ideig tart a weboldalad betöltése? Mert lehet, hogy ez a probléma lényege.
Évről évre (ha nem napról napra) elveszítjük a koncentrációs képességünket. Régen (a 2000-es évek elején) 12 másodpercig figyeltünk egyetlen témára. Mostanra már 7 másodpercre csökkent, és nagy valószínűséggel nem emelkedik vissza, hanem lejjebb fog esni.
Ez weboldaltulajdonosként azt jelenti, hogy gyorsabban betöltődő honlapra van szükséged. A felhasználók valószínűleg elveszítik érdeklődésüket egy oldal meglátogatása iránt, ha túl sok időt vesz igénybe annak betöltése. És itt a túl sok ezredmásodpercben mérhető.
2018-ban a Google közzétette kutatásai eredményét mobiloldal sebességéről. Felmérték a felhasználói viselkedést és az elégedettség szintjét az oldalakkal való interakció során. A Google kutatása szerint a felhasználók 90%-kal nagyobb valószínűséggel hagyják el a weboldalt, ha az 5 másodpercnél tovább töltődik.
De még ne vonj le elhamarkodott következtetéseket! Természetesen ez nem jelenti azt, hogy a kevesebb médiafájl megmenti a helyzetet. Valójában a színesebb látványvilág javítja a felhasználói élményt, és segít az oldalon tartani a felhasználókat. Ha úgy érzed, hogy ellentmondás van, az nem teljesen igaz.
Rendben, menjünk lépésről lépésre.
Mi lassítja a weboldalt
Rendben, mi lehet lassú? Mi lassírhatja oldalam?
Ha nem tudod, milyen sebességérték a jó referencia, itt van egy kis alapinformáció róla.
Ha ideálisról beszélünk, akkor a 0,1 másodperces válasz a cél. Ezen az időszakon belül a felhasználók azonnali választ kapnak. Sajnos ma már egy statikus weboldal esetében is irreális, nem beszélve a dinamikusokról. Tudjuk, hogy az emberek több mint fele elhagyja az oldalt, ha az nem töltődik be 3 másodpercen belül. Ezt figyelembe véve azt mondjuk, hogy 2-re vagy kevesebbre kell törekedned, minél gyorsabb, annál jobb.
Ha lehetetlennek tűnik számodra, mindjárt elmagyarázzuk miért nem lesz az.
Kezdésként tekintsük át, mi rejlik a felszínen. Íme egy lista azokról a dolgokról, amelyek lassítják a folyamatot:
Nagy fileok
Nyilvánvaló, hogy a sok fájl, plugin, widget és miegymás hosszabb betöltést eredményez. A felfújt kódszerkezetek sem jók (Megjegyzés: csak akkor szerkeszd manuálisan a kódot, ha tisztában vagy azzal, hogy mit csinálsz!).
Szerver csatlakozás és hardver kapacitás
Az egész weboldal egy szerveren található. Ez egy tárolóegység, és mint minden tárolónak, megvan a maga teherbíró képessége. Minél nagyobb a sávszélessége, annál több adatot lehet átvinni egy műveletenként. Ez a nagyobb sebesség és a jobb teljesítmény egyik kulcsa. A régi vagy nem rendszeresen frissített hardver viszont lefelé húzza a weboldal teljesítményét.
Elavult elemek
Néha nem is olyan hasznos, ami hatalmas tárhelyet foglal el. Az elavult fájlok és tartalmak növelik a betöltési folyamatra nehezedő nyomást.
Gondolkozz el, és nézd meg, hogy található-e ilyen problémák weboldaladon, futtass egy tesztet is.
A teljesítmény mérése
Ha úgy gondolod, hogy nincs probléma a weboldal betöltési sebességével, akkoris javasolt a teszt lefuttatása.
Ne feledd, hogy az oldalsebességgel kapcsolatos tapasztalataid eltérhetnek (és valószínűleg eltérnek) a felhasználók tapasztalataitól. Mivel valószínűleg gyakran töltöd be honlapod, így már a gyorsítótáradban kell lennie. Még az első látogatónak még nem lesz gyorsítótárazva. Ezért ragaszkodunk ahhoz, hogy használj oldalsebesség-mérő eszközöket.
Az olyan böngészők, mint a Chrome vagy a Firefox, beépített fejlesztői eszközök konzolt használnak. Sok hasznos információt mutathat meg, beleértve az oldalsebesség teljesítményét. A DevTools rendelkezik a Hálózat lappal, ott találsz egy grafikát, amely megmutatja, hogy mit tölt be az oldal és mennyi ideig.
Ha rámutatsz egy adott elemre, megjelenik egy felugró ablak a bejelölt fő paraméterek részletes leírásával.
A grafikon segít azonosítani, mi befolyásolja leginkább az oldal sebességét.
Természetesen nem ez az egyetlen eszköz erre a célra. Sok cég ingyenes sebességellenőrző eszközöket biztosít.
Ezek az eszközök elemzik a weboldal paramétereit, és segítenek meghatározni a fejlesztési referenciaértékeket. Közülük a legjobbak nem csak a pontszámot mutathatják meg. Részletesen lebontják ezeket a paramétereket, és még tippeket is javasolnak a javításhoz. Így konkrét számokat láthatsz ezáltal sokkal kézzelfoghatóbbá téve.
Első ránézésre még bonyolultnak találhatod.
Cumulative layout shift a felhasználó által látott elrendezés váratlan változásainak mérése. Minél alacsonyabb, annál jobb.
Speed index azt jelzi, hogy mennyi idő telik el, amíg egy oldal láthatóan megjelenik.
First contentful paint az az idő, amely alatt a weboldal megjeleníti a tartalom első részét.
Largest contentful paint szintén azt mutatja, hogy mennyi ideig tart a legnagyobb tartalomelem megjelenítése.
Time to interactive leméri, hogy mennyi időbe telik, amíg egy oldal interaktívvá válik.
Total blocking time azt jelenti, hogy az oldal mennyi ideig nem reagál semmilyen felhasználói bevitelre.
Ez csak néhány elemző adat a legszélesebb körben használtak közül, de ennél még több is van. Tartsd szem előtt azt is, hogy az oldalsebesség-mérő eszközök eltérő eredményeket adhatnak, mivel különböző mutatókon alapulnak. A kapott pontszám relatív, és nem mindig mutatja a teljes képet. Semmi értelme az egyik pontszámot a másikkal összehasonlítani. Ha össze szeretnéd hasonlítani az eredményeket, győződj meg arról, hogy ugyanazt használod, mint korábban.
A legjobb gyakorlat azonban az, ha különböző eszközökkel és több helyről méred fel az oldal sebességét. GTMetrix például ezt teszi. Van egy pár ingyenes és prémium helyszínük:
Weboldal gyorsítás
Elérkeztünk a legizgalmasabb részhez. Miután azonosítottad a problémát, ideje megszüntetni.
Szerezz kiváló tárhelyet
Egy jó tárhely többet jelent, mint gondolnád. A szolgáltató által használt szerverek drámaian befolyásolhatják az oldal sebességét, ezért érdemes jól átgondolni melyik tárhely szolgáltatóra bízzuk weboldalunkat. Egy kis megtakarított pénz az elején a későbbiekben sokba kerülhet. A túl olcsó tárhelyen néha több weboldalt tárolnak, mint amennyit el tudna bírni a szerverük. Így a többiekkel összezsúfolva együtt leszel egy lassú szerveren, egy lassú honlappal.
Bizonyosodj meg arról, hogy weboldalad HTTPS-t használ
Ez nem egy egyszerű lehetőség, de ma a HTTPS-weboldalak gyorsabban töltődnek be, mint a HTTP-verzióik. Még a sebességoptimalizálástól eltekintve is kulcsfontosságú, hogy legyen HTTPS protokoll weboldaladon.
CDN használata
A CDN (tartalomelosztó rendszer) a világ különböző pontjain található szerverek halmaza. A statikus fájlok, például képek, JavaScript és CSS másolatait tárolják.
Mivel a CDN több helyen tárolja a tartalmat, a felhasználó, amikor hozzáfér a honlapodhoz, a legközelebbi szerverről tölti be azokat. Használatukkal szép sebességnövekedést érhetsz el weboldalad számára.
Ez nem a Te tárhelyed, vagy nem helyettesítheti azt. Ez a gyors és megbízható tárhely kiegészítése lehet, amely segít a jobb teljesítményben.
Szerezd be a legújabb PHP verziót
Ez egyszerű: maradj naprakész, végezd el wordpress weboldalad frissítéseit. A 7-es verzió megjelenésével például a PHP kétszer olyan gyors lett, mint korábban.
Távolítsd el a felesleget
Szabadulj meg azoktól a dolgoktól, amelyekre nincs szükséged. Ezek lehetnek beépülő modulok is (a népszerűek általában túl sokat foglalnak). A honlapodon végzett munka során előfordulhat, hogy sok belőlük halmozódott fel. Figyelj arra, hogy csak azokat tartsd meg, amelyeket használsz, a többit pedig töröld.
Egy másik probléma, hogy a bővítmények törléskor nyomokat hagynak maguk után. Hosszú táblázatok vannak az adatbázisodban, pedig már régen eltávolítottad a káoszért felelős plugint.
Amit megtehetsz, az az, hogy ezeket a táblákat kézzel töröld a phpMyAdminban; van azonban egy kényelmesebb módja. Telepítheted az Advanced Database Cleaner plugint (igen, ironikus, de ez hasznos). Felismeri az adatbázisban maradt összes árva táblát. Ez egy prémium bővítmény, de jól végzi a dolgát.
A probléma néha a témában (sablon) rejtőzik. Némelyikük kódolása nem olyan karcsú és könnyű. Ha weboldalad nem teljesít megfelelően a sebesség szempontjából, ennek oka lehet a használt téma is. Kapcsold ki azokat a funkciókat, amelyekre nincs szükséged, vagy válassz egy másik témát, és ellenőrizd, hogyan mennek majd a dolgok.
Tárold gyorsítótárban a tartalmad
A honlapokat nem kell minden alkalommal újra betölteni, amikor a felhasználó visszalátogat hozzánk.
Hogy van ez így?
Erre való a gyorsítótár. Tárold weboldalad utoljára betöltött verzióját, és megjelenítheted, amikor a felhasználó újra kéri ezt az URL-t. Más szóval, a felhasználók megnyitják a weboldal másolatát, ahelyett, hogy újabb kéréseket és válaszokat kezdeményeznének.
A gyorsítótárazott verzió tárolási ideje a konfigurálástól függően változhat. Ehhez is vannak pluginok. Például a W3 Total Cache jelentős javulást hozhat honlapod teljesítményében. (Még egy útmutatót is ad, hogy mit, miért és hogyan kell csinálni.) A trükkös rész az, hogy ha weboldalad rendkívül dinamikus, a gyorsítótár hosszú távú tárolása haszontalanná, sőt potenciálisan félrevezetővé válik. Tehát bölcsen használd ezt a technikát.
Csökkentsd az átirányításokat
Az átirányítások közvetlenül befolyásolják az oldal sebességét. Természetesen a honlapodon lesznek átirányítások, és ezek önmagukban nem rosszak, de időnként ellenőrizd őket, némelyikük teljesen elavulttá válhat.
Ha egy link átirányítási láncot halmoz fel, az oldalnak minden betöltésekor végig kell mennie rajta. Olyan ez, mint egy teher, amelyet le kell rázni weboldalad válláról.
Gzip tömörítés
Ez a tömörítési módszer közvetlenül érinti a „First contentful pain”-t, vagyis azt az időt, amíg a weboldal megjeleníti az első tartalmat. Ez egy olyan algoritmus, amely csökkenti a CSS-, HTML- és JavaScript-fájlok méretét.
A legszélesebb körben használt böngészők ma már alapértelmezés szerint implementálják a GZIP-et, így előfordulhat, hogy nincs is szükség további telepítésre.
A W3 Total Cache is ezt a technikát használja. Miután telepítetted a bővítményt, megjelenik a Teljesítmény menü az irányítópulton. Ott a többi opció mellett a Minify is látható: ott futtathatod az algoritmust.
MEGJEGYZÉS: jobb egyesével kicsinyíteni a fájlokat, és minden forduló után ellenőrizni a weboldalt. Így, ha bármi elromlik, gyorsan megtalálhatod és megoldhatod a problémát.
A deflációs tömörítés csak a szöveges fájloknál működik jól, mivel a képek belsőleg már használják ezt a fajta tömörítést. Ennek akár fordított hatása is lehet rájuk, és ahelyett, hogy kicsinyednének, puffadnak.
Optimalizáld látványvilágod
Ahogy a Google 2018-as kutatása kimutatta, az interneten minden negyedik oldal több mint egy 4 Mb-nál nagyobb volt. Ez sokkal több, mint kellene. Ennek egyik lehetséges oka a képek lehetnek.
Sok, az interneten talált kép nagyobb a szükségesnél. A tényleges méretre (ahogyan látod) és a fájlméretre (bájtban mérve) egyaránt vonatkozik. A felhasználók túlnyomó többsége ma már okostelefonjáról internetezik, ami azt jelenti, hogy a képek viszonylag kicsinek tűnnek számukra. A legtöbb esetben könnyedén tömörítheted a képeket anélkül, hogy jelentős részleteket veszítene.
Ökölszabály, hogy mielőtt képeket teszel fel webhelyedre, azokat megfelelő méretre kell vágnod, és a megfelelő szoftverrel tömörítened kell. Az ismert optimalizálók (például a TinyPNG és ImageOptim) az összes szükséges algoritmust lefuttatják, és ennek eredményeként ugyanolyan kinézetű, de sokkal kisebb méretű képeket kapunk.
Azonban ne ess neki túl keményen a médiafájloknak, tartsd ésszerű szinten minőségüket. A sebesség javítása a látvány árán nem a probléma megoldásának módja.
Közvetlen feltöltés helyett beágyazás
A WordPress beágyazási blokkok nem hiábavalóak. Ha weboldaladon vannak videók, amelyek általában jóval nagyobbak, mint az oldal többi része, tedd közzé őket a beágyazás funkcióval. Így megtakaríthatsz némi sávszélességet ezt a videótárhelyre bízva.
Bontsd fel a megjegyzés részt oldalakra
Ez eléggé magától értetődő. Ha egy igazán interaktív, sok megjegyzést tartalmazó weboldal boldog tulajdonosa vagy, ne jelenítsd meg őket együtt. Egy adott esettől függően jó ötlet lehet 20, 15 vagy akár 10 darabos készletekre osztani.
Még mindig lassú
Bizonyos esetekben egyszerűen nem lehet tömöríteni és csökkenteni többet. Előfordulhat, hogy a képek romlottnak tűnnek, vagy az oldalaidon lévő vizuális effektusok egyszerűen nem engedik, hogy egy bizonyos sebességnél magasabbra lépj. Sőt, a weboldaladnak talán az a lényege, hogy valamilyen nehéz adatot dolgozzon fel, ami nem túl gyors oldalbetöltést eredményez. Ilyenkor nincs mit tenni a teljesítmény javítása érdekében?
Hát persze, hogy van!
Ha az összes problémát megoldottad, amelyekről itt beszéltünk, de még mindig nem tudtad elérni a kívánt két másodperc alatti betöltési időt, akkor több trükköt is kipróbálhatsz, amelyek sokat segítenek.
Lazy loading
Ez a vicces név (lazy loading, talán lusta betöltésnek tudnánk fordítani) egy oldalbetöltés-optimalizálási technikára utal. Ennek a technikának a segítségével menet közben tölti be az oldal az elemeket. Jelentősen eltér az egyszerű betöltési folyamattól, a tartalom nem jelenik meg egyszerre, csak az éppen látható rész. Ez így egy igazi időmegtakarítás.
Számos WordPress bővítmény létezik az oldal betöltési sebességének javítására. A legjobbak közül néhány A3 LazyLoad, Lazy Load for Videos, Ajax Load More erősen interaktív oldalakhoz megtalálhatod a neked legmegfelelőbbet.
Százalékos elkészültség jelző megjelenítése
Ha weboldalad olyasmit hajt végre, ami nem fér bele a normál figyelemkörbe, jelenítsd meg az előrehaladást. Így mondd el látogatóidnak, hogy az oldal nem fagyott le vagy nem romlott el. A kevesebb zavart okozó tényező magasabb elégedettségi arányt jelent.
Kutatásokkal bizonyított tény, hogy a felhasználók szívesebben nézik, milyen közel van a betöltési folyamat a végéhez, mintha csak az üres weboldalt néznék Legyen szó folyamatjelző sávról vagy bármilyen más jelzőről, amely a hátralévő időt vagy az elkészült százalékot mutatja, minden hosszadalmas folyamat esetén meg kell jeleníteni.
Animáld a folyamatot
Tegyük fel, hogy van egy galériád, amely egyes árusított árukat mutat be. Gyakran frissül, így és a képeket (vagy videókat) nem lehet sokáig tárolni a böngésző gyorsítótárában. A tartalom betöltésekor a felhasználók unatkoznak és ingerültek.
Mit tehetsz ellene?
A válasz: szórakoztasd őket. Emlékszel, hogy a Google-ban van ez az aranyos pixel dinoszaurusz játék, amellyel akkor is játszhatsz, amikor a kapcsolat megszakad? Ez egy tökéletes példa arra, hogy látogatóid végig lefoglald. Természetesen nem javasoljuk Sega emulátor vagy bármi más beállítását, de gondolj az általános elképzelésre.
Nem kell feltétlenül bevonnod a felhasználókat semmibe. Próbáld élénkebbé tenni számukra a várakozást. Például a médiafájl betöltése előtt mutass könnyű vizuális effektust. A képfoltoknak lehet olyan háttere, amely időközben fokozatosan megváltoztatja a színét, bármilyen más észrevehető (de nem feltűnő) mozgás történhet. A látogatóknak meg kell érteniük, hogy a tartalom hamarosan megjelenik.
Kövesd nyomon
Nem győzzük eléggé hangsúlyozni, mennyire elengedhetetlen az oldalsebesség rendszeres ellenőrzése! Figyelj arra, hogy több helyről teszteld weboldalad, ellenőrizd a lehető legtöbb paramétert, és próbálj meg mindent a szükséges minimum szintjén tartani. Mindaddig, amíg tisztában vagy azzal, hogy honlapod mit csinál és hogyan viselkedik, jónak kell lennie.
Rólunk
OfficeHelper – Marketing megoldások A-tól Z-ig
Online marketinggel és profi weboldal fejlesztéssel foglalkozunk. Célunk, hogy elégedett ügyfelünk legyél, így mindent megteszünk sikeredért.
Naptár