bloG

16abr2015 1

Nuevo plugin de WPO: optimización de la velocidad de carga con CSS Above The Fold

Uno de los aspectos más importantes en optimización y rendimiento web (WPO) que influyen de forma crítica en la velocidad de carga es la rápida visualización de la primera sección visible o parte superior de la página.

Priorizar el contenido visible

Abrir una página web y que al instante aparezcan todos los elementos maquetados, sin apenas saltos ni esperas, es uno de los factores cruciales que mejoran la experiencia de usuario y es muy tenido en cuenta por Google a la hora de sobresalir en los resultados de búsqueda.

De hecho, priorizar el contenido visible es uno de los 10 primeros requisitos obligatorios en los tests de Google Page Speed Insights para conseguir una óptima puntuación en velocidad, afectando al modo en que Google considera la importancia de tu página. Para conseguir esto es necesario una adecuada disposición de los estilos utilizados para maquetar y dar estructura y formato a las primeras secciones visibles.

Estilos para la zona superior

La técnica CSS Above The Fold (arriba del pliegue, en la parte superior) consiste en insertar solo los estilos necesarios directamente en el código de cabecera de la página para que puedan visualizarse correctamente estas primeras secciones sin esperar a que se cargue la hoja de estilos principal.

Definir los estilos que deben cargarse en este fragmento puede ser algo relativo ya que depende de la organización de cada sitio, el diseño implementado y la habilidad del desarrollador web para definir los fragmentos críticos.

Como no es algo sencillo, para ayudar en esta tarea en Blogestudio hemos desarrollado un plugin de WordPress orientado a desarrolladores que permite reutilizar fragmentos de la hoja de estilos del tema utilizando un marcado especial.

Puedes descargarlo desde la página de WordPress del plugin CSS Above The Fold, donde podrás encontrar toda la documentación necesaria para ponerlo a funcionar.

Reutilizar la hoja de estilos

Este plugin trabaja sobre la hoja de estilos del tema y habilita un marcado especial con el tag [css-above-the-fold] para definir tantos fragmentos como sea necesario incluir en la cabecera de la página.

A diferencia de otras soluciones existentes, al trabajar sobre el propio tema no es necesario utilizar otros estilos de forma separada, sino que reutilizamos aquellos de la hoja de estilos del tema sin mantener orígenes o recursos externos, como formularios de introducción de estilos en el área de administración.

Código CSS onpage optimizado

Todos los fragmentos extraídos de la hoja de estilos se compactan en un proceso conocido como minificación, consistente en quitar espacios, saltos de línea, o cualquier carácter o elemento innecesario.

De este modo, al insertar este código CSS compactado en el HTML de la cabecera se optimiza la composición de la página por parte del navegador y produce el efecto de carga inmediata.

Junto a otras prácticas, estamos implementando la técnica del CSS Above The Fold en esta misma web consiguiendo puntuaciones de 100/100 de Google Page Speed Insights en áreas concretas, como la página inicial (aquí lo puedes observar).

Nos encanta hablar de optimización 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

Comentarios

  • Miguel 8 de marzo de 2016

    Muy buen contenido, voy aprobar el plugin a ver si me ayuda con la mejora de la carga de mi sitio web, saludos

    responder

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>