Ha WordPress-webhelye fizetős WordPress-témát vagy a hivatalos WordPress Themes-tárból származó népszerű témát használ, valószínű, hogy a témát különféle felhasználási esetekre fejlesztik. És előfordulhat, hogy a témában elérhető összes funkciónak csak egy kis részét használja.
Ebben az esetben a webhelye rengeteg fel nem használt CSS-t tölt be, amely nem szükséges a webhely oldalainak stílusához. Például az Ön által használt WordPress témának lehetnek stílusai a WooCommerce oldalakhoz is, de ha csak egy blogot futtat a WordPress webhelyén, akkor nem használja a WooCommerce oldalaihoz mellékelt CSS-t a webhelyén, és így nem használ. CSS a felhasználóknak.
Ha tesztelte webhelyét a Google Pagespeed eszközzel, valószínűleg már tudja, hogy webhelye nem használt CSS-problémákkal rendelkezik. Ebben az útmutatóban bemutatjuk, hogyan ellenőrizheti először a nem használt CSS-t, majd egy ingyenes eszközzel távolíthatja el a nem használt CSS-t a WordPress webhelyéről.
A fel nem használt CSS ellenőrzése
A Google Chrome DevTools (amely akkor jelenik meg, amikor a helyi menüben a „Vizsgálat” lehetőségre kattint) rendelkezik egy Lefedettség funkcióval a Források lapon. A Lefedettség lehetőséggel megkeresheti a webhelye által betöltetlen, nem használt CSS-eket és JS-eket.
- Nyissa meg webhelyét a Chrome-ban az asztalon.
- Kattintson a jobb gombbal a webhelyen lévő üres területre, és válassza ki a lehetőséget Vizsgálja meg a helyi menüből.
- Kattintson a Források fület, nyomja meg Ctrl + Shift + P parancsablak megnyitásához, majd írja be lefedettség és válassza ki Indítsa el a lefedettség műszerezését, és töltse be újra az oldalt elérhető parancsokból.
- A Lefedettség lapon kattintson a URL-szűrő mezőt, és írja be ide webhelye gyökérdomainjét, hogy csak a belső CSS/JS-fájlok jelenjenek meg.
└ Ellenőrizze a Fel nem használt bájtok oszlopban megtekintheti a témából származó CSS/JS-fájlba betöltött adatok százalékos arányát.
- Kattintson egy CSS-fájlra a webhelye által betöltött, fel nem használt (piros sávokkal jelölt) CSS megtekintéséhez. Az aktuális oldalon használt CSS zöld sávokkal jelenik meg.
Miután elemezte az összes fel nem használt CSS-t, amely betöltődik a webhelyére, ideje eltávolítani azt. Számos ingyenes eszköz áll rendelkezésre a fel nem használt CSS eltávolítására a weboldalakról. Az alábbiakban az egyik népszerű eszköz, amelyet teszteltem és használtam a saját projektjeimhez.
Használja a PurifyCSS Online-t a fel nem használt CSS eltávolításához
Általában a WordPressben szinte mindenhez találhat plugint. De a fel nem használt CSS eltávolításához sajnos egyetlen bővítmény sem áll rendelkezésre. Ezért manuális, nem WordPress-specifikus eszközöket fogunk használni a fel nem használt CSS eltávolítására a webhelyről.
A PurifyCSS a leginkább barátságos, nem fejlesztői eszköz megtalálhatja a nem használt CSS kezelését. Az eszköz egyszerű felhasználói felülettel rendelkezik, amely lehetővé teszi a felhasználók számára, hogy megadják a webhely URL-címét VAGY a HTML- és CSS-kódot. A WordPress esetében az URL opciót fogjuk használni, és hivatkozásokat biztosítunk webhelyének mindenféle oldalára, hogy az eszköz mindenkitől megkapja a CSS-t, és optimalizálja a nem használt CSS-t.
Íme egy gyors lista azokról az oldalakról, amelyeket be kell helyeznie az eszközbe:
- Kezdőlap URL-je
- Több bejegyzésoldal URL-je a webhely minden kategóriájából
└ Ez annak biztosítására szolgál, hogy a CSS minden bejegyzési elemhez szerepeljen.
- Kapcsolatfelvétel, Névjegy, Adatvédelem és a webhelyén található különféle oldalak.
- Archív oldal, Keresés oldal, Szerző oldalak
- Egyéni bejegyzéstípus oldalak
Forró tipp: Hozzon létre egy „funkciók” bejegyzést/oldalt az összes használt vagy a jövőben használni kívánt témaelemekkel, mint például táblázat, képgaléria, kód, előre, rendezett listák, rendezetlen listák, űrlapok, lapok, harmonikák, Gutenberg-blokkok, amelyeket általában használ. stb.
Használja ezt a „szolgáltatások” bejegyzés URL-jét a PurifyCSS Online eszközben annak biztosítására, hogy a gyakran használt elemek CSS-je szerepeljen.
Üsd a Tisztítsa meg a CSS-t gombot, miután hozzáadta a webhely összes releváns URL-típusát a PurifyCSS Online eszközhöz.
Másolja ki az eszköz által generált új CSS-t, és használja a webhelyén. Győződjön meg róla készítsen biztonsági másolatot az eredeti stílusról.css és más CSS-fájlokat a témában, mielőtt lecserélné a PurifyCSS által generált új CSS-t.
Tipp: Használhatja a beépített WordPress témaszerkesztőt a téma CSS-fájljainak szerkesztéséhez, vagy egy FTP/SFTP programmal csatlakozhat a szerverhez, és kényelmesen szerkesztheti a fájlokat a Jegyzettömb szerkesztővel.