Guía práctica y extensa, con pasos concretos para cada plataforma, pensada para que cualquier persona sin conocimientos de programación pueda hacer que su sitio cargue más rápido.
Todos hemos vivido esa sensación de frustración. Entramos a una página, la rueda de carga gira y gira, y antes de que termine de aparecer el contenido ya estamos pensando en cerrar la pestaña. Ese instante de espera, que muchas veces dura apenas unos segundos, puede ser la diferencia entre ganar un cliente o perderlo para siempre.
Diversos estudios sobre comportamiento de usuarios coinciden en algo curioso, la mayoría de las personas abandona un sitio si tarda más de tres segundos en cargar. Esta guía reúne todo lo que puedes hacer para evitar que eso le pase a tu sitio, explicado paso a paso, sin tecnicismos innecesarios y sin necesidad de escribir una sola línea de código.
Lo que vas a encontrar en esta guía
- Cómo medir tu punto de partida
- Comprimir y optimizar tus imágenes
- Activar la carga diferida
- Elegir y mejorar tu hospedaje web
- Activar una red de distribución de contenido
- Activar el caché de tu sitio
- Reducir el código que sobra
- Cuidar tus fuentes tipográficas
- Controlar los scripts de terceros
- Cambiar cómo muestras los videos
- Guía específica según tu plataforma
- Errores comunes que frenan un sitio
- Cómo mantener la velocidad en el tiempo
- Lista de verificación final
1. Cómo medir tu punto de partida
Antes de tocar nada, necesitas saber en qué situación está tu sitio ahora mismo. No se trata de adivinar si va lento, se trata de comprobarlo con datos reales, y luego volver a medir después de cada cambio para confirmar que realmente funcionó.
Cómo medir la velocidad de tu sitio
- Entra a la página de PageSpeed Insights, que puedes encontrar buscando "PageSpeed Insights" en Google.
- Escribe la dirección completa de tu sitio en el cuadro de texto y presiona el botón para analizar.
- Espera unos segundos mientras la herramienta revisa tu página tanto en versión móvil como en versión de computadora.
- Revisa la puntuación general, que va de cero a cien, y la lista de oportunidades de mejora que aparece debajo, ya que ahí te va a decir exactamente qué está frenando tu sitio.
- Anota especialmente tres datos que aparecen bajo el nombre de métricas centrales, el tiempo de carga del elemento más grande visible en pantalla, el tiempo que tarda la página en responder al primer clic, y cuánto se mueven los elementos mientras la página termina de cargar.
- Repite el mismo proceso en GTmetrix, buscando "GTmetrix" en Google, para obtener una segunda opinión y ver además un video de cómo carga tu página en tiempo real.
- Prueba también Pingdom Tools, buscando "Pingdom website speed test", que te permite elegir desde qué región del mundo se hace la prueba, algo útil si tu público está repartido en distintos países.
- Guarda los tres resultados, en una nota o con capturas de pantalla, para poder compararlos más adelante cuando apliques las mejoras de esta guía.
- Repite esta misma medición cada vez que termines un bloque completo de mejoras, así vas a poder ver con claridad qué tan efectivo fue cada cambio.
2. Comprimir y optimizar tus imágenes
Las imágenes son, con diferencia, la causa más común de lentitud en un sitio web. Una fotografía tomada con un celular moderno puede pesar varios megabytes, y ese peso obliga al navegador a descargar un archivo enorme cada vez que alguien visita tu página.
Cómo comprimir las imágenes que ya tienes subidas
- Descarga las imágenes originales que están en tu sitio web desde el panel de administración de tu gestor de contenido, o desde la carpeta de medios si tienes acceso a ella.
- Entra a la página de Squoosh, buscando "Squoosh app" en Google, que es una herramienta gratuita y no requiere crear una cuenta.
- Arrastra cada imagen dentro de la ventana de Squoosh.
- En el panel de la derecha, elige el formato WebP y mueve el control deslizante de calidad hasta encontrar un punto donde la imagen se vea bien pero el peso en kilobytes, que aparece debajo, sea bastante menor al original.
- Descarga la imagen comprimida y súbela a tu sitio reemplazando la versión anterior.
- Si prefieres un proceso más rápido para muchas imágenes a la vez, usa TinyPNG, buscando "TinyPNG" en Google, donde puedes arrastrar hasta veinte imágenes al mismo tiempo y descargarlas todas comprimidas en un solo paquete.
- Repite este proceso por bloques, por ejemplo diez imágenes por día, hasta cubrir todo tu banco de imágenes, en lugar de intentar hacerlo todo de una sola sentada.
Cómo evitar subir imágenes pesadas en el futuro
- Antes de subir cualquier imagen nueva a tu sitio, pásala primero por Squoosh o TinyPNG siguiendo los mismos pasos anteriores.
- Revisa el ancho en píxeles del espacio donde se va a mostrar la imagen en tu página, esto normalmente lo puedes ver haciendo clic derecho sobre un espacio similar ya existente y eligiendo la opción de inspeccionar, o simplemente preguntando a quien diseñó tu plantilla.
- Si usas un programa como Photoshop, Canva o cualquier editor gratuito, cambia el tamaño de la imagen a ese ancho antes de guardarla, en lugar de subir el archivo completo tal como salió de la cámara.
- Como referencia general, para el banner principal de una página suele bastar un ancho de mil seiscientos píxeles, y para una imagen dentro de un artículo, ochocientos píxeles suele ser más que suficiente.
- Si tu sitio está hecho en WordPress, instala un complemento gratuito como Smush o ShortPixel, que comprime automáticamente cada imagen nueva que subas sin que tengas que hacer nada de forma manual.
- Configura ese mismo complemento para que convierta tus imágenes al formato WebP de manera automática, ya que suele haber una casilla específica para activar esa opción dentro de su configuración.
3. Activar la carga diferida
La carga diferida, conocida como lazy loading, hace que las imágenes solo se descarguen en el momento en que la persona se va acercando a ellas mientras se desplaza por la página, en lugar de cargar todas de golpe apenas se abre el sitio.
Cómo activarla
- Si tu sitio está en WordPress con una versión reciente, esta función suele venir activada de forma automática, así que puedes comprobarlo revisando tu puntuación en PageSpeed Insights, donde ya no debería aparecer como una recomendación pendiente.
- Si usas otro gestor de contenido como Wix, Squarespace o Shopify, entra a la configuración de rendimiento o velocidad dentro del panel de administración, y busca una opción llamada lazy loading o carga diferida para activarla con un solo clic.
- Si tu sitio está en WordPress y no la tiene activada, instala el complemento gratuito llamado a3 Lazy Load desde la sección de complementos, y actívalo, sin necesidad de configurar nada más.
- Después de activarla, entra a tu sitio desde el celular, desplázate lentamente por una página con varias imágenes, y confirma que las fotos van apareciendo a medida que bajas, en lugar de estar todas cargadas desde el principio.
4. Elegir y mejorar tu hospedaje web
El hospedaje web, o hosting, es el terreno donde está construido tu sitio. Un hospedaje barato y de baja calidad comparte recursos entre miles de sitios distintos en el mismo servidor, lo que provoca lentitud cuando hay mucha demanda, especialmente en horas de mayor tráfico.
Cómo evaluar y mejorar tu hospedaje
- Busca en Google el nombre de tu proveedor de hospedaje actual junto a la palabra reseñas para ver qué opinan otros usuarios sobre su velocidad y estabilidad.
- Entra al panel de tu proveedor de hospedaje y revisa qué tipo de plan tienes contratado, si es un plan compartido, probablemente ahí esté buena parte del problema.
- Mide el tiempo de respuesta de tu servidor, que aparece en los resultados de GTmetrix bajo el nombre de tiempo hasta el primer byte, si ese número supera los seiscientos milisegundos, es una señal clara de que tu hospedaje necesita mejorar.
- Si tu plan es compartido y tu sitio recibe bastante tráfico, contacta a tu proveedor y pregunta por planes de hospedaje administrado o hospedaje en la nube, que suelen ofrecer mejor rendimiento por un costo moderado adicional.
- Al comparar proveedores nuevos, pregunta específicamente en qué país o región están ubicados sus servidores, y elige uno que tenga servidores cerca de donde vive la mayoría de las personas que visitan tu sitio, esta información suele confirmarla el mismo equipo de soporte por chat.
- Pregunta también si el plan incluye certificado de seguridad, respaldo automático diario y soporte técnico en tu idioma, ya que son señales de un servicio de mejor calidad general.
- Antes de cambiar de proveedor, pide a tu equipo de soporte actual o al nuevo proveedor ayuda con la migración, ya que casi todos ofrecen este servicio de forma gratuita al contratar un plan nuevo, evitando que tengas que mover archivos tú mismo.
5. Activar una red de distribución de contenido
Una red de distribución de contenido, conocida como CDN, funciona como una cadena de sucursales repartidas por el mundo, cada una con una copia de tu sitio, de forma que la persona que te visita recibe el contenido desde la sucursal más cercana a su ubicación, en lugar de esperar a que la información viaje desde un solo servidor central.
Cómo activar Cloudflare de forma gratuita
- Entra a cloudflare.com y crea una cuenta gratuita con tu correo electrónico.
- Cuando te lo pida, escribe la dirección de tu sitio web para que Cloudflare la analice.
- Elige el plan gratuito cuando aparezcan las opciones de precios, es suficiente para la mayoría de los sitios pequeños y medianos.
- Cloudflare te va a mostrar dos direcciones llamadas servidores de nombres o nameservers, cópialas en un documento aparte.
- Entra al panel donde compraste tu dominio, busca la sección de servidores de nombres o DNS, y reemplaza los que tenías por los dos que te dio Cloudflare.
- Espera entre unas horas y un día completo para que el cambio se active en todo el mundo, y luego vuelve a Cloudflare para confirmar que el estado de tu sitio dice activo.
- Una vez activo, entra a la sección Speed dentro de tu panel de Cloudflare y activa las opciones llamadas Auto Minify, para que reduzca automáticamente el peso de tus archivos de código, y Brotli, que comprime aún más los datos que se envían al navegador.
6. Activar el caché de tu sitio
El caché guarda una versión ya lista de tu página, para no tener que construirla desde cero cada vez que alguien la visita, lo cual acelera muchísimo las siguientes visitas y reduce la carga sobre tu servidor.
Cómo activarlo en WordPress
- Entra al panel de administración de tu sitio y ve a la sección de complementos.
- Busca e instala el complemento gratuito llamado WP Super Cache o W3 Total Cache.
- Una vez instalado, actívalo y entra a su configuración, que normalmente aparece en el menú lateral izquierdo.
- Marca la casilla que dice activar caché o enable caching y guarda los cambios, en la mayoría de los casos no hace falta tocar ninguna otra opción.
- Si el complemento ofrece una opción llamada precarga o preload, actívala también, ya que hace que el caché se genere de inmediato para tus páginas más visitadas, en lugar de esperar a la primera visita de cada una.
Cómo activarlo si usas Cloudflare
- Dentro de tu cuenta de Cloudflare, entra a la sección llamada Caching en el menú lateral.
- Busca la opción Caching Level y elige la opción Standard.
- Busca también la opción Browser Cache TTL y elige un valor de al menos cuatro horas, para que los navegadores de tus visitantes guarden una copia local de tu sitio.
- Si tu sitio no cambia de contenido muy seguido, puedes subir ese valor a un día completo o incluso una semana, para aprovechar aún más el ahorro de tiempo.
7. Reducir el código que sobra
Cada página web está construida con archivos de código que el navegador tiene que descargar antes de mostrar el contenido. Cuantos más espacios en blanco, comentarios y líneas innecesarias tengan esos archivos, más tarda todo el proceso, aunque no lo notes a simple vista.
Cómo reducir este peso sin tocar código
- Si tu sitio está en WordPress, instala el complemento gratuito llamado Autoptimize.
- Dentro de su configuración, marca las casillas que dicen optimizar código HTML, optimizar código JavaScript y optimizar código CSS.
- Guarda los cambios y revisa tu sitio de inmediato en el navegador, entrando a dos o tres páginas distintas para confirmar que todo se ve y funciona igual que antes.
- Si notas algo desordenado visualmente después de activar esta función, vuelve a la configuración del complemento y desactiva únicamente la opción de CSS, dejando activas las otras dos, ya que en algunos casos puntuales puede afectar el diseño.
- Si usas Cloudflare, como se mencionó antes, activa también la opción Auto Minify dentro de la sección Speed, que cumple una función similar de forma automática.
8. Cuidar tus fuentes tipográficas
Las fuentes tipográficas personalizadas hacen que un sitio se vea más cuidado, pero cada una que agregas es un archivo adicional que el navegador tiene que descargar antes de poder mostrar el texto correctamente.
Cómo optimizar el uso de fuentes
- Revisa cuántas fuentes distintas usa tu sitio, entrando a la configuración de diseño o apariencia de tu plantilla, lo ideal es no usar más de dos familias tipográficas distintas en todo el sitio.
- Si tienes tres o más fuentes cargadas, elimina las que no se estén usando realmente desde la configuración de tipografía de tu plantilla.
- Si usas Google Fonts, entra a fonts.google.com, busca la fuente que necesitas, y al momento de obtener el código de inserción, selecciona solamente los estilos de letra que realmente vas a usar, como regular y negrita, en lugar de incluir los ocho o diez estilos que vienen disponibles por defecto, Google entrega estas fuentes ya en formato WOFF2, que es el más liviano para la web.
- Si vas a subir una fuente propia a tu sitio, por ejemplo la tipografía de tu marca, pide siempre el archivo en formato WOFF2, ya que es el formato comprimido pensado para navegadores y pesa mucho menos que un archivo OTF o TTF.
- Si solo tienes el archivo de tu fuente en formato OTF o TTF, busca en Google "convertir OTF a WOFF2", sube el archivo a cualquiera de esos conversores gratuitos, y descarga la versión ya optimizada para reemplazar la que tenías.
- Si tu plantilla lo permite, activa la opción de precarga de fuentes, que suele aparecer como una casilla en la configuración de rendimiento, y que le indica al navegador que descargue la fuente lo antes posible durante la carga de la página.
9. Controlar los scripts de terceros
Los chats en vivo, los píxeles de seguimiento de redes sociales, los botones para compartir y las herramientas de análisis de visitas son útiles, pero cada uno agrega código adicional que tu sitio tiene que cargar, y muchas veces se acumulan sin que nadie se dé cuenta.
Cómo revisar y reducir estos elementos
- Haz una lista de todas las herramientas externas conectadas a tu sitio, revisando la sección de integraciones o el encabezado del sitio dentro de tu gestor de contenido.
- Por cada herramienta, pregúntate si de verdad la usas y revisas sus datos con regularidad, elimina las que ya no cumplen una función activa.
- Si tienes varios botones para compartir en redes sociales, quédate solamente con las dos o tres redes donde realmente tienes presencia activa, en lugar de mostrar diez íconos distintos.
- Configura tu chat en vivo, si tienes uno, para que aparezca unos segundos después de que la página termine de cargar, en lugar de cargarse al mismo tiempo que el resto del contenido, esta opción normalmente está dentro de la configuración de la propia herramienta de chat.
10. Cambiar cómo muestras los videos
Incrustar videos de YouTube o Vimeo directamente en tu página hace que el reproductor cargue información adicional en segundo plano, incluso antes de que alguien presione play.
Cómo mostrar videos sin afectar la velocidad
- Si tu sitio está en WordPress, instala el complemento gratuito WP YouTube Lyte, que reemplaza el reproductor pesado por una simple imagen de vista previa, y solo carga el video real cuando alguien hace clic sobre ella.
- Si tu gestor de contenido no permite instalar complementos, sube una captura de pantalla del video como imagen normal, comprimida siguiendo los pasos de la sección dos, y conviértela en un enlace que lleve directamente a la página de YouTube donde está el video completo.
- Si tienes varios videos en una misma página, considera dejar solo el más relevante incrustado directamente, y el resto como enlaces con imagen de vista previa, para no acumular demasiados reproductores en un solo lugar.
11. Guía específica según tu plataforma
Aunque los principios son los mismos en cualquier sitio, cada plataforma tiene sus propios menús y nombres para estas opciones. Aquí tienes una referencia rápida según dónde esté construido tu sitio.
Si usas WordPress
- Entra a Herramientas y luego a Salud del sitio, dentro de tu panel de WordPress, para ver un diagnóstico general de posibles problemas.
- Mantén siempre actualizado el núcleo de WordPress, tu plantilla y tus complementos, entrando periódicamente a la sección de Actualizaciones.
- Evita instalar plantillas demasiado cargadas de funciones que no vas a usar, ya que suelen venir con muchísimo código adicional innecesario.
- Instala los complementos mencionados en esta guía, Smush o ShortPixel para imágenes, WP Super Cache para el caché, y Autoptimize para reducir el código.
Si usas Shopify
- Entra a Configuración y luego a Temas, y revisa el informe de velocidad que Shopify genera automáticamente para tu tienda, ubicado junto al nombre de tu plantilla activa.
- Elimina aplicaciones que ya no uses desde la sección de Aplicaciones, ya que cada aplicación instalada agrega su propio código a tu tienda, aunque esté desactivada visualmente.
- Comprime tus imágenes de producto antes de subirlas, siguiendo los pasos de la sección dos de esta guía, ya que Shopify no las comprime de forma automática.
- Elige plantillas oficiales de Shopify o de proveedores reconocidos, que suelen estar mejor optimizadas que las plantillas gratuitas de terceros poco conocidos.
Si usas Wix
- Entra al Panel de Control de tu sitio y busca la sección de Analíticas y luego Rendimiento del Sitio, donde Wix te muestra su propio informe de velocidad.
- Revisa cada página de tu sitio por separado, ya que en Wix la velocidad puede variar bastante entre una página y otra según cuántos elementos visuales tenga cada una.
- Reduce el número de aplicaciones y widgets externos agregados desde el mercado de aplicaciones de Wix, dejando solamente los que realmente cumplen una función necesaria.
- Comprime tus imágenes antes de subirlas, ya que aunque Wix aplica cierta optimización automática, subir archivos ya livianos siempre ayuda a reducir el tiempo total de carga.
Si usas Squarespace
- Sube tus imágenes ya comprimidas siguiendo los pasos de la sección dos, ya que Squarespace no reduce demasiado el peso original de los archivos.
- Evita los fondos de video de gran tamaño en tu página principal, o si los usas, mantenlos lo más cortos posible en duración y peso.
- Revisa la cantidad de bloques y secciones que tiene cada página, y elimina aquellos que quedaron de versiones anteriores del diseño y ya no se usan.
12. Errores comunes que frenan un sitio
Además de todo lo anterior, hay una serie de descuidos frecuentes que muchas personas cometen sin darse cuenta, y que vale la pena revisar de forma puntual.
- Dejar activados varios complementos de caché al mismo tiempo, lo cual en lugar de sumar beneficios genera conflictos entre ellos y puede hacer que el sitio funcione peor.
- Usar un carrusel de imágenes enorme en la parte superior de la página principal, ya que obliga a cargar varias imágenes pesadas antes de que la persona vea cualquier otra cosa.
- Incrustar mapas de Google Maps directamente en varias páginas del sitio, en lugar de dejar solamente un enlace hacia el mapa en la página de contacto.
- No revisar el sitio desde un celular con conexión de datos móviles normal, ya que muchas veces se revisa solo desde una computadora con internet muy rápido, lo cual esconde el verdadero problema.
- Olvidar que cada formulario emergente, encuesta o ventana de bienvenida agrega su propio peso adicional, sobre todo si aparecen varios al mismo tiempo apenas se abre la página.
13. Cómo mantener la velocidad en el tiempo
Mejorar la velocidad de un sitio no es una tarea que se hace una sola vez y se olvida. Los sitios cambian constantemente, se agregan páginas nuevas, se suben más imágenes, se instalan nuevas funciones, y cada uno de esos cambios puede volver a introducir lentitud poco a poco.
Rutina de mantenimiento recomendada
- Cada vez que subas contenido nuevo, comprime las imágenes antes de publicarlas, convirtiendo este paso en un hábito dentro de tu proceso normal de trabajo.
- Una vez al mes, vuelve a medir tu sitio con PageSpeed Insights y GTmetrix, y compara los resultados contra la medición anterior.
- Cada tres meses, revisa la lista completa de complementos, aplicaciones y herramientas externas conectadas a tu sitio, y elimina lo que ya no uses.
- Cada vez que cambies de plantilla o hagas un rediseño importante, vuelve a repetir todo el proceso de esta guía desde el principio, ya que un cambio de diseño puede introducir elementos nuevos que afecten la velocidad.
14. Lista de verificación final
Guarda esta lista y ve marcando cada punto a medida que lo completes en tu propio sitio.
- Medí la velocidad actual de mi sitio con PageSpeed Insights, GTmetrix y Pingdom
- Comprimí las imágenes existentes con Squoosh o TinyPNG
- Ajusté el tamaño de mis imágenes antes de subirlas
- Activé la carga diferida de imágenes en mi sitio
- Revisé la calidad de mi plan de hospedaje actual
- Activé una red de distribución de contenido como Cloudflare
- Activé el caché en mi gestor de contenido o en Cloudflare
- Reduje el peso del código de mi sitio con Autoptimize o Auto Minify
- Revisé y reduje la cantidad de fuentes tipográficas de mi sitio
- Eliminé herramientas de terceros que ya no uso
- Cambié la forma en que muestro los videos en mi sitio
- Revisé mi sitio según los pasos específicos de mi plataforma
- Revisé la lista de errores comunes en mi propio sitio
- Volví a medir la velocidad para comparar los resultados
- Anoté una fecha en el calendario para repetir esta revisión el próximo mes
Una experiencia mejor para todos
Mejorar la velocidad de tu página web no se trata solamente de números o posiciones en buscadores. Se trata de respeto hacia las personas que te dedican su tiempo al visitar tu sitio. Cada segundo que les ahorras es un gesto de consideración, y ese gesto puede ser justamente lo que las convenza de quedarse, explorar tu contenido y volver en el futuro.
No hace falta ser programador para lograrlo. Con los pasos de esta guía, aplicados con calma y de forma constante, tu sitio va a cargar más rápido, y las personas que lo visitan te lo van a agradecer.
Comentarios