Jueves, 20 Agosto 2015 05:27

Reduce CSS en WordPress y mejora la carga

Escrito por 
CMS:  WordPress |  Versión:  4.3.x |  Nivel de dificultad:  Medio |  Tiempo estimado de lectura:  5 minutos


Menos código en menús de WordPress para mejorar la carga css wordpressGoogle se pone cada vez más las pilas ¡o nos las pone a los usuarios! para que mejoremos la optimización de sitios web buscando una mayor adaptación a dispositivos móviles, mejorando los tiempos de carga de sitios WordPress y haciendo mejor SEO on-page y de contenidos ¡también de los Menús!

Que una web WordPress cargue más rápida o lenta depende de como hayamos hecho el trabajo antes, que plugins y la cantidad hayamos instalado, como de optimizado y responsivo (también) sea nuestro Tema y de cuantas hojas de estilo en cascada (CSS) intervengan y carguen en la portada, que es la página que por defecto siempre se analiza, si bien que debería ser extensivo a todas las páginas.

Eliminar CSS innecesario, duplicado o asociado a clases de menús, por ejemplo, en WordPress ayudará a arrancar unas décimas del tiempo de carga y de forma global mejorará los tiempos y en definitiva aumentará la experiencia positiva de los usuarios que visiten tu sitio web.

Pingdom es una de las muchas herramientas existentes online que pueden servirte para 'cazar' problemas de archivos de hojas de estilo en cascada CSS en tu sitio web y así poder tomar medidas correctoras al respecto.


Análisis con Pingdom css wordpress

Te propongo el uso de un plugin llamado Purify WordPress Menus para que puedas limpiar de código innecesario los menús de tu tema en WordPress y de esta forma ganar unos puntos en la carga global del sitio.

WordPress CSS

Purify WordPress Menus

Reduce el código HTML de menús en WordPress sólo a las clases CSS y atributos ID de tu tema para mejorar la velocidad de de carga de la página.

Este plugin elimina las clases CSS que no se necesitan en menús del tema. Esto se traduce en menos código HTML y en una mayor velocidad de la página.

No hay efectos visuales no deseables.

Si desactivas el plugin, la configuración permanece. Si activas el plugin de nuevo este utilizará los últimos ajustes.

Si eliminas el plugin desde el menú de plugins de WordPress, también se borrarán los ajustes.

Este plugin elimina el atributo de ID de cada elemento del menú. En la mayoría de los casos no se necesita el ID de cada elemento del menú.

Tras la activación, el plugin funciona de forma automática mediante la supresión de los atributos ID de todas las clases CSS en cada ítem de menú de tu sitio web. Excluyendo la clase CSS .current-menu-item en la navegación y .current_page_item en los menús de página.

Antes de aplicar cambios con el plugin Purify WordPress Menus:

Antes de aplicar el plugin css wordpress

Después de aplicar cambios con el plugin Purify WordPress Menus:


Después de aplicar el plugin css wordpress

Esto se consigue simplemente aplicando las configuraciones por defecto del plugin tras la instalación, pero ajustando algunos parámetros del plugin puedes conseguir mejorar más la carga deshabilitando o eliminando del código clases CSS innecesarias.


Configuraciones del plugin css wordpress

Los cambios aplicados por el plugin no deben afectar a la vista de los menús en el frontal de la web.

Te explico en este vídeo como instalarlo para que veas si con su uso reduces las llamadas a clases CSS de los menús de WordPress para mejorar la carga del sitio.



Si realizas demasiadas modificaciones en la configuración del plugin y ves que afecta a la visibilidad de ciertos menús, sobre todo si son personalizados por ti mediante código o en temas hijo (child themes) puedes deshabilitar el plugin para recuperar el estado anterior de las clases CSS de tu tema.

Si te preocupa mucho el tiempo de carga de tu web y con plugins como WP Super Caché u otros no consigues ganar segundos o décimas en la carga del sitio, quizás te resulte interesante experimentar con el plugin Purify WordPress Menus y evaluar sus posibilidades.


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+