Tabla de Contenidos
Es importante medir la velocidad de la página mediante la depuración de un sitio web lento. Todos los navegadores Chrome tienen herramientas integradas para ayudar a solucionar problemas por los que una página es lenta y no funciona tan bien como debería.
Lo mejor de los navegadores basados en Chrome y Firefox es que se pueden ampliar con herramientas que hacen que la resolución de problemas en los sitios sea rápida y sencilla.
Tanto Chrome como Firefox admiten complementos de navegador. Firefox los llama complementos y en el ecosistema de Chrome, se llaman extensiones.
Las extensiones y los complementos del navegador amplían la funcionalidad de los navegadores en formas que se adaptan a las necesidades del usuario.
Por qué usar extensiones del navegador para analizar la velocidad de la página
Un depurador basado en navegador como Chrome Dev Tools es una colección de herramientas, como una caja de herramientas. Si solo desea una herramienta, no tiene suerte porque el navegador ofrece toda la colección a la vez.
Eso significa que un editor primero debe aprender a navegar a través de todos los diferentes menús, pestañas y pantallas, muchos de los cuales ofrecen herramientas que no son necesariamente la descripción general que puede desear.
Y es por eso que las extensiones son una alternativa válida al uso de las herramientas de solución de problemas integradas en un navegador.
Simplemente puede elegir la herramienta exacta que desea y omitir la curva de aprendizaje para obtener las métricas que realmente necesita en el momento en que las necesita.
2 Extensión Google Lighthouse para Chrome y Firefox
Lighthouse es una gran herramienta para obtener una descripción general fácil de entender del rendimiento de la página web con la opción de profundizar en los comentarios de diagnóstico y los consejos para hacer una página web más rápida.
Hay una página web independiente de Google Lighthouse, pero debe copiar la URL de la página para la que desea datos y luego navegar a la herramienta Lighthouse.
Con la extensión Lighthouse, toda la potencia de la herramienta está disponible con solo hacer clic en un botón. Todo lo que tiene que hacer es hacer clic en el icono de la extensión y luego en el botón azul Generar informe.
La extensión Lighthouse generará una nueva pestaña del navegador y generará el informe completo de Lighthouse.
Captura de pantalla de Google Lighthouse Browser Extension, marzo de 2022La nueva página web mostrará una pantalla de espera mientras Lighthouse genera el informe.
Captura de pantalla de la pantalla de espera de Google Lighthouse, marzo de 2022La parte superior de la página de Lighthouse tiene las puntuaciones numéricas de la página web.
Captura de pantalla de Google Lighthouse Overview, marzo de 2022Y, si se desplaza hacia abajo, puede ver los datos detallados que ayudan a diagnosticar y solucionar problemas.
Todo lo que tiene que hacer es seguir los enlaces para obtener más información sobre qué es un problema y sugerencias sobre cómo solucionar esos problemas.
Captura de pantalla del informe de página completa de Google Lighthouse, marzo de 2022Google ha desarrollado versiones de Lighthouse para Chrome y Firefox.
Extensión del navegador de tiempo de carga
La extensión del navegador Load Time para Chrome y también para Firefox proporciona una métrica de carga de página muy precisa porque utiliza la API de tiempo de navegación, que se describe en la página del desarrollador de Mozilla para la API de tiempo de navegación.
La extensión del navegador se instaló más de 100 000 veces y se calificó 258 veces. Una vez instalado, todo lo que tiene que hacer es visitar una página y mirar el ícono de tiempo de carga de la página en la esquina superior derecha del navegador.
El icono informa automáticamente cuánto tiempo se tardó en descargar la página web.
Icono de extensión del navegador de tiempo de cargaAl hacer clic en el ícono, se muestran más detalles sobre una amplia gama de factores que cuentan una historia más completa sobre por qué la página se descargó tan rápido o tan lento como lo hizo.
Captura de pantalla de los detalles de la extensión del navegador del tiempo de carga de la página, marzo de 2022Como puede ver en la ilustración anterior, la extensión Load Time Browser revela una asombrosa cantidad de información organizada en un formato fácil de entender.
El informe detallado muestra los retrasos causados por una redirección, el tiempo de respuesta de DNS y el tiempo de conexión. El informe también calcula el tiempo de respuesta desde el inicio de la solicitud de la página web y el tiempo que transcurre hasta su finalización.
Hay medidas precisas de cuándo se ejecutan los scripts, se carga el contenido y cuánto tiempo tardó la página en cargarse finalmente. Es una cantidad extraordinaria de información que se muestra de una manera fácil de entender.
Aquí está la extensión de tiempo de carga de página para Chrome y el complemento de temporizador de carga para Firefox.
4 Analizador de rendimiento
La extensión Performance-Analyzer para Chrome Browser es como la extensión Page Load Time Browser, solo que va más allá en lo que cubre. Utiliza las API de recursos, navegación y sincronización del usuario
Esta extensión genera gráficos circulares coloridos para proporcionar una representación visual de varias métricas, como solicitudes por dominio, y proporciona la información de la API de tiempo de navegación en un gráfico de cascada conveniente que visualiza el tiempo de procesamiento.
Según la descripción:
“Performance-Analyzer (también conocido como Performance-Analyzer) ayuda a analizar la página actual a través de las API de Recursos, Navegación y Tiempo de usuario: vea las solicitudes por tipo, dominio, tiempos de carga, marcas y más, al instante”.
5 Inspector de tamaño
La extensión Size Inspector para Chrome es especialmente útil porque proporciona una instantánea de una variedad de métricas, incluida la cantidad de solicitudes de fuentes que se realizaron y cuál es el tamaño sin comprimir de esa descarga.
Lo que hace que esta extensión se destaque es la interfaz fácil de entender más el tamaño en bytes de los siguientes recursos de la página web:
HTML JS CSS Imágenes Ajax Fuentes
La extensión del navegador Chrome también proporciona tiempos en segundos para la descarga para obtener una descripción general rápida y práctica de las métricas de velocidad de la página al alcance de su mano allí mismo en la página.
6 Checkbot: probador de SEO, velocidad web y seguridad
Esta extensión agrega múltiples herramientas relacionadas con SEO.
Lo interesante de esta extensión es que proporciona datos que pueden ayudar a comprender mejor por qué una página web tarda tanto en descargarse.
El complemento informa sobre las siguientes variables:
Minimización de archivos. Información de compresión de red. Almacenamiento en caché de archivos. Renderizar bloqueando CSS y JavaScript. CSS y JavaScript duplicados. CSS y JavaScript en línea excesivos. Redirecciones y también redirecciones encadenadas.
Todos los puntos de datos anteriores son muy útiles para comprender los posibles problemas que deben solucionarse.
Como beneficio adicional, la extensión Chrome Checkbot: SEO, Web Speed & Security Tester también ofrece varios datos relacionados con SEO, y uno de mis favoritos son los datos de encabezados de seguridad que pueden indicarle si un sitio es inseguro debido a la falta de encabezados de seguridad. .
Extensiones de navegador de velocidad
Las extensiones de navegador de velocidad son extremadamente útiles para editores y desarrolladores. Pueden ayudarlo a identificar problemas rápidamente en el momento sin tener que abrir otra página web y luego pegar una URL en otro sitio web.
“Los diagnósticos de velocidad se pueden hacer allí mismo mientras estás en el sitio, automáticamente o con el clic de un botón.
