Una guía para principiantes sobre el rendimiento de sitios web

En el tiempo que te toma leer esta oración, los visitantes de tu sitio web ya han abandonado tu sitio y han elegido el de tu competidor.

Así de rápido es perderlos para siempre.

Si alguna vez has tenido que esperar a que se cargue una página web, sabes lo frustrante que puede ser.

Los sitios web en estos días son complejos y a menudo están llenos de imágenes, videos y scripts. Esto significa que requieren más tiempo para descargarse que las simples páginas HTML de los buenos viejos años 90 y principios de 2000.

Pero incluso _peor_ es el hecho de que muchos de estos sitios modernos también están mal diseñados. Están llenos de funciones, pero sufren de un rendimiento lento porque no entienden cómo las personas los utilizan.

No hay excusa para un rendimiento web deficiente en este punto. No si tu sitio está bien gestionado por alguien que se preocupa por lo que sus visitantes experimentan cada día.

Si necesitas ayuda para mejorar el rendimiento de tu sitio web, sigue estos consejos a continuación.

Pero primero, algunas preguntas importantes...

1) ¿Qué es el rendimiento de un sitio web?

El rendimiento de un sitio web es la velocidad a la que tu sitio se carga en el navegador de un visitante. También incluye cuán receptivo es tu sitio y cuán fácil es de navegar.

2) ¿Por qué importa el rendimiento de un sitio web?

Un sitio web que se carga lentamente frustrará tanto a los visitantes como a Google. Esto conducirá a una disminución en tus clasificaciones en Google para tus palabras clave objetivo.

También es importante porque los usuarios de hoy se han vuelto impacientes con los sitios que se cargan lentamente. Si ven que el tuyo se carga demasiado lento, lo dejarán y buscarán otro con mejor rendimiento en menos tiempo.

Hay 3 áreas clave donde el rendimiento de un sitio web es importante:

• Experiencia del Usuario

• SEO

• Tasa de Conversión

2.1) Experiencia del Usuario: El rendimiento del sitio web impactará en la percepción de tu marca

La investigación ha demostrado que un sitio web lento puede hacer que los visitantes abandonen tu sitio sin ver una sola página. Google ha encontrado que un retraso de un segundo en el tiempo de carga del sitio web puede disminuir las conversiones hasta en un 20%.

Y si el sitio no se carga en _absoluto_, no van a quedarse.

También es importante recordar que tus visitantes no siempre están en conexiones de internet de alta velocidad como tú.

Una encuesta reciente de Speedtest encontró que la velocidad de descarga móvil promedio en todo el mundo es de 56.74 Mbps. Aunque eso puede sonar realmente rápido, ten en cuenta que es un promedio. Muchos países en desarrollo aún tienen infraestructuras de internet subdesarrolladas. Un estudio reciente del BID encontró que solo el 33% de las escuelas en América Latina tienen un ancho de banda de internet suficiente, menos de la mitad de las que se reportaron en promedio en los países de la OCDE (68%). Incluso hay una enorme brecha en los servicios de internet de alta velocidad entre las áreas urbanas y rurales en los Estados Unidos. A partir de 2016, el 39% de la población de EE. UU. no tenía acceso a servicios de internet de alta velocidad.

Eso significa que muchas personas en todo el mundo todavía están usando velocidades de internet lentas. Si vives en una de estas áreas o esperas visitantes de ellas, hacer que tu sitio web se cargue más rápido será aún más crucial.

2.2) SEO: La velocidad de carga del sitio web impacta directamente en las clasificaciones de Google

El rendimiento web es un factor clave en SEO, ya que determina la velocidad y el rendimiento de tu sitio.

Google utiliza la velocidad de la página como un factor de clasificación así que si tu sitio tarda demasiado en cargarse, puedes ver cómo tus clasificaciones caen.

Es aún más importante para los sitios móviles, que requieren una optimización adicional para mejorar las velocidades de carga.

Los sitios web lentos quedan atrás por la competencia. Así de simple.

Incluso si tu sitio web está diseñado de manera hermosa, tiene un gran contenido y ofrece productos y servicios de calidad, los tiempos de carga lentos eventualmente perjudicarán tus clasificaciones.

2.3) Tasas de Conversión: El rendimiento del sitio web te hará ganar (o perder) dinero

La velocidad de carga del sitio web tiene una fuerte correlación directa con las tasas de conversión y ventas.

Revisa la diferencia que _milisegundos reales_ pueden hacer en la tasa de conversión de tu sitio. (Según Cloudflare) Aquí está la sorpresa: Cuesta al menos 5X más adquirir un nuevo cliente en comparación con retener a tu cliente existente. Por eso, en realidad es mucho más rentable mantener a tus clientes existentes que encontrar nuevos.

Así que, con los costos de adquirir nuevos clientes siendo tan altos, es de tu interés asegurarte de que tu sitio cargue lo suficientemente rápido. Porque una vez que se van, será mucho más difícil recuperarlos.

3) Cómo probar el rendimiento de tu sitio web

Ahora que hemos establecido por qué es importante probar el rendimiento de tu sitio web, veamos cómo podemos hacerlo.

3.1) Herramientas de rendimiento del sitio web

Existen muchas herramientas diferentes de prueba de velocidad de sitios web que puedes usar para probar el rendimiento de tu sitio.

Todas estas herramientas hacen esencialmente lo mismo, pero tienen algunas variaciones en los estándares de prueba y la facilidad de uso.

GT Metrix

GT Metrix es una herramienta gratuita de prueba de velocidad del sitio web que te ayudará a entender en qué estado se encuentra tu sitio en términos de velocidad y capacidad de respuesta.

La prueba toma menos de un minuto en completarse y mide el tiempo de carga de una sola página de tu sitio web. Una a la vez.

También te dice cómo se comporta tu sitio en dispositivos móviles, incluyendo iPhone y Android. Y puedes probar desde varios servidores diferentes ubicados en todo el mundo.

Aunque muchas de las mejores características están bloqueadas en la versión pro de la herramienta, aún puedes obtener una tonelada de información valiosa y útil de la versión gratuita de GT Metrix.

Mi característica favorita es el gráfico de cascada, que desglosa cada archivo que se carga en tu sitio web, para que puedas identificar el problema exacto. Por supuesto, esto no es único de GT Metrix. Solo que me gusta la interfaz visual.

GT Metrix es mi elección personal para la mejor herramienta de prueba de velocidad del sitio web. Es la herramienta que estaré usando a lo largo de esta guía de optimización del sitio web.

Google PageSpeed Insights

Google PageSpeed Insights es una herramienta de prueba de velocidad del sitio web que te ayuda a identificar soluciones rápidas para mejorar tu sitio. Te dice dónde necesitas reducir la cantidad de HTML, scripts e incluso imágenes en cada página.

La interfaz puede ser un poco abrumadora para los nuevos desarrolladores web, aunque Google ha realizado algunos buenos esfuerzos en simplificarla en los últimos años.

Pingdom

Pingdom proporciona una herramienta de velocidad del sitio web que proporciona información sobre el tiempo de carga, confiabilidad, tiempo de actividad, amigabilidad móvil y otras métricas clave. También proporciona recomendaciones sobre cómo solucionar cualquier problema que encuentres.

Es parte de un conjunto mucho más grande de herramientas de monitoreo de rendimiento para sitios web. Incluso puedes instalar la herramienta de monitoreo de Pingdom directamente en tu sitio de WordPress para ayudarte a medir el rendimiento desde dentro del panel de control de WordPress.

Y sí, hay una extensión de Pingdom en forma de bookmarklet.

3.2) Métricas de rendimiento del sitio web

Las métricas de rendimiento del sitio web se utilizan para medir el tiempo de carga de las páginas web. Por lo general, se informa como el número promedio de segundos que tarda una página en renderizarse.

Core Web Vitals

Las métricas de rendimiento del sitio web más importantes, según Google, son lo que ellos llaman Core Web Vitals. Estas métricas web evolucionarán con el tiempo, pero, hasta el momento de escribir esto, estos son los objetivos en los que enfocarse:

• LCP (Long Contentful Paint)

• FID (First Input Delay)

• CLS (Cumulative Layout Shift)

LCP (Long Contentful Paint)

LCP es una métrica de rendimiento de contenido que evalúa la experiencia de carga percibida para los usuarios.

En su forma más simple, LCP determina cuánto tiempo tarda el “elemento de contenido” más grande en tu página (como una imagen principal, texto del encabezado, etc.) en mostrarse dentro de la ventana de visualización de un visitante.

FID (First Input Delay)

El retraso en la primera entrada (FID) es la medida del tiempo entre cuando un usuario inicia una entrada (pasar el cursor sobre un enlace del sitio web, hacer clic en un elemento o escribir texto) y cuando el sitio web responde a esa entrada.

A medida que un sitio web se vuelve más interactivo, el FID se convierte en una de las métricas de rendimiento del sitio web más críticas porque afecta la rapidez con que los visitantes pueden completar tareas como “comprar” o “registrarse.”

CLS (Cumulative Layout Shift)

CLS mide la estabilidad visual de un sitio web durante la carga de una página. En otras palabras, CLS mide el movimiento inesperado de componentes web mientras se genera la página.

La puntuación agregada de todos los cambios de diseño en tu sitio se cuantifica en su totalidad. Google Web Vitals incluye CLS como “estabilidad de la página.”

Otras métricas web

Aparte de los Core Web Vitals, hay algunas métricas de prueba de velocidad del sitio web más que querrás optimizar.

Aunque no están técnicamente incluidas en los “core”, estas métricas web secundarias definitivamente impactarán los core web vitals.

TTFB (Time to First Byte)

TTFB significa tiempo hasta el primer byte. Es el tiempo entre presionar enter en tu teclado y recibir el primer dato de página.

TTFB es particularmente importante en dispositivos móviles con una conexión a internet de baja calidad.

FCP (First Contentful Paint)

La métrica FCP mide el tiempo desde que la página comienza a cargar hasta que cualquier parte del contenido de la página aparece en la pantalla.

TBT (Total Blocking Time)

TBT es el tiempo total que tarda un sitio web en responder a la entrada de un visitante. Más específicamente, TBT mide la cantidad de tiempo que se pasa bloqueado por scripts y código específicos.

Tiempo total de carga de la página

El tiempo de carga es el número promedio de segundos que tarda una página determinada en renderizarse por completo.

Esto puede ser de 1-2 segundos para sitios web rápidos a tanto como 15-20 segundos para sitios web lentos.

Si tu sitio web es incluso más lento que eso, entonces realmente no tienes un sitio web. Tienes un espacio de estacionamiento digital con tu nombre en él.

3.3) Métricas de experiencia del usuario en el sitio web

Hay una serie de métricas que puedes utilizar para medir la experiencia del usuario en tu sitio web. Las métricas más importantes son la tasa de rebote, el tiempo en la página y la tasa de conversión.

Estas no deben confundirse con métricas de rendimiento del contenido como TTFB, LCP y CLS. Esas métricas muestran cuánto tiempo tarda en cargarse el contenido. Las métricas de experiencia del usuario miden cuánto tiempo se involucra un determinado contenido durante un período de tiempo dado.

Tasa de Rebote

La tasa de rebote del sitio web es el porcentaje de visitantes que abandonan tu sitio después de ver solo una página. Se calcula dividiendo el número de visitas de una sola página por el número total de visitas a tu sitio web.

Por ejemplo, si tienes 1,000 visitas totales y 800 de ellas son visitas de una sola página eso significa que tienes una tasa de rebote del 80%. Y tu velocidad de página afecta en gran medida la tasa de rebote del sitio web.

Un aspecto importante a tener en cuenta sobre las tasas de rebote del sitio web es que, aunque pueden ser útiles para Google Analytics, no cuentan la historia completa para medir el compromiso del usuario porque no cuantifican el compromiso con páginas o sesiones individuales.

Duración de la Sesión

La duración de la sesión es la duración de tiempo que un usuario pasa en una sesión particular.

Esta métrica se puede utilizar para averiguar cuánto tiempo productivamente pasan los visitantes en tu sitio, así como cuán efectivamente están interactuando con él.

Si la métrica de “tiempo en la página” para cada visitante es demasiado corta, podría significar que necesitas crear un sitio web más atractivo. Esto se debe a que visitas más cortas pueden indicar que tus visitantes no pudieron encontrar lo que estaban buscando y se fueron rápidamente.

El tiempo promedio que alguien pasa en una página web varía según el tipo de contenido. Pero las investigaciones muestran que el promedio está disminuyendo en toda la internet.

Si tus duraciones de sesión están por debajo del promedio o las personas están rebotando demasiado, entonces necesitas investigar más y averiguar por qué.

Tasa de Conversión Una conversión es la finalización exitosa de una acción que deseas que tus visitantes del sitio web realicen, como comprar algo o registrarse en tu lista de correo.

Si no estás obteniendo conversiones es muy probable que las personas estén rebotando demasiado. 🦘

Puedes mejorar la tasa de conversión aumentando la velocidad de la página, reduciendo el número de pasos que se necesitan para completar una acción deseada, mejorando la claridad de tu sitio web y más.

4) Cómo mejorar el rendimiento de tu sitio web

Esta es la única guía que necesitarás para acelerar tu sitio web. (Creo. Esperemos…)

4.1) Reduce el tamaño de tu página deshaciéndote de “código excesivo”

Hay muchas razones por las que deberías reducir el tamaño de tu página web:

• Reducir el tiempo de carga del sitio web

• Aumentar el rendimiento del sitio web

• Maximizar el compromiso del sitio web

• Mejorar la experiencia del usuario

• Reducir código excesivo

El código excesivo es un término utilizado para describir la cantidad de código que se necesita para hacer que un sitio web funcione. Simplificar tu código puede ayudar a reducir el tiempo de carga y también facilitarte mantener tu sitio.

El código excesivo puede ser muy dañino porque ocupa más espacio, ralentiza tu sitio web e incluso puede causar errores o vulnerabilidades de seguridad.

Imagina que estás conduciendo al trabajo por la mañana. Ahora imagina todos los diferentes caminos que puedes tomar para llegar allí.

Todos te llevarán de y hacia el mismo lugar. De casa al trabajo. Pero qué caminos elijas dicta cuánto tiempo te llevará llegar allí.

Ponte esta ilustración cada vez que alguien intente visitar tu sitio web.

Hay muchas maneras en que los desarrolladores web pueden reducir el código excesivo:

• Usa imágenes de manera inteligente

• Aloja videos externamente

• Elimina comentarios

• Reduce las solicitudes HTTP

• No uses fuentes web externas

• Elimina plugins innecesarios

Veamos cómo hacer cada uno de estos uno por uno.

Usa imágenes de manera inteligente

No hay un número exacto de imágenes que debas incluir en tus páginas y publicaciones. Cada vez que subes una imagen, pregúntate una simple pregunta:

“¿Cómo beneficia esta imagen a mi visitante?”

Si no puedes responder a esa pregunta, no uses la imagen.

Aloja videos externamente

Los videos pueden ocupar mucho espacio y a menudo no hay garantía de que la persona que esté viendo tu video tenga el ancho de banda para transmitirlo.

En lugar de alojar videos directamente en tu sitio web, utilizando el almacenamiento y el ancho de banda del servidor de tu proveedor de web, casi siempre es mejor alojarlo externamente e incrustarlo en la página.

Sube tu video a YouTube o Vimeo y coloca el código HTML de inserción en tu página. Todos los principales constructores de sitios web hacen que esto sea fácil de hacer.

Elimina comentarios

Los comentarios son una forma muy útil de fomentar una discusión saludable en la_ _LOL JK_ son más tóxicos que envolverte los labios alrededor de un tubo de escape de carro y tomar una respiración profunda.

Aunque se ha demostrado que los comentarios aportan algunos beneficios de SEO, (incluso lo he visto yo mismo con mi publicación sobre cancelar Netflix), generalmente no vale la pena la pérdida en la velocidad de la página. Como se puede ver en la historia de MightyBytes, permitir comentarios en tus publicaciones de blog ralentiza los tiempos de carga del sitio web.

Y cuántos más comentarios haya, peor se pone.

Puedo atestiguar personalmente que eliminé los comentarios del sitio web para mejorar la velocidad de la página. Desafortunadamente, no hice una comparación de los datos cuando hice el cambio... Así que tendrá que seguir siendo anecdótico.

La conclusión es esta: Los comentarios ralentizan los tiempos de carga de las páginas. Generan llamadas a la base de datos adicionales que pueden resultar en un aumento de hasta el 50% en el tiempo de carga del servidor.

Generalmente es mejor simplemente eliminar los comentarios de tus blogs y seguir adelante.

Reduce la cantidad de solicitudes HTTP

Las solicitudes HTTP harán que tu sitio se cargue más lento.

Las integraciones innecesarias son la fuente más común de demasiadas solicitudes HTTP.

Se pueden definir como innecesarias porque ocupan más espacio en la página y ralentizan los tiempos de carga mientras que proporcionan muy poco valor al usuario.

Los peores infractores son las integraciones incorporadas que vienen con algunos temas o plugins. Estas integraciones funcionan bien para las personas que las quieren, pero no se pueden desactivar ni eliminar si no las quieres Y estas integraciones ocupan mucho espacio y ralentizan los tiempos de carga de la página.

Así es como se ve cuando un sitio web tiene demasiadas solicitudes HTTP:

Solo con una rápida mirada a las URL de cada solicitud, podemos ver solicitudes HTTP de:

• Google Analytics

• Google Maps

• Google Fonts

• Facebook

• Hotjar

• Tawk

• Twik

• Hey Oliver

• Liveleads

• Yandex

• Polyfill

• Visual Website Optimizer

• X.AI

• YourWebsite

Vaya. 🤮

No es de extrañar que esta página web tarde 9.6 segundos en cargar. Y lo peor es que casi todos son trucos de marketing innecesarios que en realidad empeoran la experiencia del usuario del sitio web.

No uses fuentes web externas

Uno de los principales culpables al arrastrar las velocidades de carga del sitio web son las fuentes web.

Empresas como Adobe, Google y Typekit alojan miles de fuentes para la web. Los constructores de sitios web integran sus APIs para incluir estas fuentes en un menú desplegable muy simple. Como uno de mis plugins de creación de páginas favoritos, Elementor.

Las fuentes web aumentarán el número de solicitudes HTTP que hace tu sitio web porque tiene que cargar varios archivos diferentes de fuentes externas solo para mostrar el texto.

Esto puede ser un gran lastre en las velocidades de carga de las páginas. También es realmente frustrante para las personas que están tratando de leer tu sitio.

Para empeorar las cosas, muchas fuentes web solo están disponibles en formatos específicos como .eot o .ttf a los que no todos pueden acceder.

El asunto es... las fuentes son _geniales_. Y no hay nada de malo en querer hacer que tu marca se sienta única y destacarse entre la multitud.

Entonces, ¿qué deberías hacer?

Si ya estás acelerando tu sitio web utilizando muchas de las estrategias mencionadas aquí, probablemente puedas permitirte tener un poco de diversión con algunas fuentes.

Pero si estás obsesionado con los tiempos de carga ridículamente rápidos, como yo, simplemente usa algunas de las fuentes comunes del sistema en tu diseño. Las fuentes del sistema son las fuentes que vienen preinstaladas en tu dispositivo.

Seguro, no son tan bonitas. Pero el aumento en la experiencia del usuario compensa eso, en mi opinión. ¡Las he usado aquí mismo en mi propio sitio web!

Elimina plugins innecesarios

Es mejor mantener los plugins al mínimo.

Solo instala plugins que sean absolutamente necesarios para la funcionalidad de tu sitio y que no resten valor a la experiencia del usuario de tu sitio.

Desafortunadamente, los diseñadores web perezosos a menudo instalarán un plugin para resolver cada pequeño problema que se presente. Incluso cuando gran parte de la funcionalidad que proporciona un plugin se puede lograr utilizando simple HTML y CSS.

En uno de mis casos de estudio de diseño web más locos, reconstruí un sitio web que tenía más de 32 plugins obstruyendo su sitio y lo reduje a 12.

Aquí está el antes y el después del rediseño de su sitio web:

El resultado fue un sitio web mucho más rápido que cargaba como un sueño. El cliente no podría estar más feliz. (Oh sí, también lo hice por menos dinero 😉)

4.2) Optimiza tus imágenes

Las imágenes que no están optimizadas pueden ser extremadamente problemáticas para el rendimiento del sitio web. Aquí hay algunos consejos rápidos para optimizar imágenes para tu sitio web:

Elige el mejor formato de imagen

Qué formato de imagen es mejor para el rendimiento de tu sitio web depende de para qué estés usando la imagen.

• JPEG es mejor para fotos con grandes cantidades de color y alto contraste. JPEG reduce el tamaño del archivo pero introduce cierta pérdida de datos.

• PNG es mejor para imágenes que son dibujos o texto, ya que no introduce compresión en objetos dibujados.

• GIF es bueno para secuencias animadas cortas porque el formato de archivo solo admite 256 colores.

• WEBP es un formato que está surgiendo, y empezarás a verlo más a menudo, pero aún no es completamente común. No me preocuparía por eso por ahora.

• SVG es tu mejor opción para gráficos vectoriales e íconos si eres un diseñador avanzado. Escala hacia arriba y hacia abajo sin perder nitidez y calidad, y el tamaño del archivo es mucho menor que el de los PNG.

Establece las dimensiones correctas de la imagen

Encontrar imágenes gratuitas de alta calidad para tu sitio web puede ser un gran dolor.

Es por eso que muchos nuevos diseñadores web y bloggers cometen el error de descargar imágenes en su tamaño más grande y luego subirlas a su sitio sin hacer ninguna optimización de la imagen.

Ejemplo: Supongamos que quiero descargar esta imagen de un mono lindo de Unsplash. Si la descargo en su tamaño y dimensiones originales, vendrá con un impresionante 4928 x 3264. (ancho y alto) Cualquier cosa por encima de 1280 x 720 (es decir, 720p) se considera de alta definición. Si quiero ir aún más allá para asegurarme de que luzca bien en pantallas de mayor resolución, puedo optar por 1920 x 1080 (es decir, 1080p) o 3840 x 2160 (es decir, 4K).

Pero no planeo mostrar esta imagen de mono en toda la pantalla. Solo quiero mostrarla en mi publicación de blog. Y dado que sé que el ancho del contenido de mi publicación de blog es de aproximadamente 1000px, sé que la anchura de mi imagen no necesita ser más que eso.

Cualquier cosa por encima de 1000 es simplemente espacio desperdiciado y recursos. Pero me gusta dejar un poco de margen, por si acaso decido usar la imagen en un contexto más amplio en el futuro. Así que ahora usaría un simple editor de fotos (yo prefiero Photoshop) para redimensionar la imagen de 4928 x 3264 a 1280 x 848.

Esto hará que sea mucho más fácil para tu sitio web redimensionar automáticamente la imagen para que se ajuste a todos los dispositivos. La cantidad de trabajo de código se ha reducido.

Pero todavía hay un paso crítico más que debes tomar antes de que esa imagen esté lista para ser subida a tu sitio.

Comprime cada imagen

Es importante que las imágenes estén comprimidas antes de ser subidas a tu sitio web.

Esta es la manera más fácil y sencilla de acelerar la velocidad de carga de tu sitio web.

¿Conoces todas esas hermosas imágenes de stock gratuitas de las que acabamos de hablar? Son enormes.

Hay varias maneras en que puedes comprimir y optimizar tus imágenes, pero aquí tienes el método sencillo que utilizo:

Uso de Photoshop para reducir el tamaño de las imágenes

Dependiendo de la versión de Photoshop que estés usando, esto puede verse un poco diferente. Estoy suscrito a la versión de Creative Cloud de Photoshop por $10/mes, así que se actualiza constantemente de forma gratuita.

Supongamos que ya hemos redimensionado las dimensiones de la imagen. Ahora es momento de comprimir el tamaño.

Ve a Archivo > Exportar > Guardar para la Web

Una vez más, el flujo de esto podría ser un poco diferente para tu versión de Photoshop. Pero debería estar en la misma área general.

Elige tus opciones de compresión de imagen

Ahora, elige tus opciones.

La mayoría de tus imágenes se pueden guardar en el formato JPEG LOW. Si necesitas tener un fondo transparente, entonces asegúrate de seleccionar PNG-8.

La calidad se establece en una escala del 1 al 100. Normalmente nunca voy por encima de 5-10. Notarás que el 90% de la calidad se preserva de todos modos. Y vale la pena perder ese 10% por el drástico ahorro en el tamaño del archivo.

Luego, haz clic en Guardar.

Asigna un nombre a tu nueva imagen y haz clic en Guardar

Manténlo simple y relevante para que sea fácil de buscar más tarde.

¡Disfruta de la gloria de tus resultados!

¿Ves eso??

La imagen original marcó un sorprendente 3.8 MB. ¿La nueva, comprimida y totalmente optimizada versión? 60 KB!

Así es como se hace.

Como dije, comprimir tus imágenes es la #1 manera de acelerar rápidamente el rendimiento de tu sitio web.

4.3) Usa caching

NOTA: Hay muchas formas diferentes de caching y puede volverse bastante complicado bastante rápido. Pero esta es una guía para principiantes, así que esto va a ser un resumen muy básico de algunas estrategias de caching útiles.

El caching permite que un sitio web recupere recursos de un caché local para que no tenga que usar recursos de su servidor.

El caching es beneficioso porque permite que el navegador o dispositivo use contenido que ya ha sido almacenado en lugar de cargarlo de nuevo cada vez.

Esto acelera considerablemente el tiempo de carga de la página para los usuarios que acceden a tu sitio. Tambiénreduce la carga en tu ancho de banda, lo que permitirá que tu sitio aloje más visitantes sin arriesgar la congestión.

Una de las maneras más poderosas de optimizar la velocidad de carga del sitio web es utilizando caching. Hay muchos tipos diferentes de caching disponibles según lo que necesites.

Caching HTTP

El caching HTTP te permite minimizar el número de solicitudes que el navegador de un usuario hace a tu servidor mediante el uso de encabezados HTTP para almacenar en caché los recursos enviados desde el servidor.

Esto se considera generalmente como una de las formas más poderosas de optimizar el rendimiento de tu sitio web porque puede reducir el uso de ancho de banda hasta en un 80%.

Caching de Página

El caching de página es otro tipo de caching, donde solo se almacenan en caché recursos específicos en lugar de todos los recursos.

Al almacenar en caché el HTML de una página web, los visitantes pueden cargar esa página sin conectarse a tu servidor y descargar todos los componentes de tu sitio web para esa página nuevamente.

Caching del Navegador

El caching del navegador se refiere al caching que ocurre en el navegador del usuario.

Esto permite que recursos como imágenes, archivos de video y CSS/Javascript se almacenen en el disco duro local para que cuando los usuarios regresen a tu sitio web, puedan cargar las páginas más rápido.

Caching del Servidor

El caching del servidor es un tipo de caching que ocurre en el servidor donde se aloja tu sitio web.

Esto proporcionará archivos estáticos a tus visitantes para que puedan cargar tu sitio web más rápido.

4.4) Elimina o retrasa la CSS y Javascript que bloquean la representación

Si tu sitio web no es muy grande, retrasar la carga de la CSS y Javascript puede ser una forma muy efectiva de optimizar el rendimiento.

Retrasar los scripts básicamente significa reorganizar el orden en el que se cargan los scripts en una página web.

A menudo, esto puede lograrse fácilmente colocando los scripts en el pie de página de tu sitio.

Los scripts que se retrasan solo se cargarán si se requiere, lo que reduce el peso inicial de la página necesaria para la carga.

También puedes usar un plugin para retrasar scripts. Esto te permite cargar scripts cuando sea necesario sin retrasar el tiempo de carga para otros aspectos de tu sitio web.

Cómo encontrar y eliminar CSS y Javascript que bloquean la representación

IMPORTANTE: Si no sabes lo que estás haciendo aquí, puedes romper fácilmente algunas características y contenido de tu sitio web. Asegúrate de probar la eliminación o el retraso de archivos Javascript uno por uno, para que puedas deshacer el cambio fácilmente si tu sitio web se rompe

Navega a la pestaña “Estructura” en tu informe de GT Metrix y haz clic en “Reducir Javascript no utilizado”

Esto te mostrará cuáles archivos de Javascript cree GT Metrix que son innecesarios o pueden retrasarse para cargar más tarde.

Elimina o retrasa cada archivo uno por uno, luego prueba tu sitio web

Si estás usando WordPress, este proceso es mucho más fácil. Puedes usar un popular plugin de caché como WP Rocket o Hummingbird para retrasar archivos Javascript. Si no estás usando WordPress, las cosas pueden volverse desordenadas muy rápido. Hay varias maneras de retrasar Javascript pero todas involucrarán codificación. Esto es solo para desarrolladores avanzados.

Si no quieres involucrarte en esas cosas, te recomiendo encarecidamente que simplemente elimines tantos de los plugins y scripts ofensivos que están utilizando este Javascript. Mucho más simple.

4.5) Elige un servidor más cerca de tus visitantes

Elegir un servidor cerca de la ubicación geográfica del visitante es importante para el rendimiento del sitio web.

Cuanto más cerca esté tu servidor web de tus visitantes, más rápido se puede entregarles la información.

También es crítico para el SEO local, ya que Google priorizará los sitios web con mejores experiencias de usuario. Y la velocidad de carga = mejor UX.

La única manera real de saber dónde se encuentra un servidor es preguntarle al proveedor de web antes de registrarte con ellos. Hay otros métodos, pero son mucho más avanzados. Ni siquiera sé cómo hacerlos.

Si eliges un alojamiento dedicado con una compañía como Cloudways, podrás elegir entre varios proveedores de hosting en la nube que ofrecen servidores en todo el mundo.

Usa un CDN para visitantes internacionales

Una red de entrega de contenido, o CDN, es un grupo de servidores distribuidos geográficamente que trabajan juntos para proporcionar una entrega más rápida del contenido del sitio web.

La mayoría de los proveedores de alojamiento web ofrecerán un CDN como parte de su paquete de sitio web. Usar un CDN permitirá que las páginas del sitio web se sirvan desde el centro de datos más cercano al visitante en lugar de desde el servidor de tu sitio web.

Esto puede reducir los tiempos de carga para los visitantes del sitio web en hasta un 50% y reduce los costos de ancho de banda. Cada visitante del sitio web solo necesitará descargar los archivos que necesita desde el servidor que está más cerca de ellos.

La mayoría de los CDNs son servicios premium con una amplia variedad de costos. Cloudflare ofrece una versión gratuita de su servicio CDN, pero está principalmente limitada a beneficios de seguridad.

Si tienes muchos visitantes internacionales, particularmente si tienes un sitio web multilingüe, un CDN ayudará a que el contenido de tu sitio web se cargue más rápido para ellos. Esto puede aumentar la cantidad de tráfico que recibes desde el extranjero.

Un CDN también eliminará la presión sobre tus propios servidores al alojar contenido en servidores internacionales. Esto significa que tu servidor tendrá menos trabajo que hacer y será menos propenso a fallar debido al uso excesivo.

4.6) Evita cadenas de redirección 301

Las Cadenas de Redirección se producen cuando una redirección 301 envía a un visitante de una página a otra página en tu sitio, y luego otra... y otra.

Redirigir más de una vez causará retrasos innecesarios en la carga de la página.

La forma más sencilla de evitar este problema es mantener las redirecciones 301 al mínimo. Cuando las uses, asegúrate de que solo redirijan una vez.

4.7) Elige un sistema de gestión de contenido rápido

Un Sistema de Gestión de Contenido es una aplicación que te permite gestionar tu contenido. El CMS puede ser tan simple como un editor de texto, o tan complejo como una plataforma como WordPress con widgets y plugins personalizados.

Un término más común y simple para CMS en el contexto del diseño web es constructor de sitios web.

Así que, importa qué constructor de sitios web uses.

¿Por qué? Porque no todos los constructores de sitios web son iguales en términos de rendimiento del sitio web. ¡Otra razón para amar Weebly!

Y aún más razones para evitar Wix como la peste...

Si estás usando WordPress, asegúrate de elegir un plugin de constructor de páginas que sea lo más ligero posible.

Afortunadamente, la mayoría de los principales plugins de constructor de páginas han invertido masivamente en actualizaciones de rendimiento. No hay mucha diferencia discernible entre ellos en este punto.

4.8) Consigue mejor alojamiento web

Si no estás obteniendo la velocidad que tu sitio web necesita para funcionar correctamente, puede ser momento de actualizar tu alojamiento web.

Un buen alojamiento web no es caro. Vale la pena la inversión si la alta velocidad de tu sitio convierte más visitantes en clientes.

Un sitio rápido significa una mejor clasificación en la búsqueda de Google. También significa un mejor soporte para más dispositivos y navegadores.

Veo a demasiados propietarios de pequeñas empresas escatimar en el alojamiento web y sufrir las consecuencias.

Tómate tu tiempo e investiga para elegir el alojamiento web adecuado para ti.

5) Conclusión: Mejora la velocidad de tu sitio web lo antes posible!

El rendimiento del sitio web es una parte crítica de la experiencia del usuario de tu sitio web.

La velocidad de carga del sitio web puede impactar en el éxito o fracaso de un negocio en línea, así que vale la pena cuidar cómo gestionas los recursos de tu sitio.

En esta guía de rendimiento del sitio web revisamos algunos consejos para asegurarnos de que tu sitio se cargue lo más rápido posible, manteniendo a los usuarios felices en todo momento.

Hemos destacado las consideraciones más importantes que debes tener en cuenta para optimizar tu sitio por velocidad, junto con algunos consejos sobre cómo puedes mejorar el tiempo de carga sin sacrificar contenido o usabilidad.

¡Prueba estas sugerencias y házmelo saber cómo te va!