Foros del Web » Programando para Internet » PHP »

Acelerar carga de una web

Estas en el tema de Acelerar carga de una web en el foro de PHP en Foros del Web. Hola Gente esta vez me ha tocado el tema de la aceleración de la pagina web, en este caso son 2: escapateagualeguaychu.com esta tiene muchos ...
  #1 (permalink)  
Antiguo 22/09/2015, 20:24
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Acelerar carga de una web

Hola Gente
esta vez me ha tocado el tema de la aceleración de la pagina web, en este caso son 2:

escapateagualeguaychu.com
esta tiene muchos banners de adsense, plugin de google y varios tipos de javascript

y el segundo es heka.com.ar
no tiene banners pero usa muchas imagenes

ambos usan templates modernos y cargan una variedad de css y js
ambos tienen imagenes con un resize+cache para reducir un poco el tiempo de carga

bueno espero todo tipo de comentarios y de paso hacer este un tutorial de optimizacion de carga de una web

nota: vi algunos blogs de de optimizacion pero mucho no me convencieron, el unico que rescato es este: http://web.ontuts.com/tutoriales/ace...cript-con-php/
que habla de comprimir en un solo archivo los js y css

bueno espero sus comentarios,
el post esta en php por que los sitios son en php :)
  #2 (permalink)  
Antiguo 22/09/2015, 20:29
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 16 años
Puntos: 2534
Respuesta: Acelerar carga de una web

Bueno, primero una cosa:
Cita:
el post esta en php por que los sitios son en php
¿Cuanto tarda en contestarte el servido web + php?

¿A partir de ese punto cuanto carga la página para sentirse 100% cargada?

Son cosas diferentes, que la página esté programada en php no implica que la velocidad tenga que ver con ello así que tu tema está fuera de contexto.

¿Conoces NewRelic?

Te sugiero instalarlo en tus servidores para que observes adecuadamente dónde está el cuello de botella, si todo es rápido del lado del backend: ¿para qué echarle la culpa a php?
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #3 (permalink)  
Antiguo 22/09/2015, 21:02
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: Acelerar carga de una web

Hola, me referia a php por que es el lenguaje en que esta hecho, de hecho hice algunas menciones sobre la cantidad de css y js que se cargan ademas los adsenses

parece interesante este NewRelic
ahora estoy evaluando, no me voy a poner a hacerlo sin que me apruben un presupuesto
te pregunto:
-se instala como una aplicacion mas en una carpeta por ejemplo? public_html/NewRelic/ configurandolo obviamente
-es gratis?
  #4 (permalink)  
Antiguo 22/09/2015, 21:04
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: Acelerar carga de una web

tambien encontré discusiones sobre APC Y Memcache
pero es este post habla de combinarlas http://reposimieles.blogspot.com.ar/...con-apc-y.html
supongo por que son para diferentes fines?
  #5 (permalink)  
Antiguo 22/09/2015, 21:05
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 16 años
Puntos: 2534
Respuesta: Acelerar carga de una web

Cita:
-se instala como una aplicacion mas en una carpeta por ejemplo? public_html/NewRelic/ configurandolo obviamente
-es gratis?
Google: new relic

Cita:
tambien encontré discusiones sobre APC Y Memcache
Eso no sirve, eso no acelerará la carga de la página, sólo facilitará la velocidad de respuesta del servidor pero eso es cosa aparte.
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #6 (permalink)  
Antiguo 22/09/2015, 21:46
Avatar de NSD
NSD
Colaborador
 
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 11 años, 11 meses
Puntos: 320
Respuesta: Acelerar carga de una web

El problema dudo que sea el backend a menos que tengas de servidor un 486, el problema con esos templates modernos tan bonitos que te descargas es que no fueron hechos por programadores, los hicieron diseñadores y maquetadores que poco les interesa la performance, solo les iterese que sea lo mas atractivo posible y como (mitad ignorancia, mitad falta de interes) no se preocupan por hacer optimizaciones solo buscan lograr la maxima compatibilidad en el menor tiempo con la mejor visual, agregan y agregan y agregan plugins de jquery, agregan otros fw, agregan fw css, agregan fuentes, etc de las que solo utilizan menos del 5%, por lo que al cargar la pagina estas cargando 19 veces mas datos de los realmente necesitas.

Por ejemplo, en hexa, en la home hay 2140 reglas css definidas que no se estan usando, estas (hablo directamente porque asumo que son tuyas las webs) cargando 13 plugins js, entre ellos un resaltador de sintaxis de codigo, ¿Para que diablos quiere una pagina que se de dedica a "invitarte a conocer lugares curiosos, productos nuevos y servicios que mejoran la calidad de vida" un resaltador de sintaxis de codigo fuente? inentendible, posiblemente el template original los usuara para algo, pero dentro del contexto que lo estas usando nada tiene que hacer ahi ese plugin que esta cargando 3 archivos javascript + 1 css.

Optimizar los template esos suele ser a veces tan dificil que es mejor empezarlos a mequetar desde 0 sin copiar codigo solo mirando el diseño, lleva mas tiempo es verdad, pero en mi experiencia personal ningun template me ha llevado mas de 1 dia de trabajo y el resultado (hablando en kb) suele ser de 10 a 30 veces menor y por supuesto que eso se ve reflejado en la performance.

NOTA: Yo soy partidario de ignorar a IE completamente y de no usar jquery ni sus plugins, solo dar soporte a firefox y chrome, supongo que agregar soporte a ie incrementa el tamaño de la web y ni hablar cargar jquery y sus plugins pero bueno, no es mi mambo.
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios
  #7 (permalink)  
Antiguo 23/09/2015, 11:01
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: Acelerar carga de una web

Hola NSD
gracias por tus comentarios, no me di cuenta de los resaltador de sintaxis jajaja esa es muy buena
la verdad es que usar estos templates son buenos en cuanto te ahorras el sueldo de un maquetador
luego yo lo adapto a mis necesidades

me recomiendas alguna otra cosa ademas de revisar la carga innecesaria de js's?

atte
  #8 (permalink)  
Antiguo 23/09/2015, 12:49
Avatar de TIExpert  
Fecha de Ingreso: mayo-2015
Ubicación: Venezuela
Mensajes: 167
Antigüedad: 8 años, 11 meses
Puntos: 17
Respuesta: Acelerar carga de una web

Hola.

Utiliza las herramientas de rendimiento de google:

https://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/speed/pagespeed/

Son bastante útiles y te indican varias cosas a corregir para que la experiencia de usuario sea más satisfactoria.

Espero haberte ayudado.

Saludos cordiales.
__________________
Mas de 20 años de experiencia en soporte de plataforma TI para empresas.
  #9 (permalink)  
Antiguo 23/09/2015, 13:17
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: Acelerar carga de una web

Gracias TIexpert lo voy a probar

acabo de agregar esto en mi apache y se mejoró bastante la cosa en heka.com.ar, ademas de quitar archivos innecesarios del template (gracias NSD por la observacion)

SetOutputFilter DEFLATE
<Module mod_deflate.c>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# LE INDICAMOS PARA QUE NAVEGADORES NO DEBE COMPRIMIR YA QUE PRESENTAN BUGS

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

</IfModule>

aunque veo que no comprendo del todo, aunque noto que hubo una mejoria.
  #10 (permalink)  
Antiguo 24/09/2015, 00:14
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Acelerar carga de una web

Buenas,

Este post puede darte algunas ideas más.
http://www.forosdelweb.com/f91/aumen...3/#post4716767

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #11 (permalink)  
Antiguo 25/09/2015, 16:04
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: Acelerar carga de una web

buen aporte,
tienes alguna referencia aprobada para estos items?
ya sabes que hay mucho copy/paste en la web y sin verificar

- El html de salida minimificado.
- Todos los css unificados y minimificados.
- Todos los js minimificados.
- Todas las imágenes reducidas (a pesar de perder cierta calidad).
- Cacheado en el servidor.
- Habilitada la compresión desde el servidor.
- Los archivos estáticos distribuidos en subdominios para aumentar las peticiones simultáneas.
- También tiene la caché del navegador, pero no influye en la 1ª descarga lógicamente.
  #12 (permalink)  
Antiguo 25/09/2015, 21:00
Avatar de NSD
NSD
Colaborador
 
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 11 años, 11 meses
Puntos: 320
Respuesta: Acelerar carga de una web

Con respecto a aumentar el numero de descargas simultaneas cabe hacer una observación: Solo es realmente bueno cuando los archivos a descargar en simultaneo son de tamaño pequeño < 140kb, caso contrario puede ser contraproducente si el servidor no esta correctamente configurado para esta tarea.

Por ejemplo, por defecto apache prioriza el trafico de descargas nuevas sobre las existentes, por lo que si hay una descarga grande en curso y llega una serie de nuevas peticiones, apache reducira la tasa de tranferencia de la existente para priorizar las nuevas descargas, si la descarga existente es grande, digamos una imagen de 2mb, y ocurren muchas visitas en simultaneo, el resultado es que todos los visitantes demoraran mucho en descargar la imagen, sobre todo el que entro por primera vez y que es quien mas tiempo lleva a la espera, se producira un efecto curioso donde posiblemente el que entro ultimo disponga del recurso antes del que entro primero.

En cambio se hubiera hecho una carga secuencial del recurso, todos habrian cargado los recursos en un tiempo medio sensiblemente menor.

Ojo con las tecnicas que se encuentran por internet, no son recetas magicas que se aplican bien a todos los casos.
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios

Última edición por NSD; 26/09/2015 a las 15:36
  #13 (permalink)  
Antiguo 26/09/2015, 01:14
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 12 años, 11 meses
Puntos: 261
Respuesta: Acelerar carga de una web

Buenas,
Cita:
Iniciado por Patriarka Ver Mensaje
tienes alguna referencia aprobada para estos items?
ya sabes que hay mucho copy/paste en la web y sin verificar
Podrás encontrar bastantes referencias en internet. Trabajando todas juntas, la única es la que tengo yo, con mi caso en particular y para una web específica que requería de una serie de características para acelerar la descarga completa de la web en un tiempo bastante reducido.

Cita:
Iniciado por NSD
Ojo con las tecnicas que se encuentran por internet, no son recetas magicas que se aplican bien a todos los casos.
Por supuesto!!

Recopilé las técnicas mas utilizadas, algunas me funcionaban y se notaban los resultados y otras no. Así que te quedas con las que te dan el resultado que esperas.

No es una web que tiene mucho tráfico simultáneo, ya que es para una web corporativa.

Y en mi caso, además de haber añadido algunas cosas más, fue dando los resultados deseados. Nginx para los archivos estáticos, Varnish Cache (impresionante!) y mejoras en la performance de la app incrementaron de forma bastante visible el rendimiento.

Casi todas las opciones las probé en su momento con Apache Bench y Siege para comprobar que en el caso de un aumento drástico de usuarios simultáneos se comportara de forma decente. Para el tráfico esperado, es una paseo para el backend

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #14 (permalink)  
Antiguo 26/09/2015, 03:31
Avatar de Djoaq  
Fecha de Ingreso: septiembre-2012
Ubicación: Barcelona
Mensajes: 271
Antigüedad: 11 años, 6 meses
Puntos: 38
Respuesta: Acelerar carga de una web

Tal como te han dicho , varnish es increíblemente eficaz, cachea la respuesta del servidor y el cliente accede a la copia cacheada , otra muy buena opcion es cloudflare es mas sencilla y gratuita , lo que hace básicamente es cachear copias a lo largo de una red de servidores distribuidos por todo el mundo ,al vistitar la web respondera el mas cercano.

Luego mover todos los javascripts fuera del head de la página para que no bloquee la carga de esta.

Yo minificaria todo el js y el css y los empaquetaria en un solo archivo. Es decir un 1 js min y un css min..

Última edición por Djoaq; 26/09/2015 a las 03:43
  #15 (permalink)  
Antiguo 26/09/2015, 15:29
Avatar de NSD
NSD
Colaborador
 
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 11 años, 11 meses
Puntos: 320
Respuesta: Acelerar carga de una web

Otra regla que puede ser de utilidad es que todo archivo cuyo tamaño sea menor a 1.4kb debe ser fusionado con otro de mayor tamaño, de lo contrario el overhead de transferencia se vuelve muy grande en relación al contenido.
Aun así, preferiblemente, ningún archivo debiera superar los 140kb (payload de 10 tramas ethernet).
Dos archivos de 140kb paralelizables se descargan aproximadamente en la mitad del tiempo que uno solo de 280kb y escala mucho mejor en la concurrencia.

Otra tecnica que disminuye mucho los costos de tranferencia, la carga del servidor y acelera la velocidad es el uso de multicast IPV6, pero esto solo es posible cuando se cuenta con IPV6 en el servidor y el visitante también esta utilizando dicho protocolo, lo que permite es que si 10 visitantes están pidiendo "style.css" el servidor responda una única vez con un multicast enviando el archivo a los 10 lugares en una única tranferencia simultanea, es decir, al servidor le entran 10 peticiones pero hace una unica respuesta para todos, con ipv4 se establecen 10 conexiones y se transfiere 10 veces el mismo archivo ya que el servidor debe responder a lo cada uno individualmente en vez de responder a todos, ademas, esto permite en ciertos casos respuestas "anticipadas" del servidor, si un cliente de argentina se une a un multicast de un archivo que viene de china y lo pide, la respuesta sale de china y va viajando hacia argentina, si mientras ocurre eso un visitante de uruguay se une al multicast del mismo archivo, el uruguayo recibira antes que el argentino el archivo (suponiendo que la ruta elegida para la tranferencia pase primero por uruguay y de ahi valla a argentina, es solo una suposición ilustrativa eh) con lo cual, recudiste dramáticamente la velocidad de carga cuando el numero de visitas simultaneas aumenta.

Otra forma de aumentar la velocidad es configurar y utilizar el protocolo http2, que entre otras cosas, permite al servidor responder con varios archivos en simultaneo a una misma petición ¡incluso con archivos que no se solicitaron todavía! por ejemplo, supongamos que un cliente pide el archivo "header.css", tu sabes que la pagina tiene un footer y que el css esta en "footer.css", si te pide el header es muy problable que pronto pida el "footer.css", asi que te anticipas a la petición y envías multiplexados ambos archivos, el resultado es que el navegador tendrá la respuesta a "footer.css" antes incluso de hacer la petición.
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios

Última edición por NSD; 26/09/2015 a las 15:37
  #16 (permalink)  
Antiguo 26/09/2015, 19:13
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: Acelerar carga de una web

Hola Muchachos, excelentes respuestas para este tema
pero hay un detalle , al menos para mi esto lo resuelve mas un administrador de sistemas que un programador.
como programador en general busco la solcuion desde la programacion misma, posiblemente alguna configuración en el hosting. pero no de esta manera.

voy a tener en cuenta esto de la minificacion de css y js.

PREGUNTAS:
1) "Otra regla que puede ser de utilidad es que todo archivo cuyo tamaño sea menor a 1.4kb debe ser fusionado con otro de mayor tamaño"
quiere decir que es mejor tener varios archvos de 1.4kb que uno solo de 2.8kb?

2) varnish . lei esta referencia en español, que para ser basica es muy completa y larga
y no creo que un programador lo haga facilmente, mas bien lo deberia hacer un administrador de sistemas?

3) me han recomendado estas tecnicas que sirvieron para cachear portales de diarios de Argentina:
http://www.catswhocode.com/blog/how-...ient-php-cache
http://www.phpfastcache.com/

Qué les parece?

4) APC Y Memcache
de qué me serviria?

entre estas opciones tal vez no todas se combinen, quiero armar un plan de ejecucion de estas tecnicas para aplicar en proyectos
  #17 (permalink)  
Antiguo 26/09/2015, 23:42
Avatar de NSD
NSD
Colaborador
 
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 11 años, 11 meses
Puntos: 320
Respuesta: Acelerar carga de una web

Cita:
1) "Otra regla que puede ser de utilidad es que todo archivo cuyo tamaño sea menor a 1.4kb debe ser fusionado con otro de mayor tamaño"
quiere decir que es mejor tener varios archvos de 1.4kb que uno solo de 2.8kb?
No, al revez, no tenes que tener archivos menores a 1.4kb, si por ejemplo tenes muchas imagenes de iconos muy pequeñas es mejor ponerlas todas juntas en un solo sprite que pese mas de 1.4kb
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios
  #18 (permalink)  
Antiguo 27/09/2015, 09:23
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: Acelerar carga de una web

ha ok, perfecto!
  #19 (permalink)  
Antiguo 27/09/2015, 11:31
Avatar de TIExpert  
Fecha de Ingreso: mayo-2015
Ubicación: Venezuela
Mensajes: 167
Antigüedad: 8 años, 11 meses
Puntos: 17
Respuesta: Acelerar carga de una web

Hola.

Hay cosas que un administrador de sistemas no podrá resolver al menos que se meta con tu código.

Para acelerar la carga de una web hay muchas cosas que debes tu hacer desde tu proyecto (código+estructura de archivos), por ejemplo unificar archivos menores a 1,4Kb.

Luego que tu código este optimizado, entonces el administrador del servidor puede ayudarte un poco más haciendo algunas configuraciones en el servidor y manejando tu ancho de banda.

Espero haberte ayudado.

Saludos cordiales.
__________________
Mas de 20 años de experiencia en soporte de plataforma TI para empresas.
  #20 (permalink)  
Antiguo 27/09/2015, 13:19
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: Acelerar carga de una web

ok, gracias. entonces primero me ocupo de optizar lo mas que pueda y si sigue mal la cosa recurrimos al administrador

Etiquetas: acelerar
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:01.