4

Alguien puede ayudarme con un tema de performance, referente a la velocidad de carga de una página web, ya que ésta no es constante.

Para medirlo uso http://www.webpagetest.org/ y en algunos casos me da valores en la primera carga de 1.242 segundos y en otros sobrepasa los 4 segundos. He comprimido y modificado bajo el archivo .htaccess algunos parámetros para mejorar la carga pero aún así no es constante. Dejo el código usado en apache.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/javascript "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType application/x-javascript "access plus 1 week"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
    ExpiresByType application/font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
    ExpiresByType font/opentype "access plus 1 year"
    ExpiresByType font/ttf "access plus 1 year"
    ExpiresByType font/otf "access plus 1 year"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-otf "access plus 1 year"
</IfModule>
## EXPIRES CACHING ##

##HH: web
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE 
AddOutputFilterByType DEFLATE image/svg+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
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>
3
  • 1
    Tienes una URL pública que podamos revisar?
    – JuanK
    el 8 ene. 2016 a las 17:40
  • 2
    No se trata de SEO sino de optimización de performance el 8 ene. 2016 a las 18:47
  • 1
    de igual forma, sin URL publica para revisar que se puede optimizar es un poco difícil.
    – JuanK
    el 8 ene. 2016 a las 19:19

4 respuestas 4

3

Si usas Chrome puedes usar la extensión YSlow para hacer un análisis de las mejores practicas, pero yo te recomendaría:

  • Usar un CDN para mejorar la carga por cercanía geografica
  • Usa expires headers para que el browser pueda mantener en cache los archivos estaticos.
  • Si tienes el control del servidor, habilita la compresión para disminuir el peso de tu HTML
  • Coloca tus ligas al CSS en el HEAD
  • Coloca tu javascript al final
  • Como ya mencionaron minimifica tu CSS y JS (aun que como comentas, esto ya lo haces)

Si no puedes usar un CDN, mínimo en las librerías estándar de JS puedes sacar provecho de el CDN de google

2

Asegurate que bootstrap y demás frameworks javascript y css que tengas estén minificados para reducir de manera considerable el tráfico.

Las versiones minificadas suelen ser nombradas .min.js y .min.css.

Una vez hecho esto sería necesario mirar más puntualmente el sitio y descartar problemas de hosting lo cual puede afectar mucho.

1
  • 1
    Uso las versiones minificadas bootstrap-3.3.2/dist/js/bootstrap.min.js js/jquery/jquery-2.1.4.min.js el 8 ene. 2016 a las 17:58
1

Además de asegurarte que utilizas las versiones minificadas comprime todos tus scripts a un sólo archivo. Lo mismo para los estilos. Asegúrate que tu servidor utiliza gzip. Optimiza las imágenes para reducir su tamaño pero no calidad. Utiliza sprites. Etc, etc.

Serviría tener un link a tu sitio para saber qué se puede hacer. Tienes algún pipeline implementado para el build?

1

Además de una minificación de recursos, lo mejor que puedes hacer a nivel de servidor es configurar que se compriman las peticiones al enviarlas, por ejemplo mediante de esa manera, ahorrarás hasta un 25% del espacio que ocupan, y al parecer todos los tipos de recursos que citas son candidatos a tal mejora.

Ordena tus recursos en el head en base al tiempo que tardan en cargar para que los que tarden menos de preferencia se carguen primero y así evitar cuellos de botella innecesarios, pues la mayoría de navegadores trata de descargar por lo menos dos al mismo tiempo.

Igualmente si tienes en el body, forzará la re-renderización de todos los elementos que tenías y pondrá en espera las peticiones posteriores.

Puedes además habilitar un caché para que las imágenes de alta resolución que tengas se queden guardadas en el navegador y el rendimiento vaya mejorando conforme se vaya usando el sitio.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.