Webhelysebesség-optimalizálás: Hogyan lehet ezt megtenni 2020-ban # Lépésről lépésre

Körülbelül egy évtizeddel ezelőtt a Google bejelentette, hogy a webhely sebessége befolyásolja az internetes keresés rangsorolását. Bár a bejegyzés nem tisztázta a sebesség hatását a rangsorra, a bejelentést elolvasó webmesterek megértették, hogy a weboldal sebességének optimalizálásának a fejlesztési terv csúcsán kell lennie..


Továbbá SEO előnyei a sebesség-optimalizálásnak, az oldal betöltési ideje fontos annak meghatározásakor, hogy hány felhasználó maradjon az Ön webhelyén. A HubSpot arról számol be a konverzió csökkenése az oldal betöltési idejének növekedéséhez kapcsolódik – a betöltési idő egy másodperces késése ~ 20-30% -os csökkenést eredményezhet az átalakulásban!

Webhelysebesség-optimalizálási útmutató

Az utóbbi néhány évben megnőtt az átlagos oldalméret. Valójában 2018-ban, átlagosan az oldalméret meghaladta a 2 MB-ot! Az oldal betöltésének jelentős része képeket, statikus fájlokat és videókat tartalmaz.

Sőt, enyhén szólva, sokat számít a webhely mérete és a webhely teljes sebessége! Még az egyre növekvő oldalterhelés mellett is vannak dolgok, amelyekkel javíthatja webhelye kezességét. Ez a bejegyzés mindent tárgyal.

Webhelysebesség-optimalizálás: Amire szüksége van, mielőtt elkezdenénk

Ez a bejegyzés feltételezi, hogy két kulcsfontosságú dolgot már vigyázott:

  • Olyan optimalizált témát használ, amely nem jelent sok puffadást maga a WordPress tetején.
  • Elég gyors házigazda vagy.

Ha bejelöli ezt a két négyzetet, akkor folytassa a következő szakaszokkal, hogy felfedezze a feladatok átfogó listáját, amelyeket vállalhat annak biztosítása érdekében, hogy a webhely betöltési ideje minimális legyen.

A weboldal sebességének optimalizálása

A weboldal anatómiája

anatómia

A weboldal gyorsaság optimalizálásának trükk az, hogy megértsük, mi történik a weboldalon. Menjünk át a legnépszerűbb alkotóelemeken:

  • A HTML-kód, amely struktúrát és tartalmat ad a weboldalnak – még akkor is, ha a WordPress futtatja a pártot a webhelyén, csak annyit vesz, hogy mi van az adatbázisban – az összes tartalom -, és statikus HTML kimenetre konvertálja
  • Statikus fájlok, amelyek segítenek a tervezésben, a funkcionalitásban és az interaktivitásban (CSS, JavaScript)
  • Képek háttérrel, logókkal és tartalommal

Az oldal megjelenítéséhez a böngésző a weboldal minden elemére – HTML oldalra, statikus fájlokra, képekre és külső tartalomra – kéri magát az oldalt. Ezért a HTTP kérések szintén döntő szerepet játszik a weboldal sebességének optimalizálásában.

Megtudhatja, hol áll: webhelysebesség-optimalizáló eszközök

Mielőtt továbblépnénk a speciális technikákhoz, amelyek segítenek a webhely optimalizálásában, szánjon egy percet az eszközök áttekintésére, amelyek segítenek a weboldalak sebességének elemzésében..

Ha kezdő vagy, és alkalmi tesztelő eszközt keres, fontolóra veheti a használatát a Pingdom eszközök lakosztály a webhely gyors felméréséhez. A teljesebb megoldáshoz forduljon a következőhöz: A Google oldalsebesség-betekintése.

Pingdom sebesség tesztPingdom eszközök a sebességvizsgálatokhoz

Amellett, ha gyors opciót keres böngésző plugin formájában, akkor kipróbálhatja YSlow, amely teszteli a webhelyeket és javaslatokat nyújt a böngészőből. Továbbá, a GTmetrix eszköz felhasználja az YSlow teszteredményeit a jelentésekhez.

�� Ha további lehetőségeket szeretne, hogy tesztelje webhelyének sebességét, ez a bejegyzés felsorolja Az 5 legjobb sebesség-ellenőrző eszköz.

Mielőtt áttekintené az ebben a bejegyzésben felsorolt ​​technikákat, győződjön meg arról, hogy a webhelyét az itt felsorolt ​​eszközök egyikén futtatja, és referenciaértékként szolgál. Amint bármilyen webhelysebesség-optimalizálást elvégzett, feltétlenül térjen vissza az eszközhöz, hogy ellenőrizze a sebesség javulását.

1. lépés: Optimalizálja a statikus fájlokat

Az útmutató első lépése a statikus fájlok optimalizálására koncentrál – legnépszerűbben stíluslapok (CSS fájlok) és szkriptek (JS fájlok) formájában..

(a) Mozgassa a CSS-t fej felé, JS-t alul

Az első optimalizálás annak ellenőrzése, hogy a stíluslapok az oldalszerkezet szakaszában vannak-e, míg az összes szkript az oldal zárócímkéje fölé kerül. A logika egyszerű:

  • A stíluslapok általában kisebbek, mint a szkriptek
  • Miután a stíluslapokat betöltötték a címkébe, mielőtt a böngésző megjeleníti az oldal törzsét, az oldalon megjelenített elemeknek megfelelő stílusa lesz
  • A szkriptek funkcionalitása rendszerint az oldal tartalmának betöltése után jön létre, tehát a szkriptek általában alulra helyezhetők

Ez a gyakorlat biztosítja, hogy a webhely látogatói ne hagyjanak frusztrált oldalt, miközben várják, amíg betöltődik.

A szkriptek részének gyors kezeléséhez telepítheti a WordPress parancsfájlok láblécére való beépülő modulját. Autopilóton működik, és jól végzi a munkát.


Parancsfájlok a lábléchez Parancsfájlok a lábléchez

Szerzői): Joshua David Nelson

Aktuális változat: 0.6.4.1

Utolsó frissítés: 2020. április 15

scripts-to-footerphp.0.6.4.1.zip


94% Értékelések


20.000 + telepítések


3.1.0Requires

(b) Állítsa be a finomítást

A kicsinyítés a fájl azon részeinek eltávolítását jelenti, amelyek a végrehajtáshoz nem szükségesek. Például a stíluslapokban vagy a szkriptekben a következőkre nincs szükség a végrehajtáshoz:

  • fehérségek a behúzáshoz
  • Hozzászólások
  • hosszú függvény- és változónevek
  • fel nem használt kód

A kicsinyítés nagyban segíti a statikus fájlok méretének csökkentését. A fájlokat a következő szolgáltatások használatával finomíthatja: kisebbít, vagy telepítheti az egyiket kicsinyítés plugins a WordPress-ben.

c) Használjon aszinkron terhelést

A webböngésző egymás után megjeleníti és igényli az erőforrásokat, ahogy azok megjelennek a weboldalon. Ezt szinkron betöltésnek nevezzük. A böngésző alapértelmezett funkcionalitását azonban a következővel módosíthatja az async attribútum az erőforrások betöltése, amint rendelkezésre állnak. Például szinkron módon betöltheti a szkriptet az alábbiak szerint:

Itt van azon pluginek listája, amelyek segítenek az aszinkron betöltésben a WordPress programban.

(d) Használjon GZIP tömörítést

A GZip tömörítés egy módszer az erőforrások tömörítésére HTTP kérések révén. A GZip tömörítéssel a szerver erőforrásként zip fájlokat küld, amelyeket a böngésző kibont, miközben weboldalt jelenít meg.

Az erőforrások tömörítéséhez és kicsomagolásához szükséges időt és erőforrásokat meghaladja az az idő és sávszélesség, amelyet egy kisebb fájlnak a kiszolgálóról az ügyfélre történő átvitelekor megtakarítottak. Ez a technika nem csak gyorsabban tölti be az oldalakat, de megtakarítja a szerver költségeit is.

A GZip tömörítés néhány WordPress gyorsítótárazási bővítmény része, mint például a WP leggyorsabb gyorsítótár.

(e) Használja a Google CDN-t a népszerű könyvtárakhoz

A végső optimalizálási technika ebben a lépésben: a Google vagy a Microsoft CDN használatához a webhelyén használt általános könyvtárak lekérésekor. A mögöttes ok egyszerű – e CDN-ek népszerűsége miatt valószínű, hogy egy látogató már rendelkezik az erőforrás gyorsítótárazott verziójával a böngészőben.

2. lépés: Optimalizálja a képeket

Mint fentebb tárgyaltuk, az évek során a weboldalak növekvő méretének elsődleges forrása a képek.

Még vessünk egy pillantást a CodeinWP saját számaira:

kép betöltése

Ebből kifolyólag, a képek kezelése a webhely sebességének legjelentősebb javulásához vezet, és így van.

A képek nélkülözhetetlenek egy weboldal számára, azonban a teljes minőségű képek használata a web számára nem igazán ajánlott. A képeket olyan mértékben tömörítenie kell, hogy drasztikusan csökkentsék a méretet, miközben tisztességes vizuális minőséget biztosítanak.

Néhány dolgot megtehetsz, hogy ez megtörténjen, és szem előtt kell tartania a webhely sebességének optimalizálását:

a) Töltsön fel megfelelő méretű képeket

A jelenlegi témája valószínűleg a kép maximális méretének felel meg, amelyet képes megjeleníteni – dimenzió szempontjából. Tudja meg, mi ez, majd töltsön fel olyan képeket, amelyek maximálisan kétszer akkoraak.

Miért kétszer? Ez lehetővé teszi a téma számára a képek retina minőségű verzióinak megjelenítését is.

(b) Használjon megfelelő típusú képet

Az interneten a leggyakrabban használt képtípus a JPG és a PNG.

Nem egyformák.

  • A JPG képeket olyan fényképekhez és más összetett képekhez szánják, amelyekben sok színes információ található
  • A PNG-képek tökéletesen alkalmasak olyan grafikákra, amelyek kevés színinformációval rendelkeznek, mint például az interfész képernyőképei.

Példa egy PNG-képretémák

(c) A képek optimalizálása helyben a feltöltés előtt

Különböző eszközök használhatók, mielőtt bármilyen képet feltöltenek a webhelyére.

  • Próbáljon ki egy webes megoldást TinyPNG
  • Próbálja meg az asztali számítógépet ImageOptim

tinypng
imageoptim

(d) Lusta töltse be képeit

A képek optimalizálásának egy másik módja a lusta betöltés, egy gyakorlat, amikor egy képet csak akkor töltöttek le, amíg a látogató le nem görget a látáshoz..

lazyload bemutatóLusta betöltési bemutató a CodeinWP-n

Itt található egy teljes útmutató a képek lusta feltöltéséhez a webhelyére.

(e) Szerezze be a képoptimalizáló plugint

Végül, de nem utolsósorban, be kell szereznie a WordPress webhelyének minőségi képoptimalizáló pluginjét. Attól függően, hogy melyiket fogja használni, a képoptimalizálási igényeinek nagy részét automatikusan elvégzi.

Itt vannak 6 legjobb képoptimalizáló plugin összehasonlítva.

Ha gyors ajánlásra van szüksége, nézd meg a sajátunkat Optimole. Rendkívül hatékony képtömörítést biztosít, egy ingyenes CDN mellett! Az Optimole csillagképességet is elér, ha a fő versenytársaival szemben szembenéz:

PNG optimalizálási eredmények

PluginOriginal PNG SizeA OptimizationOptimization After Compression%
Optimole301 KB34 KB88,7%Veszteség és veszteség
Imagify301 KB67 KB77,7%veszteséges
TinyPNG301 KB79,7 KB73,5%veszteséges
ShortPixel301 KB90,4 KB69,96%veszteséges
Smush301 KB247 KB17,9%Lossless
ewww301 KB257,4 KB14,6%Lossless

JPG optimalizálási eredmények

PluginOriginal JPG SizeAfter OptimizationOptimization% Compression
ShortPixel518 KB169 KB67,36%veszteséges
TinyPNG518 KB248,6 KB52%veszteséges
Optimole518 KB274 KB47%Veszteség és veszteség
Imagify518 KB338,7 KB34.64%veszteséges
ewww518 KB488,9 KB5,7%Lossless
Smush518 KB493 KB4,9%Lossless


Képoptimalizálás és lusta terhelés: Optimole Képoptimalizálás & Lazy Load – készítette Optimole

Szerzői): Optimole

Aktuális változat: 2.3.1

Utolsó frissítés: 2020. április 21

optimole-wp.zip


96% Értékelések


50.000 + telepítések


WP 4.7 + szükséges

3. lépés: Optimalizálja a HTTP kéréseket

Korábban a bejegyzésben azt tárgyalták, hogy amikor egy felhasználói böngésző elkezdi betölteni egy weboldalt, a tényleges átvitel egyedi HTTP kérésekkel történik. Egyetlen kérelem tölt be minden erőforrást. Ezért az ilyen kérelmek számának növekedése megnöveli weboldalának betöltési idejét.

webhely kérésekEgy weboldal HTTP kérése

a) Fájlok egyesítése

A HTTP-kérelmek terhelésének minimalizálása érdekében az első feladat a hasonló erőforrások kombinálása. Az erőforrások tömörítésekor a hasonló fájlokat egyesítheti. Például az összes stíluslap (CSS fájl) és az összes egyedi JavaScript fájl egyesíthető egyetlen fájlba. Ez csökkenti az ügyfelek által az összes erőforrás betöltéséhez benyújtandó kérelmek számát.

Megint ezek kicsinyítési plugins a WordPresshez segíthet abban.

(b) A DNS-keresések minimalizálása

Amikor egy HTTP-kérelmet olyan domainhez nyújtanak, mint például a www.codeinwp.com, akkor a DNS (domain name system) keresést végzi a kiszolgáló IP-címének megkeresése céljából. Következésképpen arra is törekednie kell, hogy minimalizálja a DNS-keresések számát az összes kérelemben, a webhely betöltésének felgyorsítása érdekében.

Itt van egy Hűvös útmutató Kinsta-tól hogyan kell csinálni.

(c) Engedélyezze az életben tartást

Optimalizálás nélkül a böngésző minden erőforráshoz egyetlen HTTP-kérelmet küld. Ez a kapcsolat bezáródik, ha a letöltés befejeződött. A böngésző ezután új kérést küld a szervernek új erőforráshoz. Az életben tartás olyan technika, amely nem fejezi be a kérést, ha az erőforrás letöltése befejeződött.

Az élettartamot az alábbi módokon engedélyezheti:

d) minimalizálja az átirányításokat

Az átirányítás egy utasítás, amely automatikusan az ügyfelet az erőforrás egyik helyéről a másikra veszi. Minden átirányítás meghosszabbítja a weboldal betöltési idejét, és ha feltétlenül szükséges, kerülje az átirányításokat a kódjában.

e) Használjon CDN-t

A CDN (tartalomszolgáltató hálózat) olyan hatalmas földrajzi helyeken jelen lévő webszerverek gyűjteménye, amelyek gyorsan és hatékonyan szolgáltatják az ügyfeleknek a tartalmat.

Az erőforrást igénylő ügyfelet az erőforrás kiszolgálója kiszolgálja, amely földrajzilag legközelebb van az ügyfél tartózkodási helyéhez. Ez biztosítja, hogy a kért tartalom a lehető legrövidebb időn belül elérje az ügyfelet!

Külön forrásunk van a WordPress-webhelyek legnépszerűbb CDN-megoldásainak összehasonlításához, valamint a megnézési információkkal.

4. lépés: Gyorsítótárazás

Nincs webhelysebesség-optimalizálási útmutató a gyorsítótárazást tartalmazó szakasz nélkül. Néhány technika, amelyet korábban tárgyaltunk, például a GZip tömörítés és a minificaiton, ma sok gyorsítótárazási megoldás részét képezi..

A gyorsítótárazás egy erőforrás ideiglenes tárolóban történő tárolásának jelenségére utal, hogy szükség esetén gyorsan visszahozhassa. A gyorsítótárazás különféle formái vannak:

  • Oldal gyorsítótárazás: A kiszolgálón tárolt oldal statikus HTML verziója
  • Adatbázis-gyorsítótár: A kiszolgálón tárolt általános adatbázis-lekérdezések eredményei (például a webhely 10 legfontosabb hozzászólása)
  • Böngésző gyorsítótárazása: Az oldal egyes részeinek tárolása a böngészőben

Összehasonlítottuk a bejegyzés legnépszerűbb WordPress gyorsítótárazási pluginjait. TL; DR: Menj megnézni WP rakéta ha teljes megoldást keres. Alternatív megoldásként, ha inkább ingyen szeretne valamit, itt található egy útmutató a W3 teljes gyorsítótár konfigurálása.

5. lépés: Optimalizálja a mobilját

A cikk korábbi részeiben olyan optimalizálási technikákat tárgyaltunk, amelyek mind asztali, mind mobil szempontból relevánsak. A mobil tartalom fogyasztása azonban növekszik, és új kihívások merülnek fel egy kisebb képernyőn. Ez a szakasz tehát a mobil eszközök webhelysebesség-optimalizálási módszereit tárgyalja.

A mobil optimalizálás arra a gyakorlatra vonatkozik, amely biztosítja, hogy webhelye mobil látogatói ugyanolyan funkcionalitással és hatékonysággal éljenek, mint asztali társaik. A következő lista bizonyos higiéniai tényezőket tartalmaz a mobil eszközök webtartalmának kurzorozására:

  • Használjon adaptív webdesignot annak biztosításához, hogy a különböző eszközök különböző weboldal-verziót kapjanak
  • Kerülje a vaku és a felbukkanó ablakok használatát, mivel a mobil eszközök nem támogatják
  • Ne pozicionálja az olyan interakciókat, mint a linkek, túl közel egymáshoz

Ezen tényezők mellett az AMP (Accelerated Mobile Pages) egy olyan projekt, amelynek célja gyors és következetes tartalom létrehozása az eszközök között.

Itt található egy útmutató az AMP használatának megkezdéséhez a WordPress-ben.


AMP

Szerzői): AMP projekt közreműködői


74% Értékelések


500.000 + telepítések


WP 4.9 + szükséges

Több információ

amp.1.5.3.zip

Aktuális változat: 1.5.3

Utolsó frissítés: 2020. április 15


74% Értékelések


500.000 + telepítések


WP 4.9 + szükséges

WordPress.org beépülő oldal


AMP

Következtetés

Remélem, hogy ez az útmutató néhány tippet adott neked arról, hogy mit kell tennie a webhely általános webhelysebesség-optimalizálási szintjének javítása érdekében.

Csak összefoglalva; először egy weboldal anatómiáját vizsgáltuk, hogy konkrét fejlesztési területeket kezeljünk. Ezután továbbmentünk az optimalizálás konkrét lépéseihez:

  • Az 1. lépés a statikus fájlok optimalizálására szolgált stíluslapok és szkriptek formájában
  • A 2. lépés foglalkozik a képekkel és azok optimalizálásával
  • A 3. lépés a HTTP kérések optimalizálásának technikáiról szól
  • A 4. lépés néhány népszerű gyorsítótárazási technikát tárgyalt
  • Az 5. lépés a mobil eszközök optimalizálására vonatkozik

Van valami, amellyel küzd, amikor a webhely sebességének optimalizálásáról van szó? Tudassa velünk az alábbi megjegyzésekben.

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Elrendezés, bemutatás és szerkesztés: K Karol.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map