2019 április 6.-án estén publikáltam a responsive honlapomat, természetesen újabb, ezért 2.0-as verziószámot adtam meg. Előtte ugyan responsive és 1.0-as verziószám volt, de annyi volt különbség, hogy a réginél Bootstrap 3.3.7 és jQuery technológiát alkalmaztam, most pedig Bootstrap 4.3.1, mely ez legújabb technológia és nem használtam a jQuery-t, helyette inkább natív Javascript fejlesztést.
A kreatív elképzelések és az arculati tervek megvalósítása kedvért kialakítottam a weboldalamat, mely még felhasználóbaráttá tettem ezt.
Ráadásul zöld helyett kék lett a színkódom és folytattam a desing-et beszabni és tervezni, hogy letisztuljon és kontakt szem szerint könnyen olvasható legyen.
Publikált weboldal cím:
- Kattintson ide megjegyzés: 2020. augusztus 7. óta már teljesen új és WordPress CMS.
Felhasznált technológiák:
- Bootstrap 4 - CSS felhasználása + egyedi új arculat design sablon fejlesztés és implementálás
- Bootstrap 4 - Natív JavaScript felhasználása
- Cookie JS - jQuery-ról natív JavaScript-ra kialakítása - egyedi fejlesztés
- Fix menürendszer - natív JavaScript - egyedi fejlesztés
- link external - natív JavaScript - egyedi fejlesztés
- Font Awesome 5.0.10. - Ikonkatalógus felhasználása
Verziószáma:
2.0
Miért jQuery (keretrendszeres) helyett Natív JavaScriptet alkalmaztam?
Azért, mert az én célom, hogy tovább finomítsam az oldal betöltödési sebességet és minél gyorsabb legyen.
Sajnos nincs időm és se kapacitásom, hogy pucoljam ki a Bootstrap és a Font Awesome CSS fájlokból felesleges tulajdonságokat, amelyek nem oda valóak, hogy minél kisebb legyen a kilobájtja és annál gyorsabban töltsön be az oldalt, mivel generátor, aminek neve: “Critical Path CSS Generator”, itt annyi gond van, hogy automatikusan mindig 1-1 eszközökben lesznek design hibák, mert motor nem látja, amit ember igen.
Ezért jobbnak láttam, ha jQuery helyett Natív JavaScriptet választom ki, mert jQuery nagyon kövér és több kilobájtot fogyaszt, természetesen azzal több időt spórolhatok vele a munkaidőm és gyorsabb lesznek a weboldalak.
Technikai elemzések:
W3C Validátor - webes szabványok és HTML kódjának a helyessége vizsgálat
Nincsenek hibák és se figyelmeztetések. Ez helyes.
Mobile Friendly - Mobil felhasználóbarát vizsgálat
Nincsenek betöltési problémák és igen mobilbarát oldal. Ez helyes.
Hogy miért? Mert többször találkoztam már olyan a weblapokkal, amiket NEM én csináltam meg, azok bár mobilbarát oldal, de sajnos voltak betöltési problémák, eléggé gondok. Ezért fontos, ezt is le kell tudni!
PageSpeed - Sebességpont és időmérés vizsgálat
Mobilon 97, desktopon pedig 100 pontot kaptam, ez bőven elég és túl optimalizva lettek a sebesség pontozáson és időmérésen szerint. Többi maradékok nem érdekesek, mert azok nem befolyásolja a Google-t és az ügyfelek viselkedését. Ugyanis igen helyes.
GTmetrix vizsgálat
Analyzing - online analizáló / sebességmérő eszköz, amivel pontos, több képet ad az eredményeket a sebességmérés alatt. Több hasznosakat és tippeket ad, ha valamelyik témán kevesebb pontot kap.
A 3.6 másodperces teljes oldalbetöltési idő nem rossz a lassú mobilhálózatokon esetén. Csaknem minden témában majdnem 100%-kal tudtam teljesíteni, tehát ez helyes.
Ha engem kérdezel, hogy melyik a jobb PageSpeed Insights vagy GTmetrix? Természetesen GTmetrix, mert itt több technikai adatokat mutat és segítséget nyújt, mint ott.
Következő lépéssel lesz tervem:
Lazy Loading - images - Képletöltés optimalizálása
Hogy miért szükséges ez? Mert az oldalbetöltésekor ne kelljen egyszerre betöltenie a képeket, ha amíg nem nézi meg a felhasználó a teljes oldalt, csak akkor, ha lefelé görgetni (scrollozni) és akkor folyamatosan jelenjen meg a képek, így azzal lehet spórolni a betöltési időt és kevesebben fogyasszon az adatforgalmat. Ezzel javulni fog az oldal teljesítménye.
 weboldalam 2. rész){kind=link}
0 Megjegyzések