Az előző bejegyzésében olvashattatok röviden a Swift Perfomance bővítményről, illetve a készítőkkel készült rövid beszélgetés is sok hasznos információt adhat. Most azonban szeretnénk kicsit mélyebbre menni, így egy kávé és laptop mellett leültem beszélgetni Molnár Péterrel, a bővítmény egyik fejlesztőjével, hogy miben is kínál és tud többet ez a bővítmény jelenleg, mint az eddig elérhetőek. Ezt oly módon fogom most prezentálni, hogy közben végig megyünk az ajánlott beállításokon, ezáltal  bemutatva az újdonságokat és segítséget is nyújtva azoknak, akik szeretnék minél jobban, részletesebben beállítani és programozási ismeretek nélkül gyorsítani a honlapjukon. Minden fülön végighaladva, sorra nézzük a beállításokat, de először a gyors b(ajánlott) beállításon megyünk végig. Nem kell megijedni, részletesek leszünk, de egyszerűek is!

Először a gyors beállításról írok. Ennél egyszerűbb menetet kevés bővítmény tud felmutatni, tehát bárki, informatikai végzettség nélkül is akár jelentősen tud a honlapján gyorsítani.

Setup Manager / Gyors beállítás

  1. lépés: A bővítmény ellenőrzi a legfontosabb dolgokat. Megnézni, történik-e más bővítménnyel ütközés – összeakadás, van-e újabb verzió, továbbá más szerver követelmények megvannak-e az ideális működéshez. Plusz felvázolja az weboldal aktuális értékeit.
  2. lépés: Cache típus választása. Választhatunk az Idő alapú vagy az Inteligens methóduson alapuló (ezekről részletek lentebb) között. Beállíthatjuk, hogy automatikusan hozza létre a cache-t API-val, továbbá engedélyezhetjük a böngésző cache-t és a gzip tömörítést is.
    Ajánlott mindhárom lehetőséget kipipálni!
  3. lépés: Válasszuk ki a statikus tartalom optimalizálásának módját. Választhatunk normál cache, az optimalizált cache és az optmializált cache + cricital css mód közül. Továbbá megadhatjuk, hogy a külső szerveren lévő css-ek az oldal css-eivel egybe legyenek építve (Bypass CSS import). Van még lehetőségünk beállítani, hogy a szervert kíméljük és háttérben történjen (Merge asset in background) az elemek egyesítése. Plusz, limitálhatjuk, hogy hány szálat használhat a bővítmény.
    Ajánlott az utolsó kivételével bejelölni ezeket.
  4. lépés: Rövid beállítások finomhangolása. Lazy load a képek betöltésén segít, az optimize a feltöltött képeket a háttérben optimalizálja (csökkenti a méretét) és képes egy erősebb (lossy) tömörítésre is,  továbbá igény szerint menti a rendszer a képek eredeti, nem optimalizált változatát is. Ez igazából nem szükséges az esetek 99%-ban, de tesztelés idejére ajánlott bekapcsolni, főleg olxan oldalakon, ahol nagy felbontású és részletgazdag fotókon van a hangsúly.
  5. lépés: kiírja, hogy a megadott beállításokkal, jelenleg milyen eredményt ad a honlapunk.

 

A részletesebb beállításokkal folytatom a sort. Ezeket szintén bárki ki/be kapcsolhatja, főleg ha a lenti rövid segédletet elolvassa, azonban vannak itt már olyan beállítási lehetőségek is, amik a legjobb eredmény eléréséhez segíthetnek hozzá, de azért nem árt némi informatikai és programozási ismeret. Ezeknél írok egy ajánlott beállítást, de tudásunktól függően skálázhatjuk a beállításokat. Vannak beállítások amik nem kerültek a listába, mert csak néhány speciális esetben használhatóak.

 

Settings / Beállítások

General / Általános

  • Purchase key: A serial szám, amivel rendelkezünk vásárláskor. Ide kell bemásolni és akkor kapjuk meg a frissítéseket, továbbá a külsős szerveren történő mechanizmusokat.
  • Hide footprints: A forráskódba a bővítmény egy rövid, egy soros kommentet helyez el, amiben a plugin neve megjelenik.
  • Use Compute API: A Compute külső API használata, ami felgyorsítja a cache generálás és csökkenti a szerver terhelését.
  • Enable remote cron: A cron időzítés használata, amikor a WordPress gyári cron segítségével időről időre lefutnak feladatok.
  • Debugging log: A hibanaplót írjon-e a bővítmény vagy nem. Ha problémánk akad, akkor ezt feltétlen kapcsoljuk be, majd ismételjük meg a problémás műveletet.

Tweaks / Trükkök

  • Normalize static resources: A css és js fájlok végéről tüntethetjük el vele a verzió jelöléseket és egyéb lekérési paramétereket. Ajánlott bekapcsolni.
  • Prefetch DNS: A külső szerverről betöltődő fájloknál lehet a domain dns-ét előzetesen betölteni és így elhagyni a tényleges lekérésnél. Ajánlott bekapcsolni.
  • Collect domains from scripts: A Prefetch DNS-hez a domain-ek gyűjtése a scriptek alapján. Ajánlott bekapcsolni.
  • Exclude DNS Prefetch: Megadhatunk kivételeket, ahova a domain url címét írjuk.

Heartbeat / WordPress admin lépések

  • Disable Heartbeat: Maga a heartbeat, mint a szív dobannások, ajax lekérésekkel folyamatosan lefutnak időnként az admin felületen a háttérben. A nagyobb, összetettebb oldalak esetében ez képes az admin felületen gyorsítani.

Google Analytics

  • Amennyiben maximálisan szeretnénk az oldalunkat cache-elni, akkor ezt be kell kapcsolnunk. Az analytics js-ének lokális cache-elése esetén szükséges funkció. Csak hozzáértőknek ajánlott!

 

Media / Média

Images / Képek

  • Optimize Images: Képeket optimalizálja feltöltés után, külső API-n keresztül. Mindezt úgy teszi, hogy feltöltés után, a háttérben teszi, így nem lassítja a képek feltöltését, beillesztését. Ajánlott bekapcsolni.
  • Enable Lossy Optimization: Veszteséges képoptimalizálás. Ez jelentősebben tömöríti a képeket, de csekély mértékben észrevehető. Ajánlott bekapcsolni.
  • Keep Original Images: Ha az előző opciót bejelöljük, akkor itt kiválaszthatjuk, hogy a feltöltött képek eredeti (nem optimalizált) példányát megtartja. Ajánlott kikapcsolni.
  • Inline Small Images: Az oldalon lévő képeket, amíg nem aktiválja a lazyload, kicseréli egy base64-es, jóval kisebb méretű képre.
  • File Size Limit (bytes): Az előzőleg engedélyezett base64-es képek méretét adhatja meg.
  • Exclude Images: Képeket zárhat ki, az előző base64-es módszerből.
  • Lazyload: Képeket csak akkor tölti be, amikor a látogató görget. Ajánlott bekapcsolni.
  • Load Images on User Interaction: A felhasználó interakciói alapján történik a képek betöltése. 
  • Force Responsive Images: A képekhez hozzárendeli a scrst-et, amit a WordPress is igyekszik használni. Ajánlott bekapcsolni.

Embeds / Beszúrások

  • Lazy Load Iframes: Az iframe kereteket, videókat stb. lehet betölteni lazyload-al, mint a képek esetében. Ajánlott bekapcsolni, ha több Youtube videó van egy oldalon például.

 

Optimization / Optimalizálás

General / Általános

  • Merge Assets for Logged in Users: Bejelentkezett felhasználóknak is a cache-elt verzió használata. (Ott ahol az eltér, nem ajánlott.)
  • Optimize Prebuild Only: Cache elkészítése előre. (Amíg nincs kész a cache-elt verzió, addig a normál módon tölt be az oldal)
  • Optimize in Background: Optimalizálási folyamatok csak a háttérben. Az első cache készítése a háttérben. Ajánlott bekapcsolni.
  • Fix invalid HTML: A html kódban lévő hibák javításának megkísérlése, külső API-val. Ajánlott bekapcsolni.
  • Minify HTML: A html kód tömörítése. Ajánlott bekapcsolni.
  • Disable Emojis: Az arc ikonok eltüntetése. Ajánlott bekapcsolni, sok sebességmérő figyeli.
  • Limit Simultaneous Threads: Limitálja a cache-elés és optimalizálás sebességét, ez lassabb, olcsóbb szervereken – tárhelyszolgáltatóknál ajánlott. 
  • Maximum Threads: Maximum hány szálon fusson az optimalizálás

Scripts / Scriptek

  • Merge Scripts: Script fájlok egyesítése. Ajánlott bekapcsolni, de csak komoly teszteléssel! Próbáljuk ki a cache felépítése után az összes funkciót.
  • Async Execute (BETA): Egyesített script fájl(ok) sync betöltése. Ajánlott bekapcsolni.
  • Exclude 3rd Party Scripts: Külső szervereken lévő script fájlok kihagyása az egyesítésből.
  • Minify Javascripts: Script fájl(ok) tömörítése. Ajánlott bekapcsolni.
  • Minify with API: Script fájlok külső API-val történő hatékonyabb tömörítése. Ajánlott bekapcsolni, hatékonyabb.
  • Separate Scripts: Egyesített script fájlokat néhány darabra, külön fájlra bontja.
  • Print merged scripts inline: Egyesített script kódot nem külső fájlként hívja meg, hanem inline szúrja be.

Styles / Stíluslapok, CSS

  • Merge Styles: Stíluslapok egyesítése. Ajánlott bekapcsolni, de csak komoly teszteléssel!
  • Generate Critical CSS: Kritikus CSS generálás. Ajánlott bekapcsolni.
  • Extra Critical CSS: Saját css hozzáadása a kritikus css-hez.
  • Disable Full CSS: Teljes css betöltésének elhagyása, szükségtelen részek elhagyása. Ajánlott bekapcsolni.
  • Compress CSS: A css kód tömörítése. Ajánlott bekapcsolni.
  • Print critical CSS inline: A kritikus css-t nem külön fájlba, hanem az oldal kódjába helyezi.
  • Print full CSS inline: Teljes css kód beillesztése az oldalba és nem külön fájlból meghívása.
  • Minify CSS: A css kód minimalizálása. Ajánlott bekapcsolni.
  • Bypass CSS Import: Külsős css fájlok integrálása. Ajánlott bekapcsolni.
  • Exclude 3rd Party CSS: Külsős css kizárása az optimalizálásból.
  • Exclude Styles: Lokális css fájlok kizárása az optimalizálásból.

 

Caching

General / Általános

  • Enable Caching: Cache engedélyezése. Ajánlott bekapcsolni.
  • Caching Mode: Cache építésének módja. (Csak hozzáértőknek!)
  • Early Loader: Cache generálás előre. Ajánlott bekapcsolni.
  • Cache Path: Cache helye, elérése. Ezt multisite rendszerber érdemes pontosítani.
  • Cache Expiry Mode: Cache ürítésének módja. (Idő alapú / Tevékenység alapú / Inteligens mód)
  • Cache Expiry Time: Cache lejárati ideje, másodpercben.
  • Clear Page Cache After Post Update: Mely oldalak cache-e frissüljön, új bejegyzés után. 
  • Enable Caching for logged in users: Bejelentkezett felhasználóknak is a cache-elt verzió megjelenítése.
  • Enable Mobile Device Support: Mobileszközöknek szánt verzió engedélyezése. (Például AMP)
  • Enable Browser Cache: Böngésző cache használata. Ajánlott bekapcsolni.
  • Enable Gzip: A gzip tömörítési mód használata. Ajánlott bekapcsolni.
  • Cache 404 pages: A 404-es hibaoldalak cache-elése.
  • Exclude Pages: Egyes oldalak kizárása a cache-elésből. Itt érdemes azon oldalakat kikapcsolni, amikhez csak belépés után férhet hozzá a látogató.
  • Exclude URLs:  Egyes url címek kihagyása a cache-elésből.
  • Exclude Crawlers: A keresőrobotoknak az eredeti, nem optimalizált kód megjelenítése. Nem ajánlott.
  • Enable Dynamic Caching: Dinamikus cache engedélyezése, főként ajax-ot tartalmazó oldalakhoz. Ott ajánlott, ahol a tartalom egy része ajax-os lekéréssel módosul.

További cache beállítások

  • Warmup, Cloudfare, Varnish, Appcache: Különféle szolgáltatók vagy szerver oldali programok támogatása.
  • CDN: A Max CDN támogatása. 

 

Importálás / Exportálás

A Swift Perfomance bővítmény beállításait mentheted le vagy töltheted vissza.

 

Image optimizer / Képoptimalizálás

A korábban hozzáadott, feltöltött képeket tudjuk optimalizálni. Nem a leggyorsabb, de ha megnyitva hagyjuk a böngészőablakot, akkor zavartalanul dolgozhatunk, játszhatunk vagy foglalkozhatunk mással, miközben fut a képek tömörítése. Itt fontos, hogy az ablaknak megnyitva kell maradnia az optimalizálás során. Ajánlott bekapcsolni és a korábbi képeken is lefuttatni, főleg ha eddig nem használtunk képoptimalizálót.

 

Adatbázis optimalizálás

Az adatbázis alapú honlapok esetében, így a WordPress esetében is, ha az adatbázis túl sok fölösleges adatot tartalmaz, akkor az negatív hatással lehet a honlapunk sebességére. Egy példát említve: Egy webáruház sebességének optimalizálása során, a kezdeti betöltési időt felére csökkentette az adatbázis tervezett és felügyelt tisztítása. A Swift Perfomance rendelkezik ilyen funkcióval, igaz nem ezen a téren specializálódott, de az esetek többségében megfelelő eredményt fog adni. Persze ne felejtsünk el biztonsági mentést készíteni előtte az adatbázisról.

 

Plugin organizer / Bővítmény betöltések testreszabása

A bővítmények css és js fájlainak betöltődését adhatjuk meg, így a rosszabbul megírt plugin-ok esetében fellépő fölösleges script, css fájlok betöltése, meghívása szabályozható. Ez a rész hozzáértőknek ajánlott.

 

Swift Perfomance bővítmény vásárlás