Foros del Web » Creando para Internet » Diseño web »

Reducir tiempos de carga

Estas en el tema de Reducir tiempos de carga en el foro de Diseño web en Foros del Web. Buenos días a tod@s. Os escribo porque mi jefe se ha puesto "pesado" con la necesidad de que unas páginas que ya programamos hace tiempo, ...
  #1 (permalink)  
Antiguo 23/09/2009, 02:39
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Reducir tiempos de carga

Buenos días a tod@s.

Os escribo porque mi jefe se ha puesto "pesado" con la necesidad de que unas páginas que ya programamos hace tiempo, carguen más rápido.

Los desarrollos, son desarrollos propios, los cuales, necesitan una reducción de tiempo de carga.

Los enlaces en cuestión son 5, pero todos basados en el mismo desarrollo 8es una comunidad de blogs).

Estos son:
www.tumundomoda.com
www.tumundomaquillaje.com
www.tumundobelleza.com
www.tumundobienestar.com
www.tuvideofavorito.com

Si este pos debería estar en otra zona del Foro, por favor indicármelo.

Espero vuestros comentarios para ayudarme a reducirle carga a la página (sin alterar diseño, necesidad impuesta por el boss)

Gracias de antemano!!!!

Saludos.

Javier
  #2 (permalink)  
Antiguo 23/09/2009, 03:13
 
Fecha de Ingreso: junio-2009
Mensajes: 50
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Reducir tiempos de carga

mmm no pongas tantos post por cada pagina
  #3 (permalink)  
Antiguo 23/09/2009, 03:35
Avatar de conkerick  
Fecha de Ingreso: febrero-2009
Ubicación: WWW
Mensajes: 75
Antigüedad: 15 años, 2 meses
Puntos: 2
Respuesta: Reducir tiempos de carga

Estas herramientas te ayudarán:

http://www.websiteoptimization.com/services/analyze/
http://tools.pingdom.com/

--

Creo que lo primor dial sería reducir un poco el peso del HTML, trata de eliminar esas metatags que no estás utilizando y si puedes eliminar los espacios innecesarios. Según la segunda herramienta, para poder visualizar tu página, se deben descargar casi 1MB y 700KB de ellos, son en imágenes, entonces allí debes optimizar esas imágenes para reducir su tamaño. Para las pequeñas trata de utilizar los CSS Sprites, te aseguro que te ayudaran a cargar más rápido.

Trata de reducir la cantidad de archivos que se descargan, es decir, tienes 4 hojas de estilos, si puedes mezclar en 1, así se descarga un sólo archivo (no recuerdo muy bien, pero creo que los navegadores cuando se hacen peticiones a los archivos de un mismo dominio, se van descargando uno por uno, entonces es mejor descargar uno que cuatro).

Creo que con eso podrías optimizar la carga de tus páginas.

Saludos.
  #4 (permalink)  
Antiguo 23/09/2009, 09:50
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 17 años, 11 meses
Puntos: 2135
Respuesta: Reducir tiempos de carga

Tema trasladado desde PHP
  #5 (permalink)  
Antiguo 23/09/2009, 11:29
 
Fecha de Ingreso: abril-2009
Mensajes: 371
Antigüedad: 15 años
Puntos: 22
Respuesta: Reducir tiempos de carga

en una de esas paginas tienes 11 css y 14 js. juntalos todos en un solo archivo y quitales espacios. tambien comprimelos con gzip

tienes 59 imagenes, las que pertenezcan al diseño las puedes juntar en un sprite css.

luego solo te quedara comprobar que la base de datos este bien, tiene los indices bien? cuanto tardan las consultas? estas cacheando posts?

esa pagina tendria que cargar en menos de 300ms y tarda segundos, joder, no me extraña que se quejen
  #6 (permalink)  
Antiguo 23/09/2009, 11:33
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Respuesta: Reducir tiempos de carga

Hola mpeg

Gracias por tus comentarios.

Te respondo a todo:

La diversificación en varios CSS y varios JS es para el mantenimiento (cada cosa tiene su fichero propio).

¿Es totalmente correcto meter TODO en un único fichero?

Cita:
tienes 59 imagenes, las que pertenezcan al diseño las puedes juntar en un sprite css.
No entiendo bien lo del SPRITE CSS

La base de datos está bien, y los índices son correctos.

¿Cómo cachear post? y cuales cachear? (que reglas han de seguirse para el cacheo?

Gracias por tus comentarios, me parecen muy constructivos y sobre todo si me puedes orientar en mejorar la herramienta.

Muchas gracias de nuevo.

Javier
  #7 (permalink)  
Antiguo 23/09/2009, 12:40
 
Fecha de Ingreso: abril-2009
Mensajes: 371
Antigüedad: 15 años
Puntos: 22
Respuesta: Reducir tiempos de carga

lo ideal es desarrollar con los css y js separados y luego juntarlos en un solo archivo para la web final, si usas php puedes usar por ejemplo minify (yo no lo he usado nunca, pero es el primer resultado que me ha salido en google) o sino seguir buscando en google por "css/js minifier"

basicamente lo que hace es quitarle todos los espacios y saltos de linea al css/js, juntarlos en un solo archivo y comprimirlos con gzip, en esas webs solo con eso habra una diferencia notable de rendimiento

respecto a los sprites css... echale un vistazo a spriteme que te ayuda a juntar imagenes en un solo sprite (la idea es que juntas varias imagenes en una imagen grande, como llevan haciendo los videojuegos en 2D de toda la vida pero trasladado al mundo web
y luego esas imagenes las muestras con la propiedad background-image y background-position de css

cachear posts.. pues no se, depende de si usas un CMS prefabricado o has programado el blog desde 0? en wordpress hay plugins como WP-cache que lo que hacen es basicamente guardar una version en html estatico de los posts e irla actualizando cuando cambian... asi estas sirviendo html estatico y las paginas cargan mucho mas rapido

otras formas de hacer cacheo, mas avanzadas, son usando bases de datos K/V para guardar los resultados de las queries a bases de datos relacionales lentas (como mysql). esto quiza se sale un poco del tema porque es mas complejo y probablemente no lo necesites para una web tan sencilla como un blog.

con cachear html estatico y expirarlo cuando cambia, te sobra.

como ejemplo, si el codigo php esta hecho por ti, un sistema muy basico de cacheo seria guardar la portada como html estatico y cada vez que tenga que cambiar (al añadir un post, un comentario, lo que sea...) substituir ese archivo html por la version nueva. esto se puede extender a todas las secciones de tu web que no cambien a menudo
  #8 (permalink)  
Antiguo 23/09/2009, 17:03
Avatar de conkerick  
Fecha de Ingreso: febrero-2009
Ubicación: WWW
Mensajes: 75
Antigüedad: 15 años, 2 meses
Puntos: 2
Respuesta: Reducir tiempos de carga

Creo que no leíste mi recomendación. En pocas palabras, tienes que remover el código innecesario, tienes metatags repetidas y vacías, como también espacios entre un bloque y otro, comentarios, etc.

Como te dije, al menos en el primer sitio, se deben descargar casi 1MB para poder visualizar la página web, donde al rededor de 700KB son imágenes. ¿Esto no te indica nada? Debes reducir el peso de esas imágenes y quizás también el número de imágenes.

No todos tenemos una conexión para cargar esa página en segundos, con esa cantidad de datos podrían incluso mayor a un minuto.

Por otra parte, unir todos los CSS en un sólo archivo, al igual que los JS incrementará la carga de archivos.

Para mí que esto es el problema, más obvio no puede ser.

Última edición por conkerick; 23/09/2009 a las 17:06 Razón: Faltó información
  #9 (permalink)  
Antiguo 24/09/2009, 06:56
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Respuesta: Reducir tiempos de carga

Hola conkerick.

Si que leí tus comentarios.

Lo que pasa que no solo 1 comentario es la solución a un problema.

Ahora, viendo que varios comentarios apuntan a lo mismo, pues me puedo ir orientando mejor.

Tengo dudas.

He comprimido mis JS y mis CSS, dejando SOLO 1 archivo, ¿ok?

Ahora, voy a ponerme a hacer el SPRITE css, a ver que tal se me da.

Tengo dudas respecto a cachear los CSS y los Js.

Mis CSS y mis JS no cambian (a no ser necesario por un cambio importante9 por lo que SIEMPRE serán la misma información.

Por lo que... ¿cómo se comprimen?
¿Cómo se cachean?

Como ya les digo, ahora estoy con el Sprite css y a ver si consigo hacerlo funcionar bien.

Muchas gracias de antemano.

Un saludo.

Javier
  #10 (permalink)  
Antiguo 25/09/2009, 13:38
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Respuesta: Reducir tiempos de carga

Hola a todos.

Finalmente seguí vuestros consejos, he hice algunas modificaciones.

- He combinado los JS en un solo archivo (para que SOLO haya 1 petición hacia el servidor)
- He combinado los CSS en un solo archivo-
- He comprimido (quitado espacios, separaciones, tabulaciones) de los JS y CSS (mediante aplicaciones Online posteadas por vosotros).
- He unificado imágenes en SPRITES (no he hecho 1 sola imagen, he hecho 1 por zona (cabecera, menú, contenedores, iconos...)

¿Alguna otra idea más para agilizar mi página?

Estoy usando Yslow (complemento de Firefox) para testear todo, pero siempre es bueno que hagáis comentarios para mejorar.

Ahora, voy a ejecutar un script en el servidor para reducir la calidad de las imágenes de cada post, porque están en muy alta calidad (35-45kb cada foto) y se podrían reducir sustancialmente a 15kb por cada una. (ya he modificado el CMS para que las genere con menor calidad, pero sin perder visualmente mucho).

Los cambios mencionados los he hecho en http://www.tumundobelleza.com

Espero la mayor cantidad de comentarios posible para poder mejorar el proyecto al máximo.

Un saludo y gracias a todos.

Javier
  #11 (permalink)  
Antiguo 06/10/2009, 04:09
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Respuesta: Reducir tiempos de carga

Hola a todos.

¿Alguien puede seguir ayudándome con este tema?

He seguido las pautas y pasos que me habéis ido dando, pero todo queda más o menos igual, sigue teniendo demasiado tiempo de carga, y ya no se dónde buscar para reducirlo.

La página concreta es http://www.tumundobelleza.com donde he optimizado uniendo JS, haciéndolos mini (reducciones de espacios y demás) (igual con los CSS).

También he usado Sprite de imágenes... y ya no se qué más hacer.

Espero alguna ayuda al respecto dado que esto está produciendo comentarios de mi jefe hacia mi, y quiere que se reduzca la carga de forma inminente.

Gracias de antemano a tod@s.

Un saludo.

Javier
  #12 (permalink)  
Antiguo 07/10/2009, 04:53
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 22 años, 1 mes
Puntos: 5
Respuesta: Reducir tiempos de carga

si has hecho todo lo q te han comentado los compañeros podría ser ya cosa del servidor que tarde mucho en responder la verdad....

Realmente tarda muchísimo en cargar, pero tiene pinta de eso de culpa del server y su ancho de banda, almenos eso me parece a mi.

Porque si ya lo has optimizado todo solo puede quedarte optimizar bien las imagenes para que no ocupen demasiado.

Pero tiene pinta de que el server donde este se queda corto o algún fallo en la BBDD, quizás haya que optimizarla para que vaya más rápido, pq con el tiempo las bases de datos hay que irles dando una pequeña puesta apunto ;)

Y sino es que hay algun servicio que va a buscar por ahi, que esta tardando demasiado en volver.

No creo que haya más opciones pq realmente es lo que te dicen por ahí esa página debería cargar muy rapido realmente, hay algo que está dando por saco, ya sea acceso a la bbdd que tarde demasiado, el servidor donde lo tienes alojado que sea muy lento o acceso a un servicio que no responde y el timeout es muy alto.
  #13 (permalink)  
Antiguo 08/10/2009, 03:28
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Respuesta: Reducir tiempos de carga

Hola de nuevo.

Pues a ver os cuento..

En la página que os indicaba (http://www.tumundobelleza.com) si, he optimizado tal y como me habéis indicado.

Yslow (plugin para Firefox, me da más posibilidades de optimización, pero no las entiendo muy bien algunas de ellas...

(Os pongo unas capturas del resultado de Yslow)












Por otra parte, referido al servidor:

- El servidor está en un plan de Hosting muy muy grande de EEUU (mediaTemple).
- La máquina está en un muy buen porcentaje de uso, sin subidas ni bajadas brutas (controlado desde un panel de Gestión Plesk)
- La consultas, y conexiones, aparentemente son correctas, y no dan problemas (creo) pero no se si se podrían optimizar, cachear, o de qué manera se podrían administrar.

Espero poder tener muchos comentarios y ayudas, dado que mi jefe está empezando a cansarse de mi búsqueda de soluciones y de los retrasos de carga....

Un saludo y muchas gracias.

Javier
  #14 (permalink)  
Antiguo 08/10/2009, 03:39
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Respuesta: Reducir tiempos de carga

Hola de nuevo.

Acabo de hacer la página INDEX estática, y la diferencia de carga es abrumadora (http://www.tumundobelleza.com/blog/index_javi.htm)

¿Esto entonces marca que el problema está en las consultas a la Base de Datos?
Digo yo que será así, porque si son las misma imágenes, son los mismos CSS y son los mismso JS, el resto, son llamadas a Base de Datos, ¿no?)

¿Cómo optimizar esto? ¿cómo mejorrarlo?

Por último... ¿Sigo con este tema aquí, o abro un comentario en la parte del foro de Bases de Datos?

Espero comentarios, y muchísimas gracias.

Javier
  #15 (permalink)  
Antiguo 09/10/2009, 02:53
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Respuesta: Reducir tiempos de carga

Hola a todos de nuevo.

He conseguido reducir más la carga de la página (www.tumundobelleza.com) sustancialmente.

Revisé la programación PHP, y tenía pequeño descontrol con las conexiones a la Base de Datos.

Tras esto, y aligerar una consulta de todas las que se hacen, he conseguido bajar la velocidad.

Me gustaría, porfavor, que echaseis un ojo a ver si veis más posibilidades de reducir cargas, y sobre todo, de intentar que Yslow me valide mejor las diferentes opciones que tengo (sobre todo las que os señalo en 2 comentarios más abajo).

Lo dicho, espero comentarios.

Un saludo.

Javier
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:00.