Buenas Prácticas para Incrementar el Rendimiento de un Sitio Web

Es bastante obvio: los sitios web con buen rendimiento disfrutan de mayor participación, retención y conversión de los visitantes. Teniendo en cuenta lo voluble que los usuarios pueden ser, además del hecho de que los dispositivos móviles tienen mucha significancia en estos días, ¡nunca antes la velocidad de los sitios web ha sido tan importante! En este artículo voy a destacar formas en las que usted puede mejorar el rendimiento de sus propios sitios.

Miniatura de Photodune.net

Aumento el Rendimiento de Sitios Web

El rendimiento de los sitios web y el impacto que tiene, ha sido bien documentado a lo largo de los años. En 2007, Amazon informó que por cada 100 ms de aumento en el tiempo de carga de Amazon.com sus ventas disminuyeron un 1%. Google también reportó resultados similares en 2006 con su producto Google Maps. Google encontró que al reducir el tamaño de la página de 100KB a 80KB, su tráfico se disparó un 10% hacia arriba en la primera semana y luego un 25% en las tres semanas siguientes.

Está claro que supervisar el rendimiento de un sitio web es una necesidad y no debe ser ignorado por ser parte integral de su flujo de trabajo de diseño web.

El infográfico de arrriba por strangeloopnetworks.com ilustra el efecto que el rendimiento de un sitio web puede tener en los usuarios.

Usted probablemente ya está usando algunas de las técnicas que discutiré hoy, mientras puede que otras no. A pesar de que usted puede utilizar técnicas en el lado del servidor para acelerar los sitios web, este artículo se va a centrar en las maneras en que podemos aumentar el rendimiento desde el front-end. Vamos a ello..

Minimizar las Solicitudes HTTP

Uno de los aspectos más importantes al mejorar el rendimiento de una página web es minimizar el número de viajes de ida y vuelta que el navegador necesita hacer al servidor. Todos los archivos que incluye su sitio web (como CSS, JavaScript o imágenes) deben ser descargados en el navegador. Al minimizar estas solicitudes acelerará la página significativamente. Si incluye archivos CSS independientes para diferentes partes de su sitio, entonces encontrará que es beneficioso incluir todos los CSS en una hoja de estilo, así mismo para JavaScript u otros recursos.

La forma en que incluye archivos en su sitio web también puede tener un efecto drástico. Por ejemplo, si actualmente está incluyendo su CSS de esta forma: 

1

2

@import url('myCss.css');

entonces debería reconsiderar este enfoque y utilizar:

1

2

<link rel='stylesheet' href='myCSS.css'>

Al hacer esto, está permitiendo que el archivo CSS se descargue en paralelo con otros recursos, lo que resulta en tiempos de carga de páginas más rápidos.

Minimizando HTML, CSS y JavaScript

Con el fin de entender el código que estamos escribiendo, a menudo lo formateamos de una manera que nos es más fácil de leer, en otras palabras, es un formato más amigable al humano. Eche un vistazo al siguiente código de ejemplo:

1

2

<form action="#" method="post">

3

  <div>

4

		<label for="name">Text Input:</label>

5

		<input type="text" name="name" id="name" value="" tabindex="1" />

6

	</div>

7

</form>

En el ejemplo anterior podemos ver claramente que tenemos un formulario con etiqueta y elemento de entrada, rodeado por una div. El ejemplo anterior es mucho más claro que leerlo como:

1

2

<form action="#" method="post"><div><label for="name">Text Input:</label><input type="text" name="name" id="name" value="" tabindex="1"/></div></form>

Desafortunadamente, aunque puede ser más fácil de leer para nosotros, la versión más amigable con el humano incluye muchos caracteres innecesarios. No es demasiado desastroso en el ejemplo anterior, sin embargo, si se trataba de un sitio de gran escala con miles y miles de líneas de código, entonces nos costaría en rendimiento.

Los caracteres innecesarios pueden incluir espacios en blanco, comentarios y nuevos caracteres de línea. Estos caracteres se pueden quitar sin afectar el rendimiento del código y al eliminar estos estamos reduciendo el tamaño de archivo de nuestro código, por lo tanto, la cantidad de datos que se necesita descargar en el navegador.

Usted puede minimizar HTML, CSS y JavaScript. Si no está haciendo esto, entonces debería empezar a pensar en ello ahora. Afortunadamente para nosotros hay muchas herramientas en línea que pueden ayudar a minimizar y restaurar nuestro código tales como el compresor YUI.

Optimizando Imágenes

Uno de los elementos más necesitados de rendimiento que el navegador necesita descargar son imágenes, haciendo que algunos sitios sean dolorosamente lentos. Siempre que sea posible intente utilizar CSS para generar gráficos en lugar de imágenes. Esto puede ser ideal para elementos como botones, pero en algunos casos CSS tal vez no sea capaz de recrear el diseño como en el caso de una fotografía, o un elemento decorativo detallado. Si este es el caso, entonces se pueden probar algunos truco.

Al formatear y comprimir imágenes de una manera adecuada sin perder su apariencia o calidad visual, usted puede ahorrar en datos que necesiten ser descargados, lo que resulta en bonitas imágenes optimizadas para la red.

Sprites

Si usted ha estado diseñando por un largo tiempo, entonces estoy seguro de que ya estará utilizando sprites. Si usted está empezando, sin embargo, aquí hay una rápida descripción de ellos.

Antes le comente acerca de que la clave para acelerar sitios web es minimizar el número de solicitudes http. Cada imagen que tenga en su sitio web requiere una solicitud de http al servidor. Por lo general, los navegadores sólo pueden realizar un par de solicitudes simultáneas (al mismo dominio), por lo que se forman colas. Combinando varias imágenes en una sola imagen podemos reducir el número de peticiones.

El lado negativo a la creación de sprites es que pueden ser muy difíciles de crear y a menudo puede ser bastante complicado. Una vez más, hay toda una gama de herramientas en línea para ayudar a crear sprites. El que yo uso sin embargo (que me ha ahorrado montones de tiempo durante los últimos seis meses más o menos) es SpritePad. Con SpritePad usted puede simplemente arrastrar y soltar sus imágenes y tenerlas inmediatamente disponibles como un sprite PNG + código CSS. ¡¿Buena cosa verdad ?!

Arriba se muestra un ejemplo de imágenes de sprite que se utilizan en los sitios web de Facebook y Google.

Comprimir Imágenes sin Pérdida

Si usted tiene, por ejemplo, alguna forma de escaparate de fotografía, o un montón de fotografías en el sitio que está diseñando, entonces puede no ser conveniente o práctico servirlas todas como un sprite. Aquí es donde usted tendrá que "comprimir sus imágenes". Al formatear y comprimir imágenes adecuadamente, seremos capaces de guardar muchos bytes de datos.

A menudo, cuando se guardan imágenes con herramientas como Fireworks o Photoshop, los archivos resultantes contienen datos adicionales, incluidos datos de color que incluso pueden no utilizarse en la imagen e incluso cosas como metadatos. Mediante la compresión de imágenes sin perder el aspecto o la calidad visual de la imagen, puede ahorrar en datos que deben descargarse. El servicio smush.it de Yahoo es increíblemente bueno en hacer este trabajo para usted. Simplemente cargue las imágenes que desea "reducir" y este las comprimirá para usted sin pérdidas.

URIs de Datos

Otra forma de reducir el número de solicitudes http que las imágenes hacen es utilizar uris de datos. Las URIS de datos se pueden describir como

Codificación de imágenes y fuentes en cadenas de datos puras que se pueden integrar directamente en su marcado y hojas de estilo

Hicimos un gran tutorial sobre esto a principios de este mes con El Qué, Por Qué y Cómo URIs de Datos en diseño web. Siga adelante para leer más sobre este tema en su totalidad. Solo una aclaración sin embargo que éstos se deben utilizar sabiamente ya veces puede no ser beneficioso o práctico utilizar este método.

Servir Imágenes Escaladas

Las imágenes deben ser servidas a su tamaño de imagen original cuando sea posible. Por ejemplo, no debe cambiar el tamaño de las imágenes mediante CSS a menos que esté sirviendo varias instancias de la misma imagen y esa imagen coincida con al menos una en su tamaño original. De lo contrario, debe utilizar algo como photoshop para redimensionar su imagen, esto dará lugar al ahorro de bytes.

Por supuesto, esto no tiene en cuenta las imágenes fluidas (en el diseño adaptivo) que bien puede ser más grandes que las que se muestran en una pantalla pequeña.

Asegúrese de que sus imágenes están escaladas al tamaño correcto utilizando una herramienta como Photoshop en lugar de CSS.

Usted también puede eliminar físicamente los detalles.

El ejemplo que se muestra arriba se toma del archivo del sitio web dConstruct. En una técnica de optimización discutida en su blog Jeremy Keith difuminó las partes no esenciales de cada foto. Al hacerlo, redujo los datos de imagen requeridos, cortando el tamaño del archivo casi en dos. La pérdida en detalle es insignificante, en relación con las ganancias de rendimiento ganadas.

Almacenamiento en Caché

40-60% de los visitantes diarios a su sitio vienen con una memoria caché vacía. Hacer su página rápida para estos visitantes de primera vez es clave para una mejor experiencia de usuario.

Tanto los navegadores web como los servidores web permiten el almacenamiento en caché. Estos cachés almacenan solicitudes anteriores en el navegador o servidor; solicitudes tales como imágenes, páginas web, archivos CSS/JS y otros datos como cookies. Al almacenar estas respuestas el uso de ancho de banda se reduce y ayuda a mejorar el rendimiento de un sitio web.

El almacenamiento en caché suele utilizarse en activos que rara vez cambian, como los archivos CSS y JavaScript. Puede establecer una fecha de caducidad para cuándo debe cambiar un activo, diciéndole de manera efectiva al navegador o al servidor que obtenga una copia nueva de sus elementos. lea más acerca de las prácticas recomendadas para aprovechar el almacenamiento en caché en Google Developers.

Aplazando el Análisis de Javascript

Para que una página web se muestre completamente al usuario, el navegador debe descargar todos sus archivos asociados. Los archivos JavaScript no deben cargarse en la cabecera de su documento HTML, sino más bien cerca de la parte inferior como (aunque esto no reduce el número total de bytes que necesita ser descargado por el navegador) muestra el contenido de la página web antes de que el código JavaScript Está completamente cargado.

Si lo agregara a la cabecera de su documento, el navegador esperará hasta que el JavaScript se haya cargado en su totalidad antes de mostrar la página. Sus archivos de JavaScript se deben incluir antes del cierre de la etiqueta body.

Evite Hacer Peticiones Incorrectas

¿Qué es una mala solicitud podría usted preguntar? Bueno, por ejemplo, un enlace roto en su sitio equivale a una mala solicitud. Una solicitud incorrecta se puede clasificar como cualquier cosa que resultaría en un error 404/410; cualquier solicitud que resulte en un callejón sin salida.

La página '404 Sadface' de Ramiro Galan ilustra un ejemplo de una petición incorrecta.

Es inevitable que a veces su sitio web será cambiado, movido o actualizado. Estas enmiendas pueden dar lugar a vínculos antiguos que ya no están conduciendo a su destino correcto. Aunque estas solicitudes no causan que se descarguen datos, sigue siendo un recurso inútil, ya que el navegador tiene que iniciar la solicitud en primer lugar. Si usted encuentra que tiene algunas "peticiones incorrectas" en su sitio entonces usted debe aspirar a raparar éstas tan pronto como sea posible rectificando los errores. Google webmaster tools es un recurso útil para averiguar si su sitio web tiene enlaces rotos.

Redes de Distribución de Contenido

Una vez que haya hecho todas las enmiendas a su sitio que le darán la mejor oportunidad de ser un "sitio rápido", entonces es el momento de mirar el servidor que está alojándolo. Tradicionalmente, un servidor almacenará una copia de su sitio y luego lo servirá a la ubicación desde la que el usuario lo está viendo. El tiempo que tarda el usuario en solicitar primero al sitio en relación al tiempo que tarda el servidor en responder puede variar dependiendo de dónde se encuentre el usuario en el mundo en relación con el servidor.

Las Redes de Entrega de Contenido trabajan un poco diferente a esto. En lugar de alojar sólo una copia de su sitio web, alojan múltiples copias del mismo en varios servidores diferentes que se encuentran en todo el mundo.

Imagen cortesía de Wikipedia

Cuando un usuario envía una solicitud a estos servidores, se envían al servidor que se encuentre más cercano a su ubicación. Esto optimiza la velocidad a la que se entrega el contenido al usuario final. Esto es definitivamente un bono, pero sólo se debe utilizar una vez que haya utilizado todos los métodos posibles.

Google Page Speed

Google tiene una pequeña herramienta que nos permite monitorear el desempeño de muchos de los factores que hemos discutido hoy. Si no ha probado PageSpeed ​​Insights entonces definitivamente debería hacerlo ahora. Además tienen una gran cantidad de documentación y ejemplos que le ayudarán a supervisar y mejorar el rendimiento de su sitio web. Google lo describe como:

PageSpeed ​​Insights analiza el contenido de una página web y luego genera sugerencias para que esa página sea más rápida. La reducción de los tiempos de carga de la página puede reducir las tasas de rebote y aumentar las tasas de conversión.

Conclusión

Espero que usted haya aprendido algunas cosas sobre la optimización de la velocidad de los sitios web y cómo puede implementar algunos de los métodos en sus propios proyectos. Mediante la práctica de lo que hemos discutido usted animará a los visitantes a volver, permanecer en su sitio y disfrutar de una experiencia de navegación gratificante, mientras se encuentren allí.

La línea final es: ¡al acelerar sus sitios no sólo contribuye a una mejor experiencia de usuario para sus usuarios, sino una mejor experiencia de usuario para la web!

Lecturas Adicionales

• El Grupo de Trabajo para Rendimiento Web
• Web P - Un nuevo formato de imagen introducido específicamente para mejorar el rendimiento de las imágenes en la web.
• La psicología del rendimiento de sitios web y de los usuarios.
• Consejo Rápido: Oriente a los Visitantes en la Dirección Correcta Con .htaccess, incluyendo una compresión Gzip