El tema del rendimiento en la web a tomado mucha fuerza en la actualidad, en parte gracias a la gran masificación que los servicios de internet, que han hecho posible que hasta los usuarios ubicados en los lugares mas remotos del planeta puedan disponer de estos servicios.
Al incrementarse la cantidad de usuarios que hacen uso de estos servicios, también se han incrementado las visitas a cientos de sitios web en todo el mundo, y esto ha dejado ver lo importante que es que un sitio web este bien optimizado.
Como ejemplo, cito a continuación la experiencia de Mozilla, la cual pueden encontrar acá.
Results
After implementing these changes in an A/B test, we saw impressive results. Previously, we predicted a 1 second reduction in page load speed would improve download conversions by 2.7%. In reality, our optimized experimental variation shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
With 275,000 daily visitors, a 15% improvement on this single English page translates to 10.28 million additional downloads per year. And, if we’re able to achieve a similar performance boost across our other top landing pages, we’ll drive in excess of 60 million yearly Firefox downloads.
After implementing these changes in an A/B test, we saw impressive results. Previously, we predicted a 1 second reduction in page load speed would improve download conversions by 2.7%. In reality, our optimized experimental variation shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
With 275,000 daily visitors, a 15% improvement on this single English page translates to 10.28 million additional downloads per year. And, if we’re able to achieve a similar performance boost across our other top landing pages, we’ll drive in excess of 60 million yearly Firefox downloads.
Como podrán ver, el tema del rendimiento en la web es de suma importancia, por este motivo, vamos a ver una serie de recomendaciones que de llevarse a cabo mejoraran el rendimiento en los sitios web que desarrollemos.
Truco #1. Evitar el uso de código en línea y de código incrustado.
Como todos sabemos hay tres formas en las que se pueden introducir estilos y scripts en nuestra web, y estas son:
Interno o inline: Es cuando colocamos código en un atributo de un control, como por ejemplo:
<p style="background: blue; color: white;">Ejemplo de CSS interno o inline</p>
<a href="#" onclick="alert(this)">Ejemplo JavaScript inline</a>
Esta practica reduce la cantidad de llamados http, pero hace mas pesada la pagina y hace mas difícil el mantenimiento de la misma.
Incrustado: Es cuando colocamos código agrupado entre las etiquetas destinadas para ello, pero dentro del documento html, al igual que en el caso anterior, reduce la cantidad de invocaciones Http, pero aumenta el tamaño del documento web.
Externo: Esta es la mejor practica, y consiste en tener el hojas de estilos y script en archivos destinados para ello, haciendo su inclusión en el documento web por medio de las etiquetas correspondientes, por ejemplo:
<link rel="stylesheet" href="theme.css">
<script href="myscript.js">
De esta forma se ejecutaran mas invocaciones http, pero el documento html será mas pequeño, y al mismo tiempo será mas fácil cachear las paginas y de paso facilita el mantenimiento de web.
Truco #2. Comprimir el documento Html
Usualmente se suele indentar el código, y colocar comentarios, con el fin de garantizar su legibilidad y no sufrir tanto mientras se desarrolla, pero esos comentarios no aportan nadan a la funcionalidad como tal y son ignorados por los navegadores y servidores de aplicación, y aunque no parezca, esos espacios en blanco aumentan el tamaño del documento.
Por tanto, se recomienda que se usen herramientas de compresión sobre la versión que se desea poner en producción, ya que estas herramientas eliminaran esos comentarios y espacio en blanco reduciendo el tamaño de los documentos.
Existen bastantes aplicaciones disponibles, entre las cuales tenemos:
Html Compressor
HTML Minifier
Htmlcompressor.com
Truco #3. Las hojas de estilo al inicio del documento, los scripts al final
Es recomendable hacer la inclusión de las hojas de estilo dentro del head del documento, de esta forma la pagina se va cargando de forma progresiva y da la impresión de que se esta cargando mas rápido, por otra parte si colocáramos las hojas de estilo al final, la pagina se cargaría sin estilos hasta tanto no descargue los archivos requeridos.
Por otra parte es recomendable incluir los scripts al final del documento Html, con el fin de evitar bloqueos al renderizar la pagina, ya que esta se detendrá si intenta ejecutar algún script que aun no ha terminado de descargar, dejándolos al final lograremos que nuestra pagina se renderize completa, luego al terminar de descargar los script se refrescara.
Truco #4. Comprimir las hojas de estilo
Como ya comente mas arriba, en el Truco #2, los comentarios e indentaciones en el código incrementan el tamaño de los archivos, por lo que es recomendable que las versiones para producción sean comprimidas, con el fin de reducir su tamaño.
Para esto podemos usar herramientas como:
YUI Compressor
CSS Minifier
Truco #5. Reducir la cantidad de hojas de estilo
En algunas ocasiones se crean mas de una hoja de estilo para una web, lo ideal en la medida de lo posible es que los estilos se definan en un solo archivo, con el fin de reducir la cantidad de llamados Http.
Truco #6. Comprimir los archivos JavaScript
Es usual que debido a las particularidades de nuestra web nos veamos obligados a desarrollar funcionalidades en JavaScript, y al igual que suele suceder con los documentos Html y las hojas de estilo, usamos indentación y comentarios para hacer nuestra vida mas fácil.
Es recomendable usar una herramienta de compresión para eliminar estos comentarios y espacios en blanco y reducir así el tamaño de nuestros archivos de scripts, lo que hará que su descarga sea mas rápida.
Truco #7. Usar carga asíncrona de scripts
Como ya comente el en Truco #3, la carga de la pagina se puede ver afectada por causa de los scripts, para evitar esto es recomendable que en la medida de las posibilidades se carguen estos de forma asíncrona, esto se logra agregando la propiedad async tal como vemos a continuación:
<script async src="myscript.js"></script>
Truco #8. Evitar el uso de @import
Cuando usamos @import en un archivo CSS, el navegador hace una pausa hasta tanto no termine de descargar el archivo referenciado en el @import, lo que genera demoras en la carga las paginas, y reduce el rendimiento.
Truco #9. Cargar contenido de terceros de forma asíncrona
Pues como todos saben, si tenemos incrustada en nuestra web contenido por ejemplo de youtube, la carga de la pagina se puede volver lenta dependiendo del estado de las comunicaciones entre nuestra web y las del tercero.
Así que lo ideal es que la carga de scripts, widgets u otros contenidos de terceros se realice de forma asíncrona, esto para evitar la perdida de rendimiento en nuestro sitio web.
Por ejemplo, se podría incluir un widget de la siguiente forma:
(function()
{
var script,scripts = document.getElementsByTagName('script')[0];
function load(url)
{
script = document.createElement('script');
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
}
load('//platform.twitter.com/widgets.js');
}());
Truco #10. Evitar uso innecesario del DOM
En este aspecto es difícil dar ejemplos claros, ya que sea cual sea el uso que se le de al DOM, siempre va a resultar costoso, por lo tanto es recomendable ser muy cuidadoso en este aspecto, y usarle solo cuando de verdad es necesario, a fin de evitar perdidas en el rendimiento.
Como ejemplo puntual podríamos hablar de document.write(), en este caso, la carga de la pagina se detiene hasta tanto no obtiene el resultado de la ejecución de esta instrucción.
Truco #11. Evitar al máximo los cambios dinámicos en la estructura de las paginas
Acá hago referencia a la situación en que se manipulan las características o la apariencia de los elementos de una pagina, y que obligan al navegador a redibujar la pagina.
Este tipo de practicas se deben reducir al máximo con el fin de evitar perdidas en el rendimiento, ya que por ejemplo si se cambia dinámicamente el tamaño de un contenedor, el navegador se ve obligado a recalcular el tamaño de los demás elementos de la pagina, y debe redibujarla completamente.
Truco #12. Usar siempre versiones recientes de scripts y componentes
Se recomienda usar siempre scripts actualizados, pues generalmente los proveedores de estos componentes implementan mejoras importantes a sus productos, tal como optimización de los algoritmos y correcciones de errores.
Además siempre podemos encontrar una que otra cosa nueva que nos sea de utilidad.
Truco #13. Evitar el uso de JQuery y otras librerías similares
Si bien este tipo de librerías brindan muchas utilidades, hay ocasiones en que es mas eficiente usar JavaScript puro, por tanto la recomendación es solo usar este tipo de librerías cuando sea realmente necesario.
Truco #14. Cuidar el tamaño de las imágenes
Se recomienda tener mucho cuidado con las imágenes que se usen en nuestra web, es común ver que usan imágenes de tamaños mayores a las requeridas y las redimensionan por código.
A simple vista no hay problema, pero en cada petición se están descargando una buena cantidad de kilobytes innecesarios.
Truco #15. Optimizar las imágenes
Yo había escuchado esta recomendación en varias ocasiones pero no tenia certeza de lo esto que implicaba, cosa que pude entender hace un tiempo gracias a un curso de fotografía que hice.
Y es que normalmente solo vemos la imagen, pero pocos saben que tras lo que podemos ver existe una gran cantidad de información (metadatos) e incluso se incrustan miniaturas, es evidente que esta información aumenta el tamaño de los archivos y produce reducciones en el rendimiento.
Por eso se recomienda que las imágenes se optimicen, eliminando la información innecesaria, usando compresión, o incluso reduciendo la paleta de colores que estas imágenes pueden usar; también se puede crear imágenes usando carga progresiva, lo que ayuda mucho, ya que un usuario percibe la carga de la pagina mucho mas rápida.
Este es un tema que esta mas en manos del equipo de diseño grafico que en el de desarrollo como tal pero es importante tener al menos la idea de lo que esto significa, después de todo somos nosotros en el área de desarrollo los que tenemos que sufrir para optimizar nuestras web.
Como podemos ver son trucos relativamente simples pero que nos pueden sacar de apuros, y que es ideal que se apliquen desde que iniciamos el desarrollo, con el fin de ahorrarnos dolores de cabeza a futuro.
Existen muchos mas que se implementan del lado del servidor, pero eso es dependiente de cada tecnología, así que solo he citado aquellos que son comunes para todas.
No hay comentarios:
Publicar un comentario