bloG

22abr2015 0

Nuevo plugin de WPO: carga aplazada de estilos con Defer CSS Addon for BWP Minify

BWP Minify es un plugin de WordPress con interesantes características para mejorar el rendimiento de sitios web. Entre otras funcionalidades incluye la capacidad de minificar y compactar varias hojas de estilo o CSS en una única petición web, actuando como si realmente existiera un solo archivo CSS.

Dada la naturaleza de WordPress, donde múltiples plugins añaden su propia hoja de estilos al front-end, esta práctica de unificar estilos puede resultar muy beneficiosa dado que se reduce drásticamente el número de peticiones externas a realizar por el navegador web para cargar todos los elementos que componen la página.

Unificar recursos extensos

Sin embargo, a veces esta unificación resultante del CSS es demasiado grande o extensa, y la carga de otros elementos puede verse interrumpida hasta que el navegador complete e interprete este elemento CSS unificado, consiguiendo por tanto el efecto contrario al deseado de mejorar la velocidad de carga de las páginas.

Por ello en Blogestudio hemos creado un addon -una extensión de otro plugin- para BWP Minify que permita ayudar al navegador a distribuir las peticiones de carga de forma que no se produzcan bloqueos al interactuar los estilos con otros elementos.

Puedes encontrar nuestro plugin en el repositorio de WordPress con el nombre Defer CSS Addon for BWP Minify junto con instrucciones precisas para su instalación.

Básicamente su cometido consiste en trasladar la declaración de los estilos desde la cabecera (donde BWP Minify los introduce) hasta el pie de página y además hacerlo mediante código javascript para conseguir la carga asíncrona de estilos y no interferir así con el resto de procesos.

Esta técnica denomidada defer loading o carga aplazada de recursos condiciona que el navegador web muestre instantáneamente la página aunque no se haya cargado la hoja de estilos asociada a la misma.

Saltos antes de cargar los estilos

No obstante, dado que la hoja de estilos se gestiona ahora de forma independiente, en ocasiones puede darse el efecto de que se carguen elementos sin estilos y produzca el efecto de saltos o pausas puntuales.

Esto ocurre porque la carga del HTML es inmediata y su visualización se produce antes de la carga de los estilos. Al estar estos gestionándose de forma asíncrona hay unos instantes en que se muestran elementos sin estilos asignados.

Por ello recomendamos usar este addon en conjunción con la técnica CSS Above the Fold, la cual introduce al principio de la cabecera de la página solo el CSS necesario para las zonas visibles sin cargar ningún archivo externo, permitiendo al navegador realizar rápidamente una primera composición de los estilos de la parte superior de la página mientras se procesan el resto de recursos.

Como habrás visto nos apasiona hablar de optimización web y puedes consultarnos cualquier duda o sugerencia en los comentarios o bien enviándonos un mensaje desde la sección de contacto.

Categoría: Plugins


Dejar un comentario

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>