Tener un recurso que bloquea la renderización puede degradar el rendimiento de un sitio en muchos niveles. Utilizando la herramienta de auditoría PageSpeed Insights de Google, el desarrollador de front-end de C2 Group, Vince Bolhius, comparte tres formas sencillas de superar la tarea de Google de eliminar los activos JavaScript que bloquean la renderización para mejorar el rendimiento del sitio.

Como el mayor y más influyente motor de búsqueda, Google tiene mucho que decir sobre las expectativas de cómo se presentan las empresas en línea. Ya he hablado un poco sobre el uso de la herramienta PageSpeed Insight de Google y cómo eliminar el bloqueo de la renderización de CSS en la parte de la página visible en la pantalla . Basándome en los comentarios que recibí en mi primer blog, he pensado en compartir cómo llevar a cabo la tarea de Google de eliminar el bloqueo de recursos de renderizado para mejorar el rendimiento de la página. Recomiendo encarecidamente el uso de PageSpeed Insights para ver qué fuentes pueden estar causando problemas en el rendimiento general de su sitio.

Le mostraré cómo pasar por algunos fallos de auditoría comunes para mejorar el rendimiento del sitio.

Uso del atributo de precarga de los recursos críticos
La mayoría de los recursos definidos en JavaScript y CSS degradan el rendimiento debido al análisis superficial inicial del documento. Afortunadamente, mediante el uso de atributos de precarga en la cabecera HTML, se pueden definir los recursos críticos que deben obtenerse, incluyendo cuándo y cómo debe aplicarse cada recurso. Los atributos de precarga permiten especificar los recursos que se utilizarán poco después de cargarlos y garantizar que se ejecuten en un orden específico, lo que en última instancia mejora el rendimiento de la página.

En primer lugar, he aquí un ejemplo de una forma típica de cargar un recurso CSS en la sección de cabecera de una página:

Así es como se puede precargar esta solicitud. También he añadido una opción de retroceso noscript para los scripts que bloquean el navegador:

Especificamos un valor de precarga usando el atributo rel, cargamos el recurso en el href, usamos el atributo as para especificar el tipo de recurso que se está precargando, y luego usamos el evento onload para cargar el recurso cuando estaba listo. Una vez más, los atributos de precarga son excelentes para comenzar a descargar recursos que sabemos que el navegador necesitará pronto.

Uso de Webfontloader para cargar fuentes en JavaScript
Otro problema común de rendimiento es la forma en que el sitio carga las fuentes. Si tiene problemas para cargar fuentes externas como Typekit o Google Fonts, el uso de un webfontloader proporciona un control adicional al inyectar @font-face a través de JavaScript. Añadiendo este código fuera de la sección de cabecera, podemos aliviar el bloqueo penalizado de la representación de fuentes personalizadas. Tendrá que referirse a la biblioteca de JavaScript, y entonces podrá añadir fuentes utilizando el objeto WebFont.

Mira el siguiente ejemplo de código de webfontloader:

WebFont.load({
google: {
familias: ['Open Sans:400,400i,700′, 'Assistant:300,400′]
},
activo: function() {
sessionStorage.fonts = true;
}); WebFont.load({
typekit: {
id: "xxxxxxxx
},
activo: function() {
sessionStorage.fonts = true;
}
});

Basta con añadir fuentes Google personalizadas a la tabla de familias o especificar un ID de Typekit para cargar un paquete de fuentes externo.

NOTA : En este caso, puede ocurrir que el resto de la página se renderice antes de que se ejecute el módulo cargador de fuentes web, lo que puede dar lugar a un Flash de Texto sin Estilo (FOUT) o a un Flash de Texto Invisible (FOIT), por lo que es importante tener una reserva de fuentes en su CSS.

El Flash of Unstyled Text (FOUT) ocurrirá cuando una fuente comience a cargar e inmediatamente muestre el texto con una familia de fuentes alternativa hasta que la fuente web se cargue y la fuente alternativa sea reemplazada por la fuente por defecto llamada desde los estilos CSS.

El Flash de Texto Invisible (FOIT) ocurrirá cuando una fuente comience a descargarse y aparezca como inexistente hasta que una fuente web se cargue y reemplace este texto "invisible".

Para ello, he añadido arial y sans-serif como provisión para la fuente Google Open Sans:

font-family: 'Open Sans', arial, sans-serif;

Como ya he mencionado, es importante tener una fuente alternativa en la que se pueda confiar para los estilos CSS en el caso (y la probabilidad) de que una fuente personalizada tarde en descargarse y cargarse. El cargador de fuentes web cargará entonces la fuente real cuando se inicie el JavaScript.

Uso de los atributos Async y Defer para cargar un script
Esto es reactivamente simple. La mejor práctica es cargar todos los recursos de script por debajo y por encima de la etiqueta . Esto permitirá que la página se cargue primero y eliminará el bloqueo de la representación por parte de JavaScript. Si esto no es posible, puede utilizar atributos async o diferidos para cargar los scripts en la etiqueta . Los atributos Async y Defer pueden utilizarse para controlar cómo y cuándo se descargan y ejecutan los archivos externos.

Async permite descargar un archivo de forma asíncrona y ejecutarlo inmediatamente después de la descarga. Esto significa que la descarga del archivo comienza mientras se analiza el documento HTML, y después de la descarga se detiene el análisis para ejecutar el script y luego continúa el análisis.

El uso del atributo async para cargar un recurso podría ser más o menos así:

Defer recupera el archivo de forma asíncrona, pero sólo se ejecuta después de que el documento HTML haya terminado de ser analizado. Esto significa que el archivo comienza a descargarse mientras se analiza el documento HTML, e incluso después de que el archivo haya terminado de cargarse, espera a ser ejecutado hasta que el HTML haya sido analizado completamente. Cuando se utiliza el aplazamiento, las secuencias de comandos se ejecutan en el mismo orden en que se llaman. El aplazamiento es una gran opción cuando un script depende de otro.

A continuación se muestra un ejemplo de cómo podemos utilizar el atributo defer para cargar recursos:

Una buena regla práctica es utilizar primero async y diferir cuando sea necesario y sólo cuando el elemento