Mióta csak létezik az internet és a weboldalak világa, mindig is fontos volt, hogy az érdeklődők gyorsan jussanak hozzá a kínált tartalmakhoz. A tendencia nem változott az idők folyamán, a webdesign minden időkben korlátok között fejlődött e téren. Az egyik szempontot a szép, színes, szagos weboldalak iránti igény jelentette, amíg a másik oldalon ott volt a sávszélesség korlátja. Nem mindegy, mennyi időbe telik letölteni a kívánt információt!
A weboldalakra való várakozást egy évtizede is csupán másodpercekben mértük, a helyzet mára még szigorúbb lett. Nem csak a felhasználók türelme lett kevesebb, de technológiai oldalról is ilyen az elvárás. A honlapnak alig pár másodperce van arra, hogy megragadja az olvasó érdeklődését, és ebben természetesen benne van a letöltődés ideje is.
Hogyan gyorsítsd versenytempóra weboldaladat csak azzal, hogy optimalizálod a képi megjelenést?
Hogyan lehet megoldani, hogy weboldalad a lehető legrövidebb idő alatt teljesítse feladatát? Azaz, hogy pillanatok alatt megjelenjen, és ne veszítsd el az érdeklődést, csak mert a weboldal csigalassan érkezik…
A weboldalak letöltésének sebessége nyilvánvalóan függ attól, milyen grafikus elemeket tartalmaznak. Ezeknek részei az alkalmazott képi információk és a kódba épített eljárások, amelyek a megjelenés finomságaiért felelnek. Ilyenek bizonyos animációk, különleges betűtípusok, átlátszósági trükkök, és egyéb látványosságok, amelyek tényleg széppé, érdekessé teszik a honlap megjelenését. Minél több van ezekből, jó eséllyel annál több időt igényel a honlap megjelenítése. Lehetséges, hogy a felhasználók ebből az időből nem sokat érzékelnek, legfeljebb a honlap nem 2-3 másodperc alatt töltődik le, hanem eltart 4-7 másodpercig. Igazából ez nem nagy idő, a weboldal szempontjából azonban igen lényeges.
Mert milyen jó látni, hogy egy honlap villámgyorsan megjelenik, s nem várakoztatja az olvasót látszólag hosszas semmittevéssel! Másrészt a keresőrendszer is hálásan díjazza, ha egy honlap gyorsan kiszolgálja az adott információt. Adott esetben ez döntő lehet a keresőbéli találatok sorrendjének megállapításánál is!
Weboldal gyorsítás AMP oldalakkal
A keresőóriás ezért figyelmünkbe ajánl egy viszonylag új szabványt, az AMP weboldalak világát, amelyek felépítésénél tényleg a tartalomé az elsőbbség. Az AMP honlapok csupán kevés, vagy még kevesebb grafikus körítést alkalmaznak, ezért letöltődésük villámgyors. Azonban biztosan érezheted, hogy ennek ára van.
Az AMP oldalak a weboldal gyorsítás remek eszközei, viszont elég puritán megjelenéssel kényeztetnek. Pontosan azokat a részleteket nélkülözik, amelyek olyan vonzóvá tudnak tenni egy honlapot. Nincs részleteiben kidolgozott grafikus körítés, a háttérképek szinte teljesen hiányoznak. Úgy érezheted, hogy fehér újságot olvasol, amelyen többnyire fekete betűk kínálják az olvasnivalót. Nyilván azért nélkülözik a grafika jelentős részét, mert ez segíti a villámgyors letöltődést. Valamit valamiért.
Világunkban azonban a tartalomkezelők hódítanak igen széles körben. A WordPress részesedése a honlapok terén 43%-os. Könnyű kezelhetősége és változatos felépítése révén kiváló eszközt jelent minden cégnek és vállalkozásnak, akik kimagasló esztétikával és bőséges tartalmakkal szeretnák várni az érdeklődőket. Miért ne használnád, hiszen a világ honlapjai közül majdnem minden második ezzel a rendszerrel működik. Ez csak jelent valamit?
De jaj! A tartalomkezelők igazi tehervonatok!
Ráadásul a honlapok többsége gazdag képanyaggal, igényes esztétikával kíván hódítani, a céges arculattal összhangban.
Mit tehetsz, ha Te is fullextrás, igényes honlapot szeretnél, s mégsem mondanál le a gyors letöltődésről?
Egyrészt muszáj kordában tartanod a csilivili részleteket. Ma már tényleg nem divat, ha a weboldal egyes részei indokolatlan animációkat prezentálnak, ugyanakkor nyilván szépnek, esztétikusnak szeretnéd láttatni weboldaladat az interneten. De ettől nagyobb ívű megfontolásra is szükség lehet.
A weboldal gyorsítás legjobb módja, ha átgondolod a képkezelést!
Az internet terjedésének korai szakaszától vannak velünk a jpg képek. Igazi áttörés volt bevezetésük annak idején, hiszen a képtömörítés olyan módját alkalmazták, amely lehetővé tette aránylag nagy képek gyors továbbítását.
A kétezres évek elején párszor tíz kilobájtos képállományokkal építettük a weboldalakat, de bevallom, az ilyen képek csupán kicsiny képeket jelentettek. Az évek során, amikor a technológiák fejlődésével egyre nagyobb lett a rendelkezésre álló sávszélesség, divatba jöttek a teljes képernyős képek. Lehetővé vált az igazi nagyképernyős webes élmény, ami a mai napig vonzóvá teszi a weboldalak megjelenését. A mobilok térhódításával megjelent a reszponzív technika, ami azt eredményezte, hogy a honlapok tartalma mobilon is teljes értékűvé vált, elkezdett hódítani a kézben tartott mobilos webezés. Új korszak érkezett.
A sávszélesség növekedésével a 4-800 kilobájtos képek is hamar megérkeztek a készülékre. Azonban a dolog kezdte túlnőni a sávszélességet. Bár a képek nem igazán tűnnek nagynak, de nyilván nem egy kép van a honlapon, azok mérete összességében már akadályozza a gyors megjelenést.
Más okokat is tapasztaltunk. A telefónia fejlődésével akadtak laikus szemléletű felhasználók, akik nem átallották a mobilon fotózott képeket közvetlenül feltölteni a honlapra. Ezek a képek óriásiak! Így adott esetben jól agyon lehet csapni a gyors letöltést. Soha ne tölts fel képet honlapra közvetlenül a mobiltelefonodról!
Weboldal gyorsítás – A webp áldás!
Szerencsére megérkezett a webp képformátum, ami a jpg képhez képest ötödére, tizedére csökkenti a képállomány méretét. Így a korábban 4-500 kilobájtos képekből simán készíthető 50-150 kilobájtos kép. Ilyen képek drasztikusan csökkentik a weboldal letöltésének idejét, miközben a képminőség szemlátomást nem gyengül. Ha ilyen képekkel töltöd fel a honlapot, az frissen, gyorsan fog mozogni még akkor is, ha tartalomkezelővel felszerelt rendszert használsz.
A webp képeket egyszerűen előállíthatod különféle képszerkesztőkkel. Nálunk a Gimp szoftver működik e célra. Csak betöltöd a képet, majd export webp-be és kész is. A Gimp díjtalanul elérhető képmanipuláló szoftver, működik Linuxon, Windows alatt és Mac-en is egyaránt. Igazi plaformfüggetlen gyöngyszem, ráadásul tényleg díjtalan.
WordPress alatt van még valami, ami problémás lehet!
A WordPress ugyanis a feltöltött képekből előállít néhány másolatot, melyeket tetszése szerint használ fel attól függően, hogy honlapod melyik részén, milyen méretben kell megjeleníteni a képet. Képzeld el, hogy feltöltesz egy képet, amelynek szélessége például 1600 pixel. A WordPress készít ebből talán egy 1280, 960, 640, 320, 300, 150, 80 pixeles másolatot, de nem voltam pontos, ettől akár többféle másolatot is készít. Van úgy, hogy egy feltöltött képből készül akár egy tucat verzió, s ezeket szépen letárolja későbbi felhasználásra.
Ezt azért csinálja, hogy amikor olyan helyre teszed fel a képet, ahol csak mondjuk 640 szélességben kell, hogy megjelenjen, oda az éppen megfelelő méretű képváltozatot illeszti be. Így szeretne spórolni neked, s igaza van, miért kellene egy 1600 széles képet letölteni, amikor a 640-es kép teljesen megfelelő? De van egy bökkenő!
Saját tapasztalatom volt, hogy amikor egy gondosan előkészített, jól tömörített 1920 széles képet elhelyeztem a honlapon jpg formátumban, elkészítette a szokásos képsorozatot a fentiek szerint. Sajnos a beépített tömörítő rutin nem tett ki magáért, ezért a sorban következő kisebb képek zöme nagyobbra (több kilbájtosra) sikeredett neki, mint amilyen az eredeti kép volt. Így fújhatjuk a képtömörítést és a gazdaságos képletöltést!
Szerencsére van megoldás
Van olyan telepíthető kiegészítő, amely megakadályozza a beépített képszaporító rutin működését, ezzel elkerülhető, hogy a felesleges, és nem megfelelő méretű képek legyenek használatban. Így a WordPress rendszer képfeltöltésenként valóban csak egyetlen képet tárol, s azt használja mindenhol. Amennyiben egy nagyszerűen előkészített webp képet töltesz fel, az tényleg csak saját méretével terheli a letöltési folyamatot, egyetlen kilobájttal sem többel.
Így ha egy képet csak félképernyős megjelenítésre szánsz, akkor tölts fel egy 1280 vagy 960 széles webp képet! Ha teljes képernyős megjelenítés a cél, akkor pedig készíts elő egy 1920 széles képet. Ha ennek megfelelően átgondolod a képméretezést, akkor a letöltődés sebessége ugrásszerűen megváltozik pozitív irányba.
Nem Te csinálod? Így kényszerítheted…
Ha delegáltad a honlap dolgait valamelyik kollégádnak, és szeretnél biztos lenni abban, hogy még véletlenül sem tölt fel nagyobb képeket a szükségesnél, a WordPress lehetővé teszi, hogy korlátozd a feltölthető képek méretét. Adott kiegészítőt alkalmazva beállítható a feltölthető képek formátuma és maximális mérete.
Ha így „eteted” képekkel a honlapot, akkor biztos lehetsz benne, hogy azok nem jelentenek akadályt a gyors letöltődés érdekében. Weboldalad hosszú távon megőrzi frissességét, gyorsan elérhető lesz minden pillanatban, és használata kényelmes marad. Ha ezzel a módszerrel is emeled a felhasználói élményt, az tetszeni fog keresőrendszernek és a látogatóknak egyaránt.
A weboldal gyorsítás említett kiegészítői és szoftverek:
– Gimp képmanipuláló szoftver
– Force regenerate thumbnails plugin
– Big file uploads plugin