Como hacer que tu página cargué más rápido

28 consejos. (Esta entrada la considero obsoleta)

El tiempo de carga de la página en el navegador es también un factor SEO reconocido por Google en buena parte de su documentación. Google prefiere webs rápidas por tanto el tiempo de carga de la página es un factor SEO más a atender. Básicamente se trata de reducir el número y la duración de las peticiones al servidor durante la carga de la página. Pero veremos esto con más detalle en los puntos siguientes, pero antes, …
¿Necesitas estudiar como carga tu página? Pues para ello puedes usar dos excelentes herramientas recomendadas por Google (Yslow de Yahoo y Page Speed de Google). Si pasas Page Speed al búscador de Google te saldrá una nota de 92/100. Parece algo complicado sacar un 100/100!
A continuación vamos a ver una serie de consejos para optimizar tu página, en principio sólo voy a nombrar aquellos que funcionan en la mayoría de los navegadores. Se trata de uno de los artículos más largos que he redactado nunca, te animo a leerlo entero, estoy seguro de que vas a encontrar detalles que habías pasado por alto.
como hacer que tu página cargue más rápido
He he tratado de prestar atención a todas las posibilidades, pero estoy seguro de que pese a los númerosos puntos que enumero seguro que hay algo que se ha dejado en el tintero, en este caso te animo a compartir. Al final de este artículo como siempre, cito las fuentes que me han permitido redactarlo, algunas de ellas están en Inglés, pero siempre es buena cosa acudir a la fuente original.
  1. Minimizar peticiones HTTP: Durante la carga de la página se realizan peticiones al servidor en demanda de elementos como: imágenes, scripts de Javascript, Flash, etc. Para reducir el número de peticiones una de las cosas que puedes hacer es combinar todas las imágenes de fondo de tu página en una sola. Se trata de utilizar lo que se conoce como «CSS Sprites». Para selecccionar la imágen que necesitas basta con utilizar adecuadamente la propiedad «background-position».
  2. Optimizar los CSS sprites:Ya conoces este elemento si has leído el punto anterior. Puedes organizar las imágenes en el sprite en horizontal en lugar de verticalmente, por lo general resulta en un tamaño de archivo más pequeño. La combinación de colores similares en el sprite ayuda a no tener un grán número de color, el formato de 256 colores puede utilizarse para generar un PNG8. Además no dejes espacios grandes entre las imágenes de un sprite. Se trata de reducir todo espacio innecesario,. En este sentido piensas que hay imágenes que pueden generarse a partir de la repetición de algún elemento, por ejemplo puedes utilizar una imagen para el inicio de dicha imagen, otra para el final y a partir de repetir una porción generar el resto.
  3. Trata de evitar el escalado de imágenes: Por ejemplo si tienes una imagen de 500x 500 y sólo necesitas un tamaño de 100×100, redimensiona la imagen previamente con alguna herramienta de edición de imágenes y no fuerces un escalado declarando un ancho y alto de 100 en la etiqueta»img».
  4. Utiliza «favicon» pequeño y cacheable. El «favicon» es una pequeña imagen de formato (.ico) que puedes observar en la barra de direcciones, esto debe ser una imagen que resida en la raiz del servidor y de pequeño tamaño, nunca debe superar el «k». Declara este elemento como cacheable en el servidor web ya que se va a demandar mucho.
  5. Evite declarar vacio el atributo «src» de una imagen: Evita esto ya sea en la etiqueta «img» de Html o en Javascript (vease el siguiente ejemplo). » var img = new Image ();»» img.src = «»;» Ambas formas causar el mismo efecto: navegador hace otra petición a su servidor. Por ejemplo, Internet Explorer realiza una solicitud al directorio en el que se encuentra la página, Safari y Chrome hacer una solicitud a la página en sí, Firefox 3 y versiones anteriores se comportan igual que Safari y Chrome, pero la versión 3.5 ha resuelto esta cuestión y ya se envía una solicitud, Opera no hace nada cuando un src imagen vacía se encuentra.
  6. Redes de Gestión de Contenido. Personalmente nunca he utilizado esta solucíon, pero bueno hay que comentarla. Una red de distribución de contenidos (CDN. «Content Delivery Network») es una colección de servidores web distribuidos en varias ubicaciones para entregar el contenido de manera más eficiente a los usuarios. Teniendo en cuenta que el 80% de carga se destina normalmente a las peticiones HTTP de imágenes, scripts, etc., ya comentadas en el punto anterior, parece buena cosa distribuir estas peticiones mediante una red de distribución de contenidos, no obstante me parece más una solución para grandes corporaciones, si bien ya hay redes de distribución de contenido al alcance de pequeñas empresas.
  7. Optimizar la caché: Durante la primera visita a la página se produce una primera carga en la caché del navegador del usuario de forma que en futuras visitas el tiempo de carga será menor ya que no se necesita pedir lo que ya se tiene. Básicamente se trata de declarar no expirables aquellos componentes que nunca cambian y si declarar la expiración a través de un buen control de la caché de aquellos componentes que si cambian y que necesitan cargarse de nuevo. Para esto necesitas configurar tu servidor Web que es el que va a servir la página a los navegadores. En el caso de Apache te remito a su documentación donde seguramente vas a encontrar la personalización que necesitas.
  8. Activar la compresión en tu servidor web (Apache) mediante el encabezado «Accept-Encoding: gzip, deflate» en la petición HTTP: No todos los navegadores manejan adecuadamente esta compresión, si quieres saber más te remito de nuevo a la documentación de Apache.
  9. Declarar las hojas de estilo dentro de la sección Head. Las hojas de estilo pueden declararse en línea, pero para un mayor rendimiento es mejor ponerlas en la sección «head» siguiendos las especificaciones del lenguaje HTML marcadas por el W3C, esta sección se carga antes que «body» como seguramente ya sabes.
  10. Scripts de Javascript en el fondo de la página. Yahoo recomienda poner todos los scripts de Javascript al fondo de la página en lugar de la sección Head, la razón que dan es que muchas veces los scripts de Javascript aluden a objetos que todavía no se han definido porque no se han cargado en la página. Desde la humildad he de decir que no soy partidiario de esto, con la adecuada programación que evite acceder al objeto si no se ha definido se evita este problema, además por la misma razón expresada en el punto anterior, es mejor declarar estos scripts en la sección head, de esta manera si has configurado adecuadamente el servidor web se quedan en la caché del navagador y no se vuelven a pedir al servidor.
  11. Comprimir los scripts de Javascript y reunificarlos. Por otra parte también se recomienda si es posible, reunificar todos los scripts de Javascript en uno sólo y comprimir dicho script. Comprimir los scripts es una buena práctica ya que acortas la duración de las peticiones de dichos scripts. Ten en cuenta que un servidor web puede tener muchos usuarios conectados a la vez con lo cual pequeñas acciones como esta pueden producir su beneficio.
  12. Evitar expresiones en CSS: Este tipo de expresiones surgieron con las versiones de IE5, IE6 e IE7, en desuso a partir de IE8.A modo de ejemplo, el color de fondo se podría establecer para alternar cada hora usando expresiones CSS: background-color: la expresión ((new Date ()) getHours ()% 2 «# B8D4FF»: «# F08A00».?); Este tipo de expresiones tienen el inconveniente de que son evaluadas un gran número de veces mermando el rendimiento.
  13. Utiliza Scripts de Javascript y hojas de estilo externas. Como ya se ha comentado en puntos anteriores, si utilizas hojas de estilo y scripts externos al documento, además de lograr una separación de capas, dichos elementos permaneceran en la caché del navegador del usuario sin producir nuevas peticiones, pero además tendremos un documento de html con un menor tamaño. Si declaras en línea todos los scripts de Javascript y Hojas de estilo tendrás un documento mucho más largo y la carga de la página será más costosa.
  14. Minimización del código de Javascript y CSS. Minimizción es la práctica de la eliminación de los caracteres innecesarios del código para reducir su tamaño con objeto de optimizar los tiempos de carga. Cuando el código es minificado todos los comentarios se quitan, así como espacios en blanco, saltos de línea y demás caracteres no necesarios. En el caso de JavaScript, esto mejora el rendimiento del tiempo de respuesta debido a que el tamaño del archivo descargado es reducido. Hay dos herramientas muy buenas para esto «jsmin» y YUI Compressor. El compresor YUI también puede minificar CSS. La ofuscación es una alternativa de optimización que se pueden aplicar al código fuente. Se obtiene algo más de rendimiento que mediante la minificación pero la probabilidad de generar un error en el código es mucho mayor.
  15. Evita las redirecciones: En ocasiones desde un sitio web se te redirige a otro, eso implica un retraso en que se te sirva la página que solicitas, esto puede hacerse de diversas formas ya sea con Javascript, lenguaje servidor como PHP, etc., si se ha de hacerse, la mejor opción es mediante encabezados del tipo 301. 301. etc. Por ejemplo: HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html. El navegador automáticamente lleva al usuario a la URL especificada en el campo Location.
  16. Evitar la inserción de código Javascript duplicado: Si en un punto anterior hablábamos de reunificar scripts de JS, por supuesto también debemos procurar no incluir scripts duplicados, esto es de sentido común ¿Verdad? Los chicos de Yahoo recomiendan utilizar código de lenguaje servidor para incluir scripts del tipo: en lugar de la forma usual.
  17. Programa un código Ajax cacheable: Ajax solicita información de forma asincrónica desde el servidor Web y en segundo plano, no obstante si el código no está bien realizado puede producirse bucles de espera que mermen el rendimiento y no produzcan los beneficios de rendimiento esperados. Puedes evitarlo haciendo que las respuestas del servidor sean cachables.
  18. Vaciar el buffer: Cuando los usuarios solicitan una página, se puede tomar de 200 a 500 ms para que el servidor empiece el proceso de servir la página. Durante este tiempo, el navegador está inactivo, ya que espera a los datos que llegan. En PHP tenemos la función flush () que vacía el buffer de salida y trata de enviar todos los datos «escritos» (echo, print, etc.) hasta ese momento al navegador del cliente. Normalmente un script PHP se ejecuta en su conjunto y sólo al final devuelve los datos (código HTML, XML…) al cliente. Flush() evita esto permitiendo la ejecución del script «por partes». ¿En qué te puede ayudar esto?. Muy sencillo. Colocando llamadas a esta función justo antes de bloques cuya ejecución no sea «instantánea» (consultas a bases de datos, conexiones HTTP externas, etc.) conseguirás que tus visitantes empiecen a cargar las páginas antes, reduciendo el tiempo de respuesta e incrementando la velocidad de carga aparente.
  19. Utiliza Get para peticiones AJAX. El método POST se ejecuta en los navegadores como un proceso de dos pasos, primero el énvio de los encabezados y despues los datos en sí. Es mejor utilizar Get si es posible teniendo en cuenta que la capacidad de almacenaje de datos en una URL es limitada. Los tamaños de url por navegador son: Internet Explorer: 2,083 carácteres, Firefox: 65, 536 carácteres, Safari: 80.000 carácteres, Opera: 190.000 carácteres y por servidor web: Apache: 4,000 carácteres, Microsoft Internet Information Server (IIS): 16, 384 carácteres. Perl
  20. Carga posterior de componentes: los chicos de Yahoo indican de nuevo que Javascript y las bibliotecas que permiten soltar y arrastar animaciones pueden esperar que lo importante es el contenido, además indican que utilidades como YUI Image Loader que permiten retrasar la cargta de Imágenes o YOU Get que permite incluir javascript y CSS cuando sea necesario. Es cierto que hay que procurar que una página se vea bien y pueda usarse sin javascript porque todavía quedan muchos dispositivos que no lo implementan.
  21. Reduce el número de elementos DOM: Un gran número de elementos DOM puede ser un síntoma de que hay algo que seguro puede mejorarse com un mejor marcado (recuerda que HTML es un lenguaje de marcado, etiquetas o «tags»). Yahoo provee algunas hojas de estilo realmente útiles (grid.css, fonts.css y reset.css). » grids.css» puede ayudar con el diseño general, fonts.css y reset.css puede ayudar a despojar por defecto del navegador de formato, yo suelo usar reset.css en mis maquetaciones. Por cierto puedes contar el número de elementos DOM presentes en la página con sólo escribir en la consola de Firebug (complemento para Mozilla Firefoz y Google Chrome entre otros) document.getElementsByTagName (‘*’). length ¿Y cuántos elementos DOM son demasiados? Podrías preguntarte, pues es tan buena la pregunta que no te puedo dar una respuesta óptima en estos momentos, prometo investigar este tema más adelante.
  22. Minimizar el acceso DOM: Acceder a los elementos DOM con JavaScript es lento, es mejor evitar esto en la medida de lo posible, evita por tanto incorporar diseño con Javascript, esto es mejor directamente con CSS si es posible.
  23. Minimizar el uso de iframes: Yo prefiero no usarlos, pero como todo hay pros y contras: Por un lado ayuda con el contenido lento de tercersos como «badgets» y anuncios, procura un entorno limitado de seguridad y permite la descarga de scripts en paralelo pero por el otro lado aumenta o incluso bloquea la carga de la página incluso si el iframe está vacío y no es una solución semántica, piensa que este tag ya no se incorpora en HTML5.
  24. Reducir el tamaño de la cookie: Es importante mantener el tamaño de las cookies lo más bajo posible para reducir al mínimo el impacto en el tiempo de respuesta del usuario. En general procura eliminar cookies innecesarias y establece una adecuada fecha de expiración de la cookie.
  25. Desarrollo de controladores inteligentes de eventos: A veces usamos eventos para cada elemento y no caemos en que podemos usar lo que se conoce como «delegación de eventos», por ejemplo si tienes 10 botones dentro de una capa, en lugar de asociar un controlador de eventos por botón, es mejor asociar un controlador de eventos a la capa. Recuerda evitar acceder a un elemento que todavía no se ha definido.
  26. Utiliza «link» antes que «@import»: a mí no me parece que haya mucha diferencia entre un elemento u otro, pero aquí puede encontrar las razones por las que decantarse en pro de la etiqueta «link».
  27. Evita filtros: AlphaImageLoader es un filtro propietario de Microsoft para solucionar un problema que origina la transparencia o mejor dicho el canal alfa presente en algunas imágenes png en Internet IE7 explorer, yo suelo utilizar este filtro si bien sólo para IE7, pero los chicos de Yahoo recomiendan mejor usar «hack_filter» para no incrementar los tiempos de carga a los usuarios de IE7. Yo todavía sigo optimizando para este navegador, pero cada vez soy más partidiario de lanzar una ventana indicando a los usuarios de IE7 que actualicen la versión o utilicen otros navegadores. Por cierto con PNG8 no tienes el problema del canal alfa.ll
  28. Optimizar imágenes: en principo se aconseja pasar todas las imágenes a png o jpg en lugar de gift, por supuesto evitar formatos como bmp (mapa de bits). Además existen herramientas destinadas al optimizado de imágenes como: pngcrush para optimizar imágenes png, jpegtran para imágenes JPEG. Tambíen puedes utilizar para windows PngOptimizer, reduce de una manera sencilla la imagen sin perder calidad y además preserva la imagen original renombrándola con el caracter «_». Sencilla pero muy buena. PngOptimizer también existe como servicio web, pero apenas lo he testeado, el programa en cambio lo aconsejo por su sencillez y grandes resultados.

Las fuentes que me han permitido generar este documento son las siguientes:

El resto es de mi cosecha, desde luego gran parte del contenido de este artículo se debe a Yahoo, todo hay que decirlo, estoy seguro que habrás aprendido cosas que no sabías. Saludos!

Atentamente

Miguel Valero programador web y analista seo en Valencia

1 comentario

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.