347 | Q&A de Velocidad y WPO

En el episodio 347 de WordPress semanal voy a resolver dudas sobre velocidad y optimización del rendimiento web. Veremos qué es WP Rocket, qué es WP Optimize y cuál es mejor. Hablaremos de AMP AMP y su relación con la velocidad de tu web. Hablaremos de cómo puedes descubrir plugins lentos que estén afectando al rendimiento de carga de tu web. Y por último te explicaré cómo puedes optimizar AdSense para que no afecte a la velocidad de tu web. Esto sirve para adsense y para otros scripts externos. Vamos allá. Hola, hola. Soy Gonzalo Navarro y Bienvenidos al episodio 347 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Hoy, como digo, va a ser un episodio de preguntas y respuestas enfocado a la velocidad en WordPress y la optimización de carga. He rescatado cuatro preguntas que me habéis hecho directamente los que sois suscriptores a través de la zona de soporte y le voy a dar respuesta para que todos podamos aprender de ellas. Como digo, habrá preguntas un poco variadas. Ya en la intro has escuchado sobre plugins de optimización, sobre otros plugins que a priori pueden parecer de optimización pero que no lo son, sobre cómo descubrir lo que es lento en tu web para poder ponerle solución, si es que la tiene, y cómo optimizar cosas que se están cargando en tu web y que seguramente la hagan más lenta y que tienen solución, se pueden optimizar para que tu web vaya mejor. Todo esto en un momentito. Pero antes, como siempre, Vamos con novedades. ¿Qué está pasando en Gonzalo Navarro Es esta semana? Por un lado tenéis nuevo vídeo de la zona Código, ya sabéis, cada semana sale uno nuevo, así que podéis la parte de snippets de código y ahí encontraréis el vídeo más reciente. En este caso es el vídeo 297 y en él te enseño a impedir que uno o todos los plugins de tu web se actualicen. Esto no es recomendable a nivel general, pero hay casos en los que puede ser útil e interesante. Así que es lo que vemos en el vídeo más reciente, ya digo, de la zona Código, donde aprendéis a hacer cambios en vuestra web sin utilizar plugins, cambios relacionados con CSS con HTML, con PHP, con plugins específicos y no tenéis que ser desarrolladores, no tenéis que saber código, simplemente seguir el vídeo, copiar, pegar y tenéis el mismo resultado que os muestro. Más novedades. Pues hablando de velocidad, que es la temática principal de este podcast, tenéis el curso de velocidad en WordPress 100% renovado desde cero. Este curso lo saqué originalmente en 2016, fue uno de los primeros y ahora lo acabo de renovar 100%. Y también os voy a dejar enlaces a cursos relacionados con la velocidad, como el curso de también WPO pero en base a gt Metrix. Gt Metrix es una herramienta que te permite analizar la velocidad de carga de tu web. Te va arrojando una serie de datos y yo te enseño a en función de esos datos corregirlo para que tu web vaya más rápida, pero es como análisis y continuación en la solución. Entonces tenéis estos dos cursos relacionados con la velocidad y luego también os voy a dejar cursos relacionados con por ejemplo WP Rocket, que es un plugin de caché muy popular y otros recursos. Ya sabéis que todo ello lo tenéis en Gonzalo Navarro es 347, que es el número de este episodio. Gonzalo es 347 Perfecto, pues una vez vistas las novedades, vamos ahora con el plugin de la semana que se llama Simple Iframe. Este es un plugin de un desarrollador español que se llama Jorge González y que hace una cosa muy sencilla a priori y es permitirte insertar iframes, es decir, los típicos embed desde el editor de Gutenberg. Y tú dirás, pero bueno, si ya hay formas de incrustar este tipo de contenidos. Sí, pero esto te permite simplemente insertar cualquier iframe de forma genérica. Por ejemplo, a partir del editor de Gutenberg, pues puedes añadir uno específico para YouTube, uno específico para Vimeo y otros que incluyen. Pero si tú quieres tener control sobre cómo estás incluyendo ese iframe, por ejemplo de YouTube, pues es mejor hacerlo a través de tu propio código. ¿Lo podrías hacer desde el bloque de HTML? Sí, pero si quieres uno específico de iframe, pues aquí lo tienes. Además esto te permite desactivar, porque ya sabes que el editor de bloques, desde las opciones puedes desactivar los bloques que no quieras que estén disponibles para así pues tenerlo todo más limpito, más minimalista y de esta forma podrías dejar simplemente este de iframe y quitar el resto de nuevo. Simple, iframe está activo en más de 7000 webs con WordPress, tiene muy buenas valoraciones y os dejo el enlace directo en las notas del episodio. Recordad, Gonzalo es 347. Perfecto, pues ahora sí, vámonos con el tema central de este episodio que son vuestras preguntas y a continuación mis respuestas. Comenzamos con la de Hugo que me pregunta sobre WP Rocket y WP Optimize y me dice que cuál es mejor. Me dice Muy buenas Gonzalo, ojalá te encuentres de lo mejor, espero que me puedas ayudar con esta duda que te traigo. Hace poco escuché tu podcast sobre las funciones de WP Optimizer y por lo que veo es un todo en uno, un plugin muy completo para dar una buena optimización a nuestras webs. Ahora me gustaría saber hasta qué punto WP Optimize se asemeja a WP Rocket y si se podrían utilizar los dos complementariamente o es mejor uno que otro. ¿Tú qué opinas? Me gustaría saber esto ya que todos hablan maravillas de WP Rocket pero tú casi no jaja. Bueno yo también hablo muy bien de WP Rocket, lo que pasa que seguramente esta pregunta tuviese o la recibiese antes de publicar el curso. Bien, WP Rocket y WP Optimize en esencia son plugins que hacen cosas similares. WP Rocket es un plugin premium, seguramente el más popular en su categoría en plugins de caché más optimización o funcionalidades para permitirte optimizar el rendimiento de carga y WP Optimize es también algo parecido pero es gratuito. Lógicamente WP Rocket al ser de pago tiene más funcionalidades, pero WP Optimize tiene muchísimas para ser gratuito, así que aquí radica un poco la diferencia para que te hagas una idea. Pues WP Optimize como decía Hugo, en este caso es una navaja suiza para tener tu web optimizada desde el punto de vista del rendimiento web. Te permite limpiar la base de datos, te permite comprimir imágenes, te permite cachear páginas y hacer otras optimizaciones relacionadas con el WPO como la compresión gzip, hacer el caché según dispositivo, excluir ciertas páginas del cacheo, minimizar o minificar y combinar archivos HTML, CSS y JavaScript. Así que como ves son características específicas de un plugin WPO, haciendo hincapié en sus funcionalidades para la limpieza de base de datos, que es para lo que se suele utilizar este plugin, pero que ya ves que hace muchas más cosas para la base de datos. Puedes eliminar datos innecesarios, comentarios, pinbas, trasbacks y datos transitorios caducados. Puedes compactar y desfragmentar las tablas MySQL dándole a un botón, cosa que te permite liberar espacio. Puedes hacer limpiezas semanales, ya sean automáticas o no, y también te da estadísticas de la base de datos con consejos para ahorrar espacios. Así que su fuerte es la limpieza de la base de datos, pero también trae características, ya digo, para el caché y la optimización. WP Rocket trae todo esto y además algunas funcionalidades extra más premium, como por ejemplo poder excluir ciertas cosas o hacer cosas con un control un pelín más granular, sobre todo lo que tiene que ver con retrasar la carga de ciertos recursos, como pueda ser JavaScript. Así que si tienes presupuesto, seguramente WP Rocket sea más completo. Si no, o prefieres algo gratuito, WP Optimize es una muy buena opción. Tienes un vídeo completo de WP Optimize en el curso de velocidad en WordPress, un vídeo de 32 minutos y tienes un curso completo sobre cómo utilizar WP Rocket. Así que tienes ambas opciones cubiertas si eres miembro en Gonzalo Navarro es sobre lo que me pregunta Hugo de si son complementarios. Entiendo que si son equivalentes, porque los dos a la vez no tendría sentido utilizarlos en una UDE. Perfecto. Vamos con la segunda pregunta que es de Miguel Ángel y que va sobre AMP, AMP y la velocidad de tu web. Me dice Buenas tardes Gonzalo, Mira, tengo una web heredada que tiene instalados varios plugins para la velocidad de carga y AMP. Son AMP por WordPress, Kima and Structure Data for WordPress and AMP y PWA for WordPress and AMP. Todo esto me está generando errores en ser console y me está volviendo loco al ser una web sencilla, con la pega de que tiene muchísimos posts. Estoy pensando en quitar estos tres plugins, instalar WP Rocket a la vez que hago tu curso. La duda es si voy a alterar todo y me va a dar más problemas. No quiero experimentar sin tener tu opinión nivel experto. Muchas gracias. Un abrazo. Bueno, muchas gracias a ti Miguel Ángel. Aquí una pequeña confusión porque realmente AMP no está relacionado con la optimización de carga de tu web app. Es un protocolo que sacó Google en conjunción con otras empresas que son las siglas de Accelerated Mobile Pages, es decir páginas móvil aceleradas y que lo que hacen es crearte una versión diferente de tu web, una versión en la que quitan todo lo que retrasa la carga y la dejan muy básica, HTML y poco más y bueno CSS también, pero quitan sobre todo los scripts y demás que hacen la web lenta y es como que crean una versión paralela que además se muestra a través de Google. Entonces yo particularmente lo quité, a mí AMP no me acababa de gustar, además hubo un poco de polémica porque parecía que durante un tiempo estuvieron favoreciendo las que utilizaban esta tecnología, lo cual decían que no iba a pasar y luego pasó, luego al final parece que esto lo corrigieron. Y luego también para el tema de medir las estadísticas como lo muestran, digamos tu web a través de Google está fuera de tu dominio y es un poco rollo a la hora de analizar las estadísticas y demás. Bueno, en cualquier caso AMP es esto es para permitir que en versión web cuando se accede desde Google se muestre esa versión diferente o esa versión alternativa de tus páginas, si lo quieres usar fantástico, pero no es algo que te permita optimizar el rendimiento de carga como si te permite hacer por ejemplo me decía aquí Miguel Ángel, WP Rocket, entonces AMP for WordPress es para activar AMP en la web. Después me hablas del plugin Scheme Structure Data, esto es para habilitar los datos estructurados, tenéis un episodio completo en el que hablo de cómo funcionan los datos estructurados, que te pueden aportar y cómo puedes implementarlos en tu web. Básicamente es a nivel semántico decirle a los motores de búsqueda qué es cada cosa, entonces le estamos dando nombres a las cosas y esto te permite después que cuando alguien hace una búsqueda en Google se pueda mostrar de una forma especial, por ejemplo las cinco estrellitas cuando alguien valora un producto o que salga el precio al lado o este tipo de cosas dependen del schema de los datos estructurados que tú das a tu web o que los plugins que instalas. Esto cada vez se hace más automático casi tú no tienes que hacer nada ya porque los plugins si están bien hechos o los themes ya lo traen y tú no tienes que incluir, aunque siempre se puede mejorar eso es un poco la idea de los datos estructurados. Tampoco tiene que ver realmente con, ya digo, la optimización de la web, lo que pasa que como este plugin que usa en este caso Miguel Ángel se llama Scheme and structure data for WordPress and AMP. Quiere decir que es compatible con AMP también, pero no quiere decir que te vaya a hacer nada relacionado con la velocidad de carga. Y después PWA, esto es Progressive Web Apps. Este es el otro plugin que me comenta Miguel Ángel, que también es compatible con AMP pero es para crear, ya digo, aplicaciones web progresivas, es decir que tu web se va a mostrar como una app de móvil pero se muestra en en cualquier navegador, entonces alguien después puede guardarla con un iconito en su móvil y cuando accede a ella la experiencia es como si fuese un móvil. Y hay plugins que te permiten convertir tu página web, tu página web con WordPress en este caso, en una web progresiva, una Progressive Web App. Te dejo un episodio del podcast donde hablo de esto, cómo crear apps a partir de webs con WordPress. Te dejo ya digo el episodio donde hablo de los datos estructurados. Te dejo un vídeo de la zona código donde te enseño a quitar AMP sin perder SEO, porque cuando instalas AMP se hacen una serie de modificaciones en tu web y si quieres quitarlo para no perder posicionamiento tienes que hacer unos pequeños ajustes. Te enseño a hacerlo en uno de los vídeos de la zona código. Y como me menciona en este caso Miguel Ángel, WP Rocket. También os dejo el curso Awcket, recordad todos los enlaces en Gonzalo Navarro es 347. Perfecto. Vamos con la tercera pregunta que es de Javier, que va sobre cómo descubrir plugins lentos. Me dice Muy buenas Gonzalo, he visto que has creado un curso de grids y filtros con WP Grid Builder. Quería preguntarte si has probado Jet Engine para el tema de los listings y cuál me recomiendas usar y por qué. He usado Jet Engine en varias webs que he hecho y he notado que empeora bastante en la velocidad. Ese plugin también empeora bastante la velocidad de la web. Gracias y un saludo. Gracias a ti Javier. Depende, a ver, sí que afecta, porque al final si tú creas esto de los grids son como rejillas que muestras con contenidos, por ejemplo en Gonzalo, tanto los cursos como los vídeos de la zona código los muestro en formato rejillas con filtros, búsquedas y demás. Por supuesto yo muestro imágenes ahí por ejemplo en la página de cursos, pues muestro todos los cursos que tengo que son 70 o así. Entonces esto se carga, se carga el CSS del plugin, se carga el JavaScript del plugin para el funcionamiento también de cuando buscas y cuando filtras. Entonces por supuesto que afecta. Se puede optimizar, sí, se puede retrasar la carga de algunas cosas, se puede hacer que las imágenes que salgan estén optimizadas, pero al final cuando tienes cosas en una web se están cargando y si antes no estaban, pues ahora va a afectar, eso es lógico. Entonces lo que tienes que ver es que todo esté lo mejor optimizado posible, dentro de que siempre, cuanto ya digo, más cosas tengas, más va a afectar a la carga, pero no es especialmente malo en este caso WP Group, simplemente que para funcionar necesita eso. Y con Jet Engine pues un poco lo mismo, Jet Engine se suele utilizar más junto con Elementor, en el caso de WP GridBuilder también tiene vínculo con Elementor, con Elementor perdón, pero yo por ejemplo lo utilizo sin Elementor, simplemente el plugin a secas y ya está. Entonces es eso, al final muchas veces tienes que decidir si quieres tener algo así o si te merece la pena tenerlo en comparación con la posible merma que te den el rendimiento de carga. Pero ya digo, si lo tienes todo bien optimizado, pues bueno, si va a afectar, pero tampoco tiene que ser una mala experiencia para tu visitante. Por cierto, esta pregunta me llega sobre Jet Engine, pero también me llega sobre otros muchos plugins. Si quieres saber cómo descubrirse un plugin es lento, tienes una clase que además he añadido al curso de velocidad en WordPress, donde os enseño a analizar vuestros plugins para que podáis ver cuáles son los más lentos, y no sólo vuestros plugins, sino también si estáis buscando un plugin en el repositorio por ejemplo, o en el directorio de plugins de WordPress, que podáis ver cómo afectan al rendimiento antes de instalarlo. Ya digo, lo tenéis en una de las clases del curso de velocidad que os voy a dejar enlazada en las notas del episodio. Gonzalo es 347, fantástico. Vámonos a la última pregunta que es de José Manuel y que va sobre cómo optimizar adsense en tu web para que no sea lenta. Me dices, buenas Gonzalo, tengo un problema con la velocidad de carga de mi web y bueno, me pone la web pero la obvio y me dice estoy probando opciones de monetización y hace unas semanas he insertado anuncios de Adsense. Esto ha ralentizado bastante la web, sin embargo la página está mejorando ratios de visualización desde entonces. Lo cierto es que he visto desde fuera, como si yo fuera un lector o cliente, la experiencia de la página ha empeorado. ¿Qué me recomiendas? ¿Quitar los anuncios? ¿Instalar WP Rocket? Ahora estoy con SiteGround Optimizer pero la puntuación de GT Metrix es pésima. En fin, gracias por lo que me puedas ayudar. Bueno, gracias a ti José Manuel. Aquí lo que recomiendo es retrasar la carga del script de Google Adsense en este caso, porque si los anuncios te están. Si estás viendo que hay más visitas y los anuncios te van a reportar un beneficio, pues no tiene sentido quitarlos si lo que estás buscando es ganar dinero con ellos. Pero sí que lo puedes optimizar, ya digo, retrasando la carga de estos scripts. Siteground Optimizer no permite o no trae la opción de retrasar la carga de un script específico, así que puedes utilizar un plugin que está genial y que vemos en el curso de velocidad en WordPress que se llama Flying Scripts. De hecho en ese vídeo, en ese curso explico específicamente para ejemplificar cómo funciona este plugin, cómo puedes retrasar los anuncios de, ya digo, en este caso, Google Ads. Porque lo que funciona es que tú coges una parte que salga en el código, en el script que tú pones para que se muestren los anuncios, coges una parte de ese código y la pones en este plugin para retrasar la carga. Me gusta este plugin porque no te hace coger el código donde lo tuvieras, quitarlo de ahí y ponerlo en este plugin, sino que poniendo una keyword, una palabra clave, ya te lo detecta, te lo descarga y te lo muestra en el momento oportuno, cuando pase una serie de segundos o cuando el usuario empiece a interactuar con la web. De modo que en esa primera carga va a ser mucho más rápida porque no se va a estar intentando cargar ese recurso. Y de hecho se lo comenté a José Manuel, lo implementó y le fue muy bien. Así que si estás en un caso parecido te lo recomiendo. Sí, fantástico. Pues estas son las cuatro preguntitas relacionadas con la optimización de carga. Recuerda que están sacadas directamente del soporte que como miembro tienes disponible en Gonzalo Navarro es. Así que si quieres soporte como este, personalizado y directamente conmigo, te puedes apuntar en GonzaloNabarro es y recibirás además de esto, todos los cursos que hay publicados relacionados con creación y gestión de webs con WordPress, optimización, como hemos estado hablando ahora, pero también crear webs desde cero con resultados profesionales, gestionarlas en el día a día. Incluso si te dedicas a crear webs para clientes, también tienes cursos enfocado a ello. Vemos también los mejores plugins y cómo utilizarlos, y también los mejores temas, los más rápidos y cómo crearlos, configurarlos y demás. Tienes, ya digo, cursos. Y por si todo eso fuera poco, además tienes un vídeo de la zona código nuevo cada semana, donde te enseño a modificar tu web a través de código sin que seas desarrollador. Ves el vídeo, copias el código, lo pegas y obtienes el mismo resultado que yo. Como siempre, antes de irme, darte las gracias por si compartes este episodio con alguien a quien le pueda interesar, ya sea en tus redes sociales o que lo pases directamente por WhatsApp o donde sea, a alguien que sepas que le puede venir bien. Y si ya dejas algún comentario en tu app de podcast, alguna reseña, pues ya sabes que también te lo agradezco muchísimo. Nada más por este episodio. Nos seguimos escuchando. Adiós.