A short, practical tutorial (in Spanish) by Willy SEO showing how to diagnose and prioritise web performance problems using Chrome DevTools → Lighthouse. He demonstrates best practices for running reliable tests (use incognito, a clean profile, test Mobile/Performance), explains Lighthouse metrics (First Contentful Paint, Largest Contentful Paint, Total Blocking Time, Speed Index, Cumulative Layout Shift), and shows how the Lighthouse "calculator" estimates how improving one metric affects overall score. He recommends aiming for a site speed health ≥70/100, and suggests two simple solutions for WordPress: WP Rocket (caching/minification/delivery of CSS/JS) and Optimizador IO (automatic image compression). Also notes plugin incompatibilities and that a developer can implement cleaner fixes.
Si este árbol fuera de verdad, ¿Cuánto tiempo habría tardado en crecer? Mucho ¿Verdad? Bueno, pues eso es lo que voy a intentar que no pase en tu web para que puedas mejorar la velocidad, ya sea que la tengas en WordPress, ya sea que la tengas en Prestashop o en cualquier CMS. Lo que voy a enseñarte a continuación es cómo mejorar la velocidad de tu sitio, de tus páginas que carguen mucho más rápido y que entiendas de dónde viene todo ello. Al final te voy a dar unos recursos para que lo puedas aplicar, por ejemplo, tu web en WordPress, ¿De acuerdo? Y seguramente aplicable a cualquier otro CMS. Así que como siempre digo, esto no es magia, es SEO. Bien, lo primero de todo que quiero que entendáis es que Google se rige por diferentes parámetros para decidir si tu web va rápida o lenta. Estos parámetros los puedes encontrar muy fácilmente si coges tu página web, la copio y la cargas en pestaña de incógnito. Intenta que tu pestaña incógnito se se vea así, que no tenga la barra de marcadores, intenta cogerte un perfil que tú tengas que no tenga muchas extensiones, si no te va a ralentizar tu velocidad web. También intenta que no haya ningún vídeo de YouTube por detrás reproduciéndose o que no estés en ninguna llamada tipo Google Meet. Y una vez ya lo tengas, lo que debes hacer es vas a la página de inicio, por ejemplo, botón derecho y le das a inspeccionar. Cuando le das a inspeccionar se te abre esta columna rara de la derecha que muchos muchas veces no se entiende todas las cosas que hay, pero os voy a guiar, fijaros, lo único que tenéis que hacer es ir a estos dos puntitos de aquí, bueno, estas dos flechitas y le dais a Lighthouse. Lighthouse es el proveedor de Google que le da información que le ayuda a entender si una página carga rápido o lento, ¿De acuerdo? Fijaros que aquí yo ya lo tengo predeterminado, que ya no se me selecciona ni Accessibility, ni Best Practices, ni SEO, pero seguramente si es la primera vez que lo haces puede que lo tengas todo en check, por lo tanto deja solo Performance y dale Analizar, Analyze, Page Load. No te he enseñado, pero seguramente aquí habrás visto que ponía Mobile y Desktop. Si dudas siempre Mobile, ¿Por qué? ¿Porque cuando tú buscas en Desktop y buscas en Mobile lo que en Desktop siempre vas a tener una mucha mejor puntuación que en mobile, OK? ¿Entonces siempre intenta hacerlo en mobile, así te va a dar unos resultados más exactos de lo que tienes peor, OK? ¿Fijaros lo que he hecho y ya lo he hecho expresamente porque sabía que pasaría eso, como aún tengo esas extensiones aquí y tenía la barra de marcadores aunque la he quitado, fijaros lo que me está diciendo, me está diciendo que los resultados se ven alterados porque tengo Chrome Extensions, pues estas extensiones activadas, vale? Por lo tanto lo que voy a hacer va a ser ahora cambiar de perfil en un perfil que no tenga ninguna extensión y desde allí pestaña incógnito. Vamos allá. Vale, ya estoy en un perfil que fijaros, no tiene ninguna extensión, ninguna barra de marcadores y ya lo tengo expresamente para poder hacer estos análisis. Hago la búsqueda privada y busco mi web. Fijaros que lo mismo entra en mi página de inicio, botón derecho, inspeccionar, me voy a las dos flechitas y le doy al Lighthouse. Fijaros que me mantiene la configuración mobile y solo performance. Ahora sí, ahora me va a dar resultados mucho más exactos porque no tiene que cargar más información extra. Y esta es la info que tenéis que tener para poder mostrar a vuestros clientes. Me ha dado una, fijaros, una puntuación muy parecida, pero al menos esta es real. ¿Qué podemos extraer de aquí? Fijaros, os enseño un poquito y vais a flipar con lo que os voy a revelar ahora. Fijaros, estas son las métricas que Google usa para entender si la web carga rápido o lenta. Por ejemplo, First Contentful Pain, el Total Blocking Time, el Speed Index, ahora os voy a explicar el Largest Contentful Pain y el Cumulative Layout Sheet que es el CLS, es que en verdad se le llama por las siglas. Si veis aquí rápidamente vais a poder apreciar cuál es tenéis bien y cuáles no. Pero ¿De qué se compone cada una de estas métricas? Bueno, pues lo guay de esto es que si bajas un poco más abajo ves uno todo el diagnóstico de todos los problemas que tienes pero no sabes cómo atribuirlos, no sabes por ejemplo si reducir el CSS que no usas corresponde a una métrica u otra, todos los problemas corresponden a una métrica u otra o a dos métricas a la vez. Por lo tanto lo que tienes que hacer es desplegar este problema y aquí al lado fíjate que vas a ver FCP que es el First Contentful Pane y el LCP que es el Largest Contentful Paint, entonces ya te está diciendo que si arreglas este problema de aquí vas a solucionar estos dos, o sea, va a afectar positivamente a estas dos métricas, ¿De acuerdo? Entonces esta es una forma de hacerlo. Otra es que puedes filtrar directamente por aquí que dice Show Audit relevant to, pues por ejemplo yo me voy aquí a las métricas y digo vale, ¿Cuál es la métrica que más me está afectando? El LCP que es 5,3, pues me voy al LCP y aquí veo todos los problemas que afectan a esta métrica. Por lo tanto que si soluciono estos problemas voy a mejorar significativamente la velocidad de carga. Pero ¿Cuánto voy a mejorar? ¿Bueno, pues aquí os voy a enseñar un truquillo que seguramente si no habéis visto os va a encantar y es una calculadora, veis aquí que pone Si calculator, vale, pues si yo la abro y fijaros, la he abierto haciendo clic en la ruedecita, vale? ¿Para mucha gente hace botón derecho que aquí ni va, botón derecho, abrir pestaña nueva, vale, pues cuando le das aquí te abre una pestaña nueva, así vas más rápido, vale? Total, abro esta pestaña nueva y fijaros lo que me sale, me sale una puntuación de las métricas y el porcentaje de cuánto afecta cada una de ellas. ¿Por qué me interesa eso? Porque fijaros, si yo puedo elegir por cual empiezo, porque no voy a hacerlas todas a la vez, voy a elegir ¿En qué me centro? Pues obviamente me voy a centrar en las que pesen más, en las que tengan más peso. En este caso yo tengo una puntuación de 74 sobre 100, que eso no os lo he contado, pero obviamente son de 0 a 100 la puntuación, siendo 0 la puntuación más mierda y 100 la puntuación más buena. Por lo tanto si tienes entre 0 y 49 es que hay que mejorar, si tienes entre 50 y 89 es que ya lo vas teniendo bien y Si estás entre 90-100, pues eres el amo. Una cosa que sí que recomienda Google y os la avanzo, es que tengas al menos un 70% de los problemas solucionados, o sea una salud de velocidad del 70 mínimo, a partir de 70 ya se empieza a considerar como que está bien. Entonces ¿Qué me está diciendo aquí? Me está diciendo que el Total blocking time lo tengo bien, tengo toda la puntuación, tengo 100%, fijaros que como más bajo, más me Baja la puntuación. ¿Qué podría mejorar aquí? Si yo tengo que elegir, pues me voy a uno de los que tienen más puntuación, que pesan más y digo, vale, Si ahora tengo 74 y mejora 100% el LCP, ¿Cuánto mejoraría? Hostia, hasta 94. Pues esta métrica es estratégica, no sé cuánto lo tenía, pero tenía 64 aquí. Exacto. Entonces esta métrica es muy buena para mejorar. Quiero que entendáis todo esto porque cuando vayáis a hacer auditorías de vuestro sitio web, incluso si estáis haciendo el SEO con otros clientes, que es lo que hago yo, si tienes una web te la puedo llevar y te hago el SEO o si quieres formación lo tienes también aquí en la descripción de mi perfil tengo toda la información y los enlaces, pues eso te va a servir porque tienes que entender primero de todo por qué está haciendo todo esto. Ahora te voy a enseñar un plugin, ¿OK? Pero tienes que entender qué pasa, por qué le pones ese plugin, qué instalas, qué mejoras con el plugin. Entonces todo esto es lo interesante. Entendiendo todo esto, quiero que también sepas que dentro de cada una de cada uno de estos problemas, Google ya te da las soluciones. LCP Element te dice cómo solucionarlo, te da información acerca de este problema, te dice cuánto es bien, bien, medio y mal, si lo tienes más de 4, malo, si lo tienes entre 0 y 2,5, bien. Y te lo hace lo mismo con todas las demás, con todos los demás problemas, por ejemplo, ¿Quieres reducir el CSS que no usas? Bueno, pues tiene una página, se ha dedicado a crear una página por cada uno de los problemas que te puede afectar, el rendimiento de velocidad de tu sitio web es brutal, así que dale un vistazo porque está todo aquí, ¿Vale? Entonces, ¿Y cómo lo soluciono, Willy? Que ahora ya me enterado de esto, me sirve mucho, pero ¿Como lo soluciono? Vale, venga, vamos allá. Yo lo que voy a hacer entonces va a ser volverme a mi sitio web y aquí te voy a recomendar dos plugins, dos plugins que son simples de instalar y que te van a servir muchísimo. Uno es el WP Rocket, que este diría que cuando yo me lo instalé era gratis y ahora juraría que es de pago, tiene funciones premium, juraría o quizás cuando me instalía la. Bueno, en fin, da igual. Ah mira, licencia infinita, ah no, fecha de expiración, vale, bueno, en fin, da igual. Este plugin os va a servir muchísimo para optimizar la velocidad de vuestro sitio web, literalmente, o sea, es que solo tenéis que entrar y configurarlo. No quiero perder ahora aquí tiempo haciendo cosas básicas porque directamente la información de valor es deciros qué plugin es WP Rocket, en la mayoría de sites funciona, que esa es otra, ¿Con qué plugin tú vas a solucionar la velocidad web? Porque hay muchos plugins que incluso son incompatibles con el tema o la versión que tengas tú de WordPress y petan y hacen que cuando tú lo instalas hacen que te dejen cao la web, que son incompatibles, te generan incompatibilidades, pero bueno, para darle un vistazo rápido, fijaros aquí tiene opciones para minificar archivos de CSS, utilizar la entrega de CSS, minificar archivos de JavaScript, tiene muchísimas cosas que os tendréis que entrar y poneros a configurar. ¿Yo ya lo configuré en su día, me cogí cualquier tutorial, al final esto es una cosa que haces una vez a la vida, o sea una vez cada cuándo, vale? Entonces cogeros cualquier tutorial y os lo configuras. Esto es uno. Dos, otro plugin que yo tengo también que me sirve muchísimo es uno que se llama Optimizador IO. Este Optimizador IO lo que me sirve a mí es para optimizar las imágenes de tu sitio web. Las imágenes de tu sitio web son importantes que las utilices porque cada imagen tiene un peso, por lo que si tú cuando subes una imagen, esa imagen la puedes comprimir y que pese menos, pues más rápido va a cargar tu sitio web. Aquí lo que hace es, cuando yo subo una imagen, ya el optimizador IO automáticamente coge y me va optimizando todas las imágenes, me va ahorrando el peso y me las va comprimiendo. Genial. Al final si queréis obviar toda la parte de plugins, lo podríais hacer con un programador que os lo va a hacer mucho más limpio, no vais a necesitar el programa de los plugins, porque problema de los plugins que siempre ha habido es que OK, tú pones un plugin que te pesa algo, o sea, que ya te ocupa parte del código, vamos a decirlo así, ya no tienes el código 100% limpio, pero gracias a ese plugin te soluciona otras cosas. Entonces si no tienes mucha idea de programación, pues Eso te sirve. ¿De acuerdo? Hasta aquí espero que te haya ayudado cualquier cosa en los comentarios y nos vemos en el siguiente vídeo. Un abrazo.
