SlideShare una empresa de Scribd logo
Casos de éxito en Negocios Online
Estrategias WPO que funcionan
Javier Martínez Seco
Director de Ecode
Javier Martínez
Quién soy
Ingeniero Informático especializado en Tecnologías Web
Mi especialidad
Desarrollo web a medida, SEO técnico y WPO
Mi experiencia
+15 años creando y mejorando negocios online
Estrategias WPO que funcionan - @JavierMrt
Javier Martínez
Quién soy
Ingeniero Informático especializado en Tecnologías Web
Mi especialidad
Desarrollo web a medida, SEO técnico y WPO
Mi experiencia
+15 años creando y mejorando negocios online
Estrategias WPO que funcionan - @JavierMrt
+1000 sitios web y
negocios online
Auditorías, consultorías, formación a equipos de desarrollo y desarrollo a medida
Estrategias WPO que funcionan - @JavierMrt
Sitios web que funcionan
bien desde el principio
Hay una enorme diferencia entre conseguir que una web funcione
y conseguir que funcione BIEN
Estrategias WPO que funcionan - @JavierMrt
Estrategias WPO que funcionan - @JavierMrt
Core Web Vitals
Core Web Vitals - Clinic SEO online marzo 2021
1 segundo de LCP en usuarios reales (CrUX)
Estrategias WPO que funcionan - @JavierMrt
seonthebeach.es
1,1 segundos de LCP
98 ms de INP
Estrategias WPO que funcionan - @JavierMrt
inversionracional.com
2 segundos de LCP (más de 230 países)
80 ms de INP
Estrategias WPO que funcionan - @JavierMrt
triptahiti.com
0,9 segundos de LCP
79 ms de INP
Estrategias WPO que funcionan - @JavierMrt
amoregastrobar.com
¿Qué necesito tener en cuenta
para conseguir calidad?
Estrategias de carga y rendimiento óptimos
Estrategias WPO que funcionan - @JavierMrt
¿Qué necesita el navegador
para pintar una web?
Estrategias WPO que funcionan - @JavierMrt
Estrategias WPO que funcionan - @JavierMrt
¿Qué necesita el navegador para pintar una web?
1- Descarga del documento HTML
Mapa con el contenido y enlaces a recursos necesarios
Estrategias WPO que funcionan - @JavierMrt
¿Qué necesita el navegador para pintar una web?
2- Descarga del CSS necesario
Todas las reglas de estilo a aplicar en nuestro HTML
Estrategias WPO que funcionan - @JavierMrt
¿Qué necesita el navegador para pintar una web?
3- Comienza a renderizar HTML y CSS
A su vez, seguirá descargando todos los recursos necesarios
(imágenes, tipografías, ficheros JavaScript)
Estrategias WPO que funcionan - @JavierMrt
¿Qué necesita el navegador para pintar una web?
4- Comienza a pintar la web
¿Tiene nuestro navegador los recursos que queremos utilizar above?
- Imágenes
- Tipografías
- Ficheros JavaScript
- ¿etc? 😰
Estrategias WPO que funcionan - @JavierMrt
¿Qué necesita el navegador para pintar una web?
4- Comienza a pintar la web
¿Tiene nuestro navegador los recursos que queremos utilizar above?
- Imágenes
- Tipografías
- Ficheros JavaScript
- ¿etc? 😰
Estrategias de primera
carga óptima
Estrategias WPO que funcionan - @JavierMrt
Objetivos y condiciones
de trabajo y simulación
Estrategias WPO que funcionan - @JavierMrt
Estrategias WPO que funcionan - @JavierMrt
Amor a primera visita
Estrategias WPO que funcionan - @JavierMrt
Velocidad: 200kb / segundo
Tiempo máximo: 1,5 segundos
Estrategias WPO que funcionan - @JavierMrt
1- Descarga del documento HTML
Estrategias de primera carga óptima
Estrategias WPO que funcionan - @JavierMrt
Estrategias de primera carga óptima
Estrategias WPO que funcionan - @JavierMrt
Estrategias de primera carga óptima
Estrategias WPO que funcionan - @JavierMrt
Estrategias de primera carga óptima
Estrategias WPO que funcionan - @JavierMrt
Estrategias de primera carga óptima
Estrategias WPO que funcionan - @JavierMrt
Estrategias de primera carga óptima
¿Preloads?
Estrategias WPO que funcionan - @JavierMrt
Queda renderizar…
Estrategias WPO que funcionan - @JavierMrt
¡Y que vengan los marketers
con sus <script>!
¿Cómo probamos el
rendimiento de una web?
“
Estrategias WPO que funcionan - @JavierMrt
Sin caché de navegador y ajustamos velocidad
Estrategias WPO que funcionan - @JavierMrt
Ajustamos velocidad y CPU para simulaciones
Estrategias WPO que funcionan - @JavierMrt
Extensión Chrome: Web Vitals by Addy Osmani
Estrategias WPO que funcionan - @JavierMrt
La realidad del sector y el
mercado actual
Situación actuales de los negocios online y la oferta
Estrategias WPO que funcionan - @JavierMrt
La realidad del sector online
Estrategias WPO que funcionan - @JavierMrt
La realidad del sector online
Estrategias WPO que funcionan - @JavierMrt
- Se priorizan tecnologías populares que faciliten el trabajo de creación
- Una vez conozco una tecnología, la utilizo en todos mis sitios webs
- Objetivo: adaptar el negocio online a las tecnologías que conozco
¿Quién crea la base técnica
de mi negocio online?
“
Estrategias WPO que funcionan - @JavierMrt
Constructor
web
Marketing
online
Código de
terceros
Señor del
hosting
Estrategias WPO que funcionan - @JavierMrt
¿Quién construye mi sitio web?
¿Qué conseguimos con
estas tecnologías?
“
Estrategias WPO que funcionan - @JavierMrt
Nude Project
Último CSS descargado:
@JavierMrt
Tienda online
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
4,33 s
5,47 s
20,30 s
98
237
13,9 mb
23,23 s
Vicio
Último CSS descargado:
@JavierMrt
Corporativa
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
1,78 s
6,94 s
8,71 s
15
76
21,9 mb
90 s
Crocs
Último CSS descargado:
@JavierMrt
Tienda online
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
3,1 s
3,95 s
22,03 s
63
124
7,9 mb
27,12 s
Arcos
Último CSS descargado:
@JavierMrt
Tienda online
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
2,86 s
3,94 s
18,66 s
60
475
18,7 mb
30,66 s
Real Madrid
Último CSS descargado:
@JavierMrt
Tienda online
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
3,64 s
5,63 s
7,54 s
39
144
10,6 mb
30,75 s
Tomás Postigo
Último CSS descargado:
@JavierMrt
Bodega
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
3,35 s
4,11 s
17 s
82
93
17,5 mb
17,65 s
Pascual
Último CSS descargado:
@JavierMrt
Corporativa
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
3,6 s
9,28 s
9,28 s
112
151
37,8 mb
59,92 s
Disfrutar Barcelona
Último CSS descargado:
@JavierMrt
Restaurante
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
2,5 s
2,06 s
84 s
45
59
29 mb
156 s
Daniel Brian
Último CSS descargado:
@JavierMrt
Agencia
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
1,85 s
2,22 s
5,54 s
32
59
13,5 mb
18,04 s
Kit Digital
Último CSS descargado:
@JavierMrt
Admon.
Inicio de pintura:
Contenido principal:
Peticiones antes de pintar:
Peticiones totales:
Peso total:
Tiempo de carga completa:
2,1 s
9,54 s
9,54 s
251
407
28 mb
12,22 s
Tecnología lenta
=
Tecnología mala
“
Estrategias WPO que funcionan - @JavierMrt
Si tengo algo mal de base,
¿merece la pena el cambio?
Importancia de medir situación actual
Estrategias WPO que funcionan - @JavierMrt
Estrategias WPO que funcionan - @JavierMrt
Repositorio web-vitals
¿Cómo está funcionando nuestra web?
Estrategias WPO que funcionan - @JavierMrt
- Podemos medir TTFB, FCP, LCP, INP y CLS de usuarios reales
- Compatibilidad limitada con navegadores modernos
Completa con Chromium, limitada en Firefox (TTFB, FCP y LCP) y limitada en Safari (TTFB y FCP)
- Datos disponibles en tiempo real sin esperar a terceros
¿Cómo está funcionando nuestra web?
Estrategias WPO que funcionan - @JavierMrt
Estrategias WPO que funcionan - @JavierMrt
- Métricas clave de comportamiento y uso
- Estimaciones y oportunidades de mejora más precisas
- Análisis de embudos de conversión y objetivos del negocio
¿Qué podemos obtener?
LCP nude-project.com
¿Cómo lo hacemos
nosotros hoy en día?
Estrategias WPO que funcionan - @JavierMrt
Estrategias WPO que funcionan - @JavierMrt
Ecoded: Constructor web muy optimizado
SaaS para sitios web y negocios online
Leads, info-producto, corporativas, marca personal, funnels…
Calidad y rendimiento desde el inicio
Imprescindible en los sitios web creados
Puesta en marcha y casos reales
+4 años de desarrollo y puesta en marcha con clientes y partners
+100 sitios web publicados
Caso de éxito
Tienda online a medida
Estrategias WPO que funcionan - @JavierMrt
Facturación anual de +30 millones de euros y +10 millones de carritos de compra totales
+90% sesiones cumplen LCP, INP y CLS
durante toda la sesión
Estrategias WPO que funcionan - @JavierMrt
lacasadelelectrodomestico.com
Estrategias WPO que funcionan - @JavierMrt
LCP INP CLS Evaluación
1,2 s 157 ms 0 Superada
2,3 s 695 ms 0,15 No superada
2,5 s 2.137 ms 0,27 No superada
1,8 s 668 ms 0,34 No superada
1,5 s 240 ms 0 No superada
2,7 s 257 ms 0,07 No superada
2 s 217 ms 0,59 No superada
Resultados disponibles en PageSpeed Insights by Google
Estrategias WPO que funcionan - @JavierMrt
0,1% conversión 1,2% conversión
¡Gracias!
Iñaki, me he dejado
diapositivas para SOB 25

Más contenido relacionado

Similar a Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentación SEonthebeach 2024 - Javier Martínez Seco

SEO para e-commerce
SEO para e-commerceSEO para e-commerce
SEO para e-commerce
Víctor M. Guerrero Azcona
 
Redesmoi dic 5
Redesmoi dic 5Redesmoi dic 5
Redesmoi dic 5
Moises Cielak
 
Estrategias Web del Comunity Manager, #mooc @MiriadaX
Estrategias Web del Comunity Manager, #mooc @MiriadaXEstrategias Web del Comunity Manager, #mooc @MiriadaX
Estrategias Web del Comunity Manager, #mooc @MiriadaX
Rosa Mª González
 
Mejorar WPO Joomla
Mejorar WPO JoomlaMejorar WPO Joomla
Mejorar WPO Joomla
Antonio Torres
 
Ponencia cfe11
Ponencia cfe11Ponencia cfe11
Ponencia cfe11
Cristina AranoApestegui
 
Marketing online para la oficina de farmacia
Marketing online para la oficina de farmaciaMarketing online para la oficina de farmacia
Marketing online para la oficina de farmacia
Marketing Online Valencia
 
Los 10 errores más comunes al desarrollar un proyecto eCommerce
Los 10 errores más comunes al desarrollar un proyecto eCommerceLos 10 errores más comunes al desarrollar un proyecto eCommerce
Los 10 errores más comunes al desarrollar un proyecto eCommerce
Juan Alcántara
 
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
SiteGround España
 
Programa Superior Comercio Electrónico
Programa Superior Comercio ElectrónicoPrograma Superior Comercio Electrónico
Programa Superior Comercio Electrónico
ICEMD
 
Ecommerce y marketing digital
Ecommerce y marketing digitalEcommerce y marketing digital
Ecommerce y marketing digital
IEBS Business School
 
Presupuesto SEO ejemplo - Agencia SEO pencil speech
Presupuesto SEO ejemplo - Agencia SEO pencil speech Presupuesto SEO ejemplo - Agencia SEO pencil speech
Presupuesto SEO ejemplo - Agencia SEO pencil speech
Pencil Speech
 
Mentor Ecommerce B2B Presentación para Webminar
Mentor Ecommerce B2B Presentación para WebminarMentor Ecommerce B2B Presentación para Webminar
Mentor Ecommerce B2B Presentación para Webminar
Jorge Gonzalez Marcos
 
Presentamos a Grafikart
Presentamos a GrafikartPresentamos a Grafikart
Presentamos a Grafikart
Grafikart de Venezuela
 
Cómo abrir una tienda online y promocionarla en redes sociales
Cómo abrir una tienda online y promocionarla en redes socialesCómo abrir una tienda online y promocionarla en redes sociales
Cómo abrir una tienda online y promocionarla en redes sociales
Marketing Divertido
 
Lab3 sig2011 periodo_iii
Lab3 sig2011 periodo_iiiLab3 sig2011 periodo_iii
Lab3 sig2011 periodo_iii
Ernesto Castillo
 
Seo sem gdl.ppt
Seo sem gdl.pptSeo sem gdl.ppt
Seo sem gdl.ppt
Moises Cielak
 
"Si acortas, molas" : Cómo acortar enlaces, automatizar su creación y medir s...
"Si acortas, molas": Cómo acortar enlaces, automatizar su creación y medir s..."Si acortas, molas": Cómo acortar enlaces, automatizar su creación y medir s...
"Si acortas, molas" : Cómo acortar enlaces, automatizar su creación y medir s...
Apasionados del Marketing
 
Estrategias para planear un negocio electrónico
Estrategias para planear un negocio electrónicoEstrategias para planear un negocio electrónico
Estrategias para planear un negocio electrónico
Universidad Tecnológica de México - UNITEC
 
Video And Seo
Video And SeoVideo And Seo
Video And Seo
greattheory6944
 
Gestión reputación online en web 2.0
Gestión reputación online en web 2.0Gestión reputación online en web 2.0
Gestión reputación online en web 2.0
Montserrat Peñarroya
 

Similar a Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentación SEonthebeach 2024 - Javier Martínez Seco (20)

SEO para e-commerce
SEO para e-commerceSEO para e-commerce
SEO para e-commerce
 
Redesmoi dic 5
Redesmoi dic 5Redesmoi dic 5
Redesmoi dic 5
 
Estrategias Web del Comunity Manager, #mooc @MiriadaX
Estrategias Web del Comunity Manager, #mooc @MiriadaXEstrategias Web del Comunity Manager, #mooc @MiriadaX
Estrategias Web del Comunity Manager, #mooc @MiriadaX
 
Mejorar WPO Joomla
Mejorar WPO JoomlaMejorar WPO Joomla
Mejorar WPO Joomla
 
Ponencia cfe11
Ponencia cfe11Ponencia cfe11
Ponencia cfe11
 
Marketing online para la oficina de farmacia
Marketing online para la oficina de farmaciaMarketing online para la oficina de farmacia
Marketing online para la oficina de farmacia
 
Los 10 errores más comunes al desarrollar un proyecto eCommerce
Los 10 errores más comunes al desarrollar un proyecto eCommerceLos 10 errores más comunes al desarrollar un proyecto eCommerce
Los 10 errores más comunes al desarrollar un proyecto eCommerce
 
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
 
Programa Superior Comercio Electrónico
Programa Superior Comercio ElectrónicoPrograma Superior Comercio Electrónico
Programa Superior Comercio Electrónico
 
Ecommerce y marketing digital
Ecommerce y marketing digitalEcommerce y marketing digital
Ecommerce y marketing digital
 
Presupuesto SEO ejemplo - Agencia SEO pencil speech
Presupuesto SEO ejemplo - Agencia SEO pencil speech Presupuesto SEO ejemplo - Agencia SEO pencil speech
Presupuesto SEO ejemplo - Agencia SEO pencil speech
 
Mentor Ecommerce B2B Presentación para Webminar
Mentor Ecommerce B2B Presentación para WebminarMentor Ecommerce B2B Presentación para Webminar
Mentor Ecommerce B2B Presentación para Webminar
 
Presentamos a Grafikart
Presentamos a GrafikartPresentamos a Grafikart
Presentamos a Grafikart
 
Cómo abrir una tienda online y promocionarla en redes sociales
Cómo abrir una tienda online y promocionarla en redes socialesCómo abrir una tienda online y promocionarla en redes sociales
Cómo abrir una tienda online y promocionarla en redes sociales
 
Lab3 sig2011 periodo_iii
Lab3 sig2011 periodo_iiiLab3 sig2011 periodo_iii
Lab3 sig2011 periodo_iii
 
Seo sem gdl.ppt
Seo sem gdl.pptSeo sem gdl.ppt
Seo sem gdl.ppt
 
"Si acortas, molas" : Cómo acortar enlaces, automatizar su creación y medir s...
"Si acortas, molas": Cómo acortar enlaces, automatizar su creación y medir s..."Si acortas, molas": Cómo acortar enlaces, automatizar su creación y medir s...
"Si acortas, molas" : Cómo acortar enlaces, automatizar su creación y medir s...
 
Estrategias para planear un negocio electrónico
Estrategias para planear un negocio electrónicoEstrategias para planear un negocio electrónico
Estrategias para planear un negocio electrónico
 
Video And Seo
Video And SeoVideo And Seo
Video And Seo
 
Gestión reputación online en web 2.0
Gestión reputación online en web 2.0Gestión reputación online en web 2.0
Gestión reputación online en web 2.0
 

Último

Integracion Integligencia Artificial Generativa en STELA
Integracion  Integligencia Artificial Generativa en STELAIntegracion  Integligencia Artificial Generativa en STELA
Integracion Integligencia Artificial Generativa en STELA
Guillermo Talento
 
Proteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptxProteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptx
eghurtadoc
 
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Domingo Suarez Torres
 
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ... Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
rakeshsoni95123
 
Varias Consultas hana cloud inventarios
Varias Consultas hana cloud  inventariosVarias Consultas hana cloud  inventarios
Varias Consultas hana cloud inventarios
carloshernandez141319
 
Manual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdfManual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdf
alejandroalcantaraut
 
Entrenamiento de introducción en Share Point (JateNX)
Entrenamiento de introducción en  Share Point (JateNX)Entrenamiento de introducción en  Share Point (JateNX)
Entrenamiento de introducción en Share Point (JateNX)
administracion997432
 

Último (7)

Integracion Integligencia Artificial Generativa en STELA
Integracion  Integligencia Artificial Generativa en STELAIntegracion  Integligencia Artificial Generativa en STELA
Integracion Integligencia Artificial Generativa en STELA
 
Proteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptxProteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptx
 
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
 
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ... Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 
Varias Consultas hana cloud inventarios
Varias Consultas hana cloud  inventariosVarias Consultas hana cloud  inventarios
Varias Consultas hana cloud inventarios
 
Manual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdfManual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdf
 
Entrenamiento de introducción en Share Point (JateNX)
Entrenamiento de introducción en  Share Point (JateNX)Entrenamiento de introducción en  Share Point (JateNX)
Entrenamiento de introducción en Share Point (JateNX)
 

Casos de éxito en Negocios online: Estrategias WPO que funcionan - Presentación SEonthebeach 2024 - Javier Martínez Seco

  • 1. Casos de éxito en Negocios Online Estrategias WPO que funcionan Javier Martínez Seco Director de Ecode
  • 2. Javier Martínez Quién soy Ingeniero Informático especializado en Tecnologías Web Mi especialidad Desarrollo web a medida, SEO técnico y WPO Mi experiencia +15 años creando y mejorando negocios online Estrategias WPO que funcionan - @JavierMrt
  • 3. Javier Martínez Quién soy Ingeniero Informático especializado en Tecnologías Web Mi especialidad Desarrollo web a medida, SEO técnico y WPO Mi experiencia +15 años creando y mejorando negocios online Estrategias WPO que funcionan - @JavierMrt
  • 4. +1000 sitios web y negocios online Auditorías, consultorías, formación a equipos de desarrollo y desarrollo a medida Estrategias WPO que funcionan - @JavierMrt
  • 5. Sitios web que funcionan bien desde el principio Hay una enorme diferencia entre conseguir que una web funcione y conseguir que funcione BIEN Estrategias WPO que funcionan - @JavierMrt
  • 6. Estrategias WPO que funcionan - @JavierMrt Core Web Vitals Core Web Vitals - Clinic SEO online marzo 2021
  • 7. 1 segundo de LCP en usuarios reales (CrUX) Estrategias WPO que funcionan - @JavierMrt seonthebeach.es
  • 8. 1,1 segundos de LCP 98 ms de INP Estrategias WPO que funcionan - @JavierMrt inversionracional.com
  • 9. 2 segundos de LCP (más de 230 países) 80 ms de INP Estrategias WPO que funcionan - @JavierMrt triptahiti.com
  • 10. 0,9 segundos de LCP 79 ms de INP Estrategias WPO que funcionan - @JavierMrt amoregastrobar.com
  • 11. ¿Qué necesito tener en cuenta para conseguir calidad? Estrategias de carga y rendimiento óptimos Estrategias WPO que funcionan - @JavierMrt
  • 12. ¿Qué necesita el navegador para pintar una web? Estrategias WPO que funcionan - @JavierMrt
  • 13. Estrategias WPO que funcionan - @JavierMrt ¿Qué necesita el navegador para pintar una web? 1- Descarga del documento HTML Mapa con el contenido y enlaces a recursos necesarios
  • 14. Estrategias WPO que funcionan - @JavierMrt ¿Qué necesita el navegador para pintar una web? 2- Descarga del CSS necesario Todas las reglas de estilo a aplicar en nuestro HTML
  • 15. Estrategias WPO que funcionan - @JavierMrt ¿Qué necesita el navegador para pintar una web? 3- Comienza a renderizar HTML y CSS A su vez, seguirá descargando todos los recursos necesarios (imágenes, tipografías, ficheros JavaScript)
  • 16. Estrategias WPO que funcionan - @JavierMrt ¿Qué necesita el navegador para pintar una web? 4- Comienza a pintar la web ¿Tiene nuestro navegador los recursos que queremos utilizar above? - Imágenes - Tipografías - Ficheros JavaScript - ¿etc? 😰
  • 17. Estrategias WPO que funcionan - @JavierMrt ¿Qué necesita el navegador para pintar una web? 4- Comienza a pintar la web ¿Tiene nuestro navegador los recursos que queremos utilizar above? - Imágenes - Tipografías - Ficheros JavaScript - ¿etc? 😰
  • 18. Estrategias de primera carga óptima Estrategias WPO que funcionan - @JavierMrt
  • 19. Objetivos y condiciones de trabajo y simulación Estrategias WPO que funcionan - @JavierMrt
  • 20. Estrategias WPO que funcionan - @JavierMrt Amor a primera visita
  • 21. Estrategias WPO que funcionan - @JavierMrt Velocidad: 200kb / segundo Tiempo máximo: 1,5 segundos
  • 22. Estrategias WPO que funcionan - @JavierMrt 1- Descarga del documento HTML Estrategias de primera carga óptima
  • 23. Estrategias WPO que funcionan - @JavierMrt Estrategias de primera carga óptima
  • 24. Estrategias WPO que funcionan - @JavierMrt Estrategias de primera carga óptima
  • 25. Estrategias WPO que funcionan - @JavierMrt Estrategias de primera carga óptima
  • 26. Estrategias WPO que funcionan - @JavierMrt Estrategias de primera carga óptima
  • 27. Estrategias WPO que funcionan - @JavierMrt Estrategias de primera carga óptima ¿Preloads?
  • 28. Estrategias WPO que funcionan - @JavierMrt Queda renderizar…
  • 29. Estrategias WPO que funcionan - @JavierMrt ¡Y que vengan los marketers con sus <script>!
  • 30. ¿Cómo probamos el rendimiento de una web? “ Estrategias WPO que funcionan - @JavierMrt
  • 31. Sin caché de navegador y ajustamos velocidad Estrategias WPO que funcionan - @JavierMrt
  • 32. Ajustamos velocidad y CPU para simulaciones Estrategias WPO que funcionan - @JavierMrt
  • 33. Extensión Chrome: Web Vitals by Addy Osmani Estrategias WPO que funcionan - @JavierMrt
  • 34. La realidad del sector y el mercado actual Situación actuales de los negocios online y la oferta Estrategias WPO que funcionan - @JavierMrt
  • 35. La realidad del sector online Estrategias WPO que funcionan - @JavierMrt
  • 36. La realidad del sector online Estrategias WPO que funcionan - @JavierMrt - Se priorizan tecnologías populares que faciliten el trabajo de creación - Una vez conozco una tecnología, la utilizo en todos mis sitios webs - Objetivo: adaptar el negocio online a las tecnologías que conozco
  • 37. ¿Quién crea la base técnica de mi negocio online? “ Estrategias WPO que funcionan - @JavierMrt
  • 38. Constructor web Marketing online Código de terceros Señor del hosting Estrategias WPO que funcionan - @JavierMrt ¿Quién construye mi sitio web?
  • 39. ¿Qué conseguimos con estas tecnologías? “ Estrategias WPO que funcionan - @JavierMrt
  • 40. Nude Project Último CSS descargado: @JavierMrt Tienda online Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 4,33 s 5,47 s 20,30 s 98 237 13,9 mb 23,23 s
  • 41. Vicio Último CSS descargado: @JavierMrt Corporativa Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 1,78 s 6,94 s 8,71 s 15 76 21,9 mb 90 s
  • 42. Crocs Último CSS descargado: @JavierMrt Tienda online Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 3,1 s 3,95 s 22,03 s 63 124 7,9 mb 27,12 s
  • 43. Arcos Último CSS descargado: @JavierMrt Tienda online Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 2,86 s 3,94 s 18,66 s 60 475 18,7 mb 30,66 s
  • 44. Real Madrid Último CSS descargado: @JavierMrt Tienda online Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 3,64 s 5,63 s 7,54 s 39 144 10,6 mb 30,75 s
  • 45. Tomás Postigo Último CSS descargado: @JavierMrt Bodega Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 3,35 s 4,11 s 17 s 82 93 17,5 mb 17,65 s
  • 46. Pascual Último CSS descargado: @JavierMrt Corporativa Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 3,6 s 9,28 s 9,28 s 112 151 37,8 mb 59,92 s
  • 47. Disfrutar Barcelona Último CSS descargado: @JavierMrt Restaurante Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 2,5 s 2,06 s 84 s 45 59 29 mb 156 s
  • 48. Daniel Brian Último CSS descargado: @JavierMrt Agencia Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 1,85 s 2,22 s 5,54 s 32 59 13,5 mb 18,04 s
  • 49. Kit Digital Último CSS descargado: @JavierMrt Admon. Inicio de pintura: Contenido principal: Peticiones antes de pintar: Peticiones totales: Peso total: Tiempo de carga completa: 2,1 s 9,54 s 9,54 s 251 407 28 mb 12,22 s
  • 51. Si tengo algo mal de base, ¿merece la pena el cambio? Importancia de medir situación actual Estrategias WPO que funcionan - @JavierMrt
  • 52. Estrategias WPO que funcionan - @JavierMrt Repositorio web-vitals
  • 53. ¿Cómo está funcionando nuestra web? Estrategias WPO que funcionan - @JavierMrt - Podemos medir TTFB, FCP, LCP, INP y CLS de usuarios reales - Compatibilidad limitada con navegadores modernos Completa con Chromium, limitada en Firefox (TTFB, FCP y LCP) y limitada en Safari (TTFB y FCP) - Datos disponibles en tiempo real sin esperar a terceros
  • 54. ¿Cómo está funcionando nuestra web? Estrategias WPO que funcionan - @JavierMrt
  • 55. Estrategias WPO que funcionan - @JavierMrt - Métricas clave de comportamiento y uso - Estimaciones y oportunidades de mejora más precisas - Análisis de embudos de conversión y objetivos del negocio ¿Qué podemos obtener? LCP nude-project.com
  • 56. ¿Cómo lo hacemos nosotros hoy en día? Estrategias WPO que funcionan - @JavierMrt
  • 57. Estrategias WPO que funcionan - @JavierMrt Ecoded: Constructor web muy optimizado SaaS para sitios web y negocios online Leads, info-producto, corporativas, marca personal, funnels… Calidad y rendimiento desde el inicio Imprescindible en los sitios web creados Puesta en marcha y casos reales +4 años de desarrollo y puesta en marcha con clientes y partners +100 sitios web publicados
  • 58. Caso de éxito Tienda online a medida Estrategias WPO que funcionan - @JavierMrt Facturación anual de +30 millones de euros y +10 millones de carritos de compra totales
  • 59. +90% sesiones cumplen LCP, INP y CLS durante toda la sesión Estrategias WPO que funcionan - @JavierMrt lacasadelelectrodomestico.com
  • 60. Estrategias WPO que funcionan - @JavierMrt LCP INP CLS Evaluación 1,2 s 157 ms 0 Superada 2,3 s 695 ms 0,15 No superada 2,5 s 2.137 ms 0,27 No superada 1,8 s 668 ms 0,34 No superada 1,5 s 240 ms 0 No superada 2,7 s 257 ms 0,07 No superada 2 s 217 ms 0,59 No superada Resultados disponibles en PageSpeed Insights by Google
  • 61. Estrategias WPO que funcionan - @JavierMrt 0,1% conversión 1,2% conversión
  • 63. Iñaki, me he dejado diapositivas para SOB 25