Képek a weboldalra

Kepek a weboldalra - Neked is jobb Online
Ma egy olyan témát fogunk körbejárni, ahol az elmélet és a gyakorlat szöges ellentétei egymásnak, és bár elméletben mindenki tudja, hogy mit kellene tennie, a gyakorlatban elsiklik a figyelmünk a finom részletek mellett, így a várt eredmény elmarad.

Ezért hát essünk neki és nézzük meg, hogy hogyan használhatjuk ki maximálisan a képekben rejlő potenciált.

A weboldalra feltöltött képek eredete

Ahhoz, hogy a weboldalunkra kikerüljön egy felvétel, az első lépés mindenképp az, hogy rendelkezzünk az adott felvételekkel. Nem csak fizikálisan legyen a laptopunkon, vagy a felhőben, mint pl. Google Drive-on, de kell engedélyünk is legyen a képek felhasználására.

Ez utóbbi azért fontos, mert egész egyszerűen ha valaki fogja a saját felvételét és feltölti a Google keresőbe, az megmondja, hogy hol lehet megtalálni az adott felvételt az interneten. Innentől pedig érvénybe léphet a szerzői jog, nem kívánt kellemetlenségeket okozva.

Léteznek ingyenes képletöltő szolgáltatások is, mint például a Pixabay. Az itt található felvételeket ingyenesen és jogtisztán használhatjuk. Viszont ez esetben elvész az eredetiség faktor, ami negatív hatással lehet a weboldalunkra nézve.

Ezt némiképp próbálja csökkenteni a nem ingyenes kép szolgáltatások piaca (Stock Photos), de benne van a nevében is, hogy fizetős szolgáltatás.

Tehát minden út Rómába vezet alapon a legjobb az, ha saját felvételeket készítünk/készítettünk. Természetesen itt is tudni kell, hogy mit szabad lefotóznunk és mit nem, hisz számos szabályozás van erre is manapság.

Figyelemfelkeltő és hasznos felvételek

Egy kép többet mond ezer szónál – tartja a mondás. Ezért fontos tudni, hogy mi a jó kép. Erre pedig nincsenek írott szabályok.

Egy fotós tanfolyamon nagyon sokat foglalkoznak a művészi érzék fejlesztésével, amelyet minden bizonnyal tud a fotós, akit megfogadunk. De akár ő készíti a felvételeket, akár mi magunk, a felvételek alapötletei tőlünk fognak származni. Ezért kezdjünk el a klienseink szemével látni.

Egy panzió fotózása esetén például, nem csak a szobára kiváncsi a néző, hanem hogy mekkora a parkoló, melyik utcán keresztül lehet megközelíteni, van-e aszfaltút, hogy néz ki a kerti grill.

Fotók által megmutathatjuk azt is, hogy van recepció szolgálat, bankkártyás fizetési lehetőség, vagy saját prospektusunk, amelyből megtudhatják az érdeklődők, hogy mit érdemes megtekinteni a környéken.

Felvételeinket azzal is fel tudjunk dobni, ha pl. naplementében fotózunk, kékórában vagy éjszaka.

Ugyanígy a termékfotók esetén próbáljuk ne csak a terméket lefotózni, hanem a környezetet is, ahol használni fogjuk, esetleg készítsünk beszerelésről is felvételeket. Nagyon sokan első körben egy termék beszerelésére kíváncsiak és csak utána döntenek a vásárlás mellett.

Ha egy felvételen emberek vannak, az sokkal jobban képes megragadni a néző figyelmét. Gondolkozzunk el azon, hogy hogyan lehetne egy mosolyt bevinni a képbe.

A képek előkészítése a feltöltéshez

Amennyiben sikerült megoldani a képek beszerzésének kihívását, akkor érdemes kicsit előkészíteni azokat.

Mindaz mellett, hogy szeretnénk céglogóval ellátni a kép sarkát, érdemes két dologra odafigyelni.

A képméret: egy nagyon fontos tényező, hisz lehet, hogy a szerverünk bármilyen mérettel elbír, de előretekintőbbek kell legyünk ennél. Példának okáért a Facebook nem szereti sem a túl kicsi, sem a túl nagy fájlméretet. Így rengeteg bosszúságot okozhat, amikor nem jeleníti meg a megosztásoknál azokat.

Amennyiben a szerverünk rendelkezik képátméretező szolgáltatással, akkor szinte nincs is teendőnk, de amennyiben nem rendelkezik, akkor érdemes elgondolkodni egy standard méretben, valahol 3000 pixel környékén a nagyobbik oldalnak. Illetve egy minimális tömörítést alkalmazni, pl. egy 80%-os .jpg már eléggé sokat segít a weboldal gyorsaságára nézve.

A fájlnév: bár látszólag lényegtelen, de érdemes a fájlnevet úgy megválasztani, hogy a lehető legjobban leírja a képen látottakat. Lehetséges, hogy a weboldalunk úgy van megépítve, hogy egyes helyeken nem jelenik meg a kép cím és leírásmezője, így SEO szempontból csak a fájlnévre lehet támaszkodni.

Fájlnév választása esetén fontos megfigyelni, hogy a szerverünk elbír-e az ékezetes karakterekkel, különösen a hosszú ő és ű betűkkel.

Ha pedig kész a méretezés, logózás, tömörítés és elnevezés, akkor jöhet a feltöltés. Ezt igazából legtöbbször csak egy dolog akadályozhatja meg.

Létezhet a tárhely szolgáltató által beállított maximális fájlméret, amelyet ha meghaladunk, akkor hiába van a weboldalunk admin felületén beállított nagyobb limit, először ez érvényesül és csak utána a mi értékünk.

Képek weboldalra való feltöltése után

Amennyiben WordPress-t használunk, akkor a fájlnévadáson kívül idáig nem sok dolgunk volt. Hisz feltöltés után automatikusan átméreteződik a fájl.

Érdemes elgondolkodni egy olyan bővítmény használatán, amely tovább optimalizálja a felvételt, illetve átalakítja .webp formátumra, amely szintén hatalmasat lendít az oldalunk SEO pontszámán.

De azért még akad egy teendőnk, amit kézzel kell elvégezni. Ki kell tölteni a képhez tartozó cím mezőket és alt tagokat. Az alt tag az a szöveg, amely akkor jelenik meg, ha egy kép nem tud betöltődni. Az internet őskorában ez egy igen hasznos szolgáltatás volt, manapság csak a ráépült botoknak segítünk vele, hogy könnyebben értelmezzék az oldalunkat.

Tesztelés

Címszavakban ennyi is lenne a teendőnk, ha pedig készen vagyunk, akkor jöhet a tesztelés. Érdemes nem elfelejteni, hogy az oldalunk mobilnézetben másképp jelenik meg, mint normál nézetben, illetve végezni pár online sebességtesztet is.

Ezen kívül vannak az interneten nagyon jó kulcsszó sűrűség vizsgáló eszközök is, így gyönyörködhetünk abban is, hogy mennyi pluszt adnak a megfelelő szavakkal ellátott képek az oldalhoz.

Fotózásra fel, hisz a fotóknak is jobb online! Sok sikert mindenkinek!

Hasznosnak találtad ezt a cikket? Tetszik az, amit el akarunk érni az online térben? Akkor kérlek mutasd meg ezt másoknak is.

Egy Raspberry Pi WordPress szerver története – avagy mikor ne hallgass a szakemberre?

Egy Raspberry Pi Wordpress szerver története

Nemrég egy olyan barát kért tőlünk segítséget, aki bár jártas az internet világában, a szakmai oldalhoz nem ért, és ebből adódóan lett egy kis problémája. Az alábbiakban az ő történetét fogjuk elmesélni egy kicsit lekurtítva azért, hogy okuljunk belőle, és ne kövessünk el hasonló hibákat.

Miért jó ötlet a WordPress szerver telepítése egy Raspberry Pi-re?

Erre a kérdésre a válasz leginkább a miért ne, ha lehetséges volna. Hisz ha van egy Raspberry Pi, amelyet rá tudunk kötni az internetre, akkor nem függünk senkitől, saját magunk garantáljuk, hogy a weboldalunk mindig elérhető, és ha használunk egy CDN szolgáltatást, akkor máris egy rakás problémát ki is küszöböltünk.

Na de ehhez kell tudjunk kisebb rakat dolgot. Pl. szervert telepíteni, amelyen majd fut a WordPress. Kell értsünk a biztonsághoz, kell tudjunk karbantartani, kell tudjunk hibanaplót lapozni, stb.

Na de mi történik akkor, ha nem tudunk parancsokat gépelni parancssorba?

Amikor a Raspberry Pi rossz választás

Történetünk ott kezdődik, hogy egy lejárt SSL tanúsítványt kellett volna frissíteni az említett eszközön, ami ugyebár egy automatikus szolgáltatás lenne egy hosting szolgáltatónál, nem kellene semmit se tenni.

– Hát az úgy volt, hogy mondta a srác, hogy milyen vagány a Raspberry Pi.
– És te mennyit értesz hozzá?
– Hááát… Tudok mászkálni az agyában, azt tudom, hogy csomó parancsot kellene gépelni neki, de ahhoz nem értek. És kb. 15 perc után lefagy, ekkor kihúzom a falból.
– És akkor hogy boldogultál eddig?
– Eddig a srác intézett mindent. Mindig mindent frissített, amit kellett. De most azt mondta, hogy többet nem foglalkozik vele.
– Ez esetben nem lenne jobb áttérni egy tárhelyszolgálatóra?
– De. Csináljuk meg!

– Első lépésként töltsd le a következő migráló plugint a WordPress-hez, és az kigenerál egy fájlt. Ezt átadod nekem én meg a saját laptopomon telepítek egy xampp szervert, hogy kitudjuk próbálni, hogy sikeres lesz-e a weboldal költöztetés.
– Ok. Azt írja ki, hogy a fájl túl nagy. Nem tudom telepíteni.
– Az biza baj! Bele kell másszunk a málna agyába, hogy megnöveljük a limitet.
– A srác otthonról csinált mindent, valahogy tudott nyitni egy hátsóajtót magának. Nem tudnánk ilyent csinálni mi is?
– Tudni tudnánk, de kellene adj csatlakozási adatokat.
– Akkor felejtős… 🙁
– Ez esetben telepítek magamnak egy szimulátort, arra egy Raspberry Pi operációs rendszert és mondom lépésről lépésre, hogy mit csinálj.

– Lehet van egy jó hírem. Ha a fájlkezelőben addig kattogtatsz, hogy találsz egy php nevű mappát, akkor parancsor nélkül tudod szerkeszteni az általam megadott sorokat. Majd kihúzod a málnát a falból és kész is.
– Megtaláltam.
– Szuper.
– Azt írja ki, hogy nincs jogom szerkeszteni.
– Szívás.

Kb 5 óra múlva…

– Sikerült elindítanom parancsorból a szerkesztőt, most már tudok szerkeszteni.
– Szuper. Akkor annyi a dolgod, amit mondtam. Majd mentés. És megpróbálod telepíteni a WordPress bővítményt.

Kb. 3 nap múlva…

– Akkor most már csak annyi a dolgunk, hogy veszünk egy tárhelyet neked, onnantól én telepítek mindent, és többet nem lesz problémád.

A történet tanulsága

Felmerül a kérdés, hogy átverte-e a szakember a felhasználót? A válasz szerintünk nem. Szerintünk ha saját magának kellett volna készítse a weboldalt, akkor is ugyanezt az utat választotta volna. De a szakember épp attól szakember, hogy nem átlagfelhasználó. Mi pedig felhasználóként dönthetünk arról, hogy elindulunk-e a szakemberekké válás útján, vagy használjuk a kész megoldásokat.

Szóval az egyetlen hiba a történetben az volt, hogy sem az egyik sem a másik fél nem ismerte fel, vagy ha felismerte, nem merte kimondani, hogy ez egy rossz megoldás.

Ezért nagyon fontos, hogy már a tervezés fázisában tudjuk, hogy mi az, ami számunkra fontos. Például, hogy két kattintással tudjunk elkezdeni egy új blogcikket írni, és a végeredmény mégis élvezhető legyen. Vagy hogy esetünkbe ne kelljen semmit se tenni azért, hogy az oldal elérhető legyen az interneten.

Azt is fontos tudni, hogy mire van saját kapacitásunk. Pl. ha van egy jól működő Facebook csatornánk, akkor azt hogyan lehet kamatoztatni. Vagy hogy van-e egy saját fotósunk. Van-e elég időnk blog cikkeket írni, vagy másképp kell elérni, hogy látogatókat szerezzünk a keresőből.

Szóval ha bármilyen fejlesztésbe kezdünk az online térben, akkor vizsgáljuk meg azt, hogy mihez van tehetségünk, lehetőségünk, időnk és ahhoz mérten próbáljunk elindulni egy úton.

Sikeres online vállalkozást kívánunk mindenkinek!

Hasznosnak találtad ezt a cikket? Tetszik az, amit el akarunk érni az online térben? Akkor kérlek mutasd meg ezt másoknak is.

Miért ilyen lassú a weboldalam a PageSpeed Insights szerint?

PageSpeed Insights Teszteredmény

Szinte naponta teszik fel a kérdést fórumokon, miszerint ha rákattintok a weboldalamra, akkor számomra elég gyorsnak tűnik, de a Google Speed Teszten hatalmas bukta az oldal. Miért van ez? Kell hinni a gyenge PageSpeed Insights eredménynek? Na és persze a legfontosabb, hogy mit tehetnék a javulás érdekében?

Tényleg lassú és ha igen, miért lassú a weboldalam?

Amennyiben ön egy cégvezető és van saját weboldala, akkor nagy valószínűséggel már beruházott egy gyors laptopra is. De a legtöbb weboldalt, főleg azokat, amelyek a nagyközönségnek szólnak nem egy erős laptopról, hanem egy mindennapi használat által leterhelt mobiltelefonról tekintenek meg.

Innentől pedig a weboldal sebessége szinte végtelen számú tényezőtől függ, kezdve a szerver elhelyezkedésétől az aktuális időjárással bezárólag. Példának okáért Erdélyben vannak olyan mobiltornyok, amelyek csökkentett kapacitással működnek viharos időjárás esetén. Jön a vihar, oda a jó internet…

Tehát az, hogy mi mit gondolunk a saját weboldalunkról egy kicsit sem fedi a valóságot.

Ugyanakkor az is tény, hogy a Google nagyon magasra teszi a lécet, sokszor elég nehéz, szinte lehetetlen megugrani. Ezért ne essünk kétségbe se, ha sosem tudjuk elérni az egyébként időről-időre változó minimum kérelmeket.

Régen gyakori eset volt, hogy nem is tudta jól mérni az oldalt ez az eszköz, ezért nagyon sokan mind a mai napig azt javasolják, hogy hagyjuk figyelmen kívül az egészet. Persze megtehetjük, de a Google nem fogja.

Ezért, hogy rövidre zárjuk a kérdést, a személyes javaslatunk az, hogy ha sárga zónában van a PageSpeed Insights eredmény, akkor még várhat egy kis időt a dolog, de ha piros zónás, főleg az asztali lekérés eredménye, akkor nem éri meg habozni. Lépni kell!

Mit lehet tenni a weboldal gyorsaságának javulása érdekében?

Igazából manapság egy egész iparág épült ki arra, hogy a lassú weboldalakat felpörgesse, és számos egymástól eltérő, de együtt is alkalmazható megoldás született. Így csak pénztárca kérdése, hogy melyeket alkalmazzuk.

Ugyanakkor kisvállalkozóként pont ez az a tényező, amely meggátolhat a sikerben, ezért sokszor saját magunk kezdünk el alkalmazni ingyenes eszközöket. Bár ezen eszközök, WordPress oldalak esetén bővítmények használatával is nagyszerű eredményt lehet elérni, valójában a próbálkozás egy kétélű penge. Ha nem vesszük elég gyorsan észre az így eredő hibákat, akkor többet bukhatunk, mint amennyit nyerhetünk.

Viszont akár saját magunk kezdünk el megoldást keresni, akár szakembert bízunk meg a feladattal, az alábbi dolgokat feltétlen meg kell vizsgálni, és a végső döntést mindig mi magunk kell meghozzuk.

1. Külső források

Van-e szükségünk 3 különböző képvetítő modulra, amely különböző szerverekről tölti le a saját erőforrásait a mi szerverünk helyett?

Van-e szükségünk 5 féle követőkódra, amely szintén külső szervereken tárolja az információt? (Google Analytics, Facebook Pixel, Hotjar, …)

Tényleg szükségünk van-e különböző külső szolgáltatásokra, mint pl. Google reCAPTCHA, Facebook poszt beemelése a weboldalra?

Ezek mind-mind olyan szolgáltatások, amelyek nagyban hozzájárulnak az oldal lassúlásához.

2. Hány fájlból áll a weboldalunk?

Amennyiben jobb egérgombbal kattintunk a weboldalunkra, majd a Vizsgálat (Inspect/Inspect element) lehetőségre, akkor megjelennek a fejlesztői eszközök, itt az Hálózat (Network) részben nyomon követhetjük, hogy hány fájlt kell betöltsön a böngésző ahhoz, hogy megjelenjen a weboldalunk.

Meg fogunk lepődni, amikor azt kapjuk, hogy 50 javascript fájl, 30 css fájl és legalább 12 féle betűtípus mellett legalább 50 képet is letölt az oldal, így ha az egészet összeszámoljuk, akkor máris megközelítettük a 150-es számot.

Ha önnél is ez a helyzet, akkor ideje egyesíteni a .js és .css fájlokat, tömöríteni amit csak lehet és elgondolkodni azon is, hogy a .jpg képeket .webp -kre cseréljük.

Azt viszont tudnunk kell, hogy nem várt működésbeli változásokkal járhat főleg a javascript fájlok egyesítése, így feltétlen le kell ellenőrizni az eredményt legalább 2-3 különböző eszközön és böngésző típusban.

3. Gyorsítótárazás

Az előző lépés arra szolgált, hogy az internet forgalmat csökkentsük. De nagyon sokszor már a saját szerverünkre való kapcsolódás pillanatában eldől, hogy mire számítsunk.

A kliens csatlakozik a szerverre miután átment a terhelés elosztó szerveren, a szerver az adatbázis szerverre, az válaszol a szervernek, a szerver értelmezi az adatokat majd válaszol a kliensnek. Ez a minimális séma, de az is lehet, hogy még mielőtt a kliensnek válaszolna a szerver, még igénybe vesz más szervereket is.

Még gondolatban is nehéz követni, de mi értelme ezeket a lépéseket egytől-egyig megtenni, használni az erőforrásokat, ha az eredmény minden egyes lekérés után ugyanaz?

Ezért feltalálták a Cache / Page Cache / Database Cache / Client Cache megannyi fajta gyorsítótárat, amely a kigenerált eredményt lementi és használja egy meghatározott ideig.

A gyorsítótárak használatát viszont csak akkor ajánljuk, ha tényleg statikus a weboldalunk, azaz nincsen vásárlási opció rajta, nem kell semmiért bejelentkezni. Ellenkező esetben mindenképp kérjük szakember segítségét.

4. CDN szerver használata

Azt már tudjuk, hogy a weboldal sebessége függ a szerver és a kliens közti távolságtól, ezért választunk mindig a klienskörhöz közeli szervert magunknak. De mi van ha a világ összes táján szeretnénk árulni?

Erre az esetre találták ki a Content Delivery Network vagy Content Distribution Network kifejezést, röviden a CDN-t, amelynek működési elvét úgy kell elképzelni, mintha csak klónoznánk a szerverünket és elhelyeznénk a világ számos pontján. Így minden felhasználó a hozzá legközelebb található szerverről kapja a választ. És az sem elhanyagolható tényező, hogy ha kiesik az egyik katona a sorból (azaz az egyik szerver), attól nem esik el az egész hadsereg.

Persze ez a szerver-hálózat magával hozza a szerverek szinkronizálásának problémáját, így megint csak azt tudjuk ajánlani, hogy kérje szakember véleményét, vagy legalább nézzen meg egy oktatóvideót, ha belevágna.

PageSpeed Insights alternatívák

Amennyiben a fenti lépéseken már túl vagyunk, és még mindig úgy érezzük, hogy túl lassú az oldalunk teszteredménye, és már rá se tudunk nézni a teszteszközünkre, akkor itt van pár alternatíva.

Pingdom Website Speed Test és GTmetrix: mindkét eszköz, gyors, ingyenes és részletes elemzést kínál.

WebpageTest: ez az eszköz annyiban másabb, hogy látványosabban kirajzolja az egyes fájlok letöltésének folyamatát

Dotcom-Tools: egyszerre lehet több helyszínről is letesztelni az oldalt

Amint láthatjuk eszköz van bőven, lehetőségek is. A nagyok sokszor a másodperc ezredrészeiért harcolnak. Akkor miért maradjunk ki mi a versenyből?

Hát kalandra fel!

Hasznosnak találtad ezt a cikket? Tetszik az, amit el akarunk érni az online térben? Akkor kérlek mutasd meg ezt másoknak is.