Wordpress

Az Automatizálás beállítása a WordPress webhelyhez

Az Autoptimize egy ingyenes WordPress optimalizáló bővítmény. A HTML, CSS és JavaScript optimalizálása mellett az Autoptimize optimalizálási funkciókat is tartalmaz, amelyek a modern WordPress webhelyek egyéb aspektusait célozzák meg.

Ebben a bejegyzésben megosztjuk a legjobb Autoptimize beépülő modul beállításait WordPress-webhelye teljesítményének és oldalsebességének javítása érdekében.

Miért az automatizálás?

Mielőtt belemerülnénk az Autoptimize legjobb beállításaiba, nézzünk meg gyorsan három okot, amelyek miatt az Autoptimize nagyszerű optimalizálási bővítmény.

  1. Az Autoptimize ingyenes verziója teljes funkciókészlettel rendelkezik a WordPress webhely optimalizálásához.
  2. Az Autoptimize szigorúan egy optimalizáló bővítmény, és nem végez HTML-oldal gyorsítótárat. Ez azt jelenti, hogy kompatibilis az összes webtárhellyel – még azokkal is, amelyek egyedi oldalgyorsítótárazási konfigurációkkal rendelkeznek, mint pl Behmaster.
  3. Az Autoptimize több mint 1 millió aktív telepítést tartalmaz a WordPress tárolójában, és folyamatosan frissül új funkciókkal és hibajavításokkal.

A JS-, CSS- és HTML-beállítások optimalizálása

A HTML, a CSS és a JavaScript az Autoptimize kenyere. Más optimalizálási beépülő modulokhoz hasonlóan az Autoptimize kiterjedt szolgáltatáskészletébe és beállításaiba való beleásás ijesztő feladat lehet. A dolgunk megkönnyítése érdekében összeállítottuk a legjobb Autoptimize beállításokat webhelye teljesítményének javításához.

JavaScript beállítások

JavaScript optimalizálás az Autoptimize-ben.
JavaScript optimalizálás az Autoptimize-ben.

Optimalizálja a JavaScript kódot

Javasoljuk, hogy engedélyezze ezt a lehetőséget. Ha a „JavaScript kód optimalizálása” engedélyezve van, az Autoptimize kicsinyíti a JavaScript-fájlokat.

Összesített JS-fájlok

Az Autoptimize „JS-fájlok összesítése” opciója egyetlen fájlba egyesíti az összes JavaScript-fájlt. A múltban a JS- és CSS-fájlok kombinálása kulcsfontosságú lépés volt a WordPress optimalizálásában. Nál nél Behmaster, modern HTTP/2 szervereket használunk, amelyek támogatják a párhuzamos letöltéseket és a multiplexelést – ez azt jelenti, hogy a fájlok kombinálása már nem olyan fontos, mint korábban, mert a HTTP/2 lehetővé teszi több fájl egyidejű letöltését. Ennek ellenére a CSS- és JS-fájlok összesítése bizonyos típusú WordPress-webhelyeken továbbra is gyorsulást eredményez, ezért javasoljuk, hogy tesztelje az oldalsebességet úgy, hogy ez az opció be van kapcsolva és letiltva.

Szintén Aggregate Inline JS

Az „inline JS is aggregate” opció kivonja a soron belüli JS-t a HTML-ből, és egyesíti az Autoptimize optimalizált JS-fájljával. Mivel ez a beállítás az Autoptimize gyorsítótár méretének gyors növekedését okozhatja, javasoljuk, hogy hagyja letiltva ezt a lehetőséget, hacsak nincs konkrét oka az engedélyezésére.

JavaScript kényszerítése

A legtöbb esetben nem javasoljuk, hogy JavaScript-fájlokat kényszerítsen be a webhely HTML-kódjába elem. A JS korai betöltésének kényszerítése olyan megjelenítést blokkoló elemeket eredményezhet, amelyek lelassíthatják az oldal sebességét. Ha JavaScript fájljai vannak, amelyeket be kell tölteni a elemet, javasoljuk, hogy zárja ki ezeket a szkripteket az Autoptimize szolgáltatásból.

Szkriptek kizárása az Automatizálásból

Ez a beállítás lehetővé teszi bizonyos könyvtárak és JavaScript-fájlok kizárását az összesítésből. Alapértelmezés szerint az Autoptimize kizárja a következő szkripteket.

  • wp-includes/js/dist/
  • wp-includes/js/tinymce/
  • js/jquery/jquery.js

Vegye figyelembe, hogy a kizárandó szkript hozzáadása alapértelmezés szerint csak az összesítést érinti. A kizárt JavaScript-fájlok továbbra is kicsinyítésre kerülnek, hacsak a „Kizárt CSS- és JS-fájlok kicsinyítése” jelölőnégyzet nincs bejelölve az „Egyéb beállítások” alatt.

Adja hozzá a Try-Catch csomagolást

A „try-catch wrapping hozzáadása” opció engedélyezésével a JavaScript-kód try-catch blokkokba kerül. Ez a beállítás hasznos a JS-minifikáció és aggregáció által okozott hibakeresési problémákhoz. Ha webhelye csak az „add try-catch wrapping” funkcióval működik, javasoljuk, hogy egy fejlesztővel dolgozzon együtt a JavaScript-fájlok áttekintésével, hogy azonosítsa a problémát okozó okot, mivel a try-catch blokkok túlzott használata csökkentheti a JS teljesítményét.

Automatizálás: az ingyenes WordPress optimalizáló beépülő modul, amelyről nem tudta, hogy szüksége van rá… de ettől villámgyors lesz a webhelye ⚡️Ez az útmutató pontosan elmagyarázza, miért van rá szüksége 🚀Kattintson Tweet

CSS-opciók

CSS optimalizálás engedélyezése.
CSS optimalizálás engedélyezése.

Optimalizálja a CSS-kódot

Javasoljuk, hogy engedélyezze ezt a lehetőséget. Ha a „CSS-kód optimalizálása” engedélyezve van, az Autoptimize csökkenti a CSS-fájlokat.

Összesített CSS-fájlok

Az Autoptimize „CSS-fájlok összesítése” opciója az összes CSS-fájlt egyetlen fájlba egyesíti. Amint azt korábban említettük, ez a funkció nem biztos, hogy előnyös a HTTP/2-t támogató webhelyek számára. Javasoljuk, hogy A/B tesztelje ezt a lehetőséget webhelyén, hogy megállapítsa, van-e pozitív hatása az oldal sebességére.

Összesített Inline CSS is

Ez az opció áthelyezi a soron belüli CSS-t az Autoptimize CSS-fájljába. Bár a beágyazott CSS böngésző által gyorsítótárazható CSS-fájlba való áthelyezése csökkentheti az oldal méretét, javasoljuk, hogy ezt a lehetőséget a legtöbb esetben letiltva hagyja.

Adatok generálása: URI-k a képekhez

Ha ez az opció be van kapcsolva, az Autoptimize a base64-be kódolja a kis háttérképeket, és beágyazza azokat a CSS-be. Javasoljuk, hogy tesztelje ezt a lehetőséget, hogy felmérje, milyen hatással van az oldal sebességére. Míg a képek base64 formátumba kódolása csökkenti a HTTP kérések számát, a base64 reprezentációs fájlok jellemzően 20-30%-kal nagyobbak, mint bináris megfelelőik.

Inline és Defer CSS

A kritikus CSS beillesztése jelentős sebességnövekedést eredményezhet egyes webhelyeken. Az ötlet itt a soron belüli stílusok, amelyek a „hajtás felett” lévő elemekhez szükségesek. A gyakorlatban a beépített CSS általában olyan elemeket céloz meg, mint a szerkezeti elemek, a globális betűtípuscsaládok és -méretek, valamint a navigációs stílus.

Ezen kulcselemek beillesztésével a nagyobb teljes CSS-fájl egy későbbi időpontban betölthető anélkül, hogy az oldal megjelenését befolyásolná. Bár lehetséges a kritikus stílusok manuális kinyerése, javasoljuk, hogy egy ehhez hasonló eszközt használjon a stílusok kiindulási pontként történő létrehozásához.

Kritikus CSS létrehozása.
Kritikus CSS létrehozása.

A kritikus CSS létrehozása után másolja ki és illessze be az Autoptimize beállításokba.

Beágyazott és elhalasztott CSS az Automatizálásban.
Beágyazott és elhalasztott CSS az Automatizálásban.

A következő lépés a webhely felhasználói felületének tesztelése. Ha a stílustalan tartalom furcsa felvillanását észleli (FOUC), akkor valószínűleg azonosítania kell ezeket a stílustalan elemeket, és hozzá kell adnia a megfelelő stílusokat az Automatizáláshoz a beillesztéshez.

Az Autoptimize egy „bekapcsolást” kínál, amely automatikusan létrehozza a kritikus CSS-t a WordPress-oldalakhoz. Tapasztalataink szerint ez a funkció időnként lelassíthatja webhelyét, mivel külső API-hívásokat használ a kritikus CSS létrehozásához. Így a kezdeti kritikus CSS-generálás egy külső szerver válaszkészségétől függ. A legtöbb esetben a fent említett módszer, amely nem igényel semmilyen külső API-hívást, tisztább megoldás.

Az összes CSS beillesztése

A legtöbb webhely esetében nem javasoljuk az összes CSS beillesztését, mivel ez drámaian megnövelheti az oldal méretét. Ezenkívül az összes CSS beillesztése lehetetlenné teszi a webböngésző számára a CSS gyorsítótárazását.

A CSS kizárása az Autoptimize szolgáltatásból

Az Autoptimize alapértelmezés szerint kizárja a következő könyvtárakat és CSS-fájlokat az összesítésből. Ha szeretné megakadályozni, hogy az Autoptimize összesítse CSS-fájljait, hozzáadhatja őket ehhez a listához. A JavaScript-kizáráshoz hasonlóan ez a funkció alapértelmezett viselkedése nem akadályozza meg a CSS-fájlok minimalizálását – csak összesítését.

  • wp-content/cache/
  • wp-content/uploads/
  • admin-bar.min.css
  • dashicons.min.css

HTML-beállítások

Az Autoptimize HTML-optimalizálása a szóközök eltávolításával segíthet csökkenteni az oldalak méretét.

HTML optimalizálás az Autoptimize-ben.
HTML optimalizálás az Autoptimize-ben.

Optimalizálja a HTML kódot

Javasoljuk a „HTML optimalizálása” kód funkció engedélyezését, mert csökkenti az oldal méretét azáltal, hogy eltávolítja a szükségtelen szóközöket a HTML-ből. Bár ez a funkció a legtöbb webhellyel kompatibilis, a szóközök eltávolítása hibákat okozhat egyes webhelyeken. Ezért azt javasoljuk, hogy alaposan tesztelje le a HTML-kód optimalizálását, mielőtt éles környezetben használná.

Tartsa meg a HTML megjegyzéseket

Engedélyezze ezt a funkciót, ha meg szeretné tartani a HTML megjegyzéseket az optimalizált oldalain.

CDN-beállítások

Ha CDN-hez hasonlót használ BehmasterA statikus eszközök felgyorsításához hozzá kell adnia a CDN URL-címét az Automatizáláshoz. Ha olyan proxyszolgáltatást használ, amely CDN-képességekkel rendelkezik, mint például a Cloudflare, akkor semmit sem kell konfigurálnia az Autoptimize CDN-beállításaiban.

Konfigurálja a CDN-beállításokat az Automatizálásban.
Konfigurálja a CDN-beállításokat az Automatizálásban.

Cache Info

Az Autoptimize „gyorsítótár-információi” olyan fontos információkat jelenítenek meg, mint a gyorsítótár-mappa helye és engedélyei, valamint a gyorsítótárazott stílusok és szkriptek teljes mérete. Ha a „Nem” feliratot látja az „Írhatunk?” mellett, akkor a mappaengedélyek javításához együttműködnie kell a gazdagéppel.

A gyorsítótár adatainak optimalizálása.
A gyorsítótár adatainak optimalizálása.

Egyéb beállítások

Az Autoptimize néhány különféle optimalizálási beállítást tartalmaz. Ha problémái vannak az optimalizált CSS- és JS-fájlok webhelyére való betöltésével, előfordulhat, hogy újra kell konfigurálnia az alábbi beállításokat.

Különféle optimalizálások az Automatizálásban.
Különféle optimalizálások az Automatizálásban.

Az összesített szkriptek/CSS mentése statikus fájlként

Javasoljuk, hogy engedélyezze ezt az opciót, ha az összesített fájlokat statikus fájlokként szeretné helyileg menteni. Lehetséges, hogy ezt le kell tiltania, ha a kiszolgáló nincs beállítva a fájltömörítés és a lejárat kezelésére.

Minimalizálja a kizárt CSS- és JS-fájlokat

Javasoljuk, hogy engedélyezze ezt a lehetőséget, hogy biztosítsa az összes CSS- és JS-fájl minimalizálását. Ha azonban néhány, a kizárt CSS- és JS-fájlnál a kicsinyítéssel kapcsolatos problémákat észlel, letilthatja ezt a lehetőséget.

Optimalizálja a bejelentkezett szerkesztők/adminisztrátorok számára is

Javasoljuk ennek engedélyezését, hogy biztosítsa az eszközök optimalizálását a bejelentkezett szerkesztők és rendszergazdák számára. Ez akkor fontos, ha bejelentkezett felhasználóként teszteli az optimalizálási beállításokat.

Kiváló, gyors és biztonságos tárhelyre van szüksége új e-kereskedelmi webhelyéhez? Behmaster rendkívül gyors szervereket és 24 órás, világszínvonalú támogatást biztosít a WooCommerce szakértőitől. Tekintse meg terveinket

Képoptimalizálás az Autoptimize-ban

Az Autoptimize beépített integrációt kínál a ShortPixel-lel a képek optimalizálásához. A képminőség beállítása mellett az Autoptimize integrációja lehetővé teszi a képek WEBP-verzióinak létrehozását és kiszolgálását is.

A Behmaster felhasználók számára nem javasoljuk a képoptimalizálási funkció használatát az Autoptimize programban. Ehelyett azt javasoljuk, hogy közvetlenül használja a ShortPixel vagy az Imagify teljes funkcionalitású bővítményeit. A teljes beépülő modul segítségével részletesebben szabályozhatja az optimalizálási beállításokat, beleértve a képek átírását a használathoz címke, amely szükséges a WEBP támogatásához Behmaster.

A képek lusta betöltése az Automatizálással.
A képek lusta betöltése az Automatizálással.

Az Autoptimize a képek lusta betöltési funkcióját is tartalmazza. Javasoljuk, hogy engedélyezze ezt a funkciót, hogy javítsa az oldalsebességet a nehéz oldalakon. Ha a lusta betöltés engedélyezve van, az Autoptimize lehetővé teszi bizonyos képosztályok és fájlnevek lusta betöltésének kizárását.

A kizárási beállítás hasznos az olyan képeknél, mint az emblémák, közösségi ikonok és más fontos képelemek, amelyeket nem szabad lustán betölteni. Ha olyan megoldást keres, amely jobban szabályozza a lusta betöltést, tekintse meg útmutatónkat a képek és videók lusta betöltéséről a WordPressben.

Extra optimalizálás az Automatizálásban

Extra optimalizálás az Automatizálásban.
Extra optimalizálás az Automatizálásban.

Google Fonts

Az Autoptimize néhány különböző lehetőséget kínál a Google Fonts optimalizálására. Az Ön számára legjobb választás attól függ, hogy webhelye hogyan használja a Google Fonts szolgáltatást.

  • Hagyd úgy ahogy van.
  • Távolítsa el a Google Fonts-t.
  • Kombinálja és kapcsolja össze a fejben.
  • Kombinálja és előfeszítse a fejben.
  • Kombinálja és töltse be a betűtípusokat aszinkron módon a webfont.js segítségével.

Nem javasoljuk a „hagyja úgy, ahogy van” opció használatát, mert nem kínál sebességelőnyt.

Ha a Google Fonts nem kritikus követelmény az Ön webhelyén, akkor ezek eltávolítása és helyette egy rendszer-betűkészlet használata óriási pozitív hatással lehet az oldal sebességére.

Ha meg szeretné tartani a Google Fonts szolgáltatást a webhelyén, javasoljuk, hogy próbálja ki az utolsó három lehetőséget, hogy megtudja, melyik működik a legjobban webhelyén.

Távolítsa el a hangulatjeleket

Ez az Automatizálás opció eltávolítja a WordPress alaphangulatjeleivel kapcsolatos CSS-t és JavaScriptet. Javasoljuk, hogy engedélyezze ezt a lehetőséget, mert csökkentheti az oldal méretét. Ezen túlmenően a legtöbb általános operációs rendszer emojikat tartalmazó betűkészlet-készlettel érkezik. Természetesen vannak más módok is a hangulatjelek letiltására a WordPress webhelyén.

Távolítsa el a lekérdezési karakterláncokat a statikus erőforrásokból

Ha el szeretné távolítani a lekérdezési karakterláncokat (pl. ?ver=) a statikus erőforrásokból, engedélyezheti ezt a lehetőséget. A lekérdezési karakterláncok eltávolítása nem befolyásolja a betöltési időt, de javíthatja webhelye pontszámát a GTmetrix, a Google Pagespeed és más teljesítménytesztelő szolgáltatások terén.

Előcsatlakozás harmadik fél domainjéhez

Az előcsatlakozási direktíva lehetővé teszi, hogy a böngésző meghatározott tartományokhoz kapcsolódjon a DNS-keresések és az SSL-kézfogási tárgyalások feldolgozásához, mielőtt a teljes HTTP-kérést elküldené.

Például, ha webhelyének emblémája van, amelyről a rendszer szolgál https://site.behmaster.cdn.com/logo.png, akkor utasíthatja az Autoptimize-t, hogy adjon hozzá egy preconnect direktívát a kezdeti DNS- és SSL-kapcsolatok kezelésére elemet, mielőtt a HTTP-kérés megtörténik a eleme a HTML-nek.

Használhatja böngészője fejlesztői eszközeit vagy felügyelőjét, hogy megkeresse azokat a fontos külső domaineket, amelyekhez előzetesen csatlakozhat. Az alábbi példaoldalon a következő tartományokhoz érkeznek külső kérések.

  • https://cdn.brianli.com
  • https://www.google-analytics.com
  • https://www.googletagmanager.com

Ez a három tartomány hozzáadható az Autoptimize előcsatlakozási listájához.

Keressen külső eszközöket fejlesztői eszközökkel.
Keressen külső eszközöket fejlesztői eszközökkel.

Teljesítmény okokból azt javasoljuk, hogy legfeljebb hat tartományt adjon hozzá az Autoptimize előcsatlakozási listájához, mert az előcsatlakozási direktívák túl sok tartományhoz történő megadása teljesítményhiányt eredményezhet.

Egyedi kérések előtöltése

Az előtöltési utasítások arra utasítják a böngészőt, hogy a lehető leghamarabb töltsön le egy elemet. Ez az irányelv akkor hasznos, ha olyan eszközöket tölt le, amelyekre az oldalbetöltési folyamat nagyon korai szakaszában van szükség. A gyakorlatban az előbetöltést gyakran használják az egyéni betűtípusok betöltési idejének felgyorsítására, még azelőtt betöltve őket, hogy az oldal CSS-jében kérésre kerülnének.

Javasoljuk, hogy konzultáljon egy fejlesztővel azzal kapcsolatban, hogy mely eszközöket (ha vannak ilyenek) kell előre betölteni a WordPress webhelyére. Sok más, a teljesítménnyel kapcsolatos módosításhoz hasonlóan a túl sok elem előzetes betöltése lassíthatja a webhely betöltését.

JavaScript-fájlok aszinkronizálása

Az Autoptimize „async JavaScript files” funkciója lehetővé teszi bizonyos külső JavaScript-fájlok megadását aszinkron módon történő betöltésre a async HTML zászló. Bár a JS-fájlok aszinkron betöltése javíthatja az oldal sebességét, javasoljuk, hogy végezzen megfelelő tesztelést, hogy megbizonyosodjon arról, hogy a webhely működését nem érinti.

Ha még nem használja az Autoptimize-t, az útmutató elolvasása után mielőbb fel kell vennie ezt a WordPress optimalizálási beépülő modult webhelyére 🚀Kattintson Tweet

Összegzés

Ha tudja, hogyan kell módosítani a beállításait, az Autoptimize beépülő modul jó választás a WordPress-felhasználók számára, akik a webhely teljesítményét szeretnék növelni.

Az olyan alapvető funkciókkal, mint a HTML- és CSS-optimalizálás, valamint a fejlettebbek, mint például a CDN-integráció, valamint az előcsatlakozási és előtöltési direktívák megadásának képessége, az Autoptimize mindent tartalmaz, amire szüksége van a WordPress-webhely kezelőfelületének teljesítményének optimalizálásához.

Ha többet szeretne megtudni a WordPress optimalizálásáról és webhelye háttérrendszerének optimalizálásáról, feltétlenül tekintse meg átfogó WordPress teljesítmény-útmutatónkat.

Kapcsolódó cikkek

0 Hozzászólások
Inline visszajelzések
Az összes hozzászólás megtekintése
Vissza a lap tetejére gombra