Organiza y adelgaza tu CSS

adelgazar

Creo que ya hemos comentado varias veces la importancia de configurar adecuadamente WordPress para permitir una carga rápida, eliminando todo lo que sobra, optimizando todo lo que sea posible.

Uno de los aspectos que podemos organizar mejor es la hoja de estilos, fichero al que recurren todas nuestras páginas con asiduidad salvo que usemos un sistema de cache. Si queremos un CSS eficiente una de las cosas que tenemos que hacer es organizarlo correctamente y reducirlo a su mínima expresión, eliminando lo que sobra.

Pues bien, un modo sencillo de optimizar el CSS es usar la herramienta online llamada Styleneat. El proceso es muy sencillo:

  1. Copias el código de tu hoja de estilos (normalmente el archivo style.css de la plantilla activa), o localizas su ubicación
  2. Pegas ese código en la caja de texto de Styleneat, o lo cargas desde tu ordenador o incluso mediante una URL
  3. Defines las opciones del proceso (por defecto está bien configurado para la mayoría de las situaciones)
  4. Haces clic en «Organize CSS»
  5. Copias o guardas el CSS resultante

organizecss1 organizecss2

A modo de ejemplo, la hoja de estilos del theme K2, uno de los más populares, adelgazó de 1.816 líneas a 1.326, nada menos que 490 líneas sobrantes eliminadas. La reducción de tamaño del archivo es mínima, pero a pesar de eso se cargará de modo más eficiente que la versión original al reducirse las líneas entre las que WordPress deberá buscar lasa clases CSS a mostrar en cada página.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

18 comentarios en “Organiza y adelgaza tu CSS”

  1. Pingback: Bitacoras.com

  2. Pingback: Optimizar CSS - Styleneat | zxblog.laullon.com

  3. <cite>reducirse las líneas entre las que WordPress deberá buscar lasa clases CSS a mostrar en cada página</cite>

    Mande??

    WP no lee los CSS, esto son usados e interpretados por el navegador… ¿no?

  4. Increible me reducio 200 lineas,me vino al pelo.

    No entiendo lo que carajo hace aun jeje pero quedo = el css no hubo modificaciones.

    Ademas ordenado la verdad increible.

    Saludos sigo siempre el blog, aunque me olvido de comentar perdoname.

  5. A mí me subió de 15 KB a 16 KB y me añadió como 100 líneas, debe ser que tengo un desastre, jajaja, pero lo estaba probando. Mientras no arregle mi desastre de sitio, no tengo moral para opinar.

  6. a mi me ha quitado un 20% de lineas pero me ha subido ligeramente el peso en un 5%. No se si mejorará la respuesta y velocidad de carga. Saludos y gracias por el post.

  7. Uno de los puntos criticos cuando trabaje el site que tengo en proceso actualmente fue la optimizacion del CSS. Use la herramienta que recomiendas y de 363 lineas solo me bajo a 300 (asi que creo no hice mal trabajo), pero me parece interesante la forma como agrupa las clases que tienen variantes y dependen de un principal.

  8. Pingback: Emagrecer perder barriga

  9. Pingback: Sucos para emagrecer

  10. Pingback: Mejorando la velocidad de Wordpress « Blog Sad Hill

  11. Gracias a tus recomendaciones pude reducir mi CSS, con estos 5 pasos me facilitó la vida y ahora cuento con más espacio, gracias!!!

  12. Pingback: Mejorando la velocidad de Wordpress « Emilio

  13. Pingback: 10 maneras de reducir el “bounce rate” en WordPress | Ayuda WordPress

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido