Google PageSpeed Insights - tapasztalatok 2. - statikus megoldások

Juszkó Csaba január 08, 2023

Több, mint 6 éves tapasztalatokkal rendelkezem a Google PageSpeed Insights terén. Arra gondoltam segítek a webfejlesztőnek, hogy miként gyorsítsa fel a weboldalait és ez alapján jókat értékeljen a Google, mert csak így szépen indexelni fog a találati listában.

Nemcsak ez, hanem a látogató viselkedése szempontból nagyon fontos, hogy valamelyiknél probléma miatt nagyobb eséllyel vissza fognak lépni, azaz visszafordulási aránya növelni fog, ezt mindenképpen el kell kerülni, csak akkor, ha szépen sebességet optimalizálva vannak.

Most összeírom olyan dolgokat, miként lehetne megoldani statikusan, mely nem kell dinamikus megoldásokat alkalmazni.

Én bár 100/100 pontot tudtam teljesíteni, de 1-2 okokból csak minimum 90/100 -ot voltam hajlandóan teljesíteni. Ez bőven elég lesz.

Összegyüjtöttem a legfontosabb teendők és megosztom mindenkivel:

Tartalomjegyzék

Teljesítmény:

Képek optimalizálása

A képeket optimalizálással minél több felesleges bájtokat felszabadítani, hogy minél gyorsabban töltsön fel az oldalt:

  • Többféle képformátumok vannak, de sorrend szerint támogat:
    • 1. WebP (pár éve kezdődött ez az új kép formátum)
    • 2. AVIF (nemrég kezdődött ez az új kép formátum)
    • 3. JPEG (túl régóta)
    • 4. PNG (túl régóta)
    • Érdemes kiválasztani olyan kép formátumot, mert azzal segít, hogy kevesebb legyen a képfáljnak bájtja, aminek köszönhetően gyorsan tölti be az oldalt. Ezért lehetőség szerint konvertáljuk őket.
  • Átméterezni szükséges, megfelelő méretekre. Mondok egy példát: egyik boxra lett helyezkedve a képméret szerint szélessége 2000px, ez nagyon sok, hisz desktopon 4db, tableten 2db, mobilon pedig 1db box tartózkodik, ezért javaslom átméretezni, mondjuk 500px legyen, ezalatt több bájtot felszabadíthatja.
  • Pucoljuk ki a felesleges minőségeket és meta adatokat.
  • Javaslom használni width=”” és height=”” tulajdonságot, mert enélkül a böngészőn felesleges egy plusz lépéssel számolgatni, hogy mennyi a szélessége/magassága.
  • Nagy képeknél, például slidereknél javaslom CSS Sprite-t használni, mert azzal gyorsabban lehetne. Bár én nem mindig szoktam használni, csak akkor, ha muszáj.

Fájlok csoportosítása 1-1 fájlba

Több helyett egy léptetés érdekében össze kell csoportosítani 1-1 fájlba, tehát lehetőleg összesen 1db CSS és 1db JS fájl legyen, mert azzal spórolni lehet a HTTP kéréseket, tehát egyes új szál nyitása, új erőforrás és plusz idő töltődés. CSS, JS és HTML tömörítése.

Interneten nagyon sok jó online compressor generátorok vannak, érdemes használni.

Szükséges, mert segít kiszedni a felesleges tabokat, a sortöréseket és az enter ütéseket, ráadásul kiszedni a kommenteket, végén akkor több százalékot felszabadíthatja és gyorsabb lesz.

CSS fájlban nem szabad használni import-ot

Nem javaslom használni a CSS fájlban külső CSS fájlt behúzni, mert újabb egy lépéssel tölti be az oldalt, emiatt egy lépéssel lassabb lesz a sebessége.

Betűtípusok optimalizálása

Ne használjon sok betűtípust, helyett inkább elég 1-2-őt.

Google Web Fonts-nál megadhatjuk paraméternek a használni kívánt betűtípusokat, így nem kell két elem miatt több száz betűtípust letölteni.

Én általában 1db betűtípust szoktam használni, ha muszáj akkor maximum 2db, amikor szövegek mellé legyen címsoroknál külön betűtípus.

Ikonok optimalizálása

Több helyett érdemes egy db ikon katalógust használni. Találkoztam már azzal, ahol egy weboldalon többféle css fájlt használtak, azaz egyszerre például: font awesome, flaticon, iconfont.

Ennek van hátránya, hogy egyszerre együtt több fájt(woff, woff2, svg, stb) csatolva lettek és ennek köszönhetően több időt töltödik és több léptetés. Ezért javaslom elég csak egyik katalógust használjuk és belül úgyis több ikon választék van, amiben biztos vagyok benne, megtalálhatja amit szeretne látni.

Szívem szerint Font awesome-t használnám, mert túl jók és rengeteg vannak fent található, amit keresek.

Belső linkek átirányítása helyett javítása

Amikor történik a menü átnevezés vagy áthelyezés vagy törlés, ilyenkor mindenképpen a weboldalon ki kell javítani a belső linkeket. Bár htaccess-ban mindenképpen redirect-elni kell az új url-re, de arra való, hogy akinél le van mentve vagy marad a Google listában régi url, ott tudjanak használni, különben 404 oldalt kap.

Miért ne legyenek már ennyire lusták a belső linkek javítása, mert gondolják elég htaccess-ra rakni egy redirect-elés? Mert ott annyi gond van, hogy általában akár 100-300ms időbe is kerülhet, ezért mindenképpen jár a belső linkek módosítás.

htaccess - gzip és gyorsítótárazás (cache)

Érdemes használni a GZip tömörítést, mert segít fájlokat tömöríteni a szerveren és gyorsabb lesz. A gyorsítótárazásnál pedig inkább arra való, hogy a visszatérő látogatóknak a böngészőjük alatt nem kell állandóan újra betölteni, így gyorsabb lesz. Én ilyenkor csak a fontos fájloknak adom meg megfelelő időt (óránként, hetenként, havontaként, évenként) a gyorsítótárazásra: js, css, képek és fonts.

Csak arra kell figyelni, hogy például: történt az egyik helyen képcsere, de más-más alakzat van rajta, ilyenkor érdemes más fájlnevet megadni, mert nehogy ragadjon be a cache, hisz látogatók nem tudják mi a teendő, amikor beragadt a cache.

Rendelkezik-e? Ha nem, akkor érdemes pótolni

Megjegyzés: ezek sikeresek lettek, amikor lenyílóval jelenik meg, ott van a “További információ” funkció, mely segítséget nyújt, mi a megoldás.

Példaként demo.juszkocs.hu honlap esetén).

Sikeresen teljesített ellenőrzések (30)

  • Méretezze megfelelően a képeket
  • Késleltesse a képernyőn kívüli képek betöltését
  • Minimalizálja a CSS-fájlokat
  • Minimalizálja a JavaScript-kódot
  • Kódolja hatékonyan a képeket
  • Jelenítse meg a képeket következő generációs formátumokban Akár 15 KiB megtakarítás
  • Engedélyezze a szövegtömörítést
  • Csatlakozzon előre a szükséges forrásokhoz
  • A kezdeti szerverválaszidő rövid volt 80 ms a gyökérdokumentumhoz
  • Kerülje a többszörös oldalátirányítást
  • Használjon videoformátumot az animált tartalmakhoz
  • Távolítsa el a többször szereplő modulokat a JavaScript-csomagokból
  • Kerülje régi JavaScript megjelenítését a modern böngészőkben
  • A legnagyobb vizuális tartalomválasz képének előtöltése
  • A nagyon nagy hálózati terhelés elkerülése A teljes méret 1 118 KiB volt
  • Kerüli a túlzó DOM-méretet 445 elem
  • JavaScript végrehajtási ideje 0,3 mp
  • Minimalizálja a fő szál terhelését 1,1 mp
  • Az összes szöveg látható marad a webes betűtípusok betöltésekor
  • Minimalizálja a harmadik felektől származó kódok használatát Harmadik féltől származó kód 20 ms-ig akadályozta a fő szál végrehajtását
  • Külső források késleltetett betöltése facade-okkal
  • A legnagyobb vizuális tartalomválasz nem késleltetve lett betöltve
  • Passzív figyelőket alkalmaz a görgetés teljesítményének javításához
  • Kerüli a(z) document.write() használatát
  • A képelemekhez meghatározott width és height tartozik
  • Van width vagy initial-scale beállítással rendelkező címkéje
  • Elkerüli a(z) unload-eseményfigyelőket

Kisegítő lehetőségek:

Rendelkezik-e? Ha nem, akkor érdemes pótolni

Megjegyzés: ezek sikeresek lettek, amikor lenyílóval jelenik meg, ott van a “További információ” funkció, mely segítséget nyújt, mi a megoldás.

Példaként demo.juszkocs.hu honlap esetén).

Sikeresen teljesített ellenőrzések (20)

  • A(z) [aria-*] attribútumok megfelelnek szerepüknek
  • A(z) [aria-hidden="true"] nem található meg a dokumentum body elemében
  • A(z) [role] attribútumok minden szükséges [aria-*] attribútummal rendelkeznek
  • A(z) [role] értékek érvényesek
  • A(z) [aria-*] attribútumok érvényes értékkel rendelkeznek
  • A(z) [aria-*] attribútumok érvényesek és nincsenek elgépelve
  • A gombok rendelkeznek kisegítő névvel
  • Az ARIA-azonosítók egyediek
  • A képelemekhez tartozik [alt] attribútum
  • Nem használja a(z) [user-scalable="no"] attribútumot a(z) elemben, a(z) [maximum-scale] attribútum pedig nem kevesebb 5-nél.
  • A(z) [aria-hidden="true"] elemek nem tartalmaznak fókuszálható utódelemeket
  • Az oldal címsort, átugró linket vagy igazodásipont-régiót tartalmaz
  • Megfelelő a háttér- és előtérszínek közötti kontrasztarány
  • A dokumentum tartalmaz title elemet
  • A(z) html elemhez tartozik lang attribútum
  • A(z) html elem lang attribútumának értéke érvényes
  • A linkekhez felismerhető név tartozik
  • A listák csak li elemeket és szkripttámogató elemeket (script, template) tartalmaznak.
  • A listaelemek (li) ul vagy ol szülőelemekben vannak
  • A fejlécelemek egymást követve, csökkenő sorrendben jelennek meg

Bevált módszerek:

Rendelkezik-e? Ha nem, akkor érdemes pótolni

Megjegyzés: ezek sikeresek lettek, amikor lenyílóval jelenik meg, ott van a “További információ” funkció, mely segítséget nyújt, mi a megoldás.

Példaként demo.juszkocs.hu honlap esetén).

Sikeresen teljesített ellenőrzések (11)

  • HTTPS-t használ
  • Kerüli a földrajzi helyre vonatkozó engedély kérését oldalbetöltéskor
  • Kerüli az értesítésekre vonatkozó engedély kérését oldalbetöltéskor
  • Kerüli az ismert sebezhetőségeket tartalmazó front-end JavaScript-függvénytárakat
  • Lehetővé teszi, hogy a felhasználók beillesszenek a jelszómezőkbe
  • Az oldalon szerepel a HTML doctype
  • Megfelelően meghatározott charset
  • Kerüli az elavult API-kat
  • Nem került böngészőhiba a konzolra
  • Nem találhatók problémák a Chrome fejlesztői eszközök Issues panelén
  • Az oldal érvényes forrás-hozzárendelésekkel rendelkezik

Keresőoptimalizálás:

Rendelkezik-e? Ha nem, akkor érdemes pótolni

Megjegyzés: ezek sikeresek lettek, amikor lenyílóval jelenik meg, ott van a “További információ” funkció, mely segítséget nyújt, mi a megoldás.

Példaként demo.juszkocs.hu honlap esetén).

Sikeresen teljesített ellenőrzések (13)

  • Van width vagy initial-scale beállítással rendelkező címkéje
  • A dokumentum tartalmaz title elemet
  • A dokumentum rendelkezik metaleírással
  • Az oldal sikerességet jelző HTTP-állapotkóddal rendelkezik
  • A linkek leíró jellegű szöveggel rendelkeznek
  • A linkek feltérképezhetők
  • Az oldalnál nincs letiltva az indexelés
  • A képelemekhez tartozik [alt] attribútum
  • A dokumentum érvényes hreflang attribútumot tartalmaz
  • A dokumentum érvényes rel=canonical attribútumot tartalmaz
  • A dokumentum olvasható betűméreteket tartalmaz 99,62%-nyi olvasható szöveg
  • A dokumentum nem használ beépülő modulokat
  • A koppintási célok mérete megfelelő 100%-nyi megfelelően méretezett koppintható elem

Összefoglalás

Rövid időn belül tudtam elsajátítani ami új dolog, majd el fog jönni az idő, folytatni fogom, hogy jobban elmélyülök, főleg a Bevált módszerek (mobil és desktop egyaránt), illetve Teljesítmény (főleg mobil).

További kapcsolódó linkek:

Címkék

Megjegyzés küldése

0 Megjegyzések