Cómo medir el rendimiento del sitio web de front-end

Hablar del proceso de optimización es casi inexistente entre los diseñadores web de la nueva era. Incluso muchos diseñadores web que han estado en el negocio una década o más no entienden completamente la importancia de la optimización del sitio.

Después de un período prolongado de tiempo, un sitio web comenzará a atascarse. Los archivos de la interfaz pueden contener bloques de código exagerados o bits ocultos y bloqueados. Esto se ve con más frecuencia en archivos o imágenes de JavaScript. Puede ser importante crear un sitio web agradable para la experiencia del usuario, pero sin un sitio web optimizado, el diseño ni siquiera tendrá la oportunidad de cargarse por completo en usuarios impacientes.

Los siguientes consejos son para desarrolladores web principiantes e intermedios interesados ​​en optimizando sus paginas Al máximo. Hay muchas técnicas disponibles y cada una se comportará de manera diferente según los problemas que sufra su sitio web. Intente hojear algunas áreas y ver si puede aplicar estas técnicas en sus propias marcas.

Solicitudes HTTP

Cada vez que su sitio web se carga, envía una solicitud HTTP a un servidor remoto. Este tipo de transferencia de datos se llama protocolo de red Se utiliza específicamente para distribuir y almacenar archivos de texto plano. Estos a menudo incluyen su código de interfaz básico, como HTML, CSS y JavaScript.

Una vez que se envíe la solicitud, su navegador analizará cada elemento de la página. Dependiendo del motor de análisis, cada sitio web se cargará de manera diferente y los elementos aparecerán en orden variable según las velocidades de transferencia. Por ejemplo, Internet Explorer renderizará páginas web diferentes a Chrome o Safari, y todas ellas ejecutarán motores de análisis ligeramente diferentes a Firefox u Opera..

Lo que se debe tener en cuenta es cuánto tiempo lleva la solicitud para cada archivo y si esta tendencia se mantiene constantemente. Considere recibir más de 100k o 1 millón de visitantes en un mes. Es tarea del navegador unir cada elemento de la página y cargar archivos externos en la memoria.

A menudo, los factores que mantienen presionada la velocidad optimizada de un sitio web incluyen JavaScript pesado o archivos de imágenes grandes. ¡Con la popularización de Verizon FiOS es común que las velocidades de Internet alcancen los 600 kbps y sigan subiendo! Desafortunadamente, esta no es la norma e incluso con conexiones de alta velocidad es posible experimentar fallas de optimización.

Remedios para el rendimiento del sitio

No estamos solos en el campo del desarrollo web y la optimización de frontend. Para que se complete el trabajo adecuado, se requieren ciertas herramientas para manejar el trabajo.

Google ha lanzado un proyecto titulado Page Speed ​​que se creó para ayudar a los desarrolladores a optimizar sus sitios web y verificar los mejores niveles de rendimiento. Originalmente, el proyecto comenzó como un complemento de código abierto de Firebug y ahora se acepta como referencia de terceros para las pruebas del sitio web.

Otra opción para los usuarios de Firebug es el complemento YSlow de Yahoo! El script analiza cada solicitud de página web y sugiere las formas más comunes de mejorar el rendimiento. Estas sugerencias se basan en el Yahoo! Desarrolladores de recursos para las mejores prácticas de optimización en diseño web..

El programa puede ser un poco abrasivo al principio, ya que contiene mucha información. Simplemente apéguese a lo básico y siguiendo la documentación simple, el proceso debe ser sencillo..

Los desarrolladores siempre están interesados ​​en saltar a un proyecto para descomponer el código, por lo que esto no debería ser una obviedad. Para un poco de ayuda, puedes consultar la guía de ayuda de YSlow..

Tecnicas de velocidad

Existen algunos trucos simples que puede aplicar a su sitio web de forma inmediata para acelerar el rendimiento. La primera y la más sencilla es separar tus archivos CSS y JavaScript..

El código CSS pertenece al encabezado de su documento. Esto es útil porque las propiedades de CSS deben analizarse mientras se carga el DOM. Una vez que un navegador web reconoce sus estilos CSS en el encabezado, esperará para mostrar la página web por completo hasta que se hayan cargado todos los estilos. Además, cualquier imagen utilizada para iconos o diseños de fondo tardará en cargarse y debería hacerlo primero..

Por otro lado, mover todos los archivos JavaScript al pie de página de su sitio puede resolver dramáticamente los tiempos de suspensión. Muchos navegadores bloquean las descargas paralelas, lo que significa que antes de representar la página, el navegador web de un usuario puede detenerse durante 4 segundos para cargar por completo los JS externos incluidos.

Esto no siempre es posible ni siempre es necesario para cada sitio web. Si sus páginas se cargan igual con tiempos de respuesta iguales sin importar las ubicaciones de archivos incluidos, entonces no se moleste en maniobrar ninguna jugada.

El contenido dinámico no se puede cargar hasta que se complete el DOM completo, pero a veces esto devolverá errores. Pruebe CSS / JS incluido para ver si puede devolver algún beneficio de optimización.

Compresión de tamaño de archivo

La compresión de archivos grandes se ha vuelto muy popular. Ahora incluso se puede utilizar en páginas web para reducir los tiempos de carga y mantener los tamaños de archivo muy bajos. Gran parte del trabajo ya se ha realizado y con herramientas como los archivos de tamaño pequeño del compresor YUI es un proceso sin energía.

Hay muchos otros servicios gratuitos en la web para ayudar con esta tarea también.. Minify CSS tiene una interfaz de compresión CSS completa para simplificar el proceso. El mismo sitio web también tiene un compresor de JavaScript personalizado que realiza gran parte de las mismas tareas pero mantiene las secuencias de comandos organizadas.

También puede considerar comprimir las imágenes más grandes en sus páginas web. Esto se puede hacer con cualquier software de edición de fotos, como Adobe Photoshop o GIMP, simplemente volviendo a muestrear la imagen a una resolución más baja. Las imágenes PNG se exportarán en promedio mucho más pequeño que los formatos jpg o TIFF. También hay muchas herramientas en línea como Image Optimizer para ayudar en el proceso de compresión..

Verificación de fuente y métricas

Esta es una rutina que los desarrolladores web no suelen practicar y que puede ofrecer resultados sorprendentes. Al analizar todos los elementos de la página en su sitio web, puede ver cuál tardó más en cargarse y el orden en que se cargó cada pieza..

La herramienta más popular Mozilla Firebug es un complemento para el navegador Firefox. Esta aplicación instala una pequeña barra de herramientas en la parte inferior de su navegador para verificar los tiempos de respuesta, la información del encabezado, los elementos de la página y los scripts para cada sitio web. El script también se ha portado en Firebug Lite como una extensión para Google Chrome.

Apache con mod_pagespeed

No todas las configuraciones ejecutarán un servidor web Apache, por lo que esta opción no siempre está disponible. Este módulo está directamente relacionado con Monitor de velocidad de página de Google mencionado anteriormente. De hecho, el código para mod_pagespeed se basó originalmente en muchas bibliotecas de las bases de datos de Google Code.

Apache permite a los administradores de servidores instalar pequeños paquetes llamados módulos para mejorar el rendimiento de sus servidores. mod_pagespeed Es uno de estos módulos que realiza técnicas de optimización automáticamente en tiempo de ejecución. Hay demasiados procesos para enumerar, aunque algunas de las aplicaciones principales incluyen la compresión HTML / CSS / JS sobre la marcha y el almacenamiento en caché de imágenes..

El proyecto se encuentra actualmente en Google y está abierto a los desarrolladores. Google ha estado trabajando con GoDaddy para implementar mod_pagespeed en todas las cuentas de alojamiento que ejecutan el servidor HTTP Apache.

Aunque muchas otras opciones están disponibles, el trabajo de desarrollo de frontend es una de las más intensas, especialmente considerando la optimización previa para páginas web cruciales. La optimización de los encabezados del sitio y las imágenes grandes puede ser una tarea extremadamente tediosa pero gratificante.

Considere algunas de las técnicas introducidas en este artículo y vea cómo se podrían aplicar en sus proyectos web. A menudo, los desarrolladores no se toman el tiempo suficiente para apreciar su trabajo y limpiar los fragmentos de código antiguos. Si aún estás buscando algunos consejos, deberías leer nuestra guía de optimización web para los punteros sobre el mantenimiento de la interfaz y las mejoras de rendimiento convenientes..