7 módja annak, hogy azonnal felgyorsítsd a weboldalad

Először is pontosan tudnod kell, hogy a weboldalad milyen gyors vagy lassú valójában. Már megállapítottuk, hogy a 2-3 másodperc az az időtartam, amit meg kell célozni. Sajnos az internetezők nagy bánatára a weboldalak többsége ettől a céltól messze elmarad. A Google több százezer landing oldalt vizsgált meg 126 országban, és azt találta, hogy az oldalak 70%-ának akár hét másodpercig is eltartott a betöltés.

Au.

Ez elég siralmas. A rossz hír az, hogy online marketingesek milliói hagynak pénzt az asztalon. Sok pénzt. Ha tudnák, mennyit, valószínűleg sírnának. A jó hír viszont az, hogy nem túl nehéz kikerülni a lassan betöltődő weboldalak posványából, és bekerülni azok közé, amelyek képesek elérni a három másodperc vagy annál rövidebb betöltési időt.

Honnan tudhatod, mennyi idő alatt tölt be a weboldalad? Látogass el a Pingdom tesztelő oldalára – ingyenes –, és írd be a webcímed. Néhány másodperc (vagy több) múlva megkapod a részletes eredményeket. Ezután ideje nekilátni a munkának.

#1 Tedd boldoggá a szervered kevesebb HTTP kéréssel

Az a vékonyka szöveg a weboldaladon alig jelent terhelést a látogató böngészőjének. A szűk keresztmetszeteket és lassulásokat azok az elemek okozzák, mint például a scriptek, képek, videók és stíluslapok. Ezek mindegyikéhez külön kérés indul a szerver felé. A webdesignerek gyakran elkövetik azt a hibát, hogy túl sok „cuccot” tesznek az oldalra. És anélkül, hogy észrevennék, elképesztő mennyiségű sávszélességet fogyasztanak, végül pedig ők is bekerülnek abba a 70%-ba, ahol a weboldal több mint négy másodperc alatt tölt be.

Ha magadban azt gondolod, hogy csökkenteni kellene a HTTP kéréseket, jól érzed! Ilyen egyszerű. Kevesebb HTTP kérés = gyorsabb oldalbetöltés, minden más változatlansága mellett. Ez azt is jelenti, hogy alaposan át kell gondolnod, hogy minden egyes weboldal elem valóban szükséges-e. Mindegyik külön szerver kérést igényel.

Kíváncsi vagy, hány kérés fut jelenleg a weboldaladon? Nézd meg a Pingdom eredményeit, ott megtalálod a választ. Mi számít túl soknak? Erre nincs kőbe vésett szabály. A legjobb, ha elemzed az oldalad, és eldöntöd, hogy egy adott elem elengedhetetlen-e. Ha nem, távolítsd el.

#2 Optimalizáld a sávszélességet faló képeket

Az internet hajnalán ritkán találkoztunk képekkel, a szöveg uralta a terepet. Ahogy azonban a technológia, főleg a kapcsolati sebesség fejlődött, a weboldal tulajdonosok egyre bátrabban töltöttek fel képeket. Ha jól csinálod, ez egyáltalán nem rossz stratégia. Kevés dolog kelti fel jobban a látogató figyelmét, mint egy vonzó kép (pálmafák vagy kiskutyák kiválóak).

A hátránya viszont az, hogy a két leggyakoribb forrásból – okostelefonos kamerákból és online képtárakból – származó képek gyakran több megabájt méretűek, és úgy zabálják a sávszélességet, mint a sütiszörny a hétvégén. Ha csak néhány ilyen képet is felhasználsz tucatnyi vagy akár száz poszthoz, a weboldalad máris lassan vánszorog.

Ez könnyen orvosolható. Használj grafikai szerkesztőt, például Photoshopot vagy Pixlr-t (utóbbi ingyenes online alternatíva), ha nem akarsz szoftverre sokat költeni. Nagy képek esetén általában .jpeg (vagy .jpg) formátumban érdemes menteni, a felbontást pedig 100 kilobájt vagy kisebbre csökkenteni. Természetesen a képméretről egész könyveket írtak már, de most elég, ha annyit jegyzel meg, hogy a kisebb fájlméretű képek gyorsítják a weboldalad.

#3 Böngésző gyorsítótárazás = boldog visszatérő látogatók

A szerver utasítására a legtöbb népszerű böngésző képes „gyorsítótárazni”, vagyis ideiglenes memóriába menteni fájlokat, amíg újra szükség nem lesz rájuk. Ez így működik:

• Egy első alkalommal érkező látogató megnyitja a weboldalad.
• A szerver utasítja a böngészőt, hogy „jegyezze meg” bizonyos statikus elemeket, például logókat, képeket, szövegeket.
• Amikor a látogató visszatér, ezek a gyorsítótárazott elemek szinte azonnal megjelennek, ami boldoggá teszi a látogatót.

A böngésző tehát gyorsan megjeleníti a statikus elemeket anélkül, hogy bármit is le kellene töltenie a szerverről. A dinamikus (változó) elemekhez viszont szerver kérésre van szükség, hogy a böngésző a legfrissebb verziót töltse le, ami egy kicsit tovább tart.

A nagyszerű dolog – és ami boldoggá teszi a látogatókat –, hogy legalább van mit nézniük, amíg a dinamikus tartalom letöltődik. Ha képek vagy bármilyen tartalom megjelenik, az sokkal jobb, mint egy üres fehér képernyő egy homokórával, és növeli az esélyét, hogy a visszatérő látogató kivárja, míg a dinamikus elemek is betöltődnek. Ha a „böngésző gyorsítótárazás” kifejezés elriasztana az internettől, hívd fel a tárhelyszolgáltatód technikai támogatását, és kérd meg őket, hogy állítsák be neked.

#4. Tömörítsd a weboldalad

Az interneten eltérő becsléseket találhatsz, de a lényeg, hogy egy tömörítetlen weboldal méretét Gzip segítségével akár 50-90%-kal is csökkentheted. A kisebb fájlok kevesebb sávszélességet igényelnek és gyorsabban töltődnek be. A Gzip egy nyílt forráskódú formátum, amely az oldalad összes fájlját egyetlen tömörített csomagba pakolja.

Amikor a böngésző kéri a weboldalt, egy index.html.gz nevű fájlt kap (a hagyományos index.html helyett). Amint ez a karcsúsított csomag megérkezik, a böngésző gyorsan kicsomagolja, és megjeleníti a látogatónak.

Jó példa a Yahoo kezdőlapja, amely tömörítetlenül kb. 101 kb, tömörítve viszont csak 10 kb körüli méretű. Igen, a Gzip ugyanezt tudja a te weboldaladdal is.

Bár a böngészőt nem kényszerítheted, hogy csak a tömörített verziót fogadja el, legalább a szervert beállíthatod úgy, hogy mindkét verziót felajánlja. Ez rutinos szervereseknek egyszerű feladat. Ha te nem tartozol közéjük, érdemes újabb hívást indítani a tárhelyszolgáltató ügyfélszolgálatára.

#5. De először optimalizáld a CSS-t

Az optimalizálás nem csak a képekre vonatkozik. A CSS-re (hivatkozási stíluslapokra) ugyanúgy érvényes. Ha belenézel egy CSS-be, mit látsz? Rengeteg kódot – és rengeteg üres helyet is. A stíluslapok fontosak – ne gondold, hogy nem azok –, de nem kell emberi szemnek szépen kinézniük.

Nézd meg az alábbi CSS példát. Szép, rendezett, jól olvasható, és pontosan megmondja a böngészőnek, hogyan jelenítse meg az oldalt. De vedd észre a sok üres helyet is! Minden egyes szóköz növeli a fájl méretét. Ha ez százszor vagy ezerszer ismétlődik, a fájl jóval nagyobb lesz, mint kellene. A jó hír, hogy nem kell saját kezűleg eltávolítanod a felesleges szóközöket.

Kiváló online eszközök, például az ingyenes CSS Minifier, képesek a normál CSS-ből például ezt…

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

…ilyen tömör CSS-t készítenek.

p.uppercase{text-transform:uppercase}p.lowercase{text-transform:lowercase}p.capitalize{text-transform:capitalize}

Lényegében mindent összenyom, hogy ne vesszen kárba hely. Ha gyorsabb oldalletöltést szeretnél, minden apróság számít.

#6 Ha összehajthatnád a weboldalad…

Néha az internet is tanul valamit a régi nyomtatott sajtótól, és a „hajtás alatt” kifejezés is egy ilyen példa. Ha már láttál újságokat a boltban, tudod, hogy úgy hajtogatják őket, hogy a legfontosabb hírek legyenek felül, szem előtt. A kevésbé fontosak rejtve maradnak a hajtás alatt.

Ezt a gondolatot érdemes átültetni a weboldalad HTML kódjába, különösen a JavaScript (JS) esetén, amely hajlamos megakasztani az oldal betöltését és megjelenítését a látogatónak. Ahelyett, hogy a JS-t a dokumentum tetejére tennéd, inkább az oldal aljára, a body rész végére helyezd. Így minden más – képek, szöveg – előbb betölt, és a látogatónak lesz mit néznie, amíg a script letöltődik.

Ellenkező esetben a képernyő üres marad, amíg a JS teljesen be nem tölt. Az üres képernyő pedig szinte felkéri a türelmetlen látogatót, hogy elnavigáljon máshová. Adj nekik valamit, amit nézhetnek vagy használhatnak, amíg a JavaScript extra funkciói meg nem érkeznek. Látod? Az internetes úttörők is tanulhatnak a XX. századi újságoktól.

#7 Válassz mást, mint a megosztott webtárhelyet

Akár webáruházat üzemeltetsz, akár egy tanácsadó vállalkozás fő marketingeszköze a weboldalad, a cél ugyanaz: gyorsan kell betöltenie. A leendő vásárlók nem fognak sokáig várni, amíg megjelenik a tartalom – inkább továbbállnak. Gyakran elfelejtjük, hogy az egyik legfontosabb alapdöntés – a tárhely típusa – óriási hatással lehet az oldalbetöltési sebességre.

A megosztott tárhely olcsó (néha ingyenes is), de ritkán a legjobb választás. Az alacsony ár azzal jár, hogy a szolgáltató túl sok weboldalt zsúfol egyetlen szerverre, és emiatt romlik a teljesítmény. Ráadásul az erőforrások – sávszélesség, tárhely, processzor – közösen használtak. Ha egy oldal túl sokat fogyaszt, a többi is lassulhat, lefagyhat vagy elérhetetlenné válhat.

Ha a weboldalad több, mint hobbi, a megosztott tárhely nem jó opció.

Jobb választás az üzleti weboldalad számára, ha néhány dollárral többet fizetsz, és dedikált vagy virtuális privát szerver (VPS) tárhelyet választasz – ezek garantálják a saját, elkülönített erőforrásokat, és nem kell attól tartanod, hogy a „szomszédok” miatt lassul az oldalad.

Sőt, ha menedzselt Virtual Private Server (VPS) hosting szolgáltatást választasz a nem menedzselt helyett, további támogatást kapsz a szolgáltatódtól.

Minden komoly KKV-nak, amely fontosnak tartja online jelenlétét, nagyon ajánljuk, hogy nézze meg a megosztott tárhely alternatíváit.

Ha mindez túl technikai számodra, érdemes megfontolni harmadik féltől származó weboldal készítő megoldásokat. Ezek az alkalmazások lehetővé teszik, hogy egyszerű drag and drop felületen, programozói tudás nélkül készíts weboldalt. Ezek a megoldások általában költséghatékonyak, és a tárhelyet is teljesen biztosítják. Az itt tárolt weboldalak általában gyorsabban betöltődnek, mint a saját szerveren működők. Így arra koncentrálhatsz, amihez igazán értesz: tartalmat készíteni és növelni a látogatottságot.

Záró gondolatok

Ha egy lépést hátralépsz, és megnézed a Nagy Egészet, a gondos tervezésnek mindig az első lépésnek kell lennie weboldal készítéskor. Vagyis alaposan meg kell válogatni, hogy milyen elemek kerülnek fel. Mindegyik feltétlenül szükséges? Keress „könnyű” (kis méretű) témákat és jól megírt, ellenőrzött plugineket . Másszóval: tervezz sebességre már az elején. Így később nem kell majd folyamatosan javítgatnod, ha rájössz, hogy lassú, sávszélességet zabáló szörnnyé vált az oldalad.

Egy dolog biztos. Ahogy az internetezők egyre kifinomultabbak lesznek, és egyre nagyobb elvárásokat támasztanak a weboldalakkal szemben – főleg a streaming hang, videó és interaktivitás terén –, a fájlméretek csak nőni fognak. Ezért a vállalkozóknak folyamatosan résen kell lenniük, nehogy idővel lassuljon az oldal. A legjobb megoldás a rendszeres tesztelés, és mindig figyelj az új lehetőségekre, amelyekkel gyorsíthatod az online jelenléted, hogy az mindig olyan jól teljesítsen, ahogy szeretnéd.