A suszter cipője: megújult az olcsoweboldal.hu (2022)

3 hete írtam arról, hogy 2 év 7 hónapig él egy átlagos weboldal. Az olcsoweboldal.hu immáron közel 6 éve nem esett át ráncfelvarráson, megújításon. Immáron egy kicsit kisebb a lyuk a „suszter cipőjén.”

Persze nem a korábbi cikkem ébresztett rá arra, hogy foglalkoznom kellene az oldalammal. Már nagyjából 2 éve terveztem. Az alábbiakban összefoglalom a munka főbb állomásait, illetve azt, hogy miért pont ilyen lett.

Mitől lesz szép egy weboldal?

Többek között az alábbiak összhangjától:

  • Egymással harmonizáló színek.
  • Jól olvasható betűtípus.
  • Megfelelő hátterek.
  • Jó méretezés, arányok, elrendezés.
  • Témához illő képek.
  • Tagolt, megfelelő hosszúságú, hasznos szövegek.
  • Ikonok, egyéb design-elemek.
  • stb.

WordPress kinézetcsere lépésről lépésre

A teljes WordPress kinézetcsere folyamatról írtam korábban egy cikket. Ahogy az „alaplistából” látszik, nem egyszerű folyamat a kinézetcsere, a weboldal megújítása. Ha jól akarjuk csinálni, akkor messze nem annyi, hogy telepítünk egy új kinézetet, majd aktiváljuk. A 2016-os megújításkor egy ~130 pontos lista lett a megújításból. Most nagyjából ~100 ponttal megúsztam.

Amik a szokásos listán nincsenek rajta, és itt előkerültek:

  1. THE7 kinézet kiregisztrálása, hogy ne az újabb felhasználáskor kelljen megtenni bonyolultabb módon.
  2. Korábban a THE7-ben pár opció volt használva, ami a GeneratePress-ben nincs, vagy máshogy van, pl.: kiemelt képek, fejléc, stb.
  3. Az oldalak között voltak olyanok, amelyeknek a címsora el volt rejtve, mert SEO szempontok miatt a tartalomban volt ez elhelyezve.
  4. Voltak teljes szélességű tartalmak, amelyeket ismét be kellett állítani.
  5. A címsorok a korábbi CSS-ek miatt nem voltak egységes méretűek.
  6. Az oldal tetején lévő 2 sor szöveg most az oldal címe és leírása érték kiíratása. Eddig nem így volt megoldva.
  7. A H1-H6 elemek sok oldalon nem jól voltak használva. Ezek egy része is javítva lett az átállás során.
  8. A Search Console is jelzett hibákat. Ezek egy részét már javítottam, egy részét pedig a későbbiekben fogom.
  9. Stb.

Főbb szempontok a weboldal megújítása során:

Ne legyen üzemkiesés.
Tartottam is, végig éles oldalon ment a munka, 0 perc leállással. Igaz, 1-2 óra volt, amikor az átmeneti időszak miatt egy kicsit csúnyább volt a weboldalt, mint a munka megkezdése előtt. Azért nem volt hosszabb ez az idő, mert alaposan előkészültem, egy másik domainen előzetesen végrehajtottam a kinézetcserét, hogy lássam mivel lesz probléma.

Legyen gyorsabb a weboldal.
A Google PageSpeed Insights eszközén 49/93 volt a mobil/asztali érték. 2021. májusától rangsorolási szempont a weboldal sebessége, ezért ha már újítottam, ezt kiemelt prioritásként kezeltem.

Az eredmény 99-es Mobilos érték (25 aktív bővítménnyel, WPBakery oldalépítgetővel, Plugin Organizer nélkül):

99-es mobilos sebesség

És egy másik összehasonlítás (sebesség vs. oldalméret):

Oldal méret csökkenés, sebességnövekedés

Legyen letisztultabb az oldal, mint volt.

A kevesebb több elvet szerettem volna követni.

Ilyen volt az oldal:

És ilyen lett:

Véleményem szerint a letisztultság is teljesült.

  • Rengeteg felesleges zöld, piros és egyéb formázást töröltem a munka során a meglévő oldalakból. Ez nem volt egyszerű kör, a beépített keresővel szűrtem ki a problémás oldalakat a módosításhoz.
  • Az ikonok eltűntek a menüsorról.
  • Átláthatóbb lett a fejléc.
  • Az oldalsáv és a lábléc is.
  • A hírlevél feliratkozás kivezetésre került a láblécbe (eddig külön aloldalon volt).
  • Kiemelésre került az Ajánlatkérés menü, ami eddig Kapcsolat néven futott.
  • A logó és favicon színei kicsit változtak, egymással jobban összhangba kerültek.
  • A kereső a láblécbe került. A statisztikai adatok alapján nem igazán használták felül.
  • Átmenetileg leállítottam az oldal Twitter csatornáját (szinte 0 forgalmat hozott – és egy bővítménnyel össze volt kötve az oldallal).
  • A bal alsó sarokban lévő zavaró ajánlatkérés gomb ki lett gyomlálva.
  • A régi, http://-s saját URL-ek át lettek írva a tartalmakban https://-ekre (a háttérben, mert eddig is így jelentek meg).
  • Stb.

Egységesítés
Sok cím, alcím, gomb volt, amik különféle designban (szín, méret, ikon, pozicionálás, stb.) jelentek meg. Ezek jó részét is gyomláltam. A narancs-citrom gombokat már a kinézetcsere előtt elhelyeztem az oldalon, mert a régi megoldás hibára futott volna váltáskor.

Egyedi CSS-ek gyomlálása
Sok éve egy külön CSS-ben végeztem sok módosítást. Ezt mindig hoztam tovább egy-egy megújuláskor, azaz már sok felesleges dolog volt benne. Ezt is töredékére redukáltam a munka során, sőt az erre használt plusz bővítménytől (így volt eddig kényelmes) is megszabadultam.

Ne legyen irreálisan sok felesleges munka az átállás során
Itt arra gondolok, hogy a korábbi weboldal tartalmát minél nagyobb hatásfokkal lehessen az új köntösbe „átforgatni”. Sikerült.

Nem várt problémák, dilemmák a kinézetcsere során:

GeneratePress vagy Astra legyen az új kinézet?
Mindkettővel csináltam már több weboldalt. Mindkettőhöz szuper dokumentáció van. Sokáig utóbbi mellett álltam (szimpatikusabb volt), de végül a Kinsta cikke győzött meg. Nincs szükségem azokra a pluszokra, amit az Astra tud, cserébe még gyorsabb weboldalt kaptam. Nem bántam meg a döntésemet, és a befektetett 59$-t (amely liszensszel egyébként 500 oldalon is használhatom a GeneratePress-t).

Milyen legyen az új szín?
Maradjon kék? Legyen zöld, narancs, egyéb? Milyen árnyalatok, kiegészítő színek legyenek? Sokat ötleteltem ezen, amire kialakult a színvilág.

Új logó?
Mivel sakkozok, gondoltam arra, hogy szép utalás lenne az, ha egy 2×2-es sakktábla lenne a logó alapja, amiben ikonok lennének a szolgáltatások. De végül ezt elvetettem, mégiscsak weboldal készítés és online marketing a fő témaköröm.

Miért lett/maradt végül a 3 színes fogaskerék a logó?
Terveim szerint továbbra is azt szimbolizálja, hogy a sikeres webes jelenlét egy jól működő gépezet eredménye, amelynek bizony sokféle fogaskereke van.

WPBakery Visual Composer gyorskódok
Továbbra is ezt használom oldalépítgetőként, mivel a WordPress beépített szerkesztője (Gutenberg) még nincs azon a szinten, hogy ezt kiváltsa. A korábbi kinézet (THE7) adott elemeket az oldalépítgetőhöz, amit előre át kellett alakítani, hogy a kinézet váltása után ne legyen a helyükön hiba. Ezek mind „dt_” kezdetűek a forráskódban, ezért könnyen rájuk lehetett keresni.

Ugyanilyen kereséseket futtattam előre a „btn” (gomb), „row” (sor), „column” (oszlop), „fancy” (pl.: idézetek megjelenítésére használt Fancy Quote elem), „teaser” (kép+szöveg kombináció), stb. elemekre is, hogy minél jobban előredolgozzak ezek kiváltásával.

Ez a példa is jól alátámasztja, amit az ügyfeleimnek is szoktam tanácsolni: ahol nem szükséges, nem kell oldalépítgetőt használni – kinézetváltás esetén annál kevesebb probléma merülhet fel. A fentiek soknak tűnnek, de kb. 3-5 munkaóra pluszom volt emiatt. Úgy, hogy a tartalmaim töredékénél használom csak a WPBakery-t.

Könyv értékesítési oldal
A sikeres online vállalkozás építőelemei könyv értékesítési oldalán több dologgal elő kellett készülni, mert az átlagnál jobban rá volt épülve a THE7 kinézetre.

Elavult, felesleges bővítmények
Nagyjából 5-10 bővítménytől megváltam. Részben azért, mert nem volt már rájuk szükségem, részben azért, mert csak az én kényelmemet szolgálták (ergo: nem hoztak pénzt), részben pedig kiváltottam másik megoldással ezeket. Utóbbira példa, hogy a WP Fastest Cache + 2 másik bővítményt a WP Rocket-re cseréltem.

Hírlevél sablon
A színvilág megújításával együtt a hírlevél sablonomat is frissítettem az új színeknek megfelelően.

Ügyféltérkép
Több éve nem frissítettem a főoldalon lévő ügyféltérképet, ezért ideje volt már. Egy füst alatt ezt is elintéztem a munka során, így néz ki az aktuális állapot – az alábbi helyekről volt már legalább 1-1 ügyfelem:

Ügyféltérkép, 2022

Későbbi tervek:

Háttérben lévő régi aloldalak
Ezek megszüntetésével, aktualizálásával, összevonásával még adós vagyok magamnak.

Aloldalak designolása, újraszövegezése
Ezek is váratnak még magukra. Az első lépés a kinézet megújítása volt. Ez egy nagyobb falat lesz.

WordPress videók – megújítás
Ha a Search Console és a Google Analytics statisztikái pozitív változást mutatnak, akkor a másik weboldalam is átesik egy kisebb felújításon. Bár lehet, hogy ezt nem fogom megvárni, mert ott is aktuális a kinézetcsere. Frissítés, 6 nap múlva: végül nem vártam meg, a WordPress videók is átesett egy apróbb ráncfelvarráson.

Mennyi időt vettek igénybe a fentiek?

Nagyjából 25-30 munkaóra volt a teljes folyamat. Úgy, hogy feljebb még írtam: még messze nem teljes a megújulás.

A korábbi megújulások:

Hiszem azt, hogy az eddigi egyik legjobb újjászületésen van túl az olcsoweboldal.hu.

Korábbi váltások (nem ér nevetni – ma már vállalhatatlan némelyik):

Alapvető webes vitals-mutatók

6 héttel a megújítás után, 2022. június 1-én kiegészítettem a cikket:

A Search Console vonatkozó pontjában remekül látszik, hogy a 2022. április 19-es megújítást követően a régi, „gyenge” címkével ellátott URL-ek szépen lassan átkerültek „javításra szorul” (ez eggyel jobb, mint a „gyenge” URL), majd a „jó URL” státuszba.

A forgalmon is látszott, hogy mivel korábban nem volt jól teljesítő URL, így csak mostantól tudja mérni a rendszer a jó URL-ek keresőbeli számát:

Itt is látszódik, hogy szépen felfutott a jó URL-ek száma.

Frissítés, 2022.10.03. WPBakery törlés

Szeptemberben megszabadultam a WPBakery oldalépítgetőtől is, így már vagy a hagyományos, vagy a Gutenberg szerkesztőt használom minden tartalmamnál. Tudom, feljebb azt írtam, hogy nincs még azon a szinten a Gutenberg, de tévedtem, megkövetem magamat – minden WPBakery-s tartalmat létre tudtam hozni Gutengerg alatt is.

Önnek mi a véleménye a mostani állapotról?
Előre is köszönöm, ha megosztja velem egy hozzászólásban!

Cikkértesítő

Ha nem szeretne lemaradni az új cikkekről, akkor iratkozzon fel az értesítőre!

Extra ajándékként rögtön elküldöm a 199 weboldal készítés hiba című cikksorozatom elérhetőségét!

Szólj hozzá!