Optimiza tu página web WordPress.
Cómo corregir los tiempos de carga lentos de una página web en WordPress Programador web Freelance

Guía práctica de Optimización WordPress. Trucos, conceptos y herramientas.

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.

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

Para analizar las principales métricas de rendimiento (velocidad de carga y comportamiento) de un website en Wordpress yo siempre comienzo por estudiar cómo entrega los recursos al navegador a través de la aplicación LightHouse.

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ás usando las opciones 1 o 2, abra una nueva ventana en modo incógnito con todas las extensiones deshabilitadas. Las extensiones activas sesgarán tus resultados. Deseas 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 tu 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 .

Continúa leyendo --> Mejora tu FCP (First Contentful Paint) por debajo de un segundo!

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 asegurarte de que estás alcanzando este objetivo para la mayoría de los usuarios, un buen umbral para medir es el percentil 75 de cargas de página, segmentado en dispositivos móviles y de escritorio.

Continúa leyendo --> Mejora los tiempos de carga de tu Largest Contentful Paint (LCP)

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 .

4. Causas básicas del funcionamento lento de una página web en Wordpress

Antes de entrar en detalles, echemos un vistazo rápido a por qué su sitio de Wordpress es lento. Comprender qué está causando la carga lenta o el tiempo de respuesta deficiente, nos ayudará a deducir los pasos que se pueden seguir para solucionarlo.

Las razones más comunes por las que tu sitio de Wordpress tarda en cargar son:

  1. Pocos recursos de servidor, alojamiento lento o de mala calidad que no coincide con tu nivel de tráfico.
  2. Tu web no se beneficia del almacenamiento en caché.
  3. Si tu web tiene mucho tráfico y no has configurado corectamente una red de distribución de contenido (CDN) para reducir la carga en el alojamiento.
  4. No se ha realizado ninguna compresión ni optimización de imágenes.
  5. Usas una plantilla predefinida con muchas hojas de estilo y scripts de complementos innecesarios.
  6. No estás utilizando HTTPS ni aprovechas el protocolo HTTP2.
  7. No precargas solicitudes de fuentes ni te aprovechas de la carga perezosa de imágenes.
  8. La versión de PHP que está utilizando es antigua o no está actualizada.
  9. Tienes plugins lentos o desactualizados.

4.1. Alojamiento lento

Otro culpable común de los sitios lentos de WordPress son los planes de alojamiento baratos. Si bien mantener los costos bajos no es un mal objetivo, es importante tener en cuenta que a menudo obtiene lo que paga.

El alojamiento es la base de tu web WordPress y afecta todo, desde el tiempo de actividad hasta la seguridad. Por lo tanto, no se puede subestimar la importancia de elegir un proveedor de calidad.

Un plan de alojamiento económico puede haber sido una opción aceptable inicialmente. Sin embargo, a medida que tu sitio crece y aumentan sus necesidades de tráfico y almacenamiento, es posible que superes tu plan actual y necesites actualizarlo.

Los planes de alojamiento compartido, en particular, pueden aglomerar los recursos del servidor y dar como resultado tiempos de respuesta más lentos.

Cambiar a un proveedor y plan de alojamiento de WordPress que se adapte a tus necesidades puede mejorar significativamente el rendimiento de su sitio

4.2. Almacenamiento en caché

Un componente clave para que Wordpress se ejecute rápidamente es utilizar el almacenamiento en caché. El almacenamiento en caché crea previamente cada página en tu sitio para que todo el pensamiento y el procesamiento necesarios para entregar la página al visitante se realice antes de que soliciten la página de tu servidor web.

WP Rocket es el complemento de almacenamiento en caché más extendido por los usuarios con menos conocimientos de programación. Es fácil de usar y le dará un excelente impulso en el rendimiento si sabes configurarlo correctamente. Es un complemento de pago (barato) y probablemente el complemento de almacenamiento en caché más fácil de usar en el mercado.

Otra opción que personalmente me gusta bastante es ASSETS CLEANUP PRO que nos permite optimizar el sitio web, comprimiendo y minificando la entrega de recursos, no cargar archivos inútiles, configurar async, cargar archivos JavaScript de forma diferida, limpiar código HTM)... así como trabajar la caché también.

4.3. Configura un CDN

Las redes de entrega de contenido (CDN) son una solución que puede mejorar instantáneamente la velocidad de carga de tu página web. Desafortunadamente, debido a su complejidad percibida, muchas personas no tienen idea de por dónde empezar. Al comprender los conceptos básicos de las CDN y aprender a agregarlas a tu página web WordPress, puede beneficiarse de las mejoras de velocidad que las acompañan

Continúa leyendo --> CloudFlare y WordPress ¿por qué deberíamos usarlo en nuestro sitio web?

4.4. Optimiza tus imágenes

Seguro que deseas que tu sitio de WordPress tenga muchas imágenes de alta calidad. Sin embargo, esto implica agregar muchos archivos 'pesados' a tu sitio y servidor. Los tamaños de archivo más grandes se traducen en tiempos de carga más lentos, lo que puede convertirse en un problema si usa muchos medios.

Afortunadamente, puedes utilizar la compresión sin pérdida para optimizar tus imágenes y mejorar la velocidad del sitio. La compresión sin pérdida te permite crear archivos más pequeños, sin reducir notablemente la calidad de tus imágenes. Cuando se hace correctamente, la compresión de imágenes puede reducir hasta un segundo el tiempo de carga de la página.

Continúa leyendo --> 5 Herramientas alucinantes para comprimir tus imágenes Gratis!

4.5. Plantillas predefinidas

El tema es lo más importante que necesitarás para construir un sitio de WordPress, estructurarlo y presentar el contenido, por lo que también debes considerar el factor de rendimiento al seleccionar el tema que te gusta. Un tema mal codificado puede hacer que tu sitio sea patéticamente lento, mientras que un tema con un código altamente optimizado cargará de forma casi instantánea en tu teléfono celular.

Recientemente escribí un artículo donde describo las causas básicas de la carga lenta de una página web, donde explico cómo podemos optimizar la entrega de recursos para conseguir mejor rendimiento, performance, o velocidad de carga tanto en escritorio como en mobile.

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

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á, o desde un rinconcito de la vieja España llamado Benavente.
Blog de Este Gráfico

https://www.estegrafico.com

Trabajemos juntos; comienza tu proyecto web profesional.

Rellena este pequeño formulario y me pondré en contacto contigo con la mayor brevedad posible.