Weterede! » optimización http://www.weterede.com Blog sobre programación, diseño web y tecnologías de la información Fri, 10 Jun 2011 02:40:04 +0000 en hourly 1 http://wordpress.org/?v= Mejora la velocidad de carga de tu web con mod_pagespeed para Apache http://www.weterede.com/2010/11/mejora-la-velocidad-de-carga-de-tu-web-con-mod_pagespeed-para-apache/ http://www.weterede.com/2010/11/mejora-la-velocidad-de-carga-de-tu-web-con-mod_pagespeed-para-apache/#comments Wed, 03 Nov 2010 20:04:19 +0000 Nacho Plaza http://www.weterede.com/?p=1108 Logo del servidor ApacheHace ya un tiempo comenté algunos sencillos pasos para optimizar el tiempo de carga de tu web. Son una serie de buenas prácticas a cumplir y que puedes revisar si lo haces con herramientas como Page Speed o YSlow. Pero, ¿y si pudieras ahorrarte el trabajo de aplicar tú las optimizaciones y éstas se pudieran hacer de forma automática?

Google ha presentado hoy un módulo para servidores HTTP Apache llamado mod_pagespeed. Realiza muchas optimizaciones de velocidad de forma automática, sin necesidad de que el webmaster o programador tenga que preocuparse en demasiado del rendimiento.

Las mejoras del rendimiento se centran en la optimización de almacenamiento en caché, reducción de peticiones HTTP, minimización y optimización de recursos externos como imágenes, archivos CSS y JavaScript. Según las pruebas que han realizado con mod_pagespeed, la media del tiempo de carga de las páginas se ha reducido al 50%.

Algunos de los filtros u optimizaciones que pueden configurarse en mod_pagespeed son:

  • Extend caché. Pretende mejorar el uso de la caché para los recursos externos de las páginas.
  • Outline CSS. Mueve los estilos en línea a un archivo externo.
  • Outline JavaScript. Mueve el código JavaScript en línea a un archivo externo.
  • Combine CSS. Combina distintos archivos CSS en uno sólo para reducir las peticiones HTTP.
  • Inline CSS. Inserta en el HTML fragmentos de código CSS que se encuentran en archivos externos para mejorar la velocidad de renderizado de la página.
  • Inline JavaScript. Inserta en el HTML código JavaScript que se encuentra en archivos externos.
  • Collapse Whitespace. Reduce el tamaño del archivo HTML eliminando espacios en blanco innecesarios.
  • Combine Heads. Para páginas en las que existen varias etiquetas <head>, mueve los contenidos de estas etiquetas al primer <head> de la página.
  • Elide Attributes. Reduce el tamaño del archivo HTML eliminando las etiquetas de atributos que tienen como valor asignado el valor por defecto.
  • Minify Javascript Minimiza el código JavaScript que se encuentre en etiquetas <script>, sin tocar código de archivos .js externos.
  • Optimize Images. Reescala y recomprime imágenes.
  • Remove Comments. Elimina comentarios del código HTML.
  • Remove Quotes. Elimina las comillas innecesarias del código HTML.
  • Rewrite CSS. Minimiza el código CSS de etiquetas <style> y <link>.
  • Move CSS to HEAD. Mueve las etiquetas <link> que se encuentran después de la cabecera dentro de ésta (<head></head>).
  • Add Head. Si el documento no tiene etiquetas de cabecera, las añade.
  • Add Instrumentation. Añade dos pequeños fragmentos de código JavaScript para medir el tiempo que tarda el cliente en cargar y renderizar la página, y envía esa información al servidor.

Google ya está trabajando con la empresa de hosting GoDaddy para que sus más de 8.5 millones de clientes dispongan de mod_pagespeed en sus servidores, y la empresa Cotendo está también integrándolo en su red de CDNs.

Si quieres probarlo puedes descargar el módulo mod_pagespeed de Google Code, donde está liberado el código fuente para varias distribuciones de Linux. Sigue las instrucciones de instalación y configura los filtros a aplicar a tu manera.

Sin duda, perece una buena manera de mejorar la velocidad de carga de tu web de forma automática sin tener que pelearte tú mismo con las optimizaciones. Habrá que probarlo.

Via | Google Code Blog

]]> http://www.weterede.com/2010/11/mejora-la-velocidad-de-carga-de-tu-web-con-mod_pagespeed-para-apache/feed/ 1 Optimiza el tiempo de carga de tu web http://www.weterede.com/2009/05/optimiza-el-tiempo-de-carga-de-tu-web/ http://www.weterede.com/2009/05/optimiza-el-tiempo-de-carga-de-tu-web/#comments Tue, 05 May 2009 06:50:18 +0000 Nacho Plaza http://www.weterede.com/?p=248 Tiempo de carga

Uno de los factores por los que nuestros visitantes pueden abandonar nuestra web es el tiempo de carga de las páginas. Un tiempo de carga excesivo, aparte de producir una mala experiencia de usuario, puede hacer que nuestros visitantes se aburran mientras esperan que se renderice la página mientras navegan por nuestra web. Así que os dejo una pequeña recopilación de consejos básicos para mejorar el rendimiento de nuestras páginas, muchos de ellos ayudan también a obtener un código más SEO-friendly.

Usa páginas de tamaños moderados. Si alguna página tuya ocupa mucho tamaño, tardará mucho en descargarse. A veces es mejor dividir el contenido en varias páginas, de forma que el tamaño de cada una sea menor y cargen de forma más rápida. Lo ideal es que tus páginas no lleguen a 500KB, pero como esto es a veces dificil de conseguir, mantente por debajo de 1MB por página.

Utiliza hojas de estilo CSS. En vez de incrustar los estilos dentro del código, mantén en archivos externos todo el código que definan el estilo de los elementos de tu web. Así el código de estilos no se descarga en cada visualización de página, la página pesa menos yse aprovecha la caché del navegador. Consejo SEO.

Minimiza el número de peticiones de archivos externos. Si puedes, agrupa todos los archivos .css o los archivos .js en uno sólo. Así reduces el número de peticiones HTTP y la carga de la página se realiza más rápidamente.

No uses javascript dentro del código. Agrupa y mete el código javascript en un archivo y enlázalo. Así el visitante descarga el archivo .js en la primera visualización, y para las siguientes ya tiene ese código descargado (caché).

Enlaza los archivos javascript desde el footer, no desde el header. Los archivos .js se descargan uno detrás de otro, no de forma paralela. Si los enlazamos en el header, el navegador no puede empezar a renderizar la página hasta que no ha descargado todos los archivos. Poniendo los .js en el footer, hacemos que se descarguen cuando la página ya se ha visualizado por completo. Aunque el tiempo de carga de la página es el mismo, la sensación de velocidad es distinta, ya que dejamos el trabajo pesado de descarga para el final. Esto se puede hacer siempre que no usemos funciones javascript que sean necesarias durante la carga de la página.

Tiempo descarga javascript

Descarga en serie de archivos javascript

No uses @import en los archivos CSS. Es preferible que utilices varios enlaces “link” desde el código de la página (descarga en paralelo), que importar hojas de estilo desde otras hojas de estilo (descarga en serie).

Usa el formato correcto en tus imágenes. Juega con archivos gif, png y jpg en las imágenes que subas a la web. Usa jpg para imágenes con mucha gama de colores, como fotos, y gif o png para aquellas que necesiten transparencias o tengan una gama de colores menor.

Usa image sprites. Para imágenes comunes en el diseño del sitio o que se repitan en muchas páginas, es conveniente usar image sprites. Por ejemplo, si todas tus webs hacen X peticiones de imágenes para colocar iconos decorativos, es más eficiente combinar esas imágenes en una sola y por CSS asignar al elemento de la web que queramos el fragmento de la imagen que queremos mostrar. Las imágenes se pueden descargar en paralelo, por eso sólo debemos usar esta técnica para imágenes comunes en el template del sitio.

Tiempo descarga imágenes

Descarga en paralelo de imágenes

No uses redimensionamiento de imágenes dentro del código. ¿Para qué descargar una imagen a 1024×768 si luego le vas a poner una anchura de 300px? Utiliza imágenes del tamaño real que vayan a tener a la hora de visualizarlas. Si vas a usar algún tipo de galería con thumbnails, conviene usar imágenes pequeñas en los thumbnails para que la página cargue rápidamente, y descargar las imágenes a tamaño real en background, aunque con esto implique aumentar el tamaño de la página.

Evita contenido de más dentro del código. Una cosa es tener el código bien identado, y otra es que tengamos secciones con más de 100 líneas en blanco. Si eres muy purista, puedes pasar un compactador a tus archivos .css y .js para reducir el tamaño del archivo resultante. Eso sí, mantén siempre una copia sin compactar para trabajar con ella, porque editar un archivo compactado puede ser horrible. Puedes usar aplicaciones online como CSS Compressor o CSS Formatter and Optimiser para compactar tus CSS, o Yahoo! UI Library: YUI Compressor y Online Javascript compressor para los archivos javascript.

Evita enlazar contenido de otros dominios. Incluir información que esté alojada en otro dominio implica que la carga de nuestra página dependerá del estado del servidor de destino y de su tiempo de respuesta. Por ejemplo, en mi sidebar yo cargo mis dos últimos comentarios en Twitter, y cuando su sistema está muy saturado, la carga de mi web se ralentiza. Si haces algo de este estilo, no lo pongas en el header, ponlo en el sidebar derecho o footer. Así si tarda en cargar ese contenido, el header y la parte central de la web ya estará renderizado y el “atasco” se notará menos.

Nunca uses frames. No tiene nada que ver con el rendimiento, pero conviene que no uses frames por muchos otros motivos. Los frames era como se diseñaban las webs en 1995. Consejo SEO.

Por último, asegurate de que todo lo que has hecho funcione. Haz pruebas y mide los tiempos de carga, para descubrir dónde se pueden producir cuellos de botella o ver qué partes puedes modificar para aumentar el rendimiento. Yo uso la extensión Firebug para Firefox junto con YSlow, pero existen muchas otras herremientas de medición online.

Aclaración: por si te da por revisar el código de mi blog, todavía no está optimizado. Como con WordPress se pueden utilizar muchos puglins, cada uno lleva sus propios archivos .js, .css o imágenes. Todavía estoy trabajando en su optimización, lo que requiere en muchos casos que tenga que modificar el propio código de los plugins.

]]> http://www.weterede.com/2009/05/optimiza-el-tiempo-de-carga-de-tu-web/feed/ 6 Usar link en vez de import http://www.weterede.com/2009/04/usar-link-en-vez-de-import/ http://www.weterede.com/2009/04/usar-link-en-vez-de-import/#comments Thu, 09 Apr 2009 09:20:59 +0000 Nacho Plaza http://www.weterede.com/?p=176 Os dejo un enlace a un artículo de Steve Souders en su blog High Performance Web Sites sobre la diferencia de rendimiento entre usar @import o la etiqueta link.

Don’t use @import

En resumen, desaconseja el uso de @import porque los archivos que se importan se hacen de forma secuencial, mientras que con link se hace de forma paralela.

]]> http://www.weterede.com/2009/04/usar-link-en-vez-de-import/feed/ 0