Hogyan javítsunk meg egy lassú elemet tartalmazó weboldalt: 16 olyan optimalizálás, amely segített nekem 100% -ban elérni a weboldal sebességét és az azonnali betöltési időket a webhelyemre

Az Elementor szerint ők a WordPress leggyorsabb oldalkészítői.


Tehát mi okozza a lassan betöltő webhelyet?

Általában van néhány egyszerű csípés, amelyek jelentősen javíthatják a betöltési időket és a GTmetrix pontszámait. Elementor mondja A lassú WordPress webhely leggyakoribb okai a kiszolgálók, a média, a külső szkriptek (pl. Google Fonts), a beépülő modulok, a CDN nélkül és a közepes gyorsítótár-beépülő modul használata. De nem mélyednek bele részletesen a lépésről lépésre.

Ezért írtam ezt az oktatót.

Megtanulhatja, hogyan javíthatja meg a lassú Elementor webhelyet a WordPress optimalizálási útmutató és az Elementor ajánlásainak legfontosabb ajánlásainak követésével. Biztosítunk képernyőképeket, részletes utasításokat, és válaszolok az összes megjegyzésre, ha továbbra is segítségre van szüksége. Sikerült 100% -os GTmetrix pontszámot szerezni a honlapomon. Még 100+ képpel és 400+ hozzászólással rendelkező hozzászólások (5 MB oldalméret és 170 kérelem) továbbra is kb <2s. Igen, WordPress sebességű nerd vagyok :)

Elementor sebesség optimalizálás

1. Frissítés a PHP 7.4-re

Sok hosting cég már kiadta a PHP 7.4-et.

A PHP verziók frissítése az Elementor webhely felgyorsításának egyik legegyszerűbb módja. Kinsta a PHP referenciaértékek megmutatja, hogy a magasabb PHP verziók hogyan tudnak 2-3x gyorsabban futni. Elementor is ajánlja magasabb PHP verziók és a memória korlátjának növelése 256 MB-ra (lásd a következő lépést).

Először ellenőrizze a jelenlegi PHP verziót az Elementor alatt > Rendszer információ.

Az Elementor PHP verziója

Ezután jelentkezzen be a hostfiókjába, keresse meg a PHP verziókezelőt (vagy hasonlót), és válasszon egy magasabb PHP verziót. Az is jó ötlet, hogy előzetesen készítsen biztonsági másolatot. Egyébként ennyi!

Kinsta PHP 7.4

Fontos: ellenőrizze, hogy a bővítmények kompatibilisek-e a magasabb PHP verziókkal. WP Rich Snippets-t használtam (amelyet már nem tartanak fenn), de ez nem volt kompatibilis a PHP 7.2 vagy újabb verzióval, tehát töröltem a beépülő modult, és helyet találtam. Nem érdemes megtartani a nem karbantartott plugineket.

2. Növelje a memóriakorlátot 256 MB-ra

Ismét ellenőrizze a memória korlátját az Elementor alatt > Rendszer információ.

Mind az Elementor, a WordPress és a WooCommerce javasoljon egy 256 MB memóriakorlátot.

Az Elementor memória korlátja

A memóriakorlátot általában megváltoztathatja a tárhelyfiókban:

Memória korlátozása

Egyébként adja hozzá ezt a kódot a functions.php.

határozza meg (‘WP_MEMORY_LIMIT’, ‘256M’);

3. Használjon saját házigazda betűkészleteket

Ha a Google Fonts felrobbantja a GTmetrix jelentést, próbáljon meg betűtípusokat helyben tárolni.

Ha van Elementor Pro, egyéni betűkészleteket szeretne használni (a beállításokban található).

Itt van egy YouTube bemutató.

Elementor Betűtípusok

Nincsen Elementor Pro?

Számos beépülő modul segíthet a Google betűtípusok optimalizálásában: WP Rocket, Automatikus optimalizálás, Saját házigazda Google Betűtípusok, OMGF és Eszköz-Takarítás. Ha te nem bővítményt szeretne használni, kövesse ezeket az utasításokat.

1. lépés: Erősítse meg, hogy a betűkészletek lelassítják az Elementor webhelyét a GTmetrixben.

Google Fonts GTmetrix

2. lépés: Töltse le betűkészleteit közvetlenül a Google Fonts webhelyről. Csak azokat a betűtípusokat és betűméreteket töltse le, amelyekre szükség van (a további betűtípusok és súlyok több kérést is jelenthetnek).

3. lépés: Használjon olyan szerszámot, mint a Transfonter konvertálni őket web betűkészlet fájlokká.

Transfonter-Google-Font-átváltás

4. lépés: Töltse fel az új webes betűkészlet-fájlokat a WordPress-be, és adja hozzá őket a CSS-hez.

5. lépés: Tesztelje a betűkészleteket, adjon hozzá egy alapértelmezett hibát, és mindig rendelkezzen betűkészletekkel.

4. Optimalizálja a harmadik fél kéréseit

Csakúgy, mint a Google Fonts harmadik fél kérése, úgy az AdSense, az Analytics, a Maps, a Címkekezelő, a beágyazott videók, sőt a Gravatars vagy a társadalmi megosztás beépülő moduljai harmadik fél kéréseit is okozhatják..

Ezt is optimalizálnia kell.

Külső szkriptek

Néhány harmadik fél kérését könnyű optimalizálni:

A WP Rocket kiegészítők lapján van, amely segíthet host elemzés helyben és adjon hozzá böngésző gyorsítótárazást a Facebook Pixelhez. A WP Rocket Media beállításai lehetővé teszik, hogy lustán töltsön be videókat, miközben az iframe-t előnézeti képre cseréli. Ha beágyaz bejegyzéseket a közösségi médiából, próbáljon meg egy képernyőképet készíteni, és egy kép helyett használjon. A Disqus feltételes betöltése, a JavaScript elemzésének elhalasztása a gyorsítótár-beépülő modul beállításaiban, és a szkriptek / beépülő modulok szelektív letiltása az Eszköz tisztításában segíthet a szkriptek optimalizálásában..

WP Rocket Local Analytics

Más harmadik fél kéréseit nem könnyű optimalizálni:

A Google AdSense lehet GTmetrix gyilkos. Az aszinkron módon történő betöltésen kívül kevés a tennivaló. Azt sem találtam megoldást, hogy a Gravatars gyorsabban töltsön be, és kipróbáltam az összes Gravatar gyorsítótár-bővítményt (tehát letiltottam őket). A Google Címkekezelőt általában csak a nagy, nem optimalizált Elementor webhelyekre kell használni, különben általában több kárt okoz, mint hasznot..

5. Kerülje a magas CPU-bővítményeket

Néhány beépülő modul, amelytől távol kell tartózkodnia.

Az Elementor webhelyeket lassító magas CPU-bővítmények általában a statisztikákkal, a biztonsági mentésekkel, a társadalmi megosztásgal, a portfóliókkal, az élő csevegéssel, a kapcsolatfelvételi űrlapokkal, a csúszkákkal, a JetPack-lal és minden olyan bővítménnyel kapcsolódnak, amelyre folyamatosan szükség van az Ön webhelyének működéséhez (gondolom, a Broken Link) Ellenőr folyamatban lévő vizsgálata).

  1. Adja hozzá
  2. AdSense kattintási csalások figyelése
  3. All-in-One eseménynaptár
  4. Backup Buddy
  5. Hódépítő
  6. Jobb WordPress Google XML webhelytérképek
  7. Törött link ellenőrző (használja a Dr. Link ellenőrzést)
  8. A WordPress állandó kapcsolattartója
  9. Kapcsolatfelvételi űrlap 7
  10. Kontextuálisan kapcsolódó hozzászólások
  11. Digi Auto Links
  12. Disqus megjegyzésrendszer
  13. Divi Builder
  14. Alapvető rács
  15. Tekintse meg a 65 lassú bővítmény teljes listáját

Ha van egy lassú beépülő modul, akkor törölheti azt, és megtalálhat egy helyettesítőt, szelektíven letilthatja a beépülő modult bizonyos oldalakon (következő lépés), vagy továbbra is folytathatja a használatát, és lassú Elementor webhellyel rendelkezik..

6. Szelektív módon tiltsa le a nem használt plugineket

Az Asset CleanUp és a Perfmatters kiválóan alkalmasak a pluginek szelektív letiltása, szkriptek és stílusok.

A leggyakoribb példa az, hogy csak a kapcsolatfelvételi űrlap pluginjét töltik be a kapcsolat oldalra, és letiltják másutt. De gondolkodott-e azon, hogy letiltja a közösségi megosztás-bővítményt az oldalain (mivel a legtöbb ember csak hozzászólásokon használja)? Vagy letilthatja a csúszkát azokon az oldalakon, ahol nincs csúszka? A szelektív letiltás révén kevesebb HTTP-kérést tehet az oldalakon.

1. lépés: Telepítse az Asset CleanUp vagy Perfmatters.

Asset CleanUp plugin

2. lépés: Szerkesszen egy oldalt vagy bejegyzését, és görgessen lefelé, hogy láthasson mindent, amit az oldal betölt.

3. lépés: Az oldalon nem használt bővítmények, szkriptek és stílusok letiltása (eltávolítása). Letilthatja azt postai úton is, vagy az Asset CleanUp Premium (valamint a Perfmatters) lehetővé teszi a RegEx használatát..

Asset CleanUp Check All

7. Kapcsolja ki a WooCommerce szkripteket, stílusokat, kosaratöredékeket

Ahogyan az előző lépésben szelektíven letiltotta a bővítményeket, a Perfmatters és az Asset CleanUp használatával ugyanezt teheti a WooCommerce szkriptekkel, stílusokkal és kosártöredékekkel.

Eszköz CleanUp WooCommerce

Az átalakítók valójában lehetővé teszik ezt 1-click:

átalakítók a kereskedelem optimalizálása

8. Kapcsolja be az Elementor szerkesztőbetöltő módszerét

Elementor mondja:

“Ha az Elementor használatával problémái vannak az üzemeltetéssel vagy a szerverrel, akkor beépítettünk egy egyszerű kapcsolót, amely megoldhatja a problémát.”

Ezt az Elementor alatt találhatja meg > Beállítások > Fejlett > Szerkesztő betöltő.

Elementor Switch Editor betöltő módszer

9. Átméretezze a képeket a méretek helyes beállításához

Az Elementor használatakor fontos a képek méretezése (átméretezése), hogy illeszkedjenek a megfelelő mérethez.

Méretezett képek megjelenítése

Ellenkező esetben a méretezett képek hibáit látja a GTmetrixben. Ha lát, akkor ragadja meg a GTmetrix által ajánlott méreteket, és méretezze át a képet ezekre a méretekre, majd cserélje ki a képet. Azt javaslom, hogy hozzon létre egy „image dimension cheat sheet” -et, amely felsorolja webhelye összes területének méreteit (csúszkák, kiemelt képek, teljes szélességű blogképek, logó). Ilyen módon átméretezheti a kép méretét a megfelelő méretre, mielőtt feltölti őket.

10. Árok megosztott tárolása és frissítése felhőre

Lassú legyen a szerver válaszideje?

Futtassa webhelyét a Google PageSpeed ​​Insights szolgáltatáson keresztül, és győződjön meg róla <200 ms, mint a Google javasolja. A szerver (tárhely) az # 1 tényező a WordPress optimalizációs útmutatóban.

Általában a SiteGround-t (megosztott tárhelyet) ajánlom, ami akkor jó, ha kevés a forgalom és a bővítmények. De ha egyszer elmész felhő-tárhelyet (pl. Cloudways DigitalOcean), a különbség éjszakai és napi. Áttértem a SiteGround-ről a Cloudways-re, és a betöltési időm felére csökkent. Még 100+ képpel és 400+ hozzászólással rendelkező hozzászólások (5 MB oldalméret, 170 kérelem) is betöltődnek 2 másodperc alatt.

Elementor tárhely

SiteGround vs Cloudways-Cloud tárhely

GTmetrix-report-for-hosszú-post

Mások tapasztalata a Cloudways-rel:

Cloudways Response Times

WP motor felhőalapokhoz

DigitalOcean Pingdom jelentés

Cloudways Server válaszidők

A felhőalapú terhelési idő javítása

Cloudways vs WP Engine

Névtelen

Cloudways Pingdom betöltési idő

Cloudways Pingdom jelentés

Névigényes felhőalapú migráció

Cloudways WooCommerce migráció

Cloudways AWS áttelepítés

Számos Facebook-közvélemény-kutatásban is elsőbbséget élveztek, és nagyszerűek TrustPilot vélemények:

Tárhely-ajánlások Facebook

VPS Cloud tárhely WooCommerce Poll

VPS Cloud Hosting közvélemény-kutatás

WordPress tárhely-javaslatok

Cloudways-Facebook-Review

Cloudways Facebook áttekintés

Cloudways vs SiteGround

Alsó sorban: a megosztott tárhely rendben van, ha nem működik a WooCommcerce, az AdSense, a magas CPU-bővítmények, vagy ha tisztességes a forgalom. De ha egyszer rendelkezik ilyennel, vizsgálja meg a felhő-tárhely szolgáltatást. Igen, én vagyok a tagja Cloudways), de rengeteg más ember lépett át, és közzétette eredményeit. A kód OMM25 25% kedvezményt biztosít a Cloudways webhelyének első két hónapjában.

11. Árok nélküli gyorsítótár-bővítmények és a WP rakéta használata

Miért a WP Rocket általában a Facebook közvélemény-kutatások első helyezettje?

Mivel több gyorsforgalmi funkcióval rendelkezik, mint a legtöbb gyorsítótár-bővítménynél (adatbázis-tisztítás, helyi elemzés, a Google Fonts kombinálása, lusta képek és videók betöltése, CDN + Cloudflare integráció, pulzusvezérlés, WebP gyorsítótárazás, előzetes letöltés, Facebook Pixel böngésző gyorsítótárazása).

Ez az oka annak, hogy a WP Rocket jobb pontszámokat + terhelési időket ad a GTmetrixben, és kevesebb plugin-t jelent az Elementor webhelyén. Mindig új funkciókkal frissíti, és egy megbízható csapat karbantartja.

Tehát ha továbbra is a WP leggyorsabb gyorsítótárát vagy a W3 teljes gyorsítótárat használja, akkor tényleg örvényt kell adnia.

A 2016. évi legjobb gyorsítótár-bővítmény-felmérés

2019-es gyorsítótár-bővítmény-felmérés

Swift vs WP Rocket

2016. évi gyorsítótár-bővítmény-felmérés

A legjobb gyorsítótár-bővítmények 2018 szavazása

wp rakéta vs w3 totla gyorsítótár

Látni fogja a különbséget:

WP rakéta utána

12. Tisztítsa meg az adatbázist

A folyamatban lévő adatbázis-tisztításokat ütemezi?

Ha folytatja az Elementor webhely felépítését, akkor utólagos javításokat, régi adatbázis-táblázatokat gyűjt össze a már nem használt beépülő modulokból / témákból, eldobott megjegyzéseket és más szemét fájlokat..

Olyan plugineket használhat, mint a WP Rocket és a WP-Optimize tisztítsa meg a WordPress adatbázist. Csak győződjön meg arról, hogy átnézi az összes törölt képet, és készítsen biztonsági másolatot előtte.

WP-Optimalizálja a tiszta adatbázist

13. Használja a Cloudflare CDN-jét

A Cloudflare használata nem gondolkodásmód.

Ingyenes, több mint 200 adatközponttal rendelkezik, és a CDN-k is vannak ajánlotta a WordPress.

Cloudflare logó

Egyes házigazdák, mint például a SiteGround, lehetővé teszik a Cloudflare aktiválását az irányítópulton. Ellenkező esetben regisztráljon a Cloudflare ingyenes tervére, jelentkezzen be a domain regisztrátorba, és váltson Cloudflare névkiszolgálókra..

Az irányítópulton van néhány csípés, amelyet érdemes figyelembe venni:

  • Sebesség: engedélyezze a Brotli és a Rakéta Rakodót
  • Scrape Shield: engedélyezze a hotlink védelmet
  • Tűzfal: blokkolja a rossz botokat a Wordfence élő forgalmi jelentéséből
  • Oldalszabályok: A Cloudflare-nak sok van oldalszabályok a sebesség, biztonság, kompatibilitás érdekében

14. Használjon könnyű témát

Meseidő.

A ThemeForest témát használtam, amelyet a fejlesztő elhagyott (egy kockázatot vállal, ha egy témát független fejlesztőtől vásárol, akkor is, ha jó véleménye van). Rémálmaim voltak, amikor felfújt témákat vásároltam az ügyfeleknek, amelyek miatt a WordPress webhely lassú lett.

Úgy értem, hogy mindent beépítve, ez sokkal könnyebbé válik, igaz?

Nem! Válasszon egy könnyű témát, amely minimális és jól kódolt, majd támaszkodik a pluginekre, hogy csak a szükséges funkciókat adja hozzá. A téma optimalizálása nehezebb, mint egy plugin törlése.

Remélhetőleg a legtöbben Astra, Flatsome vagy StudioPress témákat használják, amelyek a legfontosabbak.

15. Keresse meg a szűk keresztmetszeteket a GTmetrix-ben

A pontszámok és a betöltési idők mérése mellett a GTmetrix-ben is nagyon sok dolgot felfedhet. Mivel minden Elementor webhely különbözik, pontosan azt szeretné megtalálni, ami lelassítja a sajátját.

Az első bájt ideje

Az első bájt ideje

Nem optimalizált képek

Képoptimalizálás a GTmetrix-ben

Lassú beépülő modulok

Lassú WordPress bővítmény

16. Befejezze a sebesség utolsó 10% -át az átalakítókkal

Perfmatters (Kinsta készítette) vigyáz arra, amit szeretek hívni egyéb sebesség-optimalizálás:

átalakítók jellemzői

Ezek közül néhány rendkívül hasznos; a szkriptkezelő, amely lehetővé teszi szelektíven letiltani egyes oldalak beépülő moduljait / szkripteit, megváltoztatva az automatikus mentési intervallumot, korlátozva a utólagos javításokat, előcsatlakozva és letiltva a WooCommerce szkripteket, stílusokat és kosártöredékeket. Ezekre az optimalizálásokra nem tudok egyetlen olyan plugint sem, amely jobban teljesít, mint a Perfmatters.

Mit vársz, ez a Kinsta. Természetesen ez egy nagyszerű bővítmény.

Gyakran Ismételt Kérdések

&# X1f680; Mi a leggyakoribb oka a lassú Elementor webhelynek?

A gyors gyorsítótár-bővítmény használata, a gyorsítótár-bővítmény optimális konfigurálása, a lassú tárolás, az optimalizálatlan képek, a Google Fonts és a külső szkriptek, a magas CPU-bővítmények használata és a CDN nem használata a legáltalánosabb Elementor-webhely leggyakoribb okai.

&# X1f680; Mit tehetek az Elementor felgyorsításához??

Az Elementor egyéni betűkészlet beállításával csökkentheti a Google Fonts vagy a Fantasztikus betűkészlet kérelmeinek mennyiségét. Kiválaszthatja a nem használt Elementor funkciókat az oldalakon / hozzászólásokon egy olyan plugin használatával is, mint például az Asset CleanUp vagy a Kinsta Perfmatters. A többi általános sebesség-optimalizálás, amelynek semmi köze sincs az Elementor-hoz.

&# X1f680; Hogyan használhatja az egyedi betűkészleteket, hogy gyorsabban töltsék be őket??

Ehhez szüksége lesz egy Elementor Pro fiókra. Töltse le betűkészlet-fájljait (pl. A Google Fonts-ból), és töltse fel őket az Elementor egyedi betűkészlet szakaszába.

&# X1f680; Az Elementor lelassítja a webhelyem?

Az Elementor nem okozott hibát a GTmetrix jelentésemben, és feltehetőleg a leggyorsabb WordPress oldal készítő. Nem szabad lelassítani a webhelyét, ha egyáltalán. De ha úgy gondolja, hogy így van, ellenőrizze a GTmetrix Waterfall fület, hogy megnézze, mi okozza valójában a problémát.

&# X1f680; Milyen tárhelyet ajánlunk az Elementor webhelyek számára?

A népszerű Elementor Facebook-csoportban a SiteGround és a Cloudways általában a Facebookon végzett közvélemény-kutatások során a legjobban értékelt házigazdák.

Még mindig van egy lassú elem eleme?

Ezt mondom: A Cloudways és a WP Rocket megoldja a problémáinak 80% -át. A tárhely és a gyorsítótár-beépülő modul a WordPress optimalizálási útmutatójában a legnagyobb tényező. De ha az Elementor webhelye továbbra is lassú, akkor írj nekem egy megjegyzést a GTmetrix jelentéssel, és örülök, hogy megnézem. Csapatunk WordPress sebességszolgáltatásokat is kínál a GTmetrix jelentések előtti + utáni előkészítésével.

Egészségére,
Tomi

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