Alapvető beállítások egy gyorsabb weboldalért - Blog | Versanus

Alapvető beállítások egy gyorsabb weboldalért

|

Versanus Kft.
Versanus Kft.

Ö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.

cpanel php

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

cpanel gzip

Amikor teszteli a weboldalát a GTMetrix oldalán, akkor az "Enable gzip compression" néven említi.


Tiltások a robot.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 robot.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 800x600 pixel méretű képet, de annak eredeti mérete 3000x2000 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.

Iratkozzon fel hírlevelünkre Adja meg nevét és e-mail címét.