Ep 17 | Comprueba si tu web es rápida

En el episodio 17 de WordPress semanal vamos a ver herramientas que puedes utilizar para hacer un test de velocidad de tu web con WordPress. Vamos allá. Hola, hola, soy Gonzalo de Gonzalonabarro. Es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Ya sabes que mi objetivo es que domines WordPress y que sea muy sencillo de utilizar. De esa forma te puedes concentrar en tu negocio online, en tu página web o lo que sea que te traigas entre manos. Y hoy, en el episodio 17, pues vamos a hablar de cómo hacer un test de velocidad para tu web con WordPress. Vamos a ver tres cosas. Uno, por qué es importante saber la velocidad de tu web. Dos, cómo hacer ese test de velocidad de tu web. Y tres, cómo mejorar la velocidad de tu web. Porque de nada sirve hacer un test si después no vamos a saber cómo hacer nuestra web más rápida. Pero antes recuerda que en Gonzalo es Cursos tienes todos los cursos sobre WordPress paso a paso, en vídeo, lecciones muy detalladas y explicadas de forma muy sencilla. Simplemente hay que seguir lo que ves en los vídeos y conseguirás los mismos Curso de WordPress básico Curso de WordPress intermedio Curso de hacer SEO con Yoast en WordPress Curso de crear una tienda online con WooCommerce Curso de crear páginas a medida sin saber código con el curso de Page Builder y y más cursos que hay en camino. Además, por supuesto, soporte a través de correo electrónico y regalitos de vez en cuando. Plugins y Themes Premium Y vamos a lo bueno, al tema que nos ocupa hoy. Y lo primero, como siempre, como todos los miércoles, es hablar del plugin de la semana. Y este es un plugin muy muy nuevo pero súper útil. Se llama WooCommerce QuickView y para todos los que tengáis una tienda online con WooCommerce o estéis pensando en crearla, este plugin lo que te permite es que los clientes de tu tienda online puedan acceder a una vista rápida de los productos de tu tienda sin tener que salir, digamos, de la página de todos los productos. Es decir, están viendo todos los productos y hay un botoncito que le pueden dar vista rápida y aparece como una pantalla encima, digamos, de la página en la que tu cliente está. Es decir, no te lleva a otra pantalla. Y ahí hay una imagen de tu producto, un resumen con su título, incluso un botón de ir al carrito o de añadir al carrito Además otra cosa muy chula que tiene es que si le das, no me acuerdo si era a la derecha o abajo, pues puedes seguir viendo el resto de productos así en vista previa de una forma muy cómoda. Este plugin de momento es bastante nuevo, tiene súper pocas instalaciones pero de momento lo que he probado funciona súper súper bien y además es gratuito. Además una cosa que está muy bien es que si quieres puedes deshabilitar esto, es decir, lo de la vista previa en los móviles, algo que está muy bien porque ese tipo de cosas que se te abra una ventana encima de la pantalla que estás navegando para móvil no es muy útil. Entonces esa pequeña funcionalidad que puedes marcar me gustó mucho de este plugin, tiene todos los detalles muy cuidados y seguro que además va a mejorar cada vez más. Luego también puedes customizar ciertas cosas, los colores y ciertas cosas en la forma en la que van a ver, así que es súper súper recomendado WooCommerce Quick View, ya sabéis, dejo el link como siempre en el post, en mi blog y en las notas del programa. Y sin más arrancamos con el tema principal de esta semana que es cómo hacer test de velocidad de tu web con WordPress. Pero antes vamos a ver por qué es importante saber la velocidad de tu web. Bueno, primero por curiosidad, seguro que si no lo sabes ya sólo con escuchar alguien hablar de ello ya te apetece comprobar la velocidad de tu web. Pero más allá de eso es importante porque según los resultados tienes que ver si de verdad has de tomar acción y tomar ciertas medidas. ¿Qué conlleva una web lenta? Pues conlleva lo obvio, pérdida de visitas, sobre todo en móvil, si en móvil no carga rápido la gente dice chao, en móvil la gente no se anda con tonterías y hay muchísimas estadísticas que así lo dicen. Y las pérdidas de visitas ¿Que conllevan? Pues si vendes algo, pérdida de ventas, estás dejando de ganar dinero si tienes una web lenta, eso está clarísimo. Y por último que Google odia los lentos, Google te va a penalizar en términos de SEO, de posicionamiento y demás, así que es buena idea tener una web lo más rápida posible. Después, ¿Cómo comprobar la velocidad de mi web? Pues hay muchas herramientas, yo voy a hablar de dos, una es un test de google que se llama PageSpeed Insights, dejo el link en las notas del programa y muy sencillo, vas al link que os dejo, escribís vuestra dirección, por ejemplo voy a hacer una prueba ahora mismo con google. Com ¿Vale? Escribo google. Com y fijaos porque el propio Google ni siquiera tiene una nota de estas que te vuelvas loco. Esto lo que hace es darte una nota para móviles de tu web, cómo se ve en móviles, cómo carga de rápido en móviles y otra para ordenador. Además en móvil te da una nota de la experiencia de usuario y la nota es de 0 a 100. Google por ejemplo para móvil en velocidad tiene 79 de 100 y sale en amarillo. Cuando salga en amarillo quiere decir que está bien, pero se puede mejorar y cuando salga en verde es que está muy bien. Si sale en rojo es que está mal, debes mejorar la velocidad. Si sale en amarillo, bueno, amarillo así como anaranjado, como ámbar, pues si, hay cosas que puedes mejorar si sale en ámbar y que puedes mejorar mejor, pero quizás llegue un punto en el que no esté en tu mano mejorarlo. En fin, pues eso, Google tiene en móvil 79 sobre 100 y en ordenador 92 sobre 100 y te dice además lo que puedes mejorar. Por ejemplo en Google en móvil, que es donde podría mejorar, pone que es que tiene redireccionamientos. Entonces Google tiene distintos redireccionamientos para mandarte a un lugar u otro, pues eso es lo que hace que cargue más lento, pero lógicamente no puede evitarlo porque necesita redireccionar en función de ciertas cosas. Y esto pues se lo pone en Google al propio Google como un error grave. Cuando sale con una exclamación roja es que es un error grave que te penaliza bastante la velocidad. Y pues en ordenador pues tiene errores leves que salen en ámbar y que tampoco vamos a entrar en tanto detalle. Por ejemplo si meto mi web Gonzalo Navarro es pues me da 73 de 100 en móvil y 89 de 100 en ordenador. El ordenador me lo da en verde, que está muy bien, está bastante optimizado. Y en móvil pues puedo mejorar también tengo igual que Google una exclamación roja que se escapa un poco de mí. Podría intentar mejorar algunas cosas, que de hecho lo tengo pendiente, pero cosas como por ejemplo el código de Google Analytics para ver, para trackear las visitas y eso, pues eso, me resta en velocidad también el pixel de Facebook también me resta velocidad. En fin, Hay ciertas cosas que se escapan un poco de lo que yo puedo corregir, pero otras sin duda que sí que puedo mejorar y lo haré. Pero en general estas notas están bien. Vale, muy bien, 73 sobre 100. Bueno, quizás se pueda mejorar, pero en ordenador 89 sobre 100, casi 90. Está muy muy bien. Y este es uno de los test que podéis hacer. Después hay otro que es más completo aún que que se llama Pingdom, es una de las herramientas de Pingdom y también os dejo el link en la nota del programa. Y aquí lo mismo, introduces la URL y eliges desde dónde quieres que se haga el test. Puedes elegir tres sitios de Estados Unidos, uno en Australia y otro en Europa. Pues elegimos el de Europa y le damos a empezar test. Está todo en inglés, pero se entiende muy bien, es muy sencillo de seguir. Y entonces esto así te da primero un resumen y te dice te da una nota sobre 100. Esto lo hace basándose en PageSpeed, así que aquí vais a tener más o menos lo mismo, pero te da una media. Entonces aquí a mí me da de media 85 también contando la de móvil que es más baja, pues en total me da 85. Te dice los segundos que tarda tu página en cargar. ¿Bueno, lo ideal es menos de dos segundos, vale? Pero si os movéis un poquito más arriba, pues tampoco pasa nada. En mi caso mi web va a 1.4 segundos, que está súper bien. Y luego te dice si carga más rápido que qué porcentaje. Por ejemplo, mi web dice que es más rápida que el 83 % de las webs que hacen el test. Después te da el tamaño de la página y otra serie de datos. Luego más abajo te da ya cosas más específicas. Más abajo todavía también te da más datos sobre el tamaño, el tipo de contenido, el número de peticiones que hace tu página web, que eso es básicamente lo que más tarda. Te da gráficos con miles de cosas. En fin, si te pones en serio, en serio, en serio y te pones a analizar todo esto, puedes ver todo lo que falla en tu web para que no sea tan rápida. ¿Bueno, una vez visto los test que podemos hacer, es decir, cómo podemos comprobar la velocidad de nuestra web, vamos a ver lo Cómo mejorar la velocidad de tu web? Bueno, primero haciendo caso a los resultados de los test. Si los test te dicen que no es rápida, no pases de ello, hazle caso y vete a los detalles y mira a ver cómo puedes corregir cada uno. ¿Si queréis que haga un curso de esto, de cómo corregir todo lo que te va diciendo Google PageSpeed que hay que corregir, me lo decís si lo hago, de hecho lo quiero hacer un caso real, vale? No coger una web de ejemplo, sino he hablado con dos clientes y bueno, he hablado con dos porque lo tengo pendiente hacerlo con ellos dos y entonces les he preguntado si les importa que ya que lo hago que lo grabe en vídeo, entonces creo que sería muy buen ejercicio y un muy buen curso para la zona de suscripción, así que si queréis que lo haga me lo decís y lo hago. Entonces primero eso, hacer caso a lo que te dice Google PageSpeed y Pingdom Tools. Después aspectos importantes, para esto ya hice un post que se llama Cómo tener un WordPress rápido en seis pasos, dejo el link también en las notas del programa, si no lo podéis buscar en el blog y voy básicamente a hablar un poquito de eso, si queréis más detalle pues id a ese post que está muy bien. Entonces lo primero, tener un hosting optimizado. ¿Qué quiere decir eso? Pues tener un buen hosting, si el hosting no está bien optimizado, tu web lo va a notar, tu web va a ir lenta, más si tenéis hosting compartido, que es lo más común y eso no quiere decir nada, los hay mejores y peores y entonces pues buscad un buen hosting. Yo por bueno siempre voy a tirar por uno especializado en WordPress, es decir, que tenga todo optimizado para WordPress, de esa forma va a ir más rápido. Y si tienes una pregunta o quieres que te guíen en pasos para hacerlo más rápido, pues también les puedes preguntar por qué van a saber de WordPress, ya lo sabéis, yo siempre recomiendo SiteGround si os interesa. ¿Gonzalonabarro es hosting Qué más aparte de un hosting optimizado? Las imágenes. Las imágenes son muy importantes, son clave en la velocidad de una web. Hay que tener imágenes optimizadas. ¿Qué es lo ideal? Pues que cada foto que subamos la editemos primero en Photoshop o en algún editor similar, que reduzcamos el tamaño al máximo que vayamos a necesitar, es decir, si en nuestra web lo más grande que vamos a poner una foto es de 720 píxeles, pues es tontería enorme subir una foto de 2000 píxeles de ancho me refiero. Entonces ajusta todas tus fotos al tamaño máximo que las vayas a subir. ¿Pero qué pasa si tú no has hecho todo esto y ya tienes un montón de imágenes subidas en tu web y no están optimizadas? Pues para eso amigos, como para todo hay un plugin y en este caso dos. Os voy a recomendar dos, los dos son muy buenos, uno se llama WP Smash y otro Image Optimizer. ¿Los links están en el post que os he dicho, vale? Hacéis clic en el post que os recomiendo y ahí pues tenéis los links a estos plugins. Los dos están muy bien, lo que puedes hacer con ellos es optimizar todas las imágenes que ya tenías subidas con un solo clic le das a optimizar y se te optimizan todas las que ya tenía subidas y además todas las que vayas subiendo se te optimizan de forma automática sin que tú tengas que hacer nada ya una vez que lo tengas configurado ya listo y en concreto WPS más hace poco, creo que además días, pues sacaron una nueva funcionalidad y es que si tienes una imagen en PNG y ellos ven que pasándola a JPG vas a ahorrar bastante en cuanto a rendimiento, pues te la van a pasar automáticamente, lo acaban de poner. Esto es el primer plugin que veo que lo hace así de forma automática y de forma tan eficiente y está muy bien. ¿Yo es el que uso, vale? WP Smash, pero el otro está súper súper bien también. Después el caché. El caché si no lo sabéis es simplemente la capacidad que tienen los navegadores como Chrome, Safari, Firefox y todos estos de guardar información de las páginas web que visitas. Por eso la primera vez que entras a una web tarda un pelín más en cargar y conforme vas entrando más veces ya carga más rápido. ¿Esto por qué es? Porque guarda cierta información que siempre es la misma, la guarda de esa forma no hay que estar cargando todo el rato y haciendo peticiones que no hacen otra cosa, sino más lenta la carga de la web. ¿Entonces para esto debes instalar un plugin, te recomiendo, bueno dos, vale? No dos, sino como en dos bloques. Para los que estáis en SiteGround recomiendo SG Caché Press que es un plugin hecho por los propios trabajadores de SiteGround y es de estos plugins que son fantásticos plugins para flojos, que los instalas y no tienes que hacer nada más y además es bueno si lo instalas y no tienes que hacer nada, pero el plugin no hace nada. No, este está muy bien. Como ya tú estás con SiteGround, pues este plugin lo reconoce y ya tiene todo optimizado para que vaya como la seda. Si estáis con SiteGround no tengáis duda, SG Caché Press. Si no, pues hay muchísimas opciones interesantes. Si buscáis caché plugins de caché, pues hay varios muy famosos, uno de ellos es wtotalcaché, está muy bien, tienes muchas más cosas que configurar, pero está bien. Entre estos así más famosos, te aconsejo probarlos todos, porque esto también, no sé por qué, a veces uno funciona mejor que otro dependiendo de la web, no hay ahí un. Al menos que yo sepa, algo que te pueda decir de cuál es mejor o no, si no simplemente son bastante similares, pero a veces uno funciona mejor que otro. ¿Qué más? Pues tener una CDN. ¿Qué es una CDN? Pues viene de Content Delivery Networks, que quiere decir Redes de Entrega de contenido. Y el nombre está muy bien escogido porque lo que hacen las CDN es repartir desde servidores colocados en muchos sitios en todo el mundo, de hecho puedes repartir nuestro contenido de esa forma llega antes. Estamos, imagínate que estamos en España y hay que ir a Asia a por contenido y traerlo hasta aquí, o tienes algo mucho más cerquita, como por ejemplo Francia y puedes ir ahí y recogerlo, un sitio donde también tienes ese contenido, pues vas mucho más cerca a Francia y lo traes antes. No es así, pero para que te hagas una idea es repartir el contenido por varias zonas para que así llegue más rápido según las peticiones de la gente. Eso es lo que hace una CDN, así un poco explicado a lo bestia. Y dos de los servicios de CND más populares, también hay muchos aquí populares, está Max CDN, que es uno de los más populares, que vale desde 9 euros al mes y luego Cloudfair, que lo tienes gratis con SiteGround. ¿Qué más? HTTPs, o lo que es lo mismo, un certificado de seguridad SSL. Esto quiere decir que todos que los datos que vayan en los formularios y que pasen por tu web van a ir encriptados. Y esto, aunque es algo relacionado con la seguridad también, no está claro, pero parece que también ayuda en velocidad. Google dijo de hecho expresamente que sí que daba un empujoncito a los que tuviesen su web segura. Y en cualquier caso, es una tendencia cada vez blogs, especialistas y gente del mundo y las empresas importantes Pues dicen que es una tendencia muy clara que al final todas las webs van a tener que estar protegidas con SSL. Por eso algunas de las empresas más grandes de Internet, como Google Automatic siteground, están detrás del sistema Let's Encrypt. ¿Y qué es esto? Pues es un certificado de seguridad gratuito para tu web. Y algunos servicios de hosting ya ofrecen este servicio, como por ejemplo SiteGround. Y lo mejor de todo es que esto antes era un proceso que prácticamente había que encargar a alguien que lo hiciera por ti, por su tremenda complejidad. Tener un certificado de seguridad era técnicamente muy complejo y ahora con un solo clic tienes el certificado SSL creado y además gratis. En SiteGround es en un clic gratis y lo tienes. Y hay algún otro hosting por ahí que también lo puedes hacer. Y Por último, HTTP. ¿Qué es HTTP? Pues es la nueva web, así de claro, así de sencillo. Hasta ahora todas las webs estaban en HTTP, que era el funcionamiento por el que se regía la entrega de información, vamos a decirlo así, Pues antes era HTTP y ahora es HTTP. Es un sistema mucho más eficiente y se puede explicar diciendo que en lugar de entregar información dando varios paseos, ahora se entrega toda de un solo paseo y de forma ordenada. Es decir, recoge todo la primera vez y lo entrega directamente en lugar de estar yendo y viniendo. Es una forma mucho más eficiente, con lo que se traduce en más velocidad. Si estás en SiteGround no tienes que hacer nada. Si tu host tiene SiteGround no tienes que hacer nada porque ya tu web está en HTTP y además esto incrementa considerablemente la velocidad de carga de una web. Si no estás en SiteGround, pues consulta con tu servicio técnico para saber si lo tienes activado. Si no lo tienes, dile que te lo activen. Y si tu hosting no lo soporta o no lo tiene, pues te aconsejo que te cambies de hosting. Y nada más, estos son los pasos para mejorar la velocidad de tu web después de haberla comprobado con los tests que te he recomendado y después de haber hablado de por qué deberías interesarte más allá de por curiosidad, de la velocidad de tu web. Recuerda que tienes ese recurso adicional que te he dicho, un post que te he explicado así por encima hoy, pero si quieres más detalle lo tienes en las notas del programa. Y nada más, si te ha gustado el episodio ya sabes que puedes dejar una valoración de 5 estrellas en iTunes que te lo voy a agradecer mucho porque así voy a crecer en iTunes y puedo llegar a más gente. También puedes dejarme un me gusta o comentarme lo que quieras que te responderé en ivoox y así el podcast puede seguir creciendo contigo. Además, recuerda la iniciativa que si dejas un comentario en Ivoox o una reseña en iTunes puedo decir el comentario aquí en el programa. Además puedo mencionar tu web, si dejas tu web en la reseña la mencionaré y dejaré el link en las notas del programa en mi blog y así tendrás un link desde mi web. Creo que es una buena forma de agradeceros que os toméis un minutito para dejarme una reseña. Y nada más, muchísimas gracias, nos seguimos escuchando. Adiós.