Por qué la página queda en blanco un segundo

El navegador retiene la página

Un navegador no dibuja una página hasta tener las hojas de estilo nombradas en la cabecera. Si dibujara primero y aplicara estilos después, el visitante vería el texto en bruto saltar hasta su forma final, que es peor. Así que espera. Cada hoja de estilo que pide la cabecera es un archivo que el teléfono del visitante tiene que descargar antes de que aparezca nada.

Los scripts en la cabecera hacen lo mismo a menos que estén marcados como diferidos. El navegador deja de leer la página cuando llega a uno, lo descarga, lo ejecuta y solo entonces continúa. Un gestor de etiquetas, un chat o un fragmento de analítica colocado en la cabecera es una pausa antes de la primera palabra.

Las fuentes son la tercera causa, y la más sigilosa. Una página puede estar dibujada y aun así no mostrar texto, porque el texto usa una fuente web que no ha llegado, y el comportamiento por defecto de la mayoría de los navegadores es ocultar el texto hasta tres segundos en lugar de mostrarlo con una fuente sustituta.

Lo que le muestra la auditoría gratuita

La auditoría gratuita ejecuta la misma medición de navegador que usa Google. Dos cifras importan para este problema. El primer pintado con contenido es el momento en que aparece el primer texto o imagen. El pintado del contenido principal es el momento en que aparece lo más importante de la página. Si la primera supera aproximadamente 1,8 segundos, el visitante estuvo mirando una página en blanco.

Debajo de las cifras hay una lista de los archivos que el navegador esperó, con el tiempo que costó cada uno. En la mayoría de los sitios de organizaciones es una lista corta: la hoja de estilo del tema, dos o tres hojas de plugins, una fuente de un servicio de fuentes y un script que debería haber estado al final de la página.

Arreglo uno: que el texto se vea con una fuente sustituta

Un archivo de fuente puede declarar cómo debe comportarse el navegador mientras se carga. El ajuste se llama font-display, y el valor swap significa mostrar el texto ahora con una fuente de respaldo y cambiar cuando llegue la real. Los visitantes ven palabras desde el primer pintado en lugar de una columna vacía.

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4.woff2") format("woff2");
  font-display: swap;
}

Si la fuente viene de un servicio de fuentes, el mismo ajuste suele ser un parámetro en el enlace que le dio el servicio. Si viene de un tema, es una línea en la declaración de fuentes del tema. Alojar el archivo de fuente en su propio sitio elimina una conexión separada a otro servidor, que en un teléfono suele ser la parte más lenta.

Arreglo dos: scripts al final, o diferidos

Un script que no cambia el aspecto de la página va al final de la página, o en la cabecera con el atributo defer, que le dice al navegador que lo descargue en segundo plano y lo ejecute después de dibujar la página. Analítica, chat, gestores de etiquetas, incrustaciones sociales y reproductores de video entran en esa categoría. Casi nada en el sitio de una organización necesita ejecutarse antes del primer pintado.

En WordPress la mayoría de estos scripts llegan a través de plugins, y la mayoría de los plugins no ofrecen ningún ajuste sobre dónde va su script. Un plugin de caché o de rendimiento puede diferirlos en bloque. Pruebe el sitio después de activarlo, porque un script del que depende otro protestará si se ejecuta fuera de orden.

Arreglo tres: menos hojas de estilo en páginas que no las usan

Un plugin de formularios de contacto carga su hoja de estilo en todas las páginas, no solo en la de contacto. Lo mismo hace el plugin del carrusel, el calendario de eventos, la galería. Un sitio con doce plugins puede pedir doce hojas de estilo antes de dibujar una página que no usa ninguna. Cada una es pequeña. Juntas son la espera.

El arreglo limpio es cargar los recursos de cada plugin solo en las páginas que los usan. Algunos plugins tienen ese ajuste. Para el resto, un plugin de rendimiento puede hacerlo página por página, o el tema puede encolarlos condicionalmente, que son unas pocas líneas para quien mantiene el sitio. El arreglo contundente, eliminar plugins que nadie recuerda haber instalado, suele merecer hacerse primero.

Qué no hacer

No persiga la puntuación. Una página que se pinta en menos de un segundo en un teléfono está resuelta, aunque la herramienta de medición siga listando sugerencias. Y no incruste todo dentro de la página para evitar peticiones: una hoja de estilo que crece hasta decenas de kilobytes dentro de cada página se reenvía en cada visita, cuando un archivo enlazado se habría guardado en caché después de la primera. Cometimos exactamente ese error en LFW.com y lo corregimos esta semana.