CSS, JavaScript és blokkolja a letöltési oldalt wordpress

Ebben a bejegyzésben azt feltételezzük, hogy Ön ismeri a Google eszközöket optimalizálja a sebességet a berakodás a webhely oldalain - PageSpeed ​​Insights. Figyelj, most írja be a webhelyre, kattintson «analize».

Oké, és most - mi ezt a bejegyzést?

Észrevettem, hogy ez a tétel az egyik legmakacsabb (munkaigényes), és szinte minden területen, még a nagyon gyors, jelen van.

Hogyan kell megjavítani elméletben:

Mivel ugyanez a helyzet a gyakorlatban, és ebben az esetben - a telek a WordPress?

1. Mi használjon más szkriptek függőség jQuery

A megfelelő kiagyalt WordPress téma minden CSS és JS fájlok keresztül kapcsolódik wp_head () és wp_footer () - azaz, és a végén volt.

Továbbá, a fájlok függőségeket, hogy van, például fancybox.js dugót kell csatlakoztatni után jquery.js. ami azt jelenti, hogy ha a jQuery könyvtár van wp_footer (). FancyBox jól nem tud bejutni wp_head ().

Mozgás jQuery footer helyszínen

Ez úgy történik, nagyon egyszerű - segítségével wp_deregister_script () függvényt. wp_register_script (). wp_enqueue_script () és a horog wp_enqueue_scripts (init horoghoz néha együtt használják is_admin ()). Mindössze annyit kell tennie, hogy írja be a kódot, hogy olvassa el a functions.php fájlt a webhelyen.

Ugyanakkor, a mi feladatunk végződik JS bizonnyal növekedni sebesség többet ad, és a szkriptek egyesítése (azaz lőni őket regisztrálni, majd egyszerűen csatlakoztatni a kombinált változat) - de a Google most már nincs szükség.

2. CSS Egyesület WordPress

Ne feledje, a screenshot elején a cikk (10 gátló CSS-forrás)? Ahol nem ilyen szám a CSS fájlt, mert a téma fejlesztő kell érteni, hogy mit kell csinálni?

A válasz - az plug-inek.

Például «Contact Form 7" bővítmény csatlakozik a saját stíluslapot, és bár önmagában ez kicsi, akkor jobb is, hogy elkerüljék a felesleges HTTP-kéréseket.

Nézzük lépésről lépésre, hogyan kell elemezni.

  1. Másolja a tartalmát az asztalra dugó stílusok és helyezze be a végén a fő stílusok fájl - style.css.
  2. Ellenőrzése, hogy az adatok kerülnek stílusok relatív linkeket képek, például url ( 'images / load.gif). Ha így van, vagy cserélje ki azokat abszolút vagy továbbítja a képeket a plug-in a témája a mappát.
  3. Bemész a plugin beállításokat, és nézd meg, hogy bárhol lehetséges, hogy eltávolítjuk a kullancsot, és ne csatlakoztassa a CSS plugin. A «Contact Form 7" ez nem lehetséges, és mi majd folytassa a következő lépéssel.
  4. Vágd le fájlokat keresztül functions.php. Stílusok «Contact Form 7" kód a következő lesz:

Néha a feltételes tag Plugin fájlok (például a CSS és JS) letiltása csak azokat az oldalakat, amelyek nem használják.

Ok, a «Kapcsolat űrlap 7" kitalálta, hogyan lehet felismerni és ID CSS fájlokat más kiegészítőket?

Igen könnyen felfedezhető a forráskódját az oldalt, és látunk egy hasonló képet:

CSS, JavaScript és blokkolja a letöltési oldalt wordpress

Misha Rudrastyh

További információk a gyorsulás a helyszínen

  • Kényelmes CSS optimalizáló dolgozni minden nap, saját ingyenes eszköz, hogy optimalizálja a kódot minimális konfiguráció és intuitív felületen.
  • Háromszögek, nyilak, terek és a citrom a CSS border tulajdonságok border-radius és a CSS border tulajdonság és a tulajdonosok CSS3 border-radius, megmutatom, hogyan lehet létrehozni nyilak, háromszögek és körök használata nélkül a képeket.
  • Mi az a CSS-sprite, és hogyan működnek? Két fő célja CSS-sprite. Mi a fő hiba nubo-DTP?