Usamos cookies propias y de terceros para mostrar publicidad. Si continua navegando consideramos que acepta el uso de cookies. OK Más información

Mejorar el rendimiento de un sitio web

Publicado por Israel Noguera

rendimiento.jpgControla el rendimiento de tu sitio y optimiza los tiempos de carga. El objetivo es ofrecer a los usuarios los resultados más relevantes y un buen servicio. Los sitios rápidos aumentan la satisfacción del usuario y mejoran la calidad general de la Web (especialmente para los usuarios que disponen de conexiones a Internet lentas).

Nuestro sitio web tiene que cargarse lo más rápido posible obtiendo una buena respuesta, lo más próximo posible a una carga inmediata. El servidor web de estar permanentemente disponible, sin caídas, aunque sean muy breves, para realizar las peticiones que le pedimos lo más rápido posible. Un buen servidor será clave en este aspecto.

Un buen punto de partida para mejorar el rendimiento en realizar un análisis de todos los recursos que se sirven en nuestra web, intentando reducir el tiempo al máximo. WebPageTest es una herramienta fantástica para analizar nuestra página, aunque la herramienta de Google, PageSpeed Insights nos detallará explícitamente que podemos hacer para mejora el rendimiento (optimizar imágenes, minificar el código Javascript, minificar el CSS, eliminar las cadenas de consulta de recursos estáticos, especificar un validador de caché...).

Las páginas se bloquean hasta que no han cargado todo su contenido y en ocasiones el efecto es que la página está en blanco. Coloca los archivos de estilos CSS justo al principio del documento y todos los archivos Javascript que sea posible al final del documento, justo encima del cierre del body. Reducir el número de ficheros externos CSS y JS también es vital de cara a reducir el número de peticiones al servidor (cada X peticiones al servidor, este se bloquea hasta que no las ha completado).

Esta herramienta tan interesante te va a mostrar en diferentes fotogramas como aparece tu página desde que inicia la carga hasta que se ha completado: http://loads.in/

Minificación

yuicompressor.jpgLa minificación de archivos CSS y JS es rápida, fácil y muy eficiente. Se trata de compactar el contenido de los archivos eliminando espacios extra, comentarios y minimizar el código fuente lo máximo posible para hacer que el fichero ocupe lo menos posible, siga funcionando igual y se descargue lo antes posible. YUI Compressor de Yahoo, es una herramienta que nos servirá para este propósito.

Una de las estrategias más efectivas y usadas es utilizar sistemas de caché y existen diferentes niveles de caché, algunos muy sencillos de aplicar y otros más complejos y sofisticados.

Caché

Lcache.gifa caché de agente de usuario es una caché privada, que funciona para un único usuario y viene a ser los recursos descargados (imágenes, css, js, archivos flash...) y almacenados por el navegador web. El navegador web la segunda vez que accede a la web ya no necesita volver a descargar los recursos porque ya los tiene almacenados en la propia máquina.

Los intermediarios en la comunicación cliente-servidor también pueden implementar cachés compartidos (también llamadas proxy-cachés directos) que sirvan páginas a varios usuarios.

Las cachés pasarela (llamadas también proxy-cachés inversos o aceleradores web) funcionan a cargo del propio servidor original, de forma que los clientes no distinguen unos de otros. Puede hacerse funcionar conjuntamente varias cachés pasarela para implementar una Content Delivery Network (CDN), como es el caso de Akamai. Paquetes como Varnish Cache pueden usarse para este propósito.

Conseguimos reducir el ancho de banda consumido, la carga de los servidores y el retardo en la descarga.

Compresión

compresion_web.jpgLa técnica de la compresión al vuelo se basa en aprovechar las capacidades implícitas de compresión y descompresión de los navegadores:

El cliente realiza una petición (avisando que es capaz de descomprimir). Antes de enviar la respuesta al cliente, el servidor comprime el recurso, entonces, lo envía a un tamaño inferior, ganando en velocidad y ahorrando ancho de banda. Al recibirlo, el navegador lo descomprime y lo muestra.

Obviamente, el precio a pagar por esta genial estrategia es un aumento de CPU en el servidor y cliente (comprimiendo y descomprimiendo los recursos), pero totalmente asumibles y despreciables en cuanto a los beneficios que aporta.

El módulo mod_deflate del servidor Apache se encarga de usar esta característica.

Imágenes

En primer lugar optimizar al máximo las imágenes, no usar una imagen de 4000 píxeles de ancho por 4000 píxeles de alto para todo tipo de tamaños, incluso para usarla como miniatura. Usaremos tantas copias de la imagen original como tamaños sean necesarios.

Usaremos el formato de imagen más adecuado para cada imagen; JPG para imágenes con amplias escalas de colores con una compresión del 60% y GIF o PNG para imágenes más planas, con pocos colores. Hay muchos otros formatos (WEBP,JPG 2000, JPEG XR, BMP, TIFF, SVG...), pero JPG, GIF y PNG son los más habituales.

css_sprites.pngEsta herramienta te ayudará a optimizar tus imágenes al 100%, RIOT - Radical Image Optimization Tool.

Un truco que suelo usar para reducir el tamaño de las imágenes (y también las peticiones al servidor) son los sprites de imágenes. Un sprite viene a ser un contenedor de imágenes donde agrupamos imágenes parecidas, por ejemplo todos los botones. El tamaño de un sprite es menor que el conjunto de imágenes que contiene si las guardamos por separado y es sencillamente porque la paleta de colores en un sprite en la única.

Aprende más sobre los sprites aquí: css image sprites

Por otro lado, tenemos el Lazy Loading, que viene a ser un recurso que se utiliza en informática para denominar a una estrategia en la que sólo se realiza la carga de un recurso cuando sabemos con certeza que se va a utilizar.

Muchas veces, los usuarios entran a un artículo o sección sólo para ver algún detalle concreto, y no necesitan que se cargue la página completa.

Hay un plugin de jQuery que se encarga de esta finalidad: Lazy Load

El plugin entra en acción cuando el usuario hace scroll y se mueve por la web, ya que todas las imágenes dentro del campo de visión del usuario se van cargando, y si el usuario no avanza, el servidor se ahorra la transferencia de esas imágenes.

Caché universal

Existe un repositorio de recursos comunes de Google: Google Webfonts y Google Libraries API. En ellos tenemos a nuestra disposición una URL con las últimas versiones de JQuery o distintas tipografías a elegir.

Un usuario que acceda a cualquiera de los dos sitios, hará que se cachee en su navegador ese script y esté disponible para cualquier otra web que lo utilice. Así pues, nos aprovecharemos de que ese recurso probablemente ya se encuentra cacheado en el navegador de usuario (es muy probable que el usuario haya visitado otro sitio web que lo utilice). Idem con las tipografías.

Balancear con otro servidor

Otra técnica muy utilizada es utilizar un servidor diferente para almacenamiento de imágenes y recursos estáticos.
Por ejemplo, Amazon S3 es una alternativa muy utilizada, ya que tiene precios muy bajos y se paga por uso (al contrario que los hostings, que suelen ser cuotas mensuales).
Sin embargo, a pesar de que el precio por transferencia es muy atractivo,  Amazon S3 es muy útil para almacenar archivos grandes, pero no para archivos pequeños y muy solicitados, ya que el precio de las peticiones es lo que se hace caro a la larga.

Hotlinking

hotlinking.pngEl hotlinking se define al hecho de que uno o varios usuarios (con o sin conocimiento) colocan imágenes en su propia web, pero en lugar de estar alojadas en su propio servidor, utilizan una imagen alojada en un servidor ajeno.

Prevenir el hotlinking es muy sencillo y no hacerlo puede suponer un colapso del servidor a base de peticiones desde servidores externos que contienen algún recurso de nuestro site. El hotlinking repercute directamente en la transferencia de datos y carga de un servidor.

El problema se produce cuando el sitio que tiene nuestro recursos tiene mucho tráfico (o si el recurso es robado por muchas webs), el ritmo de solicitudes puede llegar a colapsar el servidor y hacerlo caer, además del coste económico producido por el ancho de banda consumido.

Para evitar esto se utilizan técnicas de anti-hotlinking, como pueden ser el uso del módulo ModRewrite, para Apache.

CDN: Red de distribución de contenidos

Cuando tenemos nuestro propio sitio web, éste está ubicado en un lugar del mundo (generalmente, en EEUU), por lo que, como parece obvio, los usuarios que estén más cerca de ese lugar, al acceder al sitio web, tendrán una respuesta más rápida que alguien que acceda, por ejemplo, desde Europa.

La única forma de mejorar la respuesta, es ubicar nuestro servidor en una localización más cercana al público general de nuestro sitio.
Sin embargo, ¿qué ocurre si nuestro público no está localizado en un sólo país, si no que está repartido por todo el planeta? ¿o si no nos interesa cambiar de servidor porque el que tenemos tiene unos requisitos muy especiales? Aquí entra en juego la importancia de un CDN.
Una red de distribución de contenidos se encarga de realizar copias de nuestro contenido y replicarse por varios datacenters ubicados por distintos países y continentes. Así, cuando un usuario pide un cierto recurso, el datacenter más cercano al usuario es el que responde, ofreciendo una respuesta más rápida que si respondiera el servidor original.

En nuestro caso vamos a hablar del excelente CDN CloudFlare, que en el momento de escribir esto, posee 14 datacenters repartidos por todo el mundo. Pero lo mejor no es esto, si no que además de aportar un servicio excelente, con gran cantidad de funcionalidades, su plan básico es totalmente gratuito.

  • Localización: El contenido se sirve desde el datacenter más cercano al usuario, por lo que la respuesta es mayor.
  • Transferencia: El contenido es servido por los datacenters, por lo que nuestro servidor genera un ahorro de ancho de banda considerable.
  • Peticiones: También ahorramos un gran número de peticiones en nuestro servidor, por lo que las colas de peticiones (y las esperas) se reducen.
  • Contenido dinámico: El contenido dinámico se sigue sirviendo desde el servidor original, por lo que no se muestra incoherencia de datos.
  • Escudo ante ataques: La estructura de datacenters se lleva también el impacto de los clientes dañinos, protegiendo al servidor de ataques y otros elementos maliciosos.


El servicio Cloudflare proporciona un panel de analíticas donde podemos ver la cantidad de accesos de usuarios (tráfico regular), crawlers (robots y buscadores) y amenazas (atacantes, spam, etc...), permitiendo establecer un nivel de «peligro» ante ataques.

Comentarios 0 comentarios