3

Estoy mejorando la velocidad de mi blog en Wordpress con https://developers.google.com/speed/pagespeed/

No logro conseguir este punto:

2 Asegúrate de que el texto permanece visible mientras se carga la fuente web. Utiliza la función de CSS font-display para que los usuarios vean el texto mientras se carga la fuente web.

…fonts/fontawesome-webfont.woff?v=4.0.3
480 ms
…fonts/flexslider-icon.woff
120 ms

Intento agregar en mi css lo siguiente:

@font-face {
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

¿Alguien sabe como conseguir pasar este punto?

1

1 respuesta 1

10

Aquí está tu problema

@font-face {
  ...
  font-display: auto;
  ...
}

Le estás diciendo al navegador que decida él como quiere renderizar tu font. Yo en tu lugar usaría swap o fallback y aquí el porque:

Para saber que configuración necesitas debes entender lo siguiente primero

Tiempo de bloqueo de fuente: Si la fuente no está cargada, cualquier elemento que intente utilizarla debe mostrar una fuente alternativa invisible. Si la fuente se carga correctamente durante este período, se utiliza normalmente.

Tiempo de intercambio de fuente: Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente

Luego mira lo que significan los distintos valores aquí. Yo voy solamente a incluir los dos que me parecen los mejores candidatos para solucionar tu problema.

  • swap: No establece tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.
  • fallback: Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto.

Tomando en cuenta lo anterior entonces si necesitas que tu fuente siempre se vea debes usar swap para que nunca esté invisible. Los valores fallback o optional te darán tiempos de bloqueo muy cortos o sea que el texto no se verá en un intervalo muy pequeño de tiempo. Un tiempo de bloqueo grande usando auto o block te dará como resultado un FOUT (Flash de Texto sin Estilo o Flash of Unstyled Text) o un FOIT (Flash de Texto Invisible) dependiendo de la version de tu navegador.

@font-face {
  font-family: 'Arvo';
  font-display: block;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

.styled-text {
  font-family: 'Arvo', sans-serif;
}
<h1 class="styled-text">Texto de prueba</h1>

Si usas swap el navegador esperará todo el tiempo que sea necesario para que cargue tu fuente y te mostrará la fuente alternativa desde el principio ya que no tiene tiempo de bloqueo.

@font-face {
  font-family: 'Arvo';
  font-display: swap;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

.styled-text {
  font-family: 'Arvo', sans-serif;
}
<h1 class="styled-text">Texto de prueba</h1>

Usar fallback si te vuelve el texto invisible en un período corto de tiempo y luego muestra la fuente alternativa dando otro tiempo de espera antes de desistir de aplicar tu fuente.

Usar optional te sirve cuando da igual si la fuente se encuentra o no pues el navegador no intentará actualizarla si esta no se carga durante el período de bloqueo que es muy pequeño.

Probar esto te resultará un poco difícil ya que el navegador guarda las fuentes en caché cuando las carga por primera vez. Deberías intentar limitar la velocidad de conexión en la pestaña Red de tu navegador a 2G y usar un sitio con gran cantidad de contenido para observar mejor los resultados.

8
  • Genial explicación!! haciendo pruebas veo que la fuente se usa en mi site para generar iconos (>, +, flechas, icono de calendario, guardar…) y después de añadir el @font-face con swap en mi hoja de estilos en PageSpeed Insights sigue apareciendo lo mismo. Asegúrate de que el texto permanece visible mientras se carga la fuente web Utiliza la función de CSS font-display para que los usuarios vean el texto mientras se carga la fuente web. https://www.miweb.com/blog/wp-content/themes/solon/fonts/fontawesome-webfont.woff?v=4.0.3 Sigo atascado en ese punto :(
    – ruben
    Commented el 23 nov. 2018 a las 21:36
  • @ruben Donde cargas la fuente en el header o al final del body?
    – devconcept
    Commented el 23 nov. 2018 a las 23:11
  • en functions.php? en header no veo ninguna llamada...
    – ruben
    Commented el 23 nov. 2018 a las 23:48
  • @ruben Ya pero cuando worpress genera el sitio lo localiza en algún lugar, en el header del html o en el body. Eso es lo que está mirando Google y sin tener esa información me es imposible saber lo que está pasando.
    – devconcept
    Commented el 26 nov. 2018 a las 13:59
  • opss en <head> <link rel='dns-prefetch' href='//fonts.googleapis.com' /> <link rel='stylesheet' id='solon-headings-fonts-css' href='//fonts.googleapis.com/css?family=PT+Sans%3A400%2C700%2C400italic%2C700italic&#038;ver=50e0563d22e5ce22dfbe5030f9993186' type='text/css' media='all' /> <link rel='stylesheet' id='solon-body-fonts-css' href='//fonts.googleapis.com/css?family=Bitter%3A400%2C700%2C400italic&#038;ver=50e0563d22e5ce22dfbe5030f9993186' type='text/css' media='all' />
    – ruben
    Commented el 26 nov. 2018 a las 20:52

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.