218 | Por qué te deberían de dar igual los resultado de Google Page Speed Insights

En el episodio 218 de WordPress semanal te hablaré de los motivos por los cuales te debería de dar igual los resultados que muestra Google PageSpeed Insights sobre la velocidad de carga de tu web, o al menos que tengas un poquito más claro en qué métricas debes fijarte y en cuáles no perder ni un segundo. Vamos allá. Hola, hola, soy Gonzalo de Gonzalo Navarro ES y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya sabes que no hay mejor inversión que la de aprender a crear y gestionar tu propia web con WordPress. Y la velocidad de carga, el W, el rendimiento web. Todo esto pues va muy ligado a la parte de la gestión. Y como ya he comentado en otros episodios, seguramente en algún momento te preocupes de demasiado por ello. Y hoy te voy a hablar de una de esas partes de por qué no te recomiendo perder el tiempo en alguna de las métricas que utiliza pues uno de los sistemas para analizar la velocidad de carga de tu web más populares como es el de Google. Y ahora te diré un poquito por qué voy a publicar este episodio y en qué me he basado. Pero antes, como siempre, vamos a ver las novedades qué está pasando en Gonzalo Navarro Es. Esta semana, como cada semana, tenéis un nuevo vídeo de la Zona Código. En este caso os enseño a espiar las webs que os interesan o que veis que hay algo interesante. Básicamente algo un poco el proceso que sigo yo cuando estoy navegando por alguna web y me encuentro con algo chulo, con algo interesante que digo ah. ¿Cómo habrá hecho esto esta gente? Y pues te digo cómo lo investigo yo, cómo lo inspecciono, en qué me fijo, no sólo para saber qué temas se utiliza, qué plugins se utiliza, que también lo explico, sino básicamente eso. Cuando te llama la atención una funcionalidad concreta de alguna web o a lo mejor un diseño muy chulo, pues te enseño a investigar por ahí, a espiar un poquito para poder ver cómo lo ha hecho y replicarlo o adaptarlo a algo que tú vayas a hacer similar. Esto es en el episodio 169 de la zona Código. Ya sabes que si te suscribes tienes acceso a todos esos vídeos, los nuevos que vayas sacando a la semana y los cursos. Y también por supuesto, a soporte. Conmigo puedes ir a Gonzalo Navarro es o gonzalonabarro ES cursos y ver toda la información y apuntarte. Y como digo, además de los vídeos de la zona código, pues también tienes curso. Y este mes estamos con el curso de mantenimiento y gestión de webs con WordPress. Básicamente te enseño a llevar el mantenimiento de una o varias páginas web, ya sea que lo vas a hacer para tu negocio, para tu proyecto o que lo vas a hacer como negocio en sí, es decir, que te vas a dedicar a llevar el mantenimiento de otras webs, pues te explico cómo hago mi proceso y que herramienta uso. Básicamente es ManageWP y te explico cómo funciona por dentro y cómo puedes tenerlo todo bien gestionado. Esas son las novedades, lo tienes en la parte de enlaces, recuerda que puedes ir a Gonzalonabarro es 218 y ahí vas a tener todos los enlaces a tu disposición, al igual que el enlace del plugin de la semana que se llama Logo Showcase Ultimate y básicamente te permite mostrar los logotipos de tu cliente o de tus patrocinadores junto con un título y también una URL hacia su web, pues por ejemplo si haces páginas web y estás mostrando tu servicio, pues puedes poner los logos o los títulos de esas páginas webs que han hecho o una pequeña imagen y puedes enlazarlo para que la gente vaya a verlo o si tienes clientes potentes, pues lo típico, no lo sé, que has hecho webs para empresas famosas, pues lo puedes aprovechar para dar un poquito más de valor a tu servicio o si tienes una landing page para vender un producto o lo que sea, es una buena estrategia de marketing. Y este es el típico plugin que te permite mostrar esos logos de forma chula, esto me lo soléis preguntar mucho. Y tienes bastantes opciones, las puedes mostrar que se vayan pasando solas, las puedes poner en formato grid, como con más columnas o menos, tienes bastante control sobre el diseño con 6 themes distintos, si vas a la página del plugin tienes una demo para que puedas ir probando entre las distintas opciones que tienes, ¿De acuerdo? Luego tiene una opción Pro con más temas y más opciones, pero vamos, yo creo que la gratuita es suficiente. De nuevo, Logo Showcase Ultimate lo puedes usar como un carrusel, como un slider o en formato grid. De nuevo el enlace a esto y también otras cositas que voy a dejar enlazadas muy relacionadas con este episodio en Gonzalo Navarro es 218. Y ahora sí, nos vamos con el tema central, ¿Por qué te deberían de dar igual los resultados de Google Page Speed Insights? Y voy a tocar cuatro puntos fundamentales. Primero, voy a explicar por qué PageSpeed de Google no mide la velocidad real de tu sitio. Después voy a ahondar un poquito en la idea de que no te obsesiones con las notas ni los porcentajes de puntuación que arroja este servicio. Tercero, te voy a decir en qué métricas sí sería conveniente que te fijaras y cómo puedes solucionarlas. Y cuarto, pues vamos a hablar de alternativas o de otras opciones para medir la velocidad de carga de tu web que no sean Google Page Speed Insights, que no sea este servicio de Google. Así que vamos a empezar por el primer punto, y es esto, esta afirmación de que Google PageSpeed no mide la velocidad real de tu sitio web. Y te decía al principio que te iba a contar un poco por qué estoy publicando este episodio y en qué me he basado. Pues aquí te voy a dejar enlazado en el punto 1 de las notas del episodio, una publicación en el blog de WP Rocket, WordPress Rocket, ya sabéis, es uno de los plugins de caché más populares, seguramente de los de pago sea el más popular, es muy muy famoso y lo utiliza mucha gente. También tienen un sistema de afiliados que también hace que lo use más gente, pero es muy buen plugin, ¿De acuerdo? Por cierto, yo lo tengo disponible en mi servicio de activación de licencias, o sea que si queréis contratarlo y que yo os lo deje activo en lugar de contratarlo en la página oficial, podéis hacerlo. Bueno, en cualquier caso, hacía tiempo que tenía guardado por ahí en enlaces interesantes una publicación de esta gente, de los de WordPress Rocket, que se titula básicamente el título que le he dado yo a este episodio y es por qué no te debería importar o por qué deberías pasar de los resultados de Google PageSpeed Insights. Y esto lo publicaron cuando Google sacó el servicio de Lighthouse, que básicamente era una forma especial, diferente de medir la velocidad de carga y cambió también la forma en la que este servicio de Google PageSpeed Insights hacía la medición o medía la velocidad de carga de tu web. Entonces, cuando eso ocurrió, bueno, pues como ellos están en este mundillo, pues rápidamente empezaron a sacar artículos y en este precis pues dice esto que te digo yo, básicamente te dicen que no importa la nota que te da Google pagespeed y básicamente la argumentación que es muy válida y la cual yo comparto, es que tienen un sistema enfocado a puntuación y a notas y esto muchas veces es contraproducente, porque por ejemplo ellos ponen un ejemplo que es real que hicieron ellos, os lo voy a dejar enlazado para que lo podáis ver y por ejemplo una web que tarda 2,7 segundos en cargar le dan mejor puntuación, pero que a una que tarda 461 ms en cargar. ¿Con lo cual cuando digo o cuando ellos dicen que Google o PageSpeed no mide la velocidad real de tu sitio web es en base a esto, es decir, sí que te muestra los segundos, pero cuando te muestra la nota, cuando te muestra la puntuación y te sale que lo tienes muy mal, a lo mejor realmente no se corresponde con la velocidad de carga del sitio en algunas ocasiones, en otras sí, hay veces que pues sí que coincide digamos que una web cargue en menos tiempo con la nota, pero como ves otras no, de acuerdo? Entonces esto nos lleva al segundo punto y es que no te obsesiones con las notas ni tampoco con los porcentajes de puntuación te diría yo, ya sabes que Google te dice que tienes un 30 de 100 o ya no recuerdo muy bien ni cómo lo mostraba porque también lo ha ido cambiando y te lo muestra en rojo si está muy mal, en naranja si está regular y en verde si está bien. Hay veces pues que lo tienes muy bien en escritorio y muy mal en móvil, pero aquí corremos el riesgo de obsesionarnos, porque al final lo importante es la velocidad de carga y también la percepción de velocidad de carga, es decir, lo que tus usuarios perciben cuando entran a cualquiera de tus páginas. Por ejemplo, si una web tarda a lo mejor en total en cargar 3,5 segundos, 4 segundos, que eso a lo mejor lo que te muestra cuando lo mides en una de estas herramientas, pero realmente tus visitantes ven la información importante pues en menos de un segundo o en un segundo o en un poquito más, la experiencia seguramente vaya a ser muy buena, aunque se sigan cargando cosas por detrás, pero si el usuario ya ve lo que necesita cuando pasa muy poquito tiempo, la percepción de velocidad va a ser muy buena y esto se puede lograr con plugins de caché, se puede lograr con carga diferida, ahora te hablaré un poquito más de ello, y la web puede tardar más terminar de cargar en más tiempo, pero la percepción será mucho menos. ¿Que es lo que buscamos? Que nuestros usuarios tengan una muy buena experiencia navegando por la web, ¿De acuerdo? Y otra cosa en este sentido es que hay algunas sugerencias de Google que prácticamente son imposibles de lograr. Entonces, por eso digo que no te obsesiones con las notas, no te obsesiones con la puntuación que te da el insight de Google, tampoco con alguno de los mensajes, ¿De acuerdo? Pero esto no quiere decir que no tengas que prestar atención al rendimiento de tu web y que no mejores cosas que son mejorables. Entonces, tercer punto de este episodio. ¿En qué métricas puedes fijarte de estas de las que tienen solución? Bueno, hay muchas que son muy fáciles de solucionar y que te van a aportar bastante. Por ejemplo, el típico mensaje de compresión gzip. Esto lo puede solucionar por código, lo puede solucionar con un montón de plugins. Casi todos los plugins de rendimiento, como el de Siteground lo trae, casi todos los plugins de caché con más opciones lo traen hoy en día es muy, muy muy fácil cumplirlo, incluso algunos hostings ya lo tienen, ya lo hacen por ti, ¿Vale? Bueno, eso de la compresión gzip es simplemente comprimir los recursos de una página web antes de mostrarlos, antes de que los navegadores se los muestren a los visitantes. Al estar comprimido se supone que todo se muestra mucho más rápido. Es simplemente eso. Otra métrica en la que te puedes fijar cuando te muestra que una imagen es muy grande, cuando te muestra que una imagen pesa mucho. Esto es muy fácil de solucionar, solo tienes que hacer la imagen más pequeña, incluso lo puedes automatizar, como ya hemos visto en el curso de WPO y como he explicado en muchas ocasiones, hay plugins que te permiten pues que cada vez que subas una imagen te la optimice. ¿Esto qué quiere decir? Que le quite todo lo que sobra de la imagen, que te la deje con buena calidad, pero te la comprima y elimine lo que sobra. Metadato, sobre todo información que lleva la imagen que no se necesita realmente, incluso redimensionarla. Una cosa es quitarle peso, quitarle información, optimizarla en ese sentido y otra es redimensionarla. Si tienes una imagen de 2.000 píxeles, pero el lugar donde lo vas a mostrar solo hay 500 píxeles de ancho, no tiene sentido estar cargando una imagen de 2.000, de 2.000 píxeles. Entonces la puedes redimensionar, la puedes hacer más pequeña, ¿De acuerdo? Esto de las imágenes es lo que más te va a ayudar a que una página cargue más rápido. Después tienes la minificación de archivos, los que estén en tu control, porque esta es una de las partes que te decía que hay cosas que son imposibles de lograr, que a lo mejor Google te dice no tienes minificado el archivo, no sé qué, no sé cuánto, y ahora ese archivo no lo tienes tú, ese archivo es de. Pues no lo sé, un servicio de. Incluso de Google a veces, a veces Google de sus propios servicios te da consejos sobre optimizarlo y tú no puedes porque son de Google, es decir, vienen de una página externa, de un servidor externo que no es el tuyo, al que tú no puedes acceder. Todo eso pues no hay mucho que puedas hacer, no lo puedes optimizar. Pero hay otros que sí puedes, pues los archivos de estilos CSS de tu web, los archivos de JavaScript de tu web, que estos a veces dan algún problemilla si los comprimes, pero puedes intentarlo y para esto también hay muchos plugins, muchos servicios que te lo ofrecen en un clic, ¿De acuerdo? Bueno, el HTML también se puede minificar básicamente todos los archivos y esto lo que hace es que, por ejemplo, imagínate que tienes tu hoja de estilos CSS y tú la tienes con su formato muy bonita, con sus espacios, pues esto lo que hace es que quita todos los espacios y hace que pese lo menos posible, lo minifica, lo hace más pequeño, así el archivo pesa menos y si lo tiene que cargar tu servidor, pues va a tardar menos porque pesa menos, simplemente eso. Y como digo, pues si usas por ejemplo el plugin de caché o de optimización de SiteGround, lo tienes si utilizas el típico Autoptimize, si utilizas algún plugin de caché de los que tienen distintas opciones, también vas a tener esta. También se puede hacer con una instrucción manual, si no recuerdo mal, en el curso de velocidad en WordPress lo explico, aunque yo prefiero que veáis el curso de WPO, es un curso que saqué hace bastante poquito, hace muy poco, es más moderno, está más actualizado y lo hago en base a gt metrix que te hablaré ahora de qué es otra forma de medir el rendimiento de carga de la web sin usar el servicio de Google. Y creo que ese curso os valdría mucho más para conseguir que vuestra web cargara más rápido. Ahora os hablaré un poquito de esa herramienta. Entonces, la minificación de archivos es algo que podéis hacer, que está en vuestro control, siempre y cuando sean archivos de dentro de vuestra web a los que tengáis acceso. Después tenéis la carga diferida también, la que esté en tu control. Puedes hacer carga diferida de imágenes, esto es el típico Lazy Loading, es decir, que un archivo o una imagen, vamos, o un vídeo o incluso un PDF se podría hacer que no cargue hasta que no se muestre en pantalla. Imagínate que tienes un tutorial y vas explicando cosas y con cada explicación tienes una imagen, pero cuando alguien entra de primeras a la web, pues a lo mejor ve la introducción, a lo mejor una imagen que tú tienes al principio y un poquito de texto y el resto de imágenes están abajo, tiene que hacer scroll la persona para verlas, pues hasta que no empiece a hacer scroll no se irán cargando esas imágenes, es decir, se irán cargando bajo demanda conforme se vayan necesitando y. Y esto mejora también sobre todo la sensación de rapidez cuando carga una página, porque no hay que esperar a que vayan cargando todas. Es esto que te decía yo de la percepción de velocidad por parte de tus visitantes y esto del Leche Loading, ya mismo va a ser nativo y no vas a tener que hacer nada, ya mismo va a venir incorporado en los navegadores, ya está empezando a venir, lo que pasa que no todos tienen soporte para eso y pues ya con una pequeña instrucción que se haga ya se va a poder activar ese Lazy Loading de forma automática. Mientras tanto puedes usar plugins, hay muchos plugins de Lazy Loading y hay algunos como te digo yo, por ejemplo el plugin de optimización de SiteGround trae la opción de que hagas este lazy loading, no solo para imágenes, como te digo, sino también para vídeos, también para iframes. Con los iframes yo he tenido problemas en Safari, así que probad a ver si os funciona a vosotros. Iframes es esto que incrusta, por ejemplo, cuando incrustas un vídeo de YouTube, coges un iframe y lo pegas en tu web, lo incrustas y eso hace que se pueda mostrar, eso es un iframe simplemente. Entonces si haces el Lazy Loading de eso como viene de recursos externos en algunos navegadores como en Safari a veces da problemas, pero vamos para las imágenes y para todo eso, muy recomendable que actives el Lazy Loading ya sea desde tu plugin de rendimiento o de caché o que instales un plugin específico para ello. Y todo esto que te acabo de comentar lo vemos en el curso que te comento de WPO en WordPress, así que si estás apuntado puedes irte ahí y puedes seguir todos los pasos para implementar todo esto, que son las cosas que de verdad puedes controlar en tu web. Es cierto que en ese curso vamos o digamos explico cosas incluso más avanzadas para ya si te quieres meter en hacer optimizaciones muy muy al detalle, por ejemplo que algunos plugins sólo se carguen en páginas específicas y ya sí que nos metemos en obsesionarnos un poco más, pero no es necesario, eso ya es si quieres ir más allá. Bien, entonces cuarto y último punto de este alternativas a esto que te digo yo que no te obsesiones con Google PageSpeed, que no le debes hacer caso, pues me dirás, vale, ¿A qué le hago caso? Bueno puedes usar Google Page Speed Insight si quieres, pero simplemente tener esto en cuenta que es que hay cosas que no puedes hacer y que muchas veces las puntuaciones que te ponen no se refleja con la percepción de velocidad de carga de una web. Así que mientras lo tengas en cuenta pues puedes usar la herramienta que quieras. Yo te voy a ofrecer otras dos que seguramente conozcas que son GTmetrix, a mí particularmente es la que más me gusta, estoy acostumbrado, tengo cuenta gratuita, la cuenta es gratuita pero te permite seleccionar desde qué país haces el análisis de la velocidad de carga, te permite guardar test que has hecho anteriormente para comparar por qué ahora tu web va más lenta o por qué no, te permite crear informes, reportes por si lo vas a hacer para alguien, entonces merece la pena darse de alta si vas a estar al menos unos días usándola. Y como digo pues en el curso de WPO que te he comentado Gonzalo es Cursos WPO, ahí me baso en las métricas que arroja el Waterfall, que es como una cascada donde vas viendo de forma visual cuánto tarda cada archivo de tu web en cargar y de esa forma puedes ver cuál está tardando más y puedes atajarlo en el caso de que sea posible. Es una herramienta que tiene muchas opciones y puedes entrar en detalle en ella. Y otra de las más útiles es también Pingdom Tools, que es un poco, pues eso, la línea de GTmetrix y que te ayuda, te arroja consejos y tú los vas solucionando si puedes. Pues nada más, me pareció interesante, como digo, este artículo que te voy a dejar enlazado del blog de WP Rocket, que por cierto, no sé si me lo pasó algún suscriptor, ahora que lo pienso. Sí, y lo dejé ahí como apuntado, como tema interesante y al final pues eso, he publicado un episodio al respecto, sí. Pues ahí lo tienes, recuerda todos los enlaces. También os dejo enlaces a episodios donde hablado de velocidad de carga en WordPress y. Y temas interesantes a este respecto. Os dejo incluso un Q a sobre velocidad de carga, un episodio de preguntas y respuestas enfocado a ello, sí. Pues nada más. Recuerda, si eres emprendedor y llevas tu propia web, si eres bloguero, si creas contenidos para todo lo que necesites, crear tu propia web, gestionarla, pues te animo a que te apuntes a los cursos. Y si incluso vas más allá y lo que quieres hacer es dedicarte a crear webs para otras personas, pues también te recomiendo que le eches un vistazo a la plataforma de formación, porque realmente voy sacando todo lo que que se necesita para la creación desde cero, desde la nada de una página web hasta cosas más avanzadas, la gestión del día a día, cómo hacerla crecer, cómo hacer cosas relacionadas con el marketing de contenidos, como por ejemplo crear un podcast, cómo crear anuncios para llegar a más gente, en fin, todo lo que rodea la creación y la gestión de páginas web hechas con WordPress y además, pues con vídeos avanzados de la zona código y mi soporte personalizado, todo ello en Gonzalo Navarro es cursos. Nada más por este episodio, nos seguimos escuchando. Adiós.