Az ideális automatikus optimalizálás + Cloudflare / StackPath CDN (2020)

Autoptimize egy nagyszerű bővítmény, de a gyorsítótárazáshoz a WP Rocket általában a Facebook egyik közvélemény-kutatásainak első helyezettje.


Szóval miért használnád??

Mert néhány házigazda kedveli Hajrá apu és WP motor a legtöbb gyorsítótár-bővítmény feketelistára kerül (mivel saját beépített gyorsítótár-rendszerrel rendelkezik), de nem végeznek olyan tevékenységeket, mint például a HTML, CSS, JavaScript, a Google betűtípusok vagy a CDN (tartalomszolgáltatási hálózat) optimalizálása. Tehát, bár a gazdagép gyorsítótárazási rendszere jól működik a gyorsítótárazásban, az Autoptimize segít a dolgok „többi részében” (elemek rögzítése a GTmetrix + Pingdom-ban). Kerülje el a Google PageSpeed ​​Insights-t még a mérési időt sem méri.

Még az Autoptimize fejlesztő azt mondja plugin-oldalán, hogy a legjobban akkor működik, ha egy gyorsítótár plugin-rel kombinálják. Ajánlom a Swift-t, ha ingyenes útvonalon megy, és WP rakéta ha meg tudod csinálni évente 49 dollárt, mivel könnyebben konfigurálható (ez szintén az, amit használok, és 100% -os pontszámom van a GTmetrix-ben), mivel sok olyan funkcióval érkezik, amelyben a legtöbb gyorsítótár-bővítmény nem található meg (adatbázis-tisztítás, a Google Analyitcs kódjának helyi tárolása, szívverés vezérlés és integráció mind a Cloudflare + más CDN-ekkel). Van oktatóanyagaim a WP Rocket számára, Gyors, WP leggyorsabb gyorsítótár, W3TC, sőt a WP Super gyorsítótár.

Tehát konfiguráljuk az Automatikus optimalizálás beállításait. Megmutatom továbbá, hogyan kell CDN-t hozzáadni (ideális esetben mindkettőt CloudFlare és StackPath), mivel mindegyik rendelkezik saját adatközpontokkal, és több adatközpont = gyorsabb tartalomszállítás. CDN-k ajánlottak A WordPress optimalizálási útmutatója.

A bővítmény automatikus optimalizálása

1. JS, CSS, & HTML

Engedélyezze ezeket a JavaScript, CSS és HTML fájlok optimalizálásához, majd olvassa el az alábbi utasításokat.

Automatikusan optimalizálja a JS CSS HTML beállításait

Optimalizálja a JavaScript kódot

  • Összesített JS-fájlok: engedélyezés, ez egyesíti a JavaScript fájlokat a GTmetrix ajánlása szerint. Letiltás esetén az egyes fájlok betöltésre kerülnek, és nem kombinálódnak.
  • Szintén aggregált inline JS: engedélyezés, ez egyesíti a HTML fájlokban található JavaScript fájlokat. Az Automatikus optimalizálás figyelmeztetést jelent, amely alapvetően azt jelenti, hogy bármi megsérti az Ön webhelyét, vagy kizárja a JavaScript fájlokat, vagy letiltja ezt.
  • Kényszerítse a JavaScriptet be : letiltás, hacsak nincs JavaScript hibája. Jobb, ha megpróbálja megtalálni a problémás fájlokat, és kizárja azokat, mint kiválasztja ezt az opciót, mivel ez a JavaScriptet teszi a blokkolásgá (nem a sebesség szempontjából optimális).
  • Kizárja a szkripteket az Automatikus optimalizálásból: ha bizonyos JavaScript-beállítások engedélyezése után hibákat észlel, keresse meg a problémás JavaScript-et, és zárja ki a fájlokat itt.
  • Adjon hozzá próbacsomagolást: letiltás, hacsak nincs JavaScript hibája. Ez egy másik módja a JS hibák kijavításának, anélkül, hogy engedélyeznie kellene a JavaScriptet a fejben.

Optimalizálja a CSS kódot

  • Összesített CSS-fájlok: Engedélyezze, ugyanúgy, mint a JS-fájlok összesítése csak a CSS-hez.
  • Összesített inline CSS is: engedélyezze, ugyanúgy, mint az inline JS-fájlok összesítése csak a CSS-hez. Engedélyezze mindkettőt, hogy tovább javítsák a betöltési időket + a GTmetrix pontszámait.
  • Adatok generálása: URI-k a képekhez: letiltás CDN használata esetén. MaxCDN (StackPath) figyelmeztet téged hogy ennek lehetővé tétele arra kényszeríti a képeket, hogy a származási helyükről szolgáljanak a CDN helyett. Ennek engedélyezése kezdetben kevesebb HTTP-kérést eredményez, de valószínűleg nem azután, hogy beállított egy CDN-t és a képeket ezen keresztül szolgálja ki.
  • Inline és halasztott CSS: Engedélyezés, csak ezt a lehetőséget engedélyezheti, vagy „az összes CSS-t beillesztheti”, amelyet az Automatikus optimalizálás a GYIK-ben nem javasol. Azt mondják: „bár az összes CSS behúzása megakadályozza, hogy a CSS blokkolódjon, az alap HTML-oldal jelentősen nagyobb lesz, tehát több„ körút ”szükséges.
  • Összes CSS beillesztése: letiltás, az Automatikus optimalizálás nem javasolja ennek engedélyezését.
  • A CSS kizárása az automatikus optimalizálásból: ha bizonyos CSS-beállítások engedélyezése után hibákat észlel, keresse meg a problémás CSS-fájlokat, és zárja ki őket itt. Megjegyzés: A Egyéb lehetőségek „kicsomagolni a kizárt CSS és JS” opcióját le kell tiltani.

2. CDN opciók

Itt van a te CDN URL megy (utasítások lent). A Cloudflare nem nyújt Önnek CDN URL-t (ehelyett a névszervereket fogja megváltoztatni). A CDN alap URL-je kifejezetten a StackPath, a KeyCDN és más CDN-k számára készült – nem Cloudflare. Javaslom mind a StackPath + Cloudflare használatát, mivel a CDN-k több adatközponttal és több adatközponttal rendelkeznek = gyorsabb webhely.

1. lépés: Iratkozzon fel a CDN-re. A StackPath-ot használom, aki legalább 34 adatközponttal rendelkezik, amelyek nagymértékben találhatók az Egyesült Államokban, és ahol a legtöbb látogatóm van. Havi 10 dollár egy ingyenes 30 napos próbaverzióval.

StackPath-Data-központok

2. lépés: A StackPath irányítópultján kattintson a CDN fülre, majd hozzon létre egy StackPath CDN webhelyet.

StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-kiszolgáló-IP-cím

* Másolja ki a kiszolgáló IP-címét, ahogy az szükséges a szakasz 5. lépésében.

StackPath-CDN-URL-Autoptimize

3. lépés: Illessze be a CDN URL-jét az automatikus optimalizáláshoz a http: // vagy a https: // segítségével (bármit is használ).

A CDN URL automatikus optimalizálása

4. lépés: A StackPath alkalmazásban lépjen a CDN → Cache beállítások menübe, majd kattintson a „Mindent megtisztít” elemre.

StackPath-Purge-Cache

5. lépés: Engedélyezze a szerver IP-címét a StackPath-ban (WAF → tűzfal).

StackPath-Whitelist-IP

6. lépés: Futtassa a webhelyet a GTmetrix alkalmazásban, és a „tartalomszolgáltatási hálózat” zöld színű legyen az YSlow-ban.

CDN GTmetrix YSlow

3. Egyéb beállítások

Itt vannak az Egyéb beállítások:

Az Egyéb beállítások automatikus optimalizálása

Mentse az összesített szkriptet / css-t statikus fájlokként – ha engedélyezve van, ez azt jelenti, hogy a CSS és a JS fájlokat a gyorsítótárba menti és kiszolgálón keresztül szolgálják fel, tehát ha a tárhelyed nem kezeli ezeket, engedélyezze azt..

Minimalizálja a kizárt CSS és JS fájlokat – ha kizár bizonyos CSS- és JavaScript-fájlokat, az azért van, mert probléma merül fel azok optimalizálása során, és nem akarja, hogy min.

Optimalizálja a bejelentkezett szerkesztők / adminisztrátorok használatát is – letiltás, általában a WordPress rendszergazdai teljesítményfunkciókat, többek között a Cloudflare teljesítményfunkciókat szeretné letiltani.

4. Képek beállításai

Az automatikus optimalizálás segíthet a képek gyorsabb betöltésében is.

A Képek beállításainak automatikus optimalizálása

Optimalizálja a képeket – A webhely URL-jét megváltoztatja A ShortPixel CDN. Ez nem befolyásolja a kinézetüket, mindaddig, amíg veszteségmentes tömörítés történik, de gyorsabban töltődnek be.

Képoptimalizálási minőség – Találja meg saját egyedi egyensúlyát a tömörítés és a minőség között (Használom a Fényes). Itt vannak a különbségek az egyes tömörítési szinteken a ShortPixelhez képest:

ShortPixel képtömörítési szintek

  • veszteséges: a legtöbb tömörítés, a legtöbb minőségvesztés.
  • Fényes: közepes tömörítés, kis minőségromlás.
  • Lossless: alacsony tömörítés, a legkisebb minőségvesztés.

Töltse be a WebP-t a támogatott böngészőkbe – engedélyezve, ha WebP képeket használ, és lusta betölti a képeket.

Lusta betölteni képeket – Személy szerint nem lusta töltöm be a képeimet, mert a folyamatos képek betöltése az oldal görgetésekor idegesítő lehet a felhasználók számára. Igen, kevesebb kérést eredményez és van a Google által ajánlott a gyorsabb terhelési idők érdekében, de idegesítőnek találom. Ez teljesen rajtad múlik.

5. Kritikus CSS

Ez utal a Automatikusan optimalizálja a kritikuscss.com beépülő modul pluginját.

Prémiumot igényel fizetett terv a kritikuscss.com oldalon ($ 7 / hónap).

A plugin kritikus CSS-szabályokat hoz létre annak biztosítása érdekében, hogy az oldalak megjelenjenek a teljes CSS betöltése előtt, javítva a „megjelenítési idő kezdetét”. Csak annyit kell tennie, hogy telepíti a beépülő modult, feliratkozik egy tervre, írja be a Kritikus CSS API kulcsot az Automatikus optimalizálás „Kritikus CSS” szakaszába, a többi pedig a többi. Ellenőrizze a bővítményt GYIK oldal az egyedi konfigurációk részleteiről.

Személy szerint nem használom, inkább egy havi 7 dollárt fizetnék egy erősebb szerverre.

Automatikusan optimalizálja a kritikus címek bekapcsolását

Automatikusan optimalizálja a kritikus CSS-beállításokat

6. Extra beállítások

Autoptimize-Extra-beállítások

Google betűtípusok – engedélyezze, ha használja Google betűtípusok amelyek lelassítják a betöltési időket, amikor külső forrásokból (a Google Font könyvtárba) vonják őket. Inkább a „összekapcsolás és összekapcsolás a fejben” opciót részesítem előnyben, mivel ez javítja a betöltési időket anélkül, hogy láthatóvá válna a betűkészletek betöltése (ez általában történik aszinkron betöltéskor. Tesztelje az utolsó Google Font opciót is: „a betűtípusok összeillesztése és betöltése aszinkron módon a webfont.js”És megnézheti, melyik eredményez jobb eredményeket a GTmetrixben.

Távolítsa el a hangulatjeleket – engedélyezése (a hangulatjelek nem befolyásolják a betöltési időket).

Távolítsa el a lekérdezési karakterláncokat a statikus forrásokból – A lekérdezési karakterláncokat általában pluginok generálják, és nem javíthatók (a GTmetrix / Pingdom alatt), hogy ezt egyszerűen engedélyezze, de kipróbálhatja. A jobb megoldás az, ha ellenőrzi a webhelyén a magas CPU-bővítményeket, és kicseréli őket könnyű bővítményekre. A legtöbb magas CPU-bővítmény közé tartozik a közösségi megosztás, a galéria, az oldalkészítők, a kapcsolódó hozzászólások, statisztikák és az élő chat-bővítmények. Törölnie kell az összes felesleges plugint is, és meg kell tisztítania az adatbázist (pl WP-optimalizálása) az eltávolított pluginek maradt tábláinak törléséhez.

Előcsatlakozás a harmadik fél domainjeihez – segít a böngészőknek a külső forrásokból (Google Fonts, Analytics, Maps, Tag Manager, Amazon áruház stb.) Származó kérések előrejelzésében. Ezek általában „csökkentik a DNS-keresést” kifejezéssel a GTmetrix jelentésben, de az alábbiakban általános példák találhatók.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Különleges kérések előtöltése – további információkat talál az előterhelésről és a böngésző erőforrás-tanácsok a WP Rocketből, de ez alapvetően megkönnyíti bizonyos fájlok kiemelt prioritásként történő letöltését.

Async Javascript-Files – ez azt jelenti, hogy valami megakadályozza a hajtás feletti tartalom gyors betöltését. Ez az oktatóanyag a teszi a JavaScriptek blokkolását jól magyarázza, de ha JavaScript hibákat lát a GTmetrixben és a Pingdomban, akkor a Async JavaScipt plugin csinálhatja a trükköt.

Optimalizálja a YouTube videókat – ha webhelyén vannak videók, WP YouTube Lyte a lusta betölti őket, így csak akkor töltődnek be, amikor a felhasználók lefelé görgetnek, és kattintanak a lejátszás gombra, így kiküszöbölve a YouTube szervereinek kezdeti kérelmeit. Ez meggátolhatja, hogy több másodperc alatt a videókat tartalmazó tartalmak betöltődjenek, mivel ezek az egyik legnehezebb elem az oldalon. A WP Rocket és a Swift Performance rendelkezik beépített beállításokkal, így nem kell erre, ha egyikét használja gyorsítótár-bővítményként.

7. Optimalizáljon többet

Ha tovább szeretné optimalizálni webhelyét, akkor az alábbiakban javasoljuk az eszközöket:

WP rakéta – több Facebook közvélemény-kutatásban osztályozta az első számú gyorsítótár-bővítményt, és számos olyan lehetőséggel rendelkezik, amelyek nem tartoznak az Autoptimize-hez (adatbázis-tisztítás, pulzuskezelés, a Google Analytics helyi tárolása, a YouTube iframe helyettesítése előnézeti képpel, a böngésző gyorsítótárának hozzáadása a Facebook Pixelhez stb.). A WP Rocket szintén kezeli az Autoptimize műveleteket, tehát csak egy pluginre van szükség a sebesség optimalizálásához. Ezért olyan nagyszerű. 10% -ot engedhet meg itt.

ShortPixel – a népszerű képoptimalizáló plugin és az általam használt.

StackPath – CDN 30+ adatközponttal. Nagyon könnyű beállítani; csak regisztráljon egy tervet (10 USD / hó), majd másolja / illessze be CDN URL-jét a CDN URL automatikusoptimizálása opcióba.

SiteGround – általában a Facebook közvélemény-kutatások során az első számú gazdagépet értékelte, és azt is Yoast használta.

Yoast-on-en-Mi-éppen bekapcsolt to-Siteground

2019 Host Poll

2017-WordPress tárhely-FB-Poll

Az Elementor ajánlásai

2019. július hosting ajánlás

WordPress-Host-Poll-Aug-2018

Közös tárhely-Poll 2017

2019-tárhely-Poll

Go-To-hosting-cég

WordPress tárhely-Poll 2017

Sikerült tárhely-Poll

WooCommerce tárhely-FB-Poll

2016-Web-Hosting-Poll

Legjobb WordPress tárhely-szolgáltató-Poll

A legjobb Web-Hosting 2019-Poll

WP Barátságos Host Poll

2016-WordPress tárhely-FB-Poll

Kedvenc tárhely az Elementor számára

2018. évi tárhely-ajánlások

Sikerült-WordPress tárhely-Poll 2017

2019-Host-Poll-1

Tárhely-Poll-For-Speed

WordPress tárhely-Poll június 1-

SiteGround-ajánlás

2014-Managed-WordPress tárhely-FB-Poll

A legjobb Web-Hosting-Provider-Poll

Tárhely-Poll-Feb-2019

Tárhely-ajánlások-Poll

Bluehost vs SiteGround

WordPress Web Host közvélemény-kutatás

Az emberek általában azért vándorolnak, mert ők sebesség technológia sokkal gyorsabb, mint EIG vagy GoDaddy:

Váltás a SiteGround-re

A siteGround betöltési idejű migráció

Bluehost a SiteGround GTmetrixhez

HostGator a SiteGround-hez

SiteGround Google PageSpeed ​​Insights

100 tökéletes eredmény a SiteGround-en

SiteGround Genesis

A SiteGround által biztosított sebesség

Csökkentett terhelési idő a SiteGround használatával

Új SiteGround válaszidők

HostGator a SiteGround áttelepítéshez

SiteGround válaszidők Joomlán

Váltás a SiteGround tárhelyre

SiteGround Rocket Képzelje el a Combo-t

SiteGround PageSpeed ​​Insights

SiteGround a Joomla-on

A SiteGround csökkentett terhelési ideje

SiteGround gyors tárhely

Új SiteGround válaszidő

SiteGround válaszidő javítása

A SiteGround szintén megteszi szabad migráció a GrowBig-rel+.

Cloudways – gyorsabb, mint a SiteGround (felhő-tárhely, nem megosztott), és a Facebook közvélemény-kutatásokban szintén magasra értékelték. Havonta 10 dollárral kezdődik DigitalOcean terv. 1 ingyenes áttelepítést kínálnak (amit én felvettem), és ez történt a szerver válaszidejével:

SiteGround vs Cloudways-Cloud tárhely

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 Response Times

WP motor felhőalapokhoz

Névtelen

Cloudways Pingdom betöltési idő

Cloudways-Facebook-Review

25% kedvezményt kaphat a Cloudways első két hónapjából promóciós kóddal OMM25.

Kinsta – 30 dollár havi prémium tárhely, és bár még nem próbáltam őket, nem hallottam semmi mást, csak nagyszerű dolgokat a Kinsta sebességéről, támogatásáról, működési idejeiről és szinte mindent a fogadásról.

Perfmatters – Kinsta plugin, amely vigyáz arra, amit szeretek „különféle optimalizálásoknak” hívni, mint például a pluginek szelektív letiltása, az utólagos felülvizsgálatok korlátozása, az automatikus mentések letiltása, a Google Analytics helyi tárolása és még sok más. Ez gondoskodik a sebesség utolsó 10% -áról.

Ezek közül néhányat az Autoptimize ajánlja, mások nem:

A hozzáadott elemek automatikus optimalizálása

8. Felhő fény

Az Automatikus optimalizálás beállításokkal nem rendelkezik Cloudflare ”CDN, de ezt könnyű beállítani. És határozottan kellene, mert ez növeli 200 további központ a tartalomszolgáltató hálózatra (CDN).

Cloudflare adatközpontok

1. lépés. Iratkozzon fel a Cloudflare szolgáltatásra, és felkérést kap a webhely felvételére és a vizsgálat beindítására.

CloudFlare-kezdődik-scan

2. lépés. Miután a szkennelés befejeződött, válassza ki az ingyenes tervet, majd a Cloudflare végigvezeti egy oldalkészleten. Végül arra az oldalra kerül, ahol a Cloudflare hozzárendel 2 nameservers.

CloudFlare-name-servers-Portál

3. lépés. Jelentkezzen be a domain regisztrátorába (pl. Namecheap), és végezzen egy Google-keresést a “Hogyan változtasson meg a névkiszolgálókat a Namecheap-en” (csak a domain regiszterében keressen) elemet, majd kövesse az utasításokat. Másolja a Cloudflare által biztosított 2 névkiszolgálót, és beilleszti őket egy domain névregisztráló egyéni névszerverbe. Hagyja 72 órán át szaporodni.

A Godaddy Cloudflare névkiszolgálók

Ez az!

Mi a következő lépés?

Nézze meg a videót – ez egy 42 perces videó, de nagyjából mindent lefedek (a videó leírásában szereplő időbélyegzők), és rengeteg nagyszerű információt kell megtanulnod a WordPress webhelysebességéről:

Szeretné tudni, hogy kaptam 100% -ot a GTmetrix-ben?
Tekintse meg a teljes WordPress sebesség-optimalizálási útmutatót, amelyben több mint 38 tipp található a GTmetrix / Pingdom elemek rögzítéséhez, beleértve a PHP 7-re történő frissítést, méretezött képek megjelenítését, a kép méretének meghatározását, az adatbázis tisztítását, a Google Analytics helyi tárhelyét, a WP Disable-t és mások.

Gyakran Ismételt Kérdések

&# X1f680; Szükségem van más sebességű bővítményekre az Autoptimizálás mellett?

Igen, általában egy plugint is használ a gyorsítótárazáshoz, a kép optimalizálásához, az adatbázis tisztításához, a szívverés vezérléséhez és a pluginek szelektív letiltásához. Ajánlom azoknak a WP Rocket, ShortPixel és Perfmatters eszközöket.

&# X1f680; Hogyan állíthat be egy CDN-t az Autoptimize funkcióval?

Válassza ki a CDN-t (a StackPath-ot használom), másolja át a CDN-URL-t, és illessze be az Autoptimize CDN UR mezőjébe.

&# X1f680; Hogyan lehet optimalizálni a Google Betűtípusokat az Automatikus optimalizálás funkcióval??

Azt javaslom, hogy használja a Kombinálás és összekapcsolás fejben lehetőséget, és hogy előzetesen csatlakoztassa a betűkészleteket az Automatikus optimalizálás használatával.

&# X1f680; Az Autoptimize gondoskodik a gyorsítótárazásról?

Nem, külön tárolót kell használnia a gyorsítótárazáshoz. A SiteGround használata esetén a WP Rocket vagy az SG Optimizer használatát javaslom.

&# X1f680; Hogyan konfigurálhatja az automatikusoptimalizálási beállításokat?

Mindent felsorolunk ebben az oktatóanyagban – csak tartsuk szemmel a GTmetrix jelentést és az egyes tételeket, amelyeket meg kell javítani. Ha a beállítások konfigurálása az Automatikus optimalizálás funkcióban nem javul, akkor fontolja meg egy másik plugin használatát az elemek javításához.

Kérdései vannak? Dobj nekem egy sort!
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