Lo que le muestra la auditoría gratuita
La auditoría gratuita ejecuta la misma medición de navegador que usa Google. Aquí importan dos cifras. 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 cifra 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
Una fuente web puede decirle al navegador qué hacer mientras se carga. El ajuste se llama font-display. El valor swap significa: mostrar el texto de inmediato con una fuente de respaldo y cambiar cuando llegue la fuente real. Los visitantes ven palabras desde el primer pintado en lugar de una columna vacía.
Ver el código Ocultar el código CSS, 5 líneas
@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 su tema, es una línea en la declaración de fuentes del tema. Alojar el archivo de fuente en su propio sitio le ahorra además al teléfono una conexión aparte con otro servidor, que 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. Defer le indica al navegador que descargue el script 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 vienen de plugins, y la mayoría de los plugins no le dan ningún ajuste sobre dónde va su script. Un plugin de caché o de rendimiento puede diferirlos todos a la vez. Pruebe el sitio después de activarlo, porque un script del que depende otro puede dar errores 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. Los plugins de carrusel, de calendario de eventos y de galería hacen lo mismo. Un sitio con doce plugins puede pedir doce hojas de estilo antes de dibujar una página que no usa ninguna. Cada archivo es pequeño, pero juntos suman la espera.
El arreglo limpio es cargar los archivos 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 cargarlos solo donde hacen falta, que son unas pocas líneas de código para quien mantiene el sitio. Antes de todo eso, suele merecer la pena eliminar los plugins que nadie recuerda haber instalado.
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 meta todos los estilos dentro de la propia página para ahorrar peticiones. Una hoja de estilo incrustada en cada página puede crecer hasta decenas de kilobytes y se envía de nuevo en cada visita, mientras que un archivo enlazado queda en caché después de la primera. Cometimos exactamente ese error en LFW.com y lo corregimos esta semana.
Leland Fiegel