AI összegzés
Összeírtunk pár hasznos gyakorlati beállítást, amit, ha elvégez a tárhelyén , legyen az bárhol, optimalizálhatja annak működését, erőforrásokat takaríthat meg, amivel növelheti weboldalának sebességét. A lépések egyszerűek, ezzel együtt nagy figyelemmel és tesztelésekkel hajtsa végre ezeket a módosításokat, mert lehetnek kompatibilitási hibák. – Sok „hárombetűs” kifejezés lesz.
A jó webtárhely alapjai
Legyen valamilyen tárhely kezelő rendszer, amivel el tudja végezni a lentieket. Nálunk cPanel van, ezen is mutatom be. Lehetőleg SSD opció is legyen, bár nem feltétel, mert SSD-n is össze lehet rakni nagyon rosszul weboldalt. Aztán legyen valamilyen SSL támogatás, mondjuk Let’s Encrypt, amivel telepíthet magának tanúsítványt, ami alapja a HTTP/2 protokollnak, amiről korábban már itt írtunk. Ha már van HTTP/2 támogatás, akkor van Server Push megoldás, amit szintén említek a hivatkozott cikkben. Ez a szerver és a kliens (látogató gépe) között egyszerűsíti és gyorsítja a kommunikációt. Legyen PHP választási lehetőség, köztük legyen elérhető a legfrissebb 7.2., ami nagyságrendekkel gyorsabb az elődjénél. Lehessen a PHP összetevőket ki/be kapcsolgatni, amit a cPanel például támogat. A webszerver sem mindegy. A legelterjedtebb az Apache alapú, ahogy nálunk is az van, de akkor legyen neki „mod_lsapi” támogatása, ami ugyanazt a sebességet képes megvalósítani, mint a „gyorsabb” webszerverek, mint Nginx vagy Litespeed. A sebesség mindig relatív, a jó beállításon van a lényeg- Ennyi „legyen” után térjünk is a lényegre.
PHP beállítás
Lépjen be és keresse meg a cPanel felületén a „Select PHP version” menüpontot, vagy magyarul „PHP verzió választót”. Amennyiben Önnek régebbi, mondjuk 5.6-os PHP van beállítva, tegye feljebb valamelyik 7-es verzióra.
Csak a legszükségesebb PHP összetevőket hagyja bekapcsolva. A legtöbb esetben feleslegesen vannak aktiválva az alábbi modulok: imap, posix, phar, pdo_sqlite, soap, ioncube, redis, newrelic, tidy
A saját tárhelyemen például csak ezeket használom: bcmath, dom, fileinfo, gd, intl, json, mbstring, mysqli, opcache, pdo, pdo_mysql, sockets, xml-ek, zip.
Az opcache modult erősen ajánlom! Kapcsolja be. Ez igazi csodaszer, mert irgalmatlan mennyiségű processzor időt spórol, bár memória (RAM) nyilván kell neki, de abból több szokott lenni, mint processzorból.
Ugyanezen a felületen a „Switch To PHP Options” gombra kattintva állíthat be további paramétereket, mint például a PHP futási idő (max_execution_time) vagy a memória limit (memory_limit), ami a legkritikusabb pont szokott lenni. Itt állítson be kezdetnek 128 MB-ot, s ha kevésnek bizonyul, akkor később is emelhet rajta. Ha alapból több van beállítva, hagyja úgy.
Ezek a módosítások erősen kódfüggőek, a csere után ellenőrizze a weboldalának összes funkcióját!
SSL tanúsítvány bekapcsolása
Az SSL azért elengedhetetlen, hogy elérhető legyen a HTTP/2 protokoll. Szintén a cPanel felületén keresse meg a „SSL/TLS Status” vagy magyarul a „SSL/TLS Státusz” menüpontot és ellenőrizze a domain nevére beállított tanúsítványt. Amennyiben nincs, rendelje meg szolgáltatójától, kérdezze a lehetőségekről. Ha elérhető a Let’s Encrypt SSL, akkor a „Run AutoSSL” gombra kattintva pár perc alatt generálhat egyet. Nálunk ez elérhető, ingyen telepítheti. Amennyiben lát tanúsítványt, akkor minden rendben, már csak a honlapját kell ráállítani.
Ehhez szerkeszteni kell a .htaccess fájlt:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
Ezzel minden weboldalára érkező kérést átirányít a HTTPS-es URL-re. Ha van már .htaccess fájlja és azon belül mod_rewrite.c szakasz, illetve „RewriteEngine On” kód, akkor figyelmesen járjon el és csak a mintában látható két sort illessze be alá.
Illetve ha a honlapjának a forráskódjában a fájlokat http-s hivatkozással tette be, például a képeket, CSS és JS fájlokat, akkor ott is át kell írni az URL címet HTTPS-es hivatkozásra.
Apache optimalizációk – Tömörítés
Itt alapvetően két nagy lépés van. Az egyik a tömörítés, a másik pedig a böngésző cache-ek aktiválása. Egyszerűen fogalmazva ez azt jelenti, hogy már szerver oldalon tömörítésre kerülnek azok az elemek, amik a látogató, azaz a kliens gépére le lesznek küldve. A cache, azaz a gyorsítótárazás pedig arra jó, hogy megmondjuk a kliensnek, hogy ezeket a ritkán változó fájlokat (statikus elemeket) tárolja is el magának, így nem kell minden egyes alakalommal a szerverről letölteni, hanem használja a saját, lementett változatát.
Lépjen be a cPanelbe. A tömörítés beállítás az „Optimize Website” vagy magyarul a „Webhely optimalizálás” menüben történik a „Compress the specified MIME types” lehetőség alatt. Itt válassza az utolsó opciót és a következőt írja be:
text/html text/plain text/xml text/css text/javascript application/javascript
Amikor teszteli a weboldalát a GTMetrix oldalán, akkor az „Enable gzip compression” néven említi.
Tiltások a robots.txt használatával
Vannak hasznos és szerintem haszontalan robotok, amelyek rendre felkeresik a honlapjainkat. Tiltsa ki a SemRush és hasonló crawler-eket, a rendszergazdánk szavajárása szerint, fosokat. Elképesztő forgalmat és erőforrást emésztenek fel. A saját szervereinken közel 20-40%-nyi forgalmat generálnak. Képzelje el, hogy a honlapja erőforrásának harmadát felemésztik ezek a robotok. Amennyiben nem használja az alábbi szolgáltatásokat, akkor lője ki őket az alábbi kód beillesztésével a robots.txt-ben. Ha nincs a tárhelyének a gyökér mappájában, akkor hozza létre.
User-agent: SemrushBot
Disallow: /
User-agent: AhrefsBot
Disallow: /
User-agent: dotbot
Disallow: /
Apache optimalizációk – Böngésző oldali gyorsítótárazás
A böngészők általi cache-elést a lenti sorok .htaccess file-ba illesztésével, javasoltan az elejére illesztésével lehet aktiválni. Megnyithatja szintén cPanelen a „File Manager” vagy magyarul „Fájlkezelő” segítségével, vagy FTP-n a tárhelyhez csatlakozva. Ha nincs, akkor hozza létre és illessze bele az alábbi kódot. WordPress általában használ .htaccess fájlt és a cikk végén ajánlok is hozzá egy cache kezelő plugint, ami ezt magától elvégzi, sőt, többet is, de ez már elegendő lehet.
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
A GTMetrix „Leverage browser caching / Add Expires headers” neveken hivatkozik erre.
Egyéb teljesítmény fokozások, említés jelleggel
Ezek a lépések már összetettebbek, több munkát vagy szakértelmet igényelnek. Ha Önben van készség rá, akkor elvégezheti ezen lépéseket is.
Az egyik a CSS és JavaScript file-ok aggregációja, azaz összehúzásuk, kombinálásuk. Amennyiben több ilyen statikus fájlt használ, például különböző keretrendszereket (Jquery, Bootstrap, stb) használ, érdemes ezek forráskódjait összemásolni egy-egy darab fájlba, így sok-sok JS és CSS helyett jóval kevesebbet kell letölteni, ezáltal jóval kevesebb lesz az adatmozgás. Természetesen oda kell figyelni a megfelelő sorrendiségre, nem lehet mindent mindennel összefűzni. És nem is kell túlzásokba esni. Már az is nagy lépés, ha a (mondok egy számot) 100-as mennyiség lemegy mondjuk 20-ra. A trükk lényege, hogy a böngészőnek elegendő csak 20 kapcsolatot nyitnia a szerver felé és látványosan gyorsabban tölt be a kevesebb filet. GTMetrix: „Make fewer HTTP requests” cím alatt említi.
Ezen CSS és JavaScript file-ok minimalizálása. Ez azt jelenti, hogy adott egy kód, ami szépen átlátható, több sorba van rendezve, tartalmazhat sok fejlesztői megjegyzést. Ezeket érdemes egy sorba rendezni, kivenni a kommenteket, stb. Például a Jquery JS forráskódja 10300 sor, a minimalizált verziója csak 2. Az első 272 Kbyte, addig a kisebbik 86. Ezen az oldalon a kódot bemásolva Ön is el tudja végezni ezt a kód átalakítást: http://minifycode.com
Ugyan ez elvégezhető a HTML forráskóddal is. Amikor a böngészőben jobb egérgombbal kattint majd megnézi a weboldal forráskódját, akkor annak is van egy struktúrája. Jól áttekinthető, olvasható. A versanus.eu nyitólapjának minimalizált HTML kódja csak 7 sor. Ez a művelet is elvégezhető a http://minifycode.com oldalon.
Optimalizálja a képeket is. Itt sok féle szempont van. Használjon megfelelő méretűre vágott képeket, azaz, ha a honlapon mutat egy 800×600 pixel méretű képet, de annak eredeti mérete 3000×2000 pixel, akkor már eleve méretezze át egy képszerkesztő programmal és ne CSS vagy HTML kódból oldja meg. Lehetőség szerint kerülje az animált GIF-eket. Jópofa, de nem túl hatékony, nagy méretű és terheli a processzort. Törölje a képek meta adatait, azaz az Exif adatokat, amik törlésével gyorsíthatja azok betöltési idejét. Használja a szükséges kép formátumot. Sokan a fotókat PNG-ben jelenítik meg. A minőség rendben lesz, ezzel együtt a mérete többszöröse lehet egy JPG-nek. A PNG-t akkor használja, amikor néhány színt tartalmazó grafikát akar megjeleníteni, vagy amikor szükséges az átlátszóság. Használhat modern képformátumokat, mint például a WebP. Ez persze azzal jár, hogy a különböző böngészőknek különböző formátumokat kell betölteni, de a méret határozottan kisebb lesz. A WebP-t a Chrome támogatja, míg a JPEG-XR-t a legtöbb Internet Explorer verzió és az Edge. De ne csak átméretezze a képet, hanem tömörítse is. A PNG képek akár 50 százalékkal is tömöríthetők, anélkül, hogy észlelhető lenne a minőségbeli visszaesés. Vannak erre is online eszközök: https://www.google.hu/search?q=optimize+images+online
Összegzés
Úgy vélem, hogy az alábbi lépéseket megfelelő körültekintéssel, az egyes lépések utáni teszteléssel egyedül is el tudja végezni:
• Használjon gyors, friss PHP verziót
• Kapcsolja ki a felesleges PHP modulokat
• Optimalizálja a szükséges PHP limiteket
• Aktiválja az opcache PHP modult
• Telepítsen SSL tanúsítványt a modern HTTP/2 protokoll eléréséért
• Állítsa át a honlapját HTTPS használatára
• Kapcsolja be a Gzip tömörítést
• Tiltsa ki a felesleges marketing robotokat
• Használja a böngésző oldali gyorsítótárazást
A még nagyobb hatásfok elérés érdekében pedig végezze el az alábbi módosításokat, vagy keressen hozzá megfelelő webfejlesztői segítséget:
• Kombinálja és kicsinyítse le a forráskódokat
• Optimalizálja a képeket
Következő cikkünkben a WordPress optimalizálásával fogunk foglalkozni, ahol hozunk kész megoldásokat, pluginokat.