Sobes.tech
Interjú segítség
Források
Interjú előkészítése
Források
Álláskeresés
Források
Jogi
Vissza a kérdésekhez
Middle

Milyen oldaloptimalizálási módszereket ismersz?

sobes.tech MI

Válasz az MI-től

  • Erőforrások minifikálása és tömörítése:

    • HTML, CSS, JavaScript: Felesleges szóközök, megjegyzések, sortörések eltávolítása, változónevek rövidítése.
    • Képek: Formátumok optimalizálása (WebP, AVIF), veszteség nélküli tömörítés, reszponzív képek használata.

  • CDN (Content Delivery Network) használata: A statikus erőforrások a felhasználóhoz legközelebb eső szerverekről való kiszolgálása csökkenti a késleltetést.

  • Böngésző cache-elése: Megfelelő HTTP fejléc (például Cache-Control, Expires) beállítása a statikus erőforrások cache-eléséhez az ügyfél oldalán.

  • Lusta betöltés (Lazy Loading): Képek, videók és más nehéz erőforrások késleltetett betöltése, amíg azok nem jelennek meg a felhasználó képernyőjén.

  • Aszinkron és késleltetett JavaScript és CSS betöltése: Az async és defer attribútumok használata a szkriptek nem blokkoló futtatásához, CSS betöltése a renderelés kritikus útján kívül.

  • Kritikus CSS optimalizálása: A minimális CSS beágyazása a HTML <head> részébe az első képernyő rendereléséhez, a többi CSS aszinkron módon töltődik be.

  • HTTP-kérések számának csökkentése:

    • CSS és JavaScript fájlok egyesítése.
    • Kicsi képek sprite-ok használata.

  • Betűtípusok optimalizálása:

    • WOFF2 formátum használata.
    • font-display alkalmazása.
    • Kritikus betűtípusok előzetes betöltése.

  • Szerveroldali renderelés (SSR) vagy statikus oldal generálás (SSG): Az oldal egy részének vagy egészének szerveroldali renderelése a kliens küldése előtt, javítva az első tartalom betöltési idejét és az indexelést.

  • Képek optimalizálása:

    • Megfelelő méretek különböző eszközökhöz.
    • <picture> és srcset használata.
    • Veszteség nélküli tömörítés.

  • Erőforrás hinták használata (preconnect, prefetch, preload): A böngészőnek jelezni a közeljövőben szükséges erőforrásokat.

    <!-- Kapcsolódás a domainhez az erőforrás kérés előtt -->
<link rel="preconnect" href="https://example.com">
<!-- Erőforrás előzetes betöltése -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Erőforrás előzetes kinyerése -->
<link rel="prefetch" href="/next-page.html">

  • DOM optimalizálás: A DOM fa mélységének minimalizálása, drága DOM olvasási/írási műveletek elkerülése ciklusokban.

  • Renderelés (Layout, Paint, Composite) optimalizálása: A stílusok és elrendezések kényszerített újraszámításának elkerülése, CSS tulajdonságok használata, amelyek nem okoznak újrarajzolást (például transform, opacity a top, left helyett).

  • Web Workers használata: Erőforrás-igényes számítások külön szálakra való áthelyezése az UI fő szálának blokkolásának elkerülése érdekében.

  • Progresszív betöltés: A tartalom megjelenítése a betöltés során.

KorábbiKövetkező