Seleccionar página

¡Hola amigos del Speed Test!

Optimizar un sitio web para sumar velocidad puede llegar a ser complejo y desesperante, sobre todo para los que no son programadores como el que os escribe. He consultado una enorme cantidad de guías, artículos y vídeos que te ayudan y proporcionan asesoramiento, pero a menudo, no es aplicable a todos los sitios web ni tampoco hay que tomárselos muy en serio.

En uno de mis proyectos de tienda online con WooCommerce he tenido más  problemas que soluciones por culpa de una sobreoptimización de velocidad.

Y es que a veces, menos es más.

En mis peripecias con la dichosa velocidad de carga, he dudado de mis hosting y servidores VPS, de WooCommerce e incluso de WordPress. Casi estaba por dinamitar todo el proyecto y empezar de nuevo con Joomla y mi querido VirtueMart. Pero finalmente, tras un descanso mental totalmente necesario, el coco empezó a pensar mejor y volví a intentarlo paso a paso.

Es por estas experiencias lo que me ha motivado en escribir este artículo, aportar mis consejos y despejar ciertas dudas o miedos.

1. Herramientas que miden la velocidad de carga

Menudo “cacao maravillao”.

Cuando utilizamos una de las herramientas de velocidad de pruebas como Google PageSpeed Insights, GTMetrix o Pingdom, a un sitio se le da una calificación junto con algunas recomendaciones. Los clientes a menudo piensan que por tener un plugin de caché deben tener calificaciones casi perfectas. Pero te aseguro que es una pérdida de tiempo tratar de perseguir la calificación perfecta.

Simplemente no existe.

La única métrica que importa es el tiempo de carga real de la página.

¡Pero que me dices! ¿Por qué no importa?

Las principales razones para tener un sitio más rápido son:

  • Para mejorar la SEO
  • Para mejorar la experiencia del usuario
  • Para aumentar las conversiones

En ninguno de estos escenarios tiene importancia la nota que consigas.

Cuando el Googlebot visita tu sitio, no sabe la calificación que se obtiene de cada una de las herramientas de pruebas de velocidad. Sólo le interesa lo rápido carga tu página.

Ya sabemos todos que cuando se realiza una auditoría web para un trabajo de WPO (Web Perfomance Optimization) la velocidad de respuesta de un sitio es uno de los factores más importantes a medir.

Una de las métricas más importantes y también más desconocidas es conocer el TTFB (Time to First Byte) que es lo que tarda un sitio desde que hacemos una solicitud hasta que llega el primer byte de información a nuestro navegador. No es lo mismo una que otra métrica, el Load Time, es lo que tarda la página en ser cargada para ser usada en el navegador.

Una herramienta para conocer tu TTFB es utilizar WebPageTest.

En mi caso el “First Byte” ha marcado un valor de 0,908 segundos.

webpagetest-partydisfraces

¿Cuál es el promedio para TTFB?

Es difícil dar un número exacto porque hay muchos escenarios diferentes, pero en términos generales para un sitio web moderno y suponiendo que está probando una página de la misma región geográfica donde se aloja la página, son estos:

  • Menos de 100 milisegundos es excelente
  • 200 milisegundos es ideal
  • 500 milisegundos no es ideal
  • 1 segundo es malo
  • 2 segundos o más es muy malo

Cuanto más lejos se prueba más largo es el TTFB debido a la latencia. Como referencia, Google. es tiene un TTFB de unos 0,6 segundos. La página que estás leyendo ahora tiene un 1,5 segundo de TTFB. Google ha declarado que los servidores web deben tener un tiempo de respuesta de 200 milisegundos o menos. Pero ni de coña.

Cuando buscamos mejorar la velocidad de nuestra web siempre nos encontramos con estos tres consejos: buscar un hosting de calidad, activar la compresión gzip y optimizar el código de programación.

Todos ellos son ciertos, pero activar la compresión gzip no significa que mejore un TTFB malo, pero si mejorará el Load Time.

Entonces, ¿qué es una buena calificación?

Las calificaciones y recomendaciones son útiles para proporcionar una guía y detectar cualquier bandera roja o cuellos de botella de tu sitio. Pero es un hecho de que un grado superior no es igual a un tiempo de carga más rápido. He analizado montones de sitios con calificaciones altas y luego resultar ser lentas.

Por ejemplo, este sitio que corresponde a un supermercado muy conocido, tiene un tiempo de carga de 1,72 segundos, nada mal, pero la nota de Pingdom es: 74/100 con sólo 119 peticiones. Pienso que debería ser más alta.
pingdom-cf
Cada herramienta va a su bola con sus resultados. Así que no te preocupes por la nota, céntrate en el tiempo de carga real.

A veces las sugerencias que se hacen son para ayudar a mejorar el tiempo de carga, pero a veces va a ser difícil de implementar con poco o nulo beneficio.

Un ejemplo clásico de esto es cuando Google PageSpeed ​​sugiere mover archivos CSS y JS al pie de página. Algunos archivos JS se pueden mover al final de página, pero otros van a romper tu sitio si los mueves. Del mismo modo, si cargas la web sin estilos CSS, aparecerá hecha un lio y proporcionará al usuario una experiencia horrible.error

2. Necesitar todo tipo de cachés

Otro de los consejos que te habrán dado para mejorar la velocidad de WordPress es que te instales un plugin de caché. Es verdad, pero un plugin de caché mal configurado puede ser incluso perjudicial. A mi experiencia te remito.

En un sitio sin almacenamiento en caché, cuando un visitante visita una página, el servidor, a través de PHP tiene que reunir y montar la base de datos de los diferentes componentes de la página y el contenido y enviarlos de vuelta al navegador, todo esto sobre la marcha. Para este proceso se necesita un poco de tiempo y esfuerzo.

Por el contrario, una página de caché (que es lo que hace WP Super Cache y otros plugins) genera archivos HTML estáticos del contenido, que es más rápido para servir a tus visitantes que tener que generar las páginas con PHP desde cero cada vez.

Esto significa que cuando se tiene un plugin de caché de páginas y un visitante llega a tu sitio, no es necesario tocar la base de datos en absoluto. Y es cierto para muchos sitios web. Hay algunas circunstancias en las que puede ser necesario almacenar en caché la base de datos, pero es probable que tu sitio no lo requiera. Por ejemplo, si tienes un sitio muy dinámico, donde la página de caché no es realista, el almacenamiento en caché de la base de datos sería útil. La mayoría de bloggers no tienen que preocuparse por esto.

3. Sólo necesitas un plugin de caché

Un plugin de caché es una herramienta imprescindible para la creación de una página web rápida. Vale. Pero no debería ser lo único. En un sitio de WordPress hay muchas capas que se pueden optimizar. Es cierto que algunas son más fáciles que otras. Un plugin de caché (cuando está configurado correctamente) siempre va a ayudar, pero es la última capa en la creación de un sitio rápido. Es de ayuda si tu sitio es deficiente en general.

Otras capas que se deben tener en cuenta son:

Alojamiento web

Si tu hosting es lento, estás un poco condenado y siempre habrá un límite máximo que frene la velocidad de tu sitio. Un buen hosting no tiene por qué ser caro. Yo tengo 3 hostings Bana-Profesional deluxe contratados con Banahosting y muy contento con los resultados y sobre todo con el servicio de atención al cliente. Incluso he obtenido mejores notas de velocidad que con mis servidores VPS. Curioso, ¿no?

Tu tema WordPress

La mayor parte del código generado en tu sitio viene del tema que tengas instalado, por lo que un tema mal codificado frenará tu web casi al 100% seguro. Esta es un área que puede ser difícil de solucionar si no eres un desarrollador por lo que se hace necesario instalar componentes para optimizar la velocidad y rendimiento del sitio.

Por norma general los temas de compra vienen con todo tipo de características y opciones adicionales que en muchos casos no vamos a usar. Estos temas vienen cargados de plugins para mostrarlos bonitos en su escaparate y venderlos. Si tienes alguno de estos temas, desactiva las opciones que no necesites, el sitio va a funcionar igualmente bien.

Los plugins

Contrariamente a la creencia popular, no es la cantidad de plugins que tienes lo que cuenta, es la calidad. Solo se necesita un mal plugin para que tu sitio acabe en siendo un zombie, lento e inseguro. Por tanto, tienes que ser prudente en los plugins que instalas y eliminar cualquiera que no estés utilizando.
Existen muchos plugins para realizar pruebas de compatibilidad de temas y plugins. Por ejemplo, Sandbox puede comprobar los problemas de compatibilidad entre los plugins que tenemos cargados. SandboxUna vez instalado te pedirá que realices una copia de seguridad de tu sitio y posteriormente probará todo la web para detectar problemas.

Si pones un cohete en un coche deportivo y un cohete en un tanque, el deportivo aún irá más rápido porque está fabricado para correr. Lo mismo se aplica a tu sitio web.

El almacenamiento en caché no puede arreglar códigos penosos, sólo puede mitigar los efectos, hasta cierto punto.

4. Menos peticiones HTTP = sitio web más rápido

Una pauta común consiste en reducir el número de solicitudes que tiene que hacer el servidor con tu sitio web con el fin de presentar la página. En gran medida esto es cierto, pero como en todo, es un poco más matizable que esto.

Aquí es cuando hablamos del término minificación. La mayoría de las herramientas de minificación toman todos los archivos CSS y los ponen juntos en un archivo grande (concatenación). Así que si originalmente eran 8 archivos CSS, ahora sólo es 1. De esta manera sólo  hay una petición HTTP en lugar de 8. Una buena mejora ¿no?

Bueno, tal vez no. Los navegadores actuales son capaces de descargar varios archivos a la vez en paralelo. Esto significa que podría ser más eficiente y más rápido para tu navegador descargar varios archivos más pequeños a la vez, y a continuación, un archivo grande. Los resultados pueden variar de un sitio a otro por lo que tendrías que probar esto por ti mismo.

En el futuro, con HTTP/2, las reglas del juego cambiarán. Con la inclusión de Server Push, las transmisiones de datos será mucho más rápida. Hoy en día, cuando se conecta con un sitio, se envía primero el HTML de una página y luego tu navegador pide los JavaScript, Flash, imágenes, etc. Esto genera un montón de conexiones de encendido y apagado sólo para una página. Ahora, con Push Server, el servidor enviará el contenido completo de una página, a excepción de lo que se tenga en tu caché localmente.

Aquí muestro una imagen de cómo el número de peticiones no es el mejor indicador de eficiencia.pingdom-partydisfraces-1
En una tienda online que gestiono, empezó con 191 solicitudes y un tiempo de carga de 3,89 segundos de carga probando desde un servidor de Amsterdam.

Con la instalación y configuración del plugin de minificación BWP Minify, y optimizando algunas imágenes, las solicitudes bajaron a 99 manteniendo prácticamente intacto el tiempo de carga.pingdom-partydisfraces-2

Tampoco nos tenemos que volver locos con los resultados. Cuando he vuelto a probar los resultados me ha dado un 94% y con casi 5 segundos de carga. ¡Tururú!pingodm-partydisfraces-3

Con el plugin a3 Lazy Load obtengo estos números. Aumentan los Request a 182 pero baja el tiempo de carga 2 segundos y el peso de la página se reduce a 1,4 MB.lazyload activado

Luego en otros medidores como GTmetrix, me dice que tengo minificado CSS y JavaScript y sin embargo, en otros me dice lo contrario. En fin, que lo mejor es comprobar la velocidad de tu sitio web como quien se chupa el dedo para saber de que dirección sopla el viento. Si te va bien y no hay quejas de los usuarios, pues ya puedes estar contento.GTmetrix-partydisfraces

Así que no puedes centrarte en un solo indicador. Tienes que adoptar un enfoque holístico para la optimización.

5. Usar un CDN

Cansado estoy de leer que si no tienes tu sitio web en un CDN como CloudFlare, MaxCDN o Amazon CloudFront tu sitio no será rápido.

Pura mentira. Mi consejo es que no te lo tomes en serio.

Un CDN es ideal para servir activos (por ejemplo, imágenes, archivos CSS, archivos JS) a un visitante desde el lugar más cercano a ellos como sea posible para reducir la latencia. La latencia es el tiempo que tarda el servidor para enviar el contenido al navegador del usuario. Cuanto más lejos esté del servidor el usuario final, más tiempo se tardará para entregar esos activos.

Imagina que chutas una balón de fútbol a un compañero de equipo desde la defensa hasta el área contraria. Cuanto más lejos de tu compañero de equipo, más tiempo tardará el balón para llegar a él. Con un CDN, el contenido se distribuye entre servidores en todo el mundo de forma que pueda ser servido desde el punto más cercano al usuario y por lo tanto el usuario lo ve más rápido. El portero chuta y la pelota por arte de magia, aparece a los pies de Messi listo para marcar a puerta.

Así que un CDN en realidad sólo tiene sentido si tu público se distribuye a nivel internacional, de lo contrario, puede ser inútil y un gasto innecesario.

También hay que tener en cuenta que un CDN es un servidor externo, el navegador tiene que hacer una búsqueda de DNS para llegar a ese servidor externo y cada búsqueda lleva un poco de tiempo (aproximadamente unos 200 ms).CDN

Así que hay que asegurarse de que la velocidad de latencia que se obtiene de la CDN es mayor que la búsqueda de DNS y el tiempo de respuesta.

La optimización para aumentar la velocidad de tu sitio no es un proceso de pinto y coloreo. Requiere de paciencia y muchos ensayos de prueba-error hasta encontrar la mejor solución para tu sitio. Cualquier sugerencia o consejo que encuentres tendrás que probarlo antes para ver si va a funcionar correctamente para ti. En caso contrario descártalo. Es mejor que funcione a trancas y barrancas que cargarte tu sitio.

Como dice el dicho: “Virgencita, Virgencita, que me quede como esté”

Pues esto es todo. Si te ha gustado este artículo, puedes compartirlo sin problemas. ¡Un saludo!

Artículos de interés

Si te ha gustado comparte en:

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.