10 puntos clave para optimizar la velocidad de un sitio web
La velocidad y el rendimiento de nuestras páginas web es un aspecto de vital importancia desde el punto de vista de la experiencia del usuario y cada vez tiene una influencia mayor el su posicionamiento en los rankings de búsqueda. En el artículo “Using site speed in web search ranking” del Webmaster Central Blog de Google se hace hincapié en esta realidad.
1. Diferir la carga del contenido de la página
Ajax nos permite crear páginas web que puede ser actualizada de forma asíncrona en cualquier momento. Esto significa que en vez de recargar toda la página cuando un usuario realiza una acción, podemos simplemente actualizar parte de esa página.
Aplicándolo, por ejemplo, a una galería de imágenes, podemos, en lugar de cargar todas las imágenes cuando un usuario visita por primera vez la página web, solamente mostrar miniaturas de las imágenes y luego, cuando el usuario hace clic en ellas, de forma asíncrona, solicitar las imágenes a tamaño completo al servidor y actualizar la página. De esta manera, si un usuario sólo quiere ver unas cuantas fotos, no tiene que sufrir la espera de todas las imágenes para descargar. Este patrón de desarrollo que se llama carga diferida.
Existen algunas librerías de desarrollo web, como jQuery, Prototype y MooTools pueden facilitar la implementación de la carga de contenidos diferida en una página web.
2. Utilizar ficheros externos para JavaScript y hojas de estilo CSS
Cuando se carga pro primera vez una página web, el navegador cachea recursos externos como archivos CSS y JavaScript referidos en el código.
El uso de código CSS en línea también aumenta el tiempo de procesamiento de una página web. Si todas las características de la presentación se incluyen en el archivo principal de CSS se disminuye el trabajo que debe realizar el navegador puesto que ya conoce todas las reglas de estilo que tiene que aplicar.
Por otra parte, la utilización de fichero externos JavaScript y CSS hace que el mantenimiento del sitio sea más fácil porque sólo tiene que mantener archivos globales en lugar de código dispersos en varias páginas web.
3. Utilizar sistemas de cacheo
Este tipo de recursos está especialmente indicado en sitios web dinámicos cuyas páginas se construyen obteniendo los elementos mediante queries a bases de datos. Si utilizamos un sistema de caché en su lugar, la aplicación web sólo tiene que crear el contenido una vez en lugar de crear el contenido cada vez que se visita la página. Los sistemas de almacenamiento en caché se encargan de actualizar periódicamente los contenidos para queestos estén frescos.
Los gestores de contenidos más populares como WordPress y Drupal cuentan con características que permiten implementar sistemas de caché para convertir sus páginas dinámicas en estáticas. Para WordPress, se puede utilizar un sistema de caching mediante plugins como Super GT Cache o W3 Total Cache. Drupal tiene una función de caché de página directamente incluida en el núcleo del CMS.
De la misma forma se puede realizar caché de los contenidos en bases de datos y scripts en el lado del servidor. Por ejemplo, PHP tiene extensiones llamadas aceleradores de PHP que optimizan el rendimiento mediante el almacenamiento en caché (un ejemplo de un acelerador de PHP es de APC) . La caché de base de datos mejora el rendimiento y la escalabilidad de las aplicaciones web, reduciendo el trabajo asociado de lectura, escritura y acceso a la base de datos
4. Evitar el redimensionamiento de imágenes mediante código HTML
De esta forma, se evita descargar un fichero de imagen de un tamaño superior para, posteriormente, mostrar la imagen con unas dimensiones inferiores. Nos ahorramos tiempo en la descarga y en el proceso de redimensionamiento.
5. Evitar el uso de imágenes para mostrar texto
Utilizar texto en las imágenes incluidas en una página web, además de hacerlo inaccesible para los lectores de pantalla (esto se puede paliar utilizando texto alternativo), incrementa los tiempos de carga .
Si necesitamos utilizar fuentes personalizadas en un sitio web, podemos recurrir a fuentes embebidas para hacerlo de manera más eficiente.
6. Optimizar los tamaños de las imágenes utilizando el formato adecuado de fichero
Al escoger el formato de imagen de forma correcta, se puede optimizar el tamaño de los archivos sin perder calidad de imagen. Por ejemplo, a menos que tengamos la necesidad de utilizar transparencias en las imágenes, que ofrece que el formato PNG, podemos usar el formato JPG que, a menudo, muestra las imágenes fotográficas con tamaños de ficheros menores.
7. Optimización del código
Mediante, por ejemplo, el uso de hojas de estilo en cascada bien desarrolladas, podemos escribir código de manera eficiente y reducir, no sólo reduce el tamaño de archivo de código HTML, sino también hacer nuestros sitios web más fáciles de mantener.
8. Cargar el código JavaScript al final del documento
Incluir los scripts al final de la página en lugar de al principio permite que el navegador muestre todo el contenido antes de antes de empezar con la carga del código JavaScript. Esto hace que sus páginas web, se sienten más sensibles debido a la forma en JavaScript funciona es que nada bloques debajo de la prestación hasta que haya terminado la descarga. Si, posible referencia JavaScript justo antes de la clausura <body> etiquetas de sus documentos HTML. Más información sobre el aplazamiento de la carga de JavaScript .
9. Utilizar Content Delivery Network (CDN)
La velocidad de un sitio web se ve muy afectada por la ubicación donde el usuario se encuentra en relación a el servidor web. Cuanto más lejos estén, más distancia tendrán que recorres los datos necesarios para mostrar los contenidos. Tener estos almacenados en caché a través de múltiples ubicaciones geográficas ayuda a paliar de este problema. A menudo las redes CDN aumentarán el coste de operación del sitio web, pero ayudan a ganar un plus de velocidad. Como ejemplo de redes CDN podemos citar MaxCDN o Amazon Simple Storage Service (Amazon S3).
10. Optimizar los sistemas de cacheo
Junto con el uso de sistemas de almacenamiento en caché, debemos sacar partido de las características de los principales navegadores en este aspecto. Los navegadores pueden almacenar en caché archivos CSS, JavaScript e imágenes.
Aparte de los conceptos comentados sobre utilizar archivos externos para CSS y el código JavaScript , lo que permite a los browsers almacenarlos en caché, tenemos herramientas para asegurarnos del almacenamiento de elementos en la caché del navegador. Por ejemplo, mediante el uso de cabeceras HTTP como
Expires y Last-Modified.
