Ahora que tenemos que estar todos trabajando desde casa por la pandemia de coronavirus no deja de ser un momento ideal para llevar a cabo tareas para las que no siempre tenemos la tranquilidad necesaria. Así que ya seas marketeer o web developer, o simplemente quieres mejorar tu site, te traigo una guía en 4 sencillos pasos para optimizar la velocidad de carga de tu web.
Primero una info rápida. He probado muchos tutoriales, la mayoría de los expertos y de los «expertos» coinciden en que la velocidad depende de los recursos que utilices, lo que significa que tires de recursos ligeros, uses un servidor potente y trates de no sobrecargar tu web. En lo que ya no coinciden tanto es en las herramientas a utilizar. Hoy yo te voy a contar, tras muchos testeos, los programas y herramientas que mejor me han funcionado.
Optimizar una web significa que tenga una carga óptima de 1,5 segundos, son velocidades alcanzables y que a Google gustan mucho. La velocidad no sólo supone una mejora en la experiencia del usuario, pero lo cierto es que ante una web que carga lento (más de 3 segundos) nuestra paciencia se agota y buscamos opciones más veloces, aunque no sean tan buenas; pero es que además, es uno de los parámetros que usa Google para posicionar a nivel orgánico.
¿Quieres saber cómo medir la velocidad de tu web? Hay herramientas como GTMetrix o PigdomTools que te hacen una análisis muy completo de los tiempos de carga, las peticiones al servidor, el peso de la web, etc., pero lo cierto es que aunque muy útiles, sólo hay un valor que realmente importa, el que puedes obtener de la herramienta de velocidad de Google.
Qué podemos optimizar en la web:
- Tema
- Plugins
- Servidor
- Plugins de optimización
1. Tema:
Utiliza un tema ligero para tu Web, los mejores resultados los he obtenido con Hello Elementor, tema nativo del plugin Elementor; Divi, un tema complejo con su propio editor visual.
Los resultados que obtuve para la última web realizada son los siguientes.
Resultados:
- Tema Twentyseventeen de WordPress 89 en móvil, 98 en ordenador
- Hello Elementor: 100 en móvil y 100 en ordenador
- Divi: 67 en móvil y 94 en ordenador.
2. Plugins:
Reduce al mínimo las funciones que añades a la web. Tanto Divi como Elementor tienen complejas extensiones de formularios que te permitirán prescindir de formularios externos como ContactForm7 (plugin muy bueno y muy potente, pero que tiene miles de extensiones).
En mis webs tiendo a utilizar la menor cantidad de plugins posible: únicamente los dos plugins de Elementor (estándar y pro), YOAST SEO para metadatos, robots y sitemap, Autoptimize para compresión y caché base, Metronet Tag Manager para gestionar todo el paquete Analytics, Facebook, y Google ADS desde Google Tag Manager y finalmente Imagify para optimizar las imágenes y pasarlas a formato webp.
Vale, ¿pero qué pasa si quieres un ecommerce? Entonces hay que rizar el rizo un poco más. Necesitarás obviamente WooCommerce, que activa la versión tienda de WordPress, un plugin para gestionar los pagos con tarjeta (PayPal ya viene incluido en WooCommerce, no hace falta que lo instales). Aparte se te plantearán otras alternativas, como el hecho de que WooCommerce no cuenta con herramientas nativas tipo CRM o de facturación. Obviamente tu instinto te puede decir que lo hagas, pero tu instinto se equivoca, parafraseando a Barney Stinson. Puedes vincular WooCommerce fácilmente a programas de terceros para gestionar el CRM y/o la facturación así como el transpote.
3. Servidor:
Un servidor potente radicado en el país donde vas a operar es la mejor solución. Sin duda uno de los mejores resultados me lo ha ofrecido Webempresa, el Plan L para WordPress o el Plan L para WooCommerce son realmente potentes y soportan un tráfico de hasta 50.000 usuarios al mes, buena capacidad de almacenamiento y certificado SSL incluido.
4. Plugins de optimización:
Imagify es un plugin para optimizar imágenes, hace un doble proceso, comprime las imágenes y las convierte a formatos apropiados para web, como WebP. Con la versión gratuita tienes hasta 25MB de compresión al mes. Yo utilizo Icecream Image Recizer para comprimir las imágenes mi ordenador y luego Imagify en WordPress.
Haré un tutorial más adelante, ya que el programa tiene más funciones, pero en este tutorial de YouTube tenéis la información necesaria para su configuración básica.
Autoptimize, un secillo plugin para comprimir HTML, CSS y JavaScript. ¿Cómo configurar Autoptimize? JavaScript: activar optimizar JS y unificar todos los archivos JS. CSS: activar optimizar CSS, unificar todos los archivos CSS, incluir CSS incrustados. HTML: optimizar el código HTML. Al final del todo, en Otras opciones, marcamos las 3. De esta manera conseguimos reducir el peso de todos estos archivos.
Recomendación: como no somos programadores y desconocemos qué elementos funcionan con Java, comprueba toda tu web en versión normal e incógnito en tu navegador para ver que todo funcione correctamente, no te preocupes si ves un error, ya que también cachea, y a veces da fallos en el CSS. Si comienzas a ver fallos ve desactivando opciones una a una y revisando hasta que des con el error.
Conclusión
A mí este sistema me ha funcionado a nivel personal y con mis clientes, lo que se busca es lo que señalamos al principio, una web ligera que consuma pocos recursos, así habrá que optimizar menos a posteriori, y por tanto evitamos seguir cargando plugins sin piedad.
Este tipo de estrategia va muy bien para webs de contenido, como puede ser un blog con Adsense o una página corporativa con blog, que al final son el tipo de web más corriente. Estamos hablando de velocidades de carga en torno a 1,5 segundos con este sistema, al mismo tiempo seguimos siendo SEOFriendly, no abusamos de caché (ya que genera mala experiencia de navegación) y hay pocos plugins que controlar, por tanto menos incompatibilidades futuras.
Espero que os haya animado a pasar la cuarentena algo más ocupad@s, y que así podáis mejorar la navegación de vuestros usuarios. Y si necesitáis asesoramiento, nos tienes a tu alcance al formulario (ahora más que nunca).