El diseño web toma un nuevo significado cuando hablamos de rendimiento
Al diseñar una página web las primeras técnicas que nos vienen a la cabeza son la concatenación, la minificación, cache o compresión mediante gzip para que la página web pueda cargar antes y así proporcionar mejor experiencia al usuario.
Un correcto desarrollo web es crucial en esta fase, dado que si la página web es lenta o tarda en cargar será penalizada por los buscadores. Además un usuario que navegue por una página web que no encuentra ágil pronto se cansará y terminará abandonándola.
Antes de seguir adelante encontrarás una pequeña definición de estas famosas técnicas para mejorar el tiempo de carga de nuestras paginas webs.
Minificación (Minify): Se trata de conseguir archivos de código lo menos pesados posible. Para ello se pueden eliminar todos los espacios en blanco y las lineas vacías e incluso cambiar nombres de las variables. Siempre se debe respetar la funcionalidad del código. Está técnica es muy usada en el diseño web. Encontrarás multiples herramientas que te permitirán minificar tu código si buscas en Google.
Unos ejemplos:
Concatenación (Concatenate): Se trata de unir los archivos del mismo tipo para reducir el tiempo de carga y las solicitudes al servidor. si tenemos 4 archivos CSS diferentes, al concatenarlos solo tendremos uno, mejorando el rendimiento de la página.
Cache: Es una memoria en la que se guardan archivos que se usan a menudo para su posterior uso, ahorrando tiempo de carga en posteriores usos.
Una vez que tenemos claros estos términos podemos avanzar con los siguientes:
Prefeching: otra técnica que nos puede ser de gran utilidad para mejorar el tiempo de carga del diseño web de nuestra página.
Se trata de especificar al navegador que elementos del diseño web vamos a necesitar para ir cargándolos antes.
Pueden ser elementos en la página web actual, o en elementos en páginas web en las que estamos seguros que le usuario visualizará.
Como desarrolladores web, conocemos nuestras páginas mejor que el navegador por los que podemos usar esta información para informar al navegador de cuales son los elementos más importantes que debe pre-cargar.
DNS PREFECHING
De esta forma se notifica al cliente que recursos vamos a utilizar más tarde, así el navegador puede resolver los DNS de una forma mucho más eficaz. DNS Prefeching es ideal para notificar al navegador cuando estamos usando recursos de terceros (alojados en otros servidores). Indicando su uso en el <head>en el navegador buscará el recurso unas décimas de segundo antes de llegar a necesitarlo. Por lo que el diseño web se mostrará correctamente sin necesidad de cargar todo de golpe.
En el <head>de nuestra página deberos insertar el siguiente código HTML:
<link rel="dns-prefetch" href="//www.domain1.com">
Puede parecer una diferencia mínima pero es una práctica muy útil y usada.
PREFECHING
Si sabemos que un elemento va a ser usado con total seguridad, ¿por qué no cargarlo antes para no hacer esperar al usuario?
Al contrario que el DNS PREFECHIG, en este caso estaremos guardando los elementos en el cache de nuestro navegador.
Se trata de almacenar con anterioridad una imagen, un script, o cualquier elemento que el navegador sea capaz de guardar en su cache para poder ofrecérselo al usuario sin esperar tiempos de descarga. Una opción parecida al DNS PREFECHING que sentará muy bien a nuestro diseño web.
Para almacenar un documento en el cache escribirimos esta linea de HTML en el <head>:
<!-- pagina entera --> <link rel="prefetch" href="https://exponencial.es" /> <!-- solo un documento --> <link rel="prefetch" href="https://exponencial.es/documento-pesado.pdf" />
Otra técnica similar es Subresources, muy similar a PREFECHIG.
Si queremos dar más prioridad a nuestros elementos que con el PREFECHIG podemos usar el siguiente código:
La única diferencia entre PREFECHING y SUBRESOURCE es la prioridad, siendo el primero de baja prioridad y el segundo de alta.
De esta forma si el elemento es requerido para la página actual o lo antes posible usaremos SUBRESOURCE, las demás veces FECHING.
PRERENDERING PAGES
De esta forma cargaremos todos los elementos de una página web en concreto.
Esta técnica es como abrir una pagina en una pestaña escondida del navegador, todas los recursos son descargados, el DOM creado, la pagina renderizada, el JAVASCRIPT ejecutado… El diseño web no se mostrará, pero si que quedará almacenado para cuando sea necesario en el cache de nuestro navegador.
De esta forma cuando el usuario quiere acceder a esta página, esta es mostrada de forma casi instantánea. Google a usado esta técnica durante años (Instant Pages).
Como hasta ahora, solo tendremos que colocar el siguiente c´digo de ejemplo en nuestro <head>
<link rel="prerender" href="https://exponencial.es" />
Como conclusión global para todas las técnicas de pre-carga, predecir las acciones que van a realizar los usuarios puede ser complicado y es necesario muchas pruebas y planificación. Puede parecer una tarea tediosa, pero el diseño web necesita este estudio porque los beneficios de rendimiento realmente merecen la pena.
