Az új vagy a már meglévő weboldalunkkal szemben talán az egyik legfontosabb követelmény, hogy optimalizált legyen. Az optimalizáció által nem csak gyorsabb lesz az oldalunk, ezáltal a felhasználói élmény is magasabb lesz, hanem a Google  találati listáján is előkelőbb helyet foglalhatunk el. Napjaink legfontosabb mértékegysége az idő, ma már senki nem hajlandó várni semmire, mindent azonnal akarunk. — Így vagyunk a felkeresett weboldalakkal is, ami ha nagyon maximum 4-5  másodperc alatt nem tölt be, azt már ott is hagyjuk. Célszerű az oldalunk átlagos betöltési idejét 2-3 másodperc között tartani. Ezzel rengeteg látogatót veszíthetünk, ezáltal csökkenhet a bevételünk is. Ezen cikkünkben összegyűjtöttünk néhány hasznos eszközt, amely segítségünkre lehet az oldal elemzésében és bemutatjuk, hogy hogyan lehet a jelzett “problémákat” kijavítani, mellyel csökkentünk a betöltési időn is. Először vegyük sorra a weboldal elemző alkalmazásokat. A felhasználók a legtöbb esetben a Google PageSpeed Insights, a GTmetrix és a Pingdom oldalakat keresik fel, ezek a legnépszerűbb és legbővebb információt szolgáltató oldalak. Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/?hl=hu) Ez az alkalmazás a legismertebb és mindenki ehhez fordul elsőként segítségért az oldala állapotának feltérképezéséhez. Talán ez azért a legnépszerűbb alkalmazás, mert techikai vagy szakmai tudás nélkül is igen egyszerűen elvégezhetjük az  optimalizációs műveleteket. A használata igen egyszerű, megadjuk a kívánt weboldal URL-jét és rányomunk az elemzés gombra. Rövid idő alatt el is készül az elemzés, mely lefutása után értékeli is az oldalunkat. A PageSpeed 0 és 100 pont közötti értéket ad a weboldalunknak, valamint besorolja az oldalat a három kategória egyikébe: Poor, Needs Work és Good. “Ez az oldal nincs optimalizálva, és nagy valószínűséggel lassú felhasználói élményt nyújt. Rangsorolja és alkalmazza az alábbi javaslatokat.” Amennyiben ezt az üzenetet kapjuk azonnal fogjunk hozzá a munkához! Az értékelés alatt láthatjuk a Google javaslatait, hogy mit kellene elvégeznünk az oldalon. A Google a következő optimalizációs lehetőségeket veszi figyelembe: -Optimalizálja a képeket -Használja ki a böngésző gyorsítótárazását -A megjelenítést gátló JavaScript és CSS kizárása a hajtás feletti tartalomban -JavaScript csökkentése -Kicsinyítse le a CSS-t -HTML lekicsinyítése -A szerver válaszidejének csökkentése -Engedélyezze a tömörítést -Kerülje a céloldali átirányításokat -Rangsorolja a látható tartalmat A javítás folyamatának bemutatása fülre kattintva felsorolja az összes módosítandó filet és kívánt tömörítés nagyságát, valamint az elvégzendő javítások rövid javaslatait. A különböző fájlok tömörítését elvégezhetjük egyéb eszközökkel vagy bízunk a Google tudásában és letöltjük az általuk optimalizált tartalmakat “Az oldal optimalizált kép-, JavaScript- és CSS-forrásainak letöltése.” link alól. Ahogy azt a szövegben is láthatjuk, a letöltött zip tartalmazza az optimalizált css fileokat, a javascript filokat valamint a képeket. A manifest file segítségünkre lehet a fileok beazonosítására, mivel taralmazza a fileok teljes elérési útvonalát. Amennyiben ha ezeket a fileokat szimplán csak kicseréljük, már magasabb értéket érhetünk el a skálán. Eddig ezen műveletke elvégzéséhez valóban nem szükséges semmiféle hozzáértést. A tárhely válaszidejének csökkentése fülből pl. logikusan következne, hogy “lassú a szerver”. A jelenség mögött azonban sokkal inkább az látszik hogy ha meghívja böngészőből az adott domaint, akkor a szervernek “össze kell válogatni” egy sor adatot: template fájljait, számos plugin kimenetét, betölteni egy sor javascriptet és stíluslapot. Ezeket a filokat kell mind méret szerint, mind darabszámra minimalizálni a gyorsabb betöltés érdekében. Ennek ellenörzésére szükséges elvégeznünk a vízesés modell elemzést. DNS lekérések csökkentése A DNS lekérdezések esetén keresi meg a gépünk a hostnévhez kapcsolódó IP címeket. Ezek a lekérdezések is időbe telnek, ezért célszerű a lekérdezések számának a csökkentése úgy, hogy ha lehet a betöltendő tartalmakat minél kevesebb vagy leginkább egy domain alól töltsük be. Átirányítások minimalizálása Ha a lekért html kód és a látogató közé átirányítást (A 301 – Véglegesen áthelyezve vagy 302 – Ideiglenesen áthelyezve) helyezünk, akkor minden átirányítás új HTTP lekérést generál és rontja a felhasználói élményt és relativ sok időbe is telik. Így csak azokat az átirányításokat szabad megtartani, amelyek mindenképpen szükségesek. Ha lehet kerüljük el! Képek optimalizálása Tapasztalataim alapján a leglátványosabb, számszerűsíthető eredményt a különböző elemző eszközök esetén a képek optimalizálása jelenti. A legnagyobb súlyt a tartalmak mérete jelenti az elemzések esetén. Ez egyértelmű, mivel nem mindegy, hogy egy oldalanak 2-4 MB adatot kell betölteni vagy 300 KB-ot. A kép fájlformátumok esetén két típust tudunk elkülöníteni, vannak veszteséggel és veszteség nélüli tömörítők. Én 3 formátumot emelnék ki, amelyet érdemes használni a weboldalunkon. A legelterjettebb webes kép fájl formátum a .jpg, .png  és a .gif. A .jpg veszteséges tömörítéssel rendelkező állomány, szinte az összes “normál” kép esetén ezt használjuk. A .jpg rendelkezik egy minőségi tulajdonsággal, amely 0 és 100 közötti értéket vehet fel. Ez a százalékos érték adja meg, hogy az eredeti képhez képest mennyire ronthatjuk a kép minőségét. A képoptimalizáció során figyelnünk kell a kép felbontására, a minőségére és a file méretre egyszerre, nyilván ez a három dolog összefügg egymással. Én leginkább a Photoshop “Save for web” funkcióját szoktam ajánlani optimalizás esetén, mivel ott egy kezelő felületen minden információhoz hozzájutunk és mi a személyes prefrenciánk alapján tudjuk elvégezni a beállításokat. Számtalan online képtömörítő  alaklmazás érhető ingyenesen el a neten. Vannak olyan alkalmazás, ahol az algoritmus fix méretre veszi le a képek minőségét, illetve vannak olyanok, ahol mi állíthatjuk be a veszteség méretét. Én inkább az utóbbit ajánlanám. http://compressjpeg.com/ https://www.giftofspeed.com/jpg-compressor/ CSS és JavaScript minimalizálás (CSS / JavaScript Minify) A css fileok minimalizálásával weboldalunk gyorsabban tud betöltődni a böngészőben. A minimalizáló eltávolítja a “felesleges tartalmakat”, úgy mint a szóközöket, sortöréseket, de még a kommenteket is, valamint egyes minimalizálók még a kódot is átírják bizonyos rövidíthető kifejezések esetén. Általában a szépen betagolt jól olvasható kódból egy egy soros kódot készítenek. Számtalan minimalizáló eszköz elérhető a neten, én a minify.org (http://www.minifier.org/) oldalat szoktam ajánlani, mert 2 az 1-ben kicsinyítő eszköz és tapasztalataim szerint ez minimalizál az egyik legjobb eredménnyel. CSS esetén elég sokszor előfordulhat, hogy módosítani kell a dizájnban, de a tömörített kód még a rutinos kódolvasókon is kifoghat, nehéz módosítani benne bármit is. Ilyenkor érdemes valami úgynevezett unminify eszközt használni, amely a tömörített tartalmat ismét olvasható formává varázsolja. Erre az egyik legjobb eszköz az unminify.com (http://unminify.com/) alkalmazása. Figyelem, a tömörítés előtti kommentek a visszaállítás után nem lesznek benne a tartalomban értelemszerűen! Hasonlóan az előbb bemutatott elv alapján minimalizálják a javaScript fileokat is, de ebben az esetben nem csak a felesleges karakterek kerülnek törlésre, hanem maga a kód is módosításra kerül, különböző függvény rövidítésekkel. Az ilyen minimalizálók használatával 30-90%-kal csökkenthetők a JavaScript fájlméretek. Gyorsítótárazás A gyorsítótárazás segítségével a böngésző nem tölti le állandóan a webszerverről a külső fájlokat, hanem a gyorsítótárból tölti be azokat. Weboldaunk esetén ezért fontos, hogy minél több tartalmat gyorsítótárazott, külső fileokból olvastassunk be ezáltal csökken a betöltött tartalom mérete és a lekérések száma is. A HTML kódban az inline CSS formázásoka kerülni kell, külső CSS filokba érdemes meghívni a stílusokat. A JS fájlok a HTML kód végére (közvetlenül a záró tag elé) történő elhelyezésével elérhető, hogy a böngésző csak az oldal betöltése után futtassa azokat, jelentősen gyorsítva így a megjelenést. Az előző részekben bemutattam, hogy milyen eszközökkel lehet minimalizálni a CSS és JavaScript tartalmakat, de mindez nem elég. Érdemes lecsökkenteni ezen filok mennyiségét is, oly módon, hogy ahol csak lehet, egyesítsük a különböző fileok tartalmát egy állományba. A böngésző minden oldalbetöltéskor lekéri az összes adatot a szerverről akkor is, ha mondjuk egy képről van szó akár, vagy az összes oldalon jelen lévő css fájlról van szó. Ezért bizonyos beállításokkal megmondhatjuk a böngészőnek, hogy melyek azok a tartalamk az oldalon amelyek sűrűn elő fognak fordulni és ezeket helyezze a gyorsítótárba. A .htacces fileba fájltípus szerint csoportosítottuk a lejárati idők beállításait: <IfModule mod_expires.c> ExpiresActive on ExpiresDefault                                      “access plus 1 month” ExpiresByType text/css                              “access plus 1 year” ExpiresByType application/atom+xml                  “access plus 1 hour” ExpiresByType application/rdf+xml                   “access plus 1 hour” ExpiresByType application/rss+xml                   “access plus 1 hour” ExpiresByType application/json                      “access plus 0 seconds” ExpiresByType application/ld+json                   “access plus 0 seconds” ExpiresByType application/schema+json               “access plus 0 seconds” ExpiresByType application/vnd.geo+json              “access plus 0 seconds” ExpiresByType application/xml                       “access plus 0 seconds” ExpiresByType text/xml                              “access plus 0 seconds” ExpiresByType image/vnd.microsoft.icon              “access plus 1 week” ExpiresByType image/x-icon                          “access plus 1 week” ExpiresByType text/html                             “access plus 0 seconds” ExpiresByType application/javascript                “access plus 1 year” ExpiresByType application/x-javascript              “access plus 1 year” ExpiresByType text/javascript                       “access plus 1 year” ExpiresByType application/manifest+json             “access plus 1 week” ExpiresByType application/x-web-app-manifest+json   “access plus 0 seconds” ExpiresByType text/cache-manifest                   “access plus 0 seconds” ExpiresByType audio/ogg                             “access plus 1 month” ExpiresByType image/bmp                             “access plus 1 month” ExpiresByType image/gif                             “access plus 1 month” ExpiresByType image/jpeg                            “access plus 1 month” ExpiresByType image/png                             “access plus 1 month” ExpiresByType image/svg+xml                         “access plus 1 month” ExpiresByType image/webp                            “access plus 1 month” ExpiresByType video/mp4                             “access plus 1 month” ExpiresByType video/ogg                             “access plus 1 month” ExpiresByType video/webm                            “access plus 1 month” ExpiresByType application/vnd.ms-fontobject         “access plus 1 month” ExpiresByType font/eot                              “access plus 1 month” ExpiresByType font/opentype                         “access plus 1 month” ExpiresByType application/x-font-ttf                “access plus 1 month” ExpiresByType application/font-woff                 “access plus 1 month” ExpiresByType application/x-font-woff               “access plus 1 month” ExpiresByType font/woff                             “access plus 1 month” ExpiresByType application/font-woff2                “access plus 1 month” ExpiresByType text/x-cross-domain-policy            “access plus 1 week” </IfModule> <ifModule mod_headers.c> <filesMatch “.(ico|jpeg|jpg|png|gif|swf)$”> Header set Cache-Control “public” </filesMatch> <filesMatch “.(x?html?|php)$”> Header set Cache-Control “private, must-revalidate” </filesMatch> <filesMatch “.(css|css.php)$”> Header set Cache-Control “public” </filesMatch> <filesMatch “.(js)$”> Header set Cache-Control “private” </filesMatch> </ifModule> Fontos, hogy a gyorsítótárazást mértékkel kell használni, mert egy blog esetén amikor nem változik a tartalom, akkor lehet gyorsítótárazni rendesen, de egy dinamikusan bővülő tartalmakkal rendelkező oldala, ahol akár naponta több  változás történik nem használható magas érték! Gzip tömörítés A weboldalunk gyorsaságát segíti elő a Gzip tömörítés, amelyet szintén a szerveren tudunk engedélyezni. Ezzel a tömörítéssel jelentősen csökkenthetjük az oldal betöltési sebességét, akár 70%os feileméret csökkenést is elérhetünk velel. A tömörítés lényege, hogy a html, css és javascript tartalmakat veszteségmentes tömörítéssel küldi a szerver a böngészőnek a tartalmakat. Szintén a .htacces módosításával tudjuk a Gzip-et bekapcsolni a szerveren: ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule> <ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/atom+xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE font/truetype font/opentype </ifModule> Ne feledjétek a vállalkozásotokat a weboldal alapján ítéli meg a látogató! Törekedjetek a szép, letisztult, gyors és optimális weboldal létrehozására, amely önmagában élményt nyújt a látogatónak és bizalmat gerjeszt bennük! Reméljük a fent leírtak hasznos útmutatásnak bizonyulnak és a segítségével sikeresen optimalizálni tudjátok a saját weboldalatokat!