Tutorial WPO: Optimizando el Front-end I

front-end optimization

Esta entrada es la segunda entrega de la saga de tutoriales sobre WPO (optimización del tiempo de carga de la página web).

Plan de vuelo:

En esta ocasión vamos a hablar de optimización Front End, pero tranquilos, empezaremos desde el principio.

¿Qué es el front-end?

Como en la wikipedia está bastante bien explicado lo que es el front-end (y el back-end) me limito a citar lo que allí se menciona:

En diseño de software el front-end es la parte del software que interactúa con el o los usuarios y el back-end es la parte que procesa la entrada desde el front-end. La separación del sistema en "front ends" y "back ends" es un tipo de abstracción que ayuda a mantener las diferentes partes del sistema separadas. La idea general es que el front-end sea el responsable de recolectar los datos de entrada del usuario, que pueden ser de muchas y variadas formas, y procesarlas de una manera conforme a la especificación que el back-end pueda usar. La conexión del front-end y el back-end es un tipo de interfaz.

En resumen, el front-end de un sitio web no es más que la parte que el usuario maneja. Suele estar desarrollado con tecnologías como HTML5, CSS3 y Javascript (entre otros) y su misión es enviarle datos al back-end para que éste los procese y muestre resultados o realice ciertas acciones.

Cómo analizar nuestro front-end

Lógicamente, existen herramientas para saber qué cosas tenemos que optimizar en nuestro front-end, entre las que me gusta destacar:

También hay otras herramientas (Pingdom, Loads.in), pero estas son las que más me gustan.

Conociendo las herramientas, ¿cómo funcionan?

Básicamente todas realizan un escaneo del sitio y buscan elementos o acciones a optimizar. Finalmente, todas muestran un resumen de qué cosas se pueden optimizar y cuánto. Además, algunas de ellas (Google page speed, GTMetrix...) dan una prioridad a cada optimización, lo que facilita saber por dónde empezar.

Ejemplo de uso de GTMetrix

Tras realizar un test sobre el sitio de Katharsix, obtenemos la siguiente página:
ejemplo gtmetrix

Si lo desmenuzamos un poco, podemos ver que nos da un resumen general con una calificación:
ejemplo gtmetrix

Y una lista de cosas a mejorar:
ejemplo GTMetrix

También nos permite visualizar un timeline de carga del sitio web que nos muestra íntegramente cómo se comporta la carga de nuestro sitio web. Esta herramienta es muy útil para ver qué está obstaculizando la carga y poner remedio rápidamente:
ejemplo gtmetrix

Avance de la próxima entrega
En el siguiente capítulo de este tutorial de WPO hablaré de qué cosas hemos de cuidar en nuestro Front-end para hacerlo más rápido, como por ejemplo:

Mira el resto del tutorial:
Capítulo anterior: WPO, ¿Qué es y por qué utilizarlo?
Capítulo siguiente: Tutorial WPO: Optimizando el Front-end II (Próximamente...)

Derechos de imagen

Un comentario en “Tutorial WPO: Optimizando el Front-end I

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información