Como acelerar y hacer más rápida la carga de un blog o una página web

Se calcula que entre el 40 y el 60% de los visitantes que acceden a una página, vienen por primera vez o hace tiempo que no lo hacen, por lo que la cache de su navegador está vacía.
Haciendo que una página cargue rápido esa primera vez, es esencial para que tengan una mejor experiencia en nuestro sitio y causar una buena impresión.
Son muchos los factores que inciden, influyen y determinan en la velocidad de carga de las páginas.
En este artículo se trata de abordar la mayoría de los factores, que se pueden configurar por el dueño de una página o blog, para lograr más rendimiento y velocidad en la representación de sus páginas en el navegador del usuario.
Las medidas que se pueden adoptar se pueden dividir en tres grupos o categorías:

Parámetros a configurar del lado del usuario

Minimizar las peticiones HTTP

El 80% del tiempo empleado por el navegador en la carga de las páginas es invertido en la descarga de todos los componentes como: imágenes, hojas de estilo CSS, scripts, archivos flash, etc.
Si se puede lograr reducir la cantidad de componentes necesarios, a su vez reducir el número de peticiones HTTP necesarias para representar la página, esta puede ser la clave para hacer que las páginas carguen más rápido.
Una de las forma de reducir el número de componentes en la página es simplificar su diseño.
Por supuesto se debe lograr un equilibrio entre los componentes indispensables y que sea rico el diseño y contenido de la página.
Las medidas elemetales son las siguientes:

Combinar archivos

La combinación de archivos es una de las maneras mas sencillas y lógicas de reducir el número de peticiones HTTP.
Se recomienda de existir diferentes archivos de hojas de estilo CSS, combinarlos en uno.
De la misma forma se deben combinar diferentes archivos scripts en uno.

---

Colocar los archivos de estilo CSS en el área del HEAD

Es imprescindible para optimizar la representación de la página, que los archivos CSS se encuentren en el área del HEAD y así asegurar que estén completamente en memoria cuando se comience a mostrar el cuerpo de la página en el navegador.

---

Colocar los archivos scripts en el final de la página

Los scripts, ya sean javascripts o vbscripts se deben insertar al final de la página, justo antes del cierre de la etiqueta </body>, de esta forma se logra que no paralicen el renderizado de la página.
Al navegador mostrar los elementos incluidos en el BODY y encontrarse con un script, detendrá el renderizado hasta tanto no se ejecute este, si dicho script carga un archivo .JS externo u otro y su acceso se hace difícil por congestión en la red, la pagina podría bloquearse momentáneamente.

---

Usar Javascript y CSS en archivos externos

Usar los códigos Javascript y CSS en archivos externos, en general hace que carguen más rápidamente las páginas, porque se almacena el código en caché por el navegador.
Al usarlos insertados en la página se descargan cada vez que se solicita el documento HTML, esto reduce el número de peticiones HTTP, pero aumenta el tamaño del documento HTML.
Si el código JavaScript y CSS se usa en archivos externos y se guarda en caché por el navegador, el tamaño del documento HTML se reduce sin aumentar el número de peticiones HTTP, es la opción ideal.

---

Usar en la carga de scripts externos el método asíncronos

Método en Javascript que permite cargar un script por partes, sin interferir con otros procesos en paralelo.
Un ejemplo es la opción de integrar el snippet de Facebook "Me Gusta" en una página, sin afectar la carga de sus elementos, método que es empleado en esta página.
Para eso se utiliza el siguiente código: <div id="fb-root"></div> <script type="text/javascript"> (function() { var element = document.createElement('script'); element.type = "text/javascript"; element.async = true; element.id = "facebook-jssdk" element.src = "//connect.facebook.net/es_ES/all.js#xfbml=1"; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(element, s); })(); </script> <div class="fb-like"></div>

Minimizar el código Javascript y CSS empleado

Minimizar el código usado en los scripts consiste en eliminar líneas vacías y caracteres innecesarios para reducir su tamaño con objeto de optimizar los tiempos de carga. Cuando el código es minimizado todos los comentarios se quitan, así como espacios en blanco (espacio, salto de línea), el beneficio regularmente supera una reducción de más del 5%.

¿Cómo minimizar o comprimir el código Javascript y CSS?

Validar el código HTML

Es fundamental que el código HTML utilizado en la página esté validado, o sea comprobar que no contiene errores, cualquier error puede ser la causa que provoque que el navegador se quede colgado.
Validar cualquier página mediante el servicio del W3C, es fácil utilizando el siguiente Bookmarklet.
Validar página

---

En CSS usar <link> y evitar el empleo de @import

Evitar en lo posible el uso de @import para cargar reglas de estilo CSS, pueden retardar considerablemente la carga de las páginas.

---

Usar Sprites CSS

Combinar de ser posibles las imágenes en una y mediante CSS, usando las propiedades background-image y background-position, mostrar el fragmento de imagen necesaria en diferentes lugares de la página, es lo que se conoce como Sprites CSS y es empleado ampliamente por muchos desarrolladores.

---

Utilizar imágenes en línea

Método de embeber o impregnar las imágenes en el código HTML de las página usando data: URL scheme, puede aumentar el tamaño de la página, pero reduce considerablemente las peticiones HTTP. Solo es recomendado en caso de imágenes pequeñas, iconos, logotipos, etc.
Lee como hacerlo en la siguiente página: Como usar e insertar imágenes codificadas en base 64 en las páginas web

---

Evitar el uso de document.write

La función de Javascript document.write puede ralentizar la representación de las páginas, evítalo si es innecesario y sustitúyelo de ser posible con innerHTML.
Más información en la siguiente página: Como escribir con Javascript texto y otros elementos en las páginas web

---

Minimizar DNS lookups (petición a servidores DNS)

Cada vez que se realiza la petición de una página al navegador web, si la dirección IP necesaria no se encuentra en cache, es hecha la petición al servidor DNS correspondiente, si los recursos a los que se hace referencia en la página como imágenes, flash u otros se encuentran en diferentes hosts, lógicamente serán necesarias más peticiones al servidor DNS, la única forma de evitarlo es asegurarse de ser posible que los recursos de la página están disponibles en el mismo host.

---

Evitar vínculos rotos en las páginas

La mejor forma de evitar links en la página que pueden no ser funcionales y causaran errores y una mala experiencia de usuario es revisar periódicamente mediante un servicio de chequear links como el que ofrece W3C: Comprobador de links

---

Reducir el número de elementos en el DOM

Una página compleja significa más bytes a descargar y más elementos a los que Javascript tiene que acceder al utilizar un evento para ejecutar una función.
Un número excesivo de elementos en el DOM de una página (etiquetas HTML) indica que puede existir la posibilidad de eliminar marcadores innecesarios en la página sin quitar contenido.
Para conocer el número de elementos del DOM de una página determinada puedes pegar en la barra de direcciones del navegador el siguiente código y presionar la tecla Enter:
javascript:alert('Cantidad de elementos del DOM: '+document.getElementsByTagName('*').length)

---

Disminuir y evitar el uso de iframes

Los iframes pueden ser muy útiles para agregar contenido externo, pero su uso trae desventajas, la principal es que pueden bloquear completamente la carga de una página.
Adicionalmente no son bien vistos por los buscadores (Google) y pueden perjudicar el ranking de una página, ya que agregan contenido extra sin verificar.

---

Reducir el tamaño de las Cookies

La Cookies son muy importantes para la autentificación de los usuarios y el uso de información y configuración personal, pero es importante mantener su tamaño tan bajo como sea posible para evitar que puedan afectar el tiempo de respuestas de las paginas, también se debe establecer en una fecha razonable el tiempo de expiración de las mismas.

---

Evitar atributos SRC vacíos

Evitar en lo posible que aparezca el atributo "src=" vacio, ya sea dentro de la etiquetas IMG o en scripts, por ejemplo:

<img src=""   >
<script>
var img = new Image();
img.src = "";

Esto puede provocar que el navegador le siga enviando peticiones al servidor y si es una página muy visitada puede consumir bastante ancho de banda insuficientemente.

---

Mantener el tamaño de las páginas inferior a 25K

Dispositivos portátiles como teléfonos celulares Iphone y otros muy usados para acceder a internet en la actualidad solo admiten páginas en su cache inferiores a 25kb, de ahí la importancia de controlar y reducir el tamaño a la medida indispensable.

---

Optimizar el uso de las imágenes en las páginas web

Según las estadísticas las imágenes son los elementos que con más frecuencia retardan la carga de las páginas.
Sigue las siguientes reglas para optimizar su uso.

No escalar las imágenes en HTML

Usa en la etiqueta IMG el ancho y altura de la imagen insertada, de esa forma el navegador la representará de forma más eficiente.

Usar solo imágenes optimizadas para internet.

Evita el empleo de imágenes de formato GIF, trata de sustituirlas o convertirlas a PNG.
Evita el empleo de imágenes de formato JPG, trata de sustituirlas o convertirlas a PNG o a JPEG.
Optimiza las imágenes empleadas, puede hacerse de varias formas.

Parámetros a configurar del lado del servidor

Los parámetros del lado del servidor solo se pueden optimizar si se tiene acceso a los archivos de configuración.
Si usas una cuenta en un servicio de alojamiento compartido (share hosting), puedes hacerlo insertando las instrucciones en el archivo ".htaccess".

Utilizar encabezados para definir el tiempo de la página en cache

Configurar los encabezados Expires y Cache-Control puede ser una de las formas más efectivas de elevar el rendimiento en una conexión para el usuario, consiste en elevar el tiempo que debe permanecer en la cache del navegador los elementos de una página, los datos necesarios los envía el servidor, por lo que es necesario tener acceso a archivos de configuración del mismo como el archivo .htaccess, en la actualidad todos los que proveen servicio de hosting lo permiten.
Más información sobre este método, con todas las opciones que se pueden emplear: Como hacer más rápida la carga de una página web en un servidor Apache

---

Usar Gzip para comprimir componentes

La compresión de las paginas reduce los tiempos de respuesta considerablemente al reducir el tamaño de la respuesta HTTP, Gzip es el método de compresión más popular y eficaz, generalmente reduce el tamaño de respuesta en un 70%.
¿Cómo funciona?
El navegador al hacer una petición al servidor informa que soporta la compresión, de esa forma el servidor puede comprimir los archivos que servirá usando el método especificado por el cliente.
Todos los servicios de hosting proveen la compresión con Gzip pero no viene habilitada de forma predeterminada.

---

Configurar el parámetro ETags

Entity tags (ETags) es un parámetro usado en los servidores para sabwer cuando el contenido en la cache en el navegador coincide con el que está disponible en el servidor web, puede ocasionar conflictos en casos de una misma información almacenada en diferentes servidores, en estos casos el navegador perderá tiempo haciendo consecutivas peticiones con el objetivo de comprobar y validar las fechas.

---

Globales

Usar un servicio de distribución de contenido CDN

CDN son las siglas de Content Delivery Network (Red de distribución de contenido), son empresas que poseen una serie de servidores dispersos geográficamente y ofrecen el servicio de servir el contenido directamente al usuario de ellos, independientemente del hosting físico que se emplee.
El servidor seleccionado para la entrega de contenido a un usuario específico se basa en la proximidad de la red.
Mantienen en su caché archivos estáticos como imágenes, video, flash, etc. lo que puede disminuir considerablemente el tiempo de carga de una página.
El servicio generalmente es de pago, pero existen algunos gratis.
Servicios famosos y con autoridad son MaxCDN y Amazon CloudFront (de pago). También Google Page Speed y Cloudflare (gratuitos).
En otra página de este sitio puedes leer una recopilación de los servicios tanto gratuitos como de pago y considerar las opciones existentes: Servicios CDN gratis en internet para acelerar un blog o sitio web

---

¿Cómo detectar elementos que entorpecen el tiempo de carga de una página?

El siguiente Bookmarklet permite que el navegador cargue una página y muestre sus elementos a una velocidad determinada, es posible ver que elementos puede entorpecer y demorar su carga.
Al ejecutar el Bookmarklet tenemos que introducir la cantidad de caracteres que se renderezirán por segundo, 1 es el valor más lento y el máximo 20.
Es muy útil para probar el funcionamiento de una página cuando usamos el evento onload para ejecutar funciones solo después de esta cargue completamente.
Lamentablemente no funciona en el navegador Internet Explorer.
Renderizar página

Mas información en la red

Páginas relacionadas