O estilo CSS afeta a velocidade de carregamento?

soniababy · 28/10/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/10/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/10/2012

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

ethernity · 29/10/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/10/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/10/2012

ethernity disse:
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.

Inserir CODE, HTML ou 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/10/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/10/2012

Gorcash disse:
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/10/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/10/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/10/2012

soniababy disse:
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/10/2012

Canopix disse:
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/10/2012

soniababy disse:
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/10/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/10/2012

Gracias.

Entonces que me recomendais a lo ultimo que os escribi?

Saludos 🙂

pedro100 · 30/10/2012

soniababy disse:
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/10/2012

pedro100 disse:
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/10/2012

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

Radick · 31/10/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/10/2012

pedro100 disse:
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í:

Inserir CODE, HTML ou 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í:

Inserir CODE, HTML ou 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í:

Inserir CODE, HTML ou PHP:

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

O estilo CSS afeta a velocidade de carregamento?

soniababy

tonyss

juan25

ethernity

Abel Chavez

pedro100

Gorcash

pedro100

ethernity

soniababy

Canopix

soniababy

Gorcash

jonay

soniababy

pedro100

Canopix

soniababy

Radick

AiShiteru

Tópicos similares