Método de análisis y solución de problemas de velocidad

Descargar archivo de vídeo

👆👆👆👆👆👆👆👆👆

💾 DESCARGA ESTE VIDEO PARA TU USO PERSONAL AQUÍ

¿Qué puedes hacer con este video? Almacenarlo como material de consulta futura exclusivamente para tu uso personal.

¿Qué NO puedes hacer?Publicarlo en ningún medio, formato ni plataforma, comercializarlo, distribuirlo ni alterarlo en forma alguna.

Vamos a usar Lighthouse como herramienta de medición. Para ello, usaremos dos aplicaciones:

  • PageSpeed Insight

  • Google Chrome WebDev


Mediremos solo para MÓVILES. Esa será nuestra prioridad. Una vez tengamos nuestro sitio optimizado en móviles, mediremos para desktop, y ahí podremos agregar otra herramienta como GT Metrix. Pero la prioridad siempre será móviles primero.


No vamos a mirar el puntaje. Nos concentraremos solo en las oportunidades y diagnósticos. El puntaje solo lo miraremos una vez hayamos corregido la mayoría de advertencias.



Priorizaremos las oportunidades y diagnósticos en rojo, para llevarlos a amarillo. Luego, nos concentraremos en llevar de amarillo a verde todo lo que más podamos. 

Para ello, haremos uso de varias alternativas:

  • WP Rocket

  • Plugins adicionales

  • Corrección de problemas de infraestructura (servidor o dominio)

  • Acciones manuales

  • Configuración de la plantilla

WP Rocket: el papá de los pollitos

Comprar ahoraSaber más

Bienvenida

  • Instrucciones de acceso (Enlaces a Zoom)
  • Prerrequisitos
  • Reglas
  • Temario

Primeros pasos

  • WP Rocket: planes y precios
  • Laboratorio #1 - Plantilla Neve + Elementor
  • Método de análisis y solución de problemas de velocidad
  • Problemas en Imágenes - Cómo corregir (Ejemplo 1)
  • Problemas con Tipografía - Cómo corregir (Ejemplo 2).mp4
  • Instalación
  • Bajar instalador de WP Rocket (exclusivo para patronos)
  • Actualización
  • Tarea #1

Caché

  • Caché y Varnish
  • Laboratorio #2 - Plantilla Astra + Elementor
  • Verificación de la caché
  • Vida útil de la caché
  • Borrar manualmente la caché
  • Borrar automáticamente la caché
  • Almacenamiento en caché móvil
  • Caché de usuario
  • Tarea #2

Precarga

  • Cómo se precarga la caché
  • Precargar enlaces
  • Precargar fuentes
  • Precarga de peticiones de DNS

Optimización de CSS

  • Los recursos en una página web
  • Cómo evaluar los recursos web
  • Minimizar CSS y combinar CSS
  • CSS y JS no utilizado
  • Limpieza de activos
  • Eliminar CSS no utilizado
  • Cargar CSS de forma asíncrona
  • Laboratorio #3

Optimización de JS

  • Minimizar y agrupar JS
  • Cargar JS diferido
  • Excluir JS de carga diferida
  • Retrasar ejecución de JS

Base de datos

  • Optimización de base de datos

Heartbeat y Tools

  • Heartbeat
  • Herramientas

Medios

  • Agregar dimensiones de imagen
  • Optimización de emoji

Lazy Load

  • Lazy Load para imágenes
  • Imágenes de fondo en LazyLoad
  • Efecto Fade In en Lazy Load
  • Videos y iframes con Lazy Load

CDN

  • CDN
  • Tarea Final