¿El estilo CSS afecta la velocidad de carga?

soniababy · 28 Oct 2012

Hola, tengo un diseño en wordpress que quiero cambiar añadiendole bordes y fondos con colores en codigo css, queria saber si añadirle mas codigo al archivo style puede perjudicar la web en el posicionamiendo.

Gracias, saludos 🙂

tonyss · 28 Oct 2012

No perjudicaría nada.. trata de encontrar el id o class de lo que quieres cambiar y añádele el código respectivo.. :encouragement:

juan25 · 29 Oct 2012

No tiene porque... perjudicaria si dentro del estillo llamas a muchas imagenes algo pesadas

ethernity · 29 Oct 2012

Si le pasas el page speed verás que sí afecta a la velocidad de la carga, si lo pones en linea el código y no hacía abajo mejoraras esto.

Esta herramienta limpia tu código css y te lo pone en linea así ahorras tiempo de trabajo y de carga de tu web -> Enlace eliminado

Saludos (Y)

Abel Chavez · 29 Oct 2012

No veo porque, mientras no cargues imagenes pesadas que afecten la velocidad de carga de tu sitio web, el CSS no tiene porque afectar tu posicionamiento.

pedro100 · 29 Oct 2012

ethernity dijo:
Si le pasas el page speed verás que sí afecta a la velocidad de la carga, si lo pones en linea el código y no hacía abajo mejoraras esto.

Esta herramienta limpia tu código css y te lo pone en linea así ahorras tiempo de trabajo y de carga de tu web -> Enlace eliminado
Saludos (Y)

Una parte de mi css lo tengo de esta manera.

Insertar CODE, HTML o PHP:

.wp-pagenavi {clear: both;}
.wp-pagenavi a, .wp-pagenavi span {text-decoration: none; border: 1px solid #BFBFBF; padding: 3px 5px; margin: 2px;}
.wp-pagenavi a:hover, .wp-pagenavi span.current {border-color: #000;}
.wp-pagenavi span.current {font-weight: bold;}

Al ponerlo en la web que has puesto me pone de esta manera.

.wp-pagenavi { clear: both }
.wp-pagenavi a,
.wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current { border-color: #000 }
.wp-pagenavi span.current { font-weight: bold }

¿Cual es mejor para tenerlo en el css?

Gorcash · 29 Oct 2012

La primera, cuantos menos espacios más optimizado.

La diferencia entre una y otra es que en una tienes salto de línea en cada propiedad y la otra va seguido, apenas se notará el rendimiento si no es algo muy grande.

pedro100 · 29 Oct 2012

Gorcash dijo:
La primera, cuantos menos espacios más optimizado.

La diferencia entre una y otra es que en una tienes salto de línea en cada propiedad y la otra va seguido, apenas se notará el rendimiento si no es algo muy grande.

Muchas gracias, no lo sabia, por lo visto todo mi css esta bien optimizado

ethernity · 29 Oct 2012

Así es [MENTION=5707]pedro100[/MENTION] como comenta [MENTION=27196]Gorcash[/MENTION] la primera es la correcta, el rendimiento apenas se nota a simple vista pero haz la prueba con page speed y si la velocidad es buena el posicionamiento mejora. Ya que el posicionamiento no es solo poner los titles y poco más, es un cúmulo de cosas que hay que hacer sin olvidarse de las "pequeñas"

soniababy · 30 Oct 2012

Gracias a todos por responder, normalmente en los diseños wordpress vienen de la segunda manera, osea hacia abajo,
¿entonces vienen mal optimizados.?

Chao gracias

Canopix · 30 Oct 2012

soniababy dijo:
Gracias a todos por responder, normalmente en los diseños wordpress vienen de la segunda manera, osea hacia abajo,
¿entonces vienen mal optimizados.?

Chao gracias

No.. NO vienen mal optimizados.. Ya que el archivo CSS de algunos themes no es tan grande.. Lo maximo que he visto con sus versiones moviles en un style.css.. Es 3000-3700 lineas.. (no es mucho a nivel procesador). Vienen de esa forma porque estan identadas para que se puedan modificar de forma mas facil..

soniababy · 30 Oct 2012

Canopix dijo:
No.. NO vienen mal optimizados.. Ya que el archivo CSS de algunos themes no es tan grande.. Lo maximo que he visto con sus versiones moviles en un style.css.. Es 3000-3700 lineas.. (no es mucho a nivel procesador). Vienen de esa forma porque estan identadas para que se puedan modificar de forma mas facil..

Hola, acabo de mirar el archivo style que quiero modificar y tiene 1149 lineas, pero veo que hay muchos huecos libres entre medio con lineas vacias de codigo, os pongo un ejemplo:

/******* ADS ********/

.ads1 {

margin:0 0 15px 0;

}

.ads2 {

margin:0 0 10px 0;

text-align:center;

}

.ads3 {

margin:0 0 10px 0;

text-align:center;

}

.ads4 {

margin:0 0 15px 0;

}

.ads5 {

margin:0 0 15px 0;

}

Y os pregunto si debo eliminar esos huecos vacios y dejarlo asi, todo junto:

/******* ADS ********/
.ads1 {
margin:0 0 15px 0;
}
.ads2 {
margin:0 0 10px 0;
text-align:center;
}
.ads3 {
margin:0 0 10px 0;
text-align:center;
}
.ads4 {
margin:0 0 15px 0;
}
.ads5 {
margin:0 0 15px 0;
}

Saludos gracias 🙂

Gorcash · 30 Oct 2012

soniababy dijo:
Gracias a todos por responder, normalmente en los diseños wordpress vienen de la segunda manera, osea hacia abajo,
¿entonces vienen mal optimizados.?

Chao gracias

Claro. Incluso los diseños profesionales pecan de eso.

No me refiero a un salto de línea, sino que siempre hay formas mejores de hacer las cosas, y encima según avanza la tecnología los diseños gratis quedan obsoletos muy rápidamente.

jonay · 30 Oct 2012

Yo siempre maqueto en línea, me es más cómodo. Además los buenos maquetadores hacen eso, maquetar en línea y no es cascada. :encouragement:

soniababy · 30 Oct 2012

Gracias.

Entonces que me recomendais a lo ultimo que os escribi?

Saludos 🙂

pedro100 · 30 Oct 2012

soniababy dijo:
Hola, acabo de mirar el archivo style que quiero modificar y tiene 1149 lineas, pero veo que hay muchos huecos libres entre medio con lineas vacias de codigo, os pongo un ejemplo:

/******* ADS ********/

.ads1 {

margin:0 0 15px 0;

}

.ads2 {

margin:0 0 10px 0;

text-align:center;

}

.ads3 {

margin:0 0 10px 0;

text-align:center;

}

.ads4 {

margin:0 0 15px 0;

}

.ads5 {

margin:0 0 15px 0;

}

Y os pregunto si debo eliminar esos huecos vacios y dejarlo asi, todo junto:

/******* ADS ********/
.ads1 {
margin:0 0 15px 0;
}
.ads2 {
margin:0 0 10px 0;
text-align:center;
}
.ads3 {
margin:0 0 10px 0;
text-align:center;
}
.ads4 {
margin:0 0 15px 0;
}
.ads5 {
margin:0 0 15px 0;
}

Saludos gracias 🙂

Por lo que he visto seria mejor de esta manera.

/******* ADS ********/
.ads1 {margin:0 0 15px 0;}
.ads2 {margin:0 0 10px 0; text-align:center;}
.ads3 {margin:0 0 10px 0; text-align:center;}
.ads4 {margin:0 0 15px 0;}
.ads5 {margin:0 0 15px 0;}

Canopix · 30 Oct 2012

pedro100 dijo:
Por lo que he visto seria mejor de esta manera.

/******* ADS ********/
.ads1 {margin:0 0 15px 0;}
.ads2 {margin:0 0 10px 0; text-align:center;}
.ads3 {margin:0 0 10px 0; text-align:center;}
.ads4 {margin:0 0 15px 0;}
.ads5 {margin:0 0 15px 0;}

Tal cual.. esta es la mejor manera! 😀

soniababy · 31 Oct 2012

Gracias así lo hare, y medira la velocidad a ver como va 🙂

Radick · 31 Oct 2012

Lo que yo he visto es que tarda en ocasiones un poco en configurarlo el explorador de internet pero al final carga más rápido que si tiene imágenes en lugar de estilos.

AiShiteru · 31 Oct 2012

pedro100 dijo:
Por lo que he visto seria mejor de esta manera.
/******* ADS ********/
.ads1 {margin:0 0 15px 0;}
.ads2 {margin:0 0 10px 0; text-align:center;}
.ads3 {margin:0 0 10px 0; text-align:center;}
.ads4 {margin:0 0 15px 0;}
.ads5 {margin:0 0 15px 0;}

A eso mismo, yo hago algunas cosas más: Quito el espacio entre la clase y la apertura del corchete, los ";" antes del cierre de corchetes, el espacio entre atributos y el salto de línea entre clases. O sea, me queda así:

Insertar CODE, HTML o PHP:

.ads1{margin:0 0 15px 0}.ads2{margin:0 0 10px 0;text-align:center}.ads3{margin:0 0 10px 0;text-align:center}.ads4{margin:0 0 15px 0}.ads5{margin:0 0 15px 0}

También trato de ser rigurosa sobre qué atributos usar. En este caso, ese mismo CSS lo pondría así:

Insertar CODE, HTML o PHP:

.ads145,ads23{margin:0}.ads145{margin-bottom:15px}.ads23{margin-bottom:10px;text-align:center}

Y si antes inicialé margin:0, quedaría solo así:

Insertar CODE, HTML o PHP:

.ads145{margin-bottom:15px}.ads23{margin-bottom:10px;text-align:center}

¿El estilo CSS afecta la velocidad de carga?

soniababy

tonyss

juan25

ethernity

Abel Chavez

pedro100

Gorcash

pedro100

ethernity

soniababy

Canopix

soniababy

Gorcash

jonay

soniababy

pedro100

Canopix

soniababy

Radick

AiShiteru

Temas similares