346 | Los 5 factores que afectan a la velocidad de tu web y sus soluciones

En el episodio 346 de WordPress Semanal te cuento los 5 factores que afectan a la velocidad de carga de tu web y qué pasos debes dar para encontrarle solución. Vamos allá. Hola Hola. Soy Gonzalo Navarro y Bienvenidos al episodio 346 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y hoy, como decía, vamos a hablar de cinco factores porque lo he querido simplificar en solo cinco factores. Después por supuesto ya te imaginarás que dentro de cada uno hay sus peculiaridades y hay cosas a las que prestar atención, pero creo que de esta forma nos podemos hacer una visión global de lo que tenemos que mirar o dónde tenemos que investigar para conseguir que nuestra web cargue lo más rápido posible. Como siempre digo, sin obsesionarnos con los datos o los numeritos que nos dan herramientas como PageSpeedings. Lo importante es que la experiencia de tus visitantes sea buena y que en la medida de lo posible optimices todos estos factores de los que te voy a hablar hoy. En un momentito nos adentramos en todo ello, pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues tenemos súper renovación. Digo súper porque prácticamente he hecho el curso desde cero de nuevo y es el curso de Velocidad en WordPress. Este fue uno de los primeros cursos que saqué en la plataforma y que me habéis pedido bastante gente que lo renueve. ¿Qué pasa? Que también saqué otro curso que es parecido también es para mejorar el rendimiento de carga de web, pero lo hacemos mirando todos los resultados que nos arroja la herramienta gt Metrix. Entonces, cuando me decíais que renovara este curso, normalmente lo que hacía era remitiros a el curso de GTmetrix, pero como sé que además queríais que lo que lo hiciera que lo renovara, pues ya lo tenéis disponible, el curso de velocidad en WordPress renovado desde cero, con clases nuevas, con enfoques nuevos, con clases que ya había pero las he rehecho desde cero. Así que ya tenéis disponible el curso, ya digo, de Velocidad en WordPress. Ya sabéis que me gusta ir manteniendo actualizado los cursos, así que desde vuestra cuenta en la parte de sugerencias no solo me podéis proponer cursos nuevos, sino me podéis decir Gonzalo, me encantaría que renovases este curso o este otro. Creo que es más importante que todo lo que haya sea de la máxima calidad posible y esté lo más ajustado, no siempre puedo tenerlo todo al día, pero que esté lo más ajustado a la actualidad, más que ir publicando novedades y que lo anterior se vaya quedando obsoleto. Aún así ya sabéis que tenéis, no sé si son 69 o ya estamos en 70 cursos para prácticamente cualquier cosa que se te ocurra en términos de creación y gestión de páginas web. Bien, más novedades. Tenemos nuevo vídeo de la zona código también cada semana un vídeo nuevo para hacer modificaciones a tu web sin usar plugins, te vas a poder ahorrar muchísimos plugins y aplicas muchas de las cosas que vemos en los vídeos de la zona código, que a pesar de que sea código, no tienes que ser desarrollador, ni programador ni nada, sino simplemente seguir los pasos del vídeo. Y en este caso te enseño a evitar que cuando estás navegando desde un móvil, habitualmente desde un iPhone y desde el navegador Safari, hay veces en las que le das a un campo de un formulario o le das a un campo de búsqueda y la pantalla te hace como zoom y luego si te sales de ese campo, la pantalla se te queda en ese zoom y es una experiencia un poco rara. Esto lo hace sobre todo iOS, aunque también otros dispositivos lo hacen, para evitar que lo que pongas en el campo de búsqueda o en cualquier campo de un formulario sea demasiado pequeño. Entonces en este vídeo de la zona código te enseño a evitar esto, te explico por qué ocurre y te doy la solución. Es el vídeo 296 y ya lo tenéis disponible en la parte de snippets de código, podéis ir a Gonzalo Navarro, es iniciar sesión y ahí lo vais a ver disponible. Ya digo, en la parte de snippets, si estás escuchando esto dentro de un montón de tiempo y hay muchos más vídeos, pues con que lo busques en el buscador que verás en la parte de snippets, lo tienes. Y si no, como siempre, en las notas del episodio tenéis todo lo que vaya comentando, el enlace al curso nuevo y el enlace a este vídeo de la zona código para ir a las notas del episodio las podéis mirar en vuestra aplicación de podcast y si no hay enlaces, porque en algunas no aparecen los enlaces, lo tenéis todo con mucho detalle. Y además este episodio también por escrito en Gonzalo es 346, que es el número de este episodio, donde también veréis el enlace al plugin de la semana que tiene mucha relación con la temática de este episodio y que se llama Image Optimization and Lazy Load by Optimal. Este es un plugin Optimal se escribe, me imagino que será un juego de palabras de Optimum, de optimo en inglés, luego Mo que es topo y que es un poco la imagen de marca de esta empresa y pues jugando un poco con las palabras imagino que irá por ahí el tema, pero bueno, eso es lo de menos. Lo demás es que este es un plugin que descubrí hace relativamente poco, que está activo en unas 80.000 webs con WordPress y que es el típico plugin de optimización de imágenes, pero que se diferencia del resto con una característica súper chula y es que te sirve las imágenes desde una CDN global que te ofrecen ellos y gratuita. Ya sabéis que una CDN básicamente lo que te permite es solas siglas Content Delivery Network y lo que te permite es entregar contenido globalmente desde una red. Y la idea detrás de esto, explicado de forma llana, es que las imágenes en este caso, o los contenidos que sean, se entreguen desde el punto más cercano a la persona que lo está visitando. De este modo la experiencia para cada uno que visite la página, independientemente de dónde esté en el mundo, va a ser la mejor posible. Es un poco la idea detrás de usar una CDN y además ya digo, de optimizarte todas las imágenes automáticamente como hacen otros plugins de optimización, de permitirte utilizar el Lazy Load, que es básicamente la carga diferida, que las imágenes se carguen solo cuando vayas llegando a ellas. Pues además tiene esta peculiaridad de la CDN que es lo que lo hace especial. Luego tiene otras características como que también soporta las imágenes en formato WebP, también en formato retina, ellos hablan de algo de Machine Learning para hacer la compresión de las imágenes, pero ya no sé cómo funciona realmente, no sé si es un poco que lo utilizan porque suena muy bien o que realmente tienen algo especial. En cualquier caso es una muy buena opción. Vemos su uso en el curso, el curso de velocidad que te comento que acabo de renovar y está bastante bien, me gusta, me gusta desde que lo descubrí, ya digo, hace relativamente poco. Perfecto, pues ahora sí, una vez vistas las novedades y el plugin de la semana, que recordad, tenéis los enlaces directo en Gonzalo Navarro es 346. Pues ahora sí, nos vamos con el tema central de este episodio. 5 factores que afectan al W de tu web. Y verás que estoy introduciendo el término W en lugar de decir mejorar la carga de tu web, qué realmente lo que significa W viene de las siglas Web Performance Optimization, que quiere decir optimización del rendimiento web. Y no es otra cosa que los pasos que puedes dar para que tu web cargue más rápido, para que su rendimiento de carga sea mejor. Es el proceso en sí en el que consigues o intentas que tu web cargue lo más rápido posible. Ya está, no tiene más. Lo podemos complicar lo que queráis, pero es en esencia eso. Bien, una vez definido cómo se llama este proceso, vamos a ver qué factores o qué cosas debemos analizar para intentar llevar a cabo este proceso de optimización. El primer factor que afecta a la velocidad de carga de tu web y que no siempre se menciona es el hosting. El servidor donde tienes hospedada la web y que en multitud de ocasiones es un auténtico desastre, es un hosting mal y por mucho que la gente se empeñe en optimizar siempre va a tener esa carga lenta primera del servidor que va a hacer que la web siga cargando rápido y que herramientas de análisis como Google Page, Speed Insights o GT Metrix te van a seguir mostrando malos resultados. Entonces, el hosting es la base, es donde tienes tu web y es importante que tengas un hosting rápido. Gracias a que todo el mundo prácticamente hoy en día tiene una web, hay multitud de opciones de hosting y seguro que puedes encontrar uno que calidad precio cumpla tus requisitos. ¿Qué debes ver a la hora de saber si un hosting es rápido o no? Básicamente que esté a la última en tecnología y recursos. Fíjate si tiene discos SSD, fíjate si incluye la compresión o Gzip o Broadly, que es la opción más rápida según dicen los especialistas, Broadly comprime mejor o esta tecnología que entiendo que es una tecnología, comprime mejor que la tecnología Gzip. Fíjate también que sirva en HTTP, que estén a la última en versiones de PHP y MySQL. ¿Por qué? Porque trabajamos con WordPress, necesitamos que estas dos tecnologías, digamos entre comillas, vayan a la última y luego que ofrezcan buenos recursos. Esto es muy importante. Muchas veces se pasa por alto en cuanto a memoria y espacio en todos sus planes. Aunque tú quieras coger el plan básico asegúrate de que no vaya a estar limitado en recursos porque eso también va a hacer o puede hacer que tu web cargue más lento. Esto en cuanto a tecnología y recursos. Después también es interesante que si tu base de visitantes desde un país específico, pues que el hosting que tengas contratado tenga servidor en ese país o si no al menos en ese continente. Que hosting cumple todos estos requisitos, Además está especializado en WordPress y te da un soporte bastante bueno. Siteground ya sabéis que lo suelo recomendar, que es el que uso para mi propia web y que cumple todo lo que he comentado anteriormente. Si queréis ir a su mejor oferta del momento podéis escribir en vuestro navegador Gonzalo Navarro es hosting que es mi enlace de afiliado y ahí vais a la mejor oferta que tenga SiteGround en este momento. Lo que suelen hacer es ofrecer un gran descuento en el primer año básicamente, lo que pasa que dependiendo del momento en el que escuches esto, pues pueden tener más o menos descuento. Bien, ya hemos visto el primer factor importante, el hosting. Segundo, WordPress en sí y lo que le instalas. ¿Qué quiero decir con esto? Bueno, que es importante por ejemplo que elijas un tema rápido de partida, un thing de WordPress que tú sepas que de partida es rápido. Ejemplos, astra carga rápido, generatePress carga rápido. Cadence Theme carga rápido y además son temas muy versátiles, muy versátiles, muy buenos y tenéis un curso de cada uno de ellos en la plataforma. Hay más, no quiere decir que estos sean los tres únicos, si tú te gusta uno, pues puedes buscar en Google el rendimiento de este theme o preguntarme a mí desde la parte de soporte de tu cuenta. ¿Por qué es importante esto? Porque si ya empiezas con un mastodonte como tema, ya vas a ir a remolque y cualquier cosa extra que vayas añadiendo pues se va a ir sumando a ese gran peso que le estás dando de primeras a tu web, no solo peso, sino como hablaremos ahora, recursos que cargan de forma extra. Y en esta misma línea también, cuidado con los plugins que instalas, solo instala los que necesites de verdad y compara igualdad de características, porque hay tantos plugins que casi siempre para hacer una misma cosa vas a tener un montón de opciones. Pues a igualdad de características elige el que mejor optimizado esté, es decir, el que pese menos y el que haga menos peticiones. Menos peticiones básicamente quiere decir que cuando se carga tu web se va a estar llamando el navegador va a intentar ejecutar una serie de archivos, habitualmente archivo CSS y archivo JavaScript, pues cuanto menos intente ejecutar menos peticiones. Esto lo puedes ver por ejemplo en el curso de gt Metrix, vemos cómo puedes interpretar la cascada de archivos que se van cargando o a los que se hacen peticiones cuando alguien visita una determinada URL de tu web. Así puedes ver de un determinado plugin cuántas peticiones está haciendo y en qué orden y cuánto tarda cada una y demás. Aparte ya hay muchísima gente especializada en el rendimiento de carga de las webs, entonces si por ejemplo estás buscando, yo mismo tengo algunos contenidos en este sentido, si por ejemplo estás buscando un plugin para compartir en redes sociales, que te ponen los típicos iconitos para compartir en redes sociales, pues buscas plugin para compartir en redes sociales más rápido y te van a salir 20.000 tutoriales. Y lo mismo para otro tipo de plugins, ya tenemos dos aspectos, el hosting WordPress y lo que le vamos poniendo encima. Tercer factor importante, imágenes y otros elementos multimedia. Una de las cosas que más va a ayudar a la mejora del rendimiento de carga de tu web es cuando optimices las imágenes. ¿Cómo haces esto? Bueno, punto número uno, súbelas con las dimensiones máximas en las que las vayas a usar. Si como máximo vas a usar unas dimensiones de 1200 por ejemplo en tu página, no subas la imagen de 3000 de ancho si lo máximo que va a ocupar de ancho en tu web va a ser 1200. Luego utiliza un plugin de optimización automática, tanto compresión de las imágenes, es decir, hacer que pesen menos, y luego incluso la mayoría de plugins como vemos en el curso de velocidad en WordPress, te permiten también redimensionarlas, si por ejemplo se te olvida y la subes a 3000 píxeles de ancho, puede coger el programita automáticamente y redimensionarla, recortarla para que pues como máximo tenga 2000 de ancho, no sé, lo que tú establezcas. La gracia de esto es que ya con estos plugins automatizas todo mucho, hay un montón de plugins que te hacen esto, casi todos funcionan bien. Yo en concreto en el curso te enseño, además de optimo, este que te comentaba de la CDN, te enseño a utilizar otro de los más populares y que realmente hoy en día es el que suelo usar porque es el más sencillo y te lo hace ya casi todo automatizado y no hay que configurar casi nada. Si además ese plugin trae la opción de convertir las imágenes a WebP, que es el formato de imagen más allá de PNG y JPG y otros formatos, este es el que mejor se adapta a la web porque reduce el peso de las imágenes considerablemente. La pega es que no está soportado por todos los navegadores, entonces lo ideal es que utilices un plugin como el que ya tengas de optimización de imágenes que te las convierta a webp y si el navegador no la soporta te la muestre en el formato original. Y luego muchos de estos plugins también te optimizan incluso los gifs. Así que en este sentido tienes muchas soluciones. De los más populares pues tienes WPS más, tienes no sé si son tres o cuatro, W Optimizer que también es súper popular, es de los más míticos, tienes imagífates de la misma gente de WP Rocket y que es el que vemos en el curso, por cierto, tiene Short Pixel que también es bastante popular. En fin, tienes muchos y ya digo que casi todos funcionan muy bien. Cuarto punto seguramente de de los más complejos de optimizar, porque no se puede hacer todo solo haciendo clic en un botón, sino que hay que tener cositas en cuenta y me estoy refiriendo a los recursos que se cargan, sobre todo archivos CSS y archivos JavaScript. Dentro de los JavaScript tenemos los internos y los externos, que es donde también empezamos a tener entre comillas complicaciones o más trabajo por delante. En esto pues lo que podemos hacer es combinar los archivos internos, ya sean los CSS o JavaScript. Los internos quiere decir los archivos que nosotros tenemos instalados que generan nuestro thing o que vienen con nuestro thing o que vienen con plugins que añadimos. ¿Qué hacemos al combinarlos? Pues que desde un solo archivo mostramos por ejemplo todo el CSS o mostramos por ejemplo todo JavaScript, mostramos, digo cargamos, con lo cual el rendimiento es mejor. ¿Qué ocurre? Que muchas veces esta combinación te puede dar problemas. Entonces lo ideal es que utilices un plugin de optimización del rendimiento como puede ser WP Rocket, que además de activarte la caché te permite optimizar muchas cosas desde el punto de vista de la velocidad de carga, como por ejemplo la combinación de archivos CSS y la combinación de archivos JavaScript. Y además te permite excluir archivos JavaScript determinados o archivos CSS determinados que no vayan bien con esta combinación, que al combinarlos hagan que nuestra web se vea mal o hagan que algo deje de funcionar. Entonces esta opción de excluirlo es muy útil. Esto para los internos, para los que están en nuestra web y hemos instalado nosotros. Pero luego tenemos archivos externos, scripts externos. Por ejemplo, cuando añades anuncios de Google Ads, Google Adsense, esto cuando se muestran anuncios en tu web, eso llama a un archivo de Google externo que se carga en tu web y que tarda en cargarse. Cuando pones el píxel de Facebook, eso llama a un archivo externo. Cuando pones el código de seguimiento de Google Analytics, eso llama a un archivo externo de Google. Cuando usas Stripe como pasarela de pago, eso llama a un archivo externo desde Stripe. ¿Cómo los puedes optimizar? Bueno, esta parte es más complicada, tienes que ir viendo cada caso, pero a grandes rasgos puedes aplazar la carga de los scripts externos y si alguno da problemas lo excluyes de este aplazamiento. Además, una buena opción también es precargar los DNS de estos recursos externos. ¿Esto qué quiere decir? Que estás precargando la dirección de estos recursos que se van a cargar, de modo que cuando se vayan a cargar se va a hacer de forma más rápida. Y esto, ya digo, plugins como WP Rocket te permiten hacer todo esto. Tenéis un curso de WP Rocket, por cierto. Quinto y último factor a tener en cuenta para la optimización del rendimiento de carga. Las fuentes tipográficas, el tipo de letra básicamente que tienes en tu web. Esto es también un archivo que se está cargando, que puede ser que lo tengas de Google Fonts, que es bastante habitual, bastante típico. Puede ser que sea una fuente que trae tu ZIM, puede ser que sea una fuente que hayas comprado en algún sitio, que hayas descargado de algún sitio y la quieras usar, puede ser lo que sea. Aquí, como en todo, yo te recomiendo que utilices las mínimas fuentes que puedas. Si puedes usar una con sus variaciones de negrita, itálica y demás, mejor, o si no dos, porque a lo mejor tienes una para el logo diferente o lo que sea. Pero no te vuelvas loco con las fuentes ni tampoco con sus variaciones. ¿Cómo puedes optimizar esto? Bueno, muchos plugins de optimización te traen la posibilidad de optimizar Google Fonts, de modo que lo puedes guardar la fuente local, en lugar de estar llamando a Google todo el rato cada vez que alguien visita una página de tu web, la cargas directamente desde tu servidor, de modo que va a ser mucho más rápido. Algunos plugins de optimización del rendimiento web te permiten hacerlo, hay otros plugins específicos que puedes buscar en el repositorio o en el directorio de plugins gratuitos de WordPress que también lo hacen de forma específica, así que se podría llegar también a optimizar. Ya cuando utilizas una fuente personalizada ya depende un poco de tu fin y demás, ahí ya sería un poquito más complejo y habría que ver cada caso de forma particular, pero hay maneras ya digo de optimizarlo. Aquí también siguiendo un poco la misma línea, si no quieres cargar la fuente localmente, puedes hacer las mismas configuraciones que te comentaba antes para los scripts externos, porque por ejemplo Google Fonts se estaría cargando el script de Google que sería externo para que se cargue en tu web, entonces si aquí por ejemplo precargas los DNS como te comentaba antes, precargas antes esa dirección, pues también vas a tener una sensación más rápida de carga. Digo, por si no consigues esto que te comento yo de cargarlas localmente, pues también tienes esa alternativa. Bueno, estos son a grandes rasgos los cinco factores, ya sabes pues que luego se puede profundizar en alguno de ellos. Por ejemplo, lo que te comentaba antes de tener cuidado con los plugins que usas, a lo mejor tienes uno que tú sabes que tiene mucho impacto en el rendimiento, pero es que lo necesitas porque lo usas porque te encanta y porque es esencial para tu web, pues puedes hacer cositas como por ejemplo hacer que ese plugin solo se cargue en las páginas donde se use, esto lo vemos en una de las clases del curso también que acabo de actualizar de velocidad en WordPress. A nivel de los archivos puedes hacer lo mismo, puedes hacer que un archivo o un script específico, ya sea externo o interno, solo se cargue en páginas determinadas, esto también lo vemos en uno de los vídeos, no lo cubre en el curso de velocidad renovado, pero sí que está cubierto por ejemplo en el curso de GTmetrix. En fin, ya después puedes profundizar mucho más, ir afinando, pero estos cinco factores son los que debes tener en cuenta y los más importantes, hosting WordPress y lo que instalas, imágenes y otros elementos multimedia, archivos o recursos CSS y JavaScript y fuentes tipográficas. Fantástico. Si te ha gustado el episodio, recuerda que te agradezco muchísimo si lo puedes compartir con alguien al que pienses que le puede ayudar, si puedes dejar un me gusta, un comentario, una reseña, si es que lo permite tu aplicación de podcast. Y para adentrarte más de lleno en profundidad en este tema, pues ya sabes que tienes varios cursos. Además, si te vas a la zona de cursos, tienes un camino, porque ya sabes que los que están divididos por caminos llamado Quiero mejorar el rendimiento de mi web, ahí vas a tener el curso recientemente actualizado y otros cursos que tienen que ver con la mejora del rendimiento de carga de tu web. Fantástico. Nada más por este episodio, nos seguimos escuchando. Adiós.