Cómo corregir los tiempos de carga lentos de una página web en wordpress

Lunes, 24 Agosto 2020 20:29

El desempeño de un sitio web es un elemento clave en su diseño de experiencia de usuario, pero su medición y optimización depende de muchos factores. Repasamos los principales indicadores Lighthouse sobre un caso de estudio en wordpress.

Valora Este Artículo!
(1 Voto)
LightHouse logotipo

Lighthouse es una herramienta gratuíta de auditoría de páginas web que ayuda a los desarrolladores a mejorar la experiencia del usuario de los sitios web a través de indicadores de oportunidades y diagnósticos de rendimiento. Está disponible en Chrome DevTools, npm (como módulo de nodo y CLI) o como extensión del navegador en Chrome y Firefox. Trabaja con varios servicios de Google, incluidos web.dev/measure y PageSpeed Insights, y se ha convertido en un referente en el anáisis de rendimiento de sitio entre la comunidad de desarrolladores.

1. Cómo Instalar Lighthouse

A la hora de utilizar LightHouse tienes varias opciones, ya seas usuario avanzado o un novato. Todas son súper simples:

  1. Utilizar la funcionalidad incorporada en las herramientas para desarrolladores de Chrome
  2. Descargar la extensión de Chrome (Aunque puedes lograr lo mismo sin la instalación utilizando herramientas de desarrollo).
  3. Instalar y ejecutar la herramienta de línea de comandos de Node (Esto te permitiría extender la automatización ejecutando pruebas de Lighthouse mediante programación con Node).

Si está usando las opciones 1 o 2, abra una nueva ventana en modo incógnito con todas las extensiones deshabilitadas. Las extensiones activas sesgarán sus resultados. Desea medir el rendimiento frente a una nueva experiencia de usuario sin ningún activo almacenado en caché.

1.1. Ejecutar Lighthouse en Chrome DevTools

Lighthouse alimenta el panel Auditorías de las herramientas de desarrollador de Chrome (DevTools). Para ejecutar un informe:

  1. Descarga Google Chrome para escritorio
  2. En Google Chrome, vaya a la URL que desea auditar. Puede auditar cualquier URL en la web.
  3. Abra Chrome DevTools
  4. Haga clic en la pestaña Auditorías
  5. Pulsa en Realizar una auditoría. DevTools le muestra una lista de categorías de auditoría. Déjalos todos habilitados
  6. Pulsa en Ejecutar auditoría . Después de 30 a 60 segundos, Lighthouse le proporciona un informe en la página.
Auditorías de Lighthouse con google chrome

1.2. Instalar y ejecutar Lighthouse con Node

Para instalar el módulo Node:

  1. Descarga Google Chrome para escritorio
  2. Instale la versión actual de Soporte a largo plazo de Node
  3. Instala Lighthouse. La declaración -g lo instala como un módulo global

npm install -g lighthouse

Para ejecutar una auditoría:

lighthouse

Para ver todas las opciones:

lighthouse --help

Luego has de ejecutar el módulo mediante programación

Revisa este ejemplo de Uso mediante programación para comprender emjor cómo ejecutar Lighthouse mediante programación, como un módulo de nodo.

1.3. Utilizar Ligthouse como extensión de Chrome

Para instalar la extensión:

  1. Descarga Google Chrome para escritorio
  2. Instale la extensión Lighthouse Chrome desde Chrome Webstore

Para ejecutar una auditoría:

  1. En Chrome, vaya a la página que desea auditar.
  2. Pulsa el icono del Faro. Debería estar junto a la barra de direcciones de Chrome. De lo contrario, abre el menú principal de Chrome y accede a él en la parte superior del menú. Después de pulsar, el menú de Lighthouse se expande.
Reportes Ligthouse extensión de crhome

2. ¿Qué métricas analiza Google Lighthouse?

Hay entorno a 75 métricas que prueba, los resultados están ponderados y se muestra un valor global sobre una escala de colores. Algunos de los siguientes datos son de especial interés para propietarios de un sitios, analistas de SEO o webmasters.

Reporte de lighthouse

2.1. Rendimiento

Tiempo de interacción, latencia, índice de velocidad, optimización de recursos, TTFB, entrega de activos, tiempo de ejecución de scripts, tamaño de DOM, etc.

2.2. SEO

Compatible con dispositivos móviles, meta, rastreo, canónico, estructura, etc.
Mejores prácticas: optimización de imágenes, bibliotecas JS, registro de errores del navegador, acceso a través de HTTPS, vulnerabilidades conocidas de JS, etc.

2.3. Accesibilidad

Elementos de la página, idioma, atributos ARIA, etc.

2.4. PWA (aplicación web progresiva)

Redirige HTTP a HTTPS, código de respuesta correcto, carga rápida en 3G, pantalla de inicio, ventana gráfica, etc.

3. Rendimiento. Velocidad de carga de una página web

El rendimiento es dinero. Si tu web carga lento te costará dinero. Un tiempo carga de página de 7 segundos significa una pérdida de sesión del 26 por ciento.

En la versión 6, la puntuación de rendimiento (performance) de Lighthouse se compone de 6 métricas ponderadas. Aquí están en orden, ordenados por su impacto en la puntuación general.

Auditoría Peso
Primera impresión de contenido 15%
Índice de velocidad 15%
Impresión de contenido más grande 25%
Tiempo para interactuar 15%
Tiempo total de bloqueo 25%
Cambio de diseño acumulativo 5%
Rendimiento. Velocidad de carga de una página web
Metricas de Ligthouse para determinar el Rendimiento (performance) de una página web

3.1. Primera Impresión de contenido

FCP mide cuánto tiempo tarda el navegador en representar en pantalla la primera parte del contenido DOM después de que un usuario navega a su página. Las imágenes, canvas, los elementos no blancos y los SVG de una página se consideran contenido DOM. Por el contrario no se incluye nada dentro de un iframe .

3.2. Índice de velocidad

El índice de velocidad mide qué tan rápido se muestra visualmente el contenido durante la carga de la página. Lighthouse primero captura un video de la carga de la página en el navegador y calcula la progresión visual entre cuadros. Lighthouse luego usa el módulo Speedline Node.js para generar la puntuación del índice de velocidad.

3.3. Impresión del contenido más grande (LCP)

La métrica de pintura con contenido más grande (LCP) informa el tiempo de renderizado de la imagen o el bloque de texto más grande visible dentro de la ventana gráfica.

3.3.1. ¿Qué es una buena puntuación LCP?

Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por que la impresión en pantalla del contenido más grande se produzca dentro de los primeros 2,5 segundos desde que la página comienza a cargarse. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 de cargas de página, segmentado en dispositivos móviles y de escritorio.

3.4. Tiempo para interactuar

TTI mide el tiempo que tarda una página en volverse completamente interactiva. Una página se considera completamente interactiva cuando:

  • La página muestra contenido útil, que se mide con la Primera pintura con contenido
  • Los controladores de eventos están registrados para la mayoría de los elementos visibles de la página
  • La página responde a las interacciones del usuario en 50 milisegundos.

3.5. Tiempo total de bloqueo

TBT mide la cantidad total de tiempo que se bloquea una página para que no responda a la entrada del usuario, como los clics del mouse, los toques de la pantalla o las pulsaciones del teclado. La suma se calcula sumando la parte de bloqueo de todas las tareas largas entre First Contentful Paint y Time to Interactive . Cualquier tarea que se ejecute durante más de 50 ms es una tarea larga. La cantidad de tiempo después de 50 ms es la parte de bloqueo. Por ejemplo, si Lighthouse detecta una tarea de 70 ms de duración, la porción de bloqueo sería de 20 ms.

3.6. Cambio de diseño acumulativo (CLS)

CLS mide la suma total de todas las puntuaciones de cambio de diseño individuales para cada cambio de diseño inesperado que se produce durante toda la vida útil de la página.
Se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente.

El cambio de diseño acumulativo (CLS) es una métrica importante centrada en el usuario para medir la estabilidad visual porque ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios de diseño inesperados: un CLS bajo ayuda a garantizar que la página sea agradable .

Si este artículo te pareció interesante, compártelo en las redes sociales!

   

Artículos relacionados:

Logotipo y diseño web freelance para empresa de servicios en la nube
L. Javier Gil

Diseño de logotipo y página web para empresa de Villavicencio

Logotipo y diseño web freelance para empresa de servicios en la nube
Los tres mejores plugins de optimización web para Wordpress en este 2020
L. Javier Gil

Aunque ya uses un tema específico de Wordpress con algunas opciones de optimización web, estos 3 plugins son los mejores que he encontrado para hacer que tu página web cargue como un relámpago [Enlaces de descarga]

Los tres mejores plugins de optimización web para Wordpress en este 2020
Diseño web freelance para asociación de fotógrafos
L. Javier Gil

Website de la Asociación de Fotografía Cinematográfica de Colombia

Diseño web freelance para asociación de fotógrafos
Página web corporativa para empresa colombiana
L. Javier Gil

Desarrollo web en Wordpress sobre Astra Theme

Página web corporativa para empresa colombiana
Wordpress Astra theme para web de formación online
L. Javier Gil

Recientemente trabajé en el desarrollo de una página que ofrece asistencia en servicios online de refuerzo escolar, acompañamiento de tareas, clases de inglés, español, filosofía, comprensión de lectura y corrección de estilo de tesis de grado y monografías, para niños, jóvenes y adultos en cualquier etapa de formación académica.

Wordpress Astra theme para web de formación online
L. Javier Gil

Programador web Freelance.
Ingeniero en Telecomunicaciones.
Comparto curiosidades y noticias del mundo digital desde el corazón de Chapinero, en la lluviosa Bogotá.
Blog de Este Gráfico

https://www.estegrafico.com