Webes betűk betöltése

Szeretem a különböző SEO ellenőrző eszközök által adott értékelések minél magasabbra tornászását. Az apró kis csiszolgatásokat! :)

Minap szembejött velem a PageSpeed Insights egyik hibaüzenete: "Biztosítsa, hogy a szöveg látható marad a webes betűtípusok betöltése során"
Ugyanez angolul így hangzik: "Ensure text remains visible during webfont load"
A megadott instrukció: "Használja a CSS font-display leíróját, hogy a szövegek a webes betűtípusok betöltése közben is biztosan láthatók legyenek a felhasználók számára."

Bevallom töredelmesen, engem a szóban forgó hibajelenség egyáltalán nem zavart, illetve javítás után sem vagyok meggyőződve, hogy ez nekem hiányzott... sokkal inkább az motivált, hogy néhány százalékkal több pontot kaphatok a PageSpeed-nél. :) Oké, érzem én is, hogy keveredik a cél meg az eszköz...

Jellemzően Google fontokat használok. Ahhoz, hogy keresőoptimalizálás szempontjából túloptimalizáljuk, két apróságra lesz szükségünk:

A head tag-hez adjuk meg, hogy mihamarabb olvashassa majd be a böngésző a szükséges fájlokat:

<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">

Illetve a @font-face CSS szabályokhoz meg kell adni a font-display: swap; paramétert.
Amit a Google fontok betöltésénél a &display=swap url paraméter megadásával lehet elérni.

@import "//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap&subset=latin-ext";

És... igazából ennyi is az egész. Meglehetősen jó a támogatottsága ennek a ficsörnek, a hasznosságát meg mindenki maga döntse el!