Kritikus CSS és adaptív képek

Kritikus CSS (Critical CSS)

A kritikus CSS technikája szerint az oldal betöltésekor csak a látható részhez (a „hajtás feletti” tartalomhoz) szükséges CSS töltődik be azonnal. A rendszer ezt a „kritikus” CSS-t közvetlenül a HTML-be írja, a többi stílust pedig az oldal kirajzolása után, aszinkron módon tölti be. A böngésző így hamarabb elkezdheti megjeleníteni az oldal látható részét.

Előnyei:

• gyorsabbnak érzett betöltés,
• kisebb kezdeti oldalméret, ezért jobb teljesítmény,
• a gyorsabb oldal a keresőoptimalizálásnak is jót tesz,
• automatikusan előállítható, bármekkora oldalon.

Kockázatai, amiket érdemes figyelembe venned bekapcsolás előtt és után:

• A módszer a látható rész pontos felismerésére épül. Ha a kritikus CSS rosszul készül el, az elrendezés szétcsúszhat, vagy a tartalom stílus nélkül jelenhet meg.
• Nem működik minden keretrendszerrel, főleg ott nem, ahol sok a dinamikus tartalom vagy a kiszolgálóoldali megjelenítés.

Kapcsold be, majd ellenőrizd az oldalakat, és figyeld a hatását.

Adaptív képek

Az adaptív képek az érkező látogató eszközéhez és böngészőjéhez igazított képváltozatot szolgálnak ki:

1. Amikor egy látogató kér egy képet, a WP Compress megvizsgálja az eszközt és a böngészőt, és az ehhez illő, optimalizált változatot adja vissza.
2. Az optimalizált kép a saját szerveredről vagy a választható CDN-ről érkezik, ami tovább gyorsítja a betöltést.
3. A WP Compress reszponzív képeket is előállít: a kép mérete a látogató képernyőjének méretéhez igazodik.

Előnyei: kisebb képméret és gyorsabb betöltés, simább böngészés, jobb keresőoptimalizálási esélyek, és a funkció a legtöbb eszközön és böngészőn működik.