Guía para principiantes sobre el rendimiento del sitio web

En el tiempo que le toma leer esta oración, los visitantes de su sitio web ya han abandonado su sitio web y han elegido el sitio de su competidor en su lugar.

Así de rápido se pierden para siempre.

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

Los sitios web hoy en día 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 tiempos de los 90 y principios de los 2000.
Pero aún 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 usan.

No hay excusa para un rendimiento de sitio web inferior en este punto. No si su sitio está bien gestionado por alguien que se preocupa por lo que sus visitantes experimentan cada día.
Si necesita ayuda para mejorar el rendimiento de su sitio web, siga estos consejos a continuación.
Pero primero, algunas preguntas importantes…

1) ¿Qué es el rendimiento del sitio web?

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

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

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

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

Hay 3 áreas clave donde el rendimiento del sitio web importa:

• Experiencia del Usuario

• SEO

• Tasa de Conversión

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

La investigación ha demostrado que un sitio web lento puede hacer que los visitantes abandonen su 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 carga en absoluto, no se quedarán.
También es importante recordar que sus visitantes no siempre están en conexiones de internet de alta velocidad como usted.

Una encuesta reciente de Speedtest encontró que la velocidad promedio de descarga móvil en todo el mundo es de 56.74 Mbps. Aunque eso puede sonar muy rápido, tenga en cuenta que es un promedio.

Muchos países en desarrollo todavía tienen infraestructuras de internet subdesarrolladas. Un estudio reciente del BID encontró que solo el 33% de las escuelas en América Latina tienen suficiente ancho de banda de internet, menos de la mitad de las reportadas en promedio en los países de la OCDE (68%).

Incluso hay una gran 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 vive en una de estas áreas o espera visitantes de ellas, hacer que su sitio web 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 su sitio.
Google utiliza la velocidad de la página como un factor de clasificación por lo que si su sitio tarda demasiado en cargar, puede ver cómo sus clasificaciones sufren una caída desagradable.

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 se quedan atrás de la competencia. Así de simple.

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

2.3) Tasa de Conversión: El rendimiento del sitio web le 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 las ventas.
Vea la diferencia que milisegundos reales pueden hacer en la tasa de conversión de su sitio web. (Según Cloudflare)

Aquí está el truco: Es al menos 5 veces más caro adquirir un nuevo cliente en comparación con retener a su cliente existente. Por eso es mucho más rentable mantener a sus clientes existentes que encontrar nuevos.

Entonces, con los costos de adquirir nuevos clientes siendo tan altos, es en su mejor interés asegurarse de que su 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 su sitio web

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

3.1) Herramientas de rendimiento del sitio web

Hay muchas herramientas diferentes de prueba de velocidad de sitios web que puede usar para probar el rendimiento de su sitio.
Todas estas herramientas esencialmente hacen lo mismo, pero tienen algunas variaciones en los estándares de prueba y facilidad de uso.

GT Metrix

GT Metrix es una herramienta gratuita de prueba de velocidad de sitios web que le ayudará a entender dónde se encuentra su sitio en términos de velocidad y capacidad de respuesta.

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

También le dice cómo funciona su sitio en dispositivos móviles, incluidos iPhone y Android. Y puede probar desde múltiples servidores diferentes ubicados en todo el mundo.

Aunque muchas de las mejores características están bloqueadas detrás de la versión pro de la herramienta, aún puede obtener una gran cantidad de información valiosa y accionable 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 su sitio web para que pueda identificar el problema exacto. Por supuesto, esto no es exclusivo de GT Metrix. Simplemente me gusta la interfaz visual.

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

Google PageSpeed Insights

Google PageSpeed Insights es una herramienta de prueba de velocidad de sitios web que le ayuda a identificar soluciones rápidas para mejorar su sitio. Le dice dónde necesita 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 hecho algunos buenos avances en simplificarla en los últimos años.

Pingdom

Pingdom proporciona una herramienta de velocidad de sitios web que ofrece información sobre el tiempo de carga, la fiabilidad, el tiempo de actividad, la compatibilidad móvil y otras métricas clave. También proporciona recomendaciones sobre cómo solucionar cualquier problema que encuentre.

Es parte de una suite mucho más grande de herramientas de monitoreo de rendimiento para sitios web. Incluso puede instalar la herramienta de monitoreo de Pingdom directamente en su sitio de WordPress para ayudarle a medir el rendimiento desde el panel de control de WordPress.

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

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 informan 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 llaman los Core Web Vitals. Estos web vitals evolucionarán con el tiempo pero, al momento de escribir esto, estos son los objetivos en los que centrarse:

• 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 perceptible para los usuarios.
En su forma más simple, LCP determina cuánto tiempo tarda el “elemento de contenido” más grande en su página (como una imagen de héroe, texto de encabezado, etc.) en mostrarse dentro del área de visualización de un visitante.

FID (First Input Delay)

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

A medida que un sitio web se vuelve más interactivo, FID se convierte en una de las métricas de rendimiento del sitio web más críticas porque afecta la rapidez con la 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 los componentes web mientras se genera la página.

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

Otros Web Vitals

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

Aunque técnicamente no están incluidas en el “núcleo”, estos web vitals secundarios definitivamente impactarán en los core web vitals.

TTFB (Time to First Byte)

TTFB significa tiempo hasta el primer byte. Es el tiempo entre presionar enter en su teclado y obtener el primer fragmento de datos de la 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 cargarse hasta que cualquier parte del contenido de la página se renderiza 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 de carga de página completa

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

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

Si su sitio web es aún más lento que eso, entonces realmente no tiene un sitio web. Tiene un espacio de estacionamiento digital con su nombre.

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

Hay una serie de métricas que puede usar para medir la experiencia del usuario de su 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 las métricas de rendimiento de 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 contenido individual durante un período de tiempo determinado.

Tasa de rebote

La tasa de rebote del sitio web es el porcentaje de visitantes que abandonan su 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 su sitio web.
Por ejemplo, si tiene 1,000 visitas totales y 800 de ellas son visitas de una sola página, eso significa que tiene una tasa de rebote del 80%.

Y su velocidad promedio de página tiene un gran efecto en la tasa de rebote del sitio web.

Una cosa importante a tener en cuenta sobre las tasas de rebote del sitio web es que, aunque pueden ser útiles para Google Analytics, no cuentan toda la historia 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 cantidad de tiempo que un usuario pasa en una sesión particular.

Esta métrica se puede usar para averiguar cuán productivamente están pasando los visitantes su tiempo en su 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 necesita crear un sitio web más atractivo. Esto se debe a que las visitas más cortas podrían indicar que sus 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 dependiendo del tipo de contenido. Pero la investigación muestra que el promedio está disminuyendo en internet.

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

Tasa de conversión

Una conversión es la finalización exitosa de una acción que desea que realicen los visitantes de su sitio web, como comprar algo o registrarse en su lista de correo electrónico.

Si no está obteniendo conversiones, es muy probable que sea porque las personas están rebotando demasiado. 🦘

Puede mejorar la tasa de conversión aumentando la velocidad de la página, reduciendo el número de pasos necesarios para completar una acción deseada, mejorando la claridad de su sitio web y más.

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

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

4.1) Reduzca el tamaño de su página eliminando el “exceso de código”

Hay muchas razones por las que debería reducir el tamaño de su 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

• Recortar el exceso de código

El exceso de código es un término utilizado para describir la cantidad de código necesario para que un sitio web funcione. Simplificar su código puede ayudar a reducir el tiempo de carga y también facilitarle mantener su sitio.

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

Imagínese conduciendo al trabajo por la mañana. Ahora imagine todas las diferentes rutas que puede tomar para llegar allí.

Todas lo llevan de un lugar a otro. De casa al trabajo. Pero qué rutas elija dicta cuánto tiempo le tomará llegar allí.

Imagine esta ilustración cada vez que alguien intenta visitar su sitio web.

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

• Usar imágenes sabiamente

• Alojar videos externamente

• Eliminar comentarios

• Reducir solicitudes HTTP

• No usar fuentes web externas

• Eliminar plugins innecesarios

Veamos cómo hacer cada una de estas cosas una por una.

Usar imágenes sabiamente

No hay un número exacto de imágenes que deba intentar incluir en sus páginas y publicaciones. Cada vez que suba una imagen, hágase una pregunta simple:

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

Si no puede responder a esa pregunta, no use la imagen.

Alojar videos externamente

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

En lugar de alojar videos directamente en su sitio web, lo que utilizará el almacenamiento y el ancho de banda del servidor de su host web, casi siempre es mejor alojarlo externamente e incrustarlo en la página.

Suba su video a YouTube o Vimeo y coloque el código de inserción HTML en su página. Todos los principales creadores de sitios web facilitan hacer esto.

Eliminar comentarios

Los comentarios son una forma muy útil de fomentar una discusión saludable en el inter- LOL JK son más tóxicos que envolver sus labios alrededor de un tubo de escape de automóvil y tomar una respiración profunda.

Aunque se ha demostrado que los comentarios proporcionan algún beneficio 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 web.

Como se puede ver en la historia de MightyBytes, permitir comentarios en sus publicaciones de blog ralentiza los tiempos de carga del sitio web.

Y cuantos más comentarios haya, peor se pone.

Puedo dar fe personalmente de eliminar 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 la página. Generan llamadas adicionales a la base de datos 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 sus blogs y seguir adelante.

Reducir la cantidad de solicitudes HTTP

Las solicitudes HTTP harán que su sitio 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 proporcionan muy poco valor al usuario.

Los peores infractores son las integraciones integradas que vienen con algunos temas o plugins. Estas integraciones funcionan bien para las personas que las quieren, pero no se pueden apagar o eliminar si no las quiere 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 un vistazo rápido a las urls 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

¡AY! 🤮

No es de extrañar que esta página web tarde 9.6 segundos en cargar.

Y lo peor es que, estos son casi todos trucos de marketing innecesarios que en realidad empeoran la experiencia del usuario del sitio web.

No usar fuentes web externas

Uno de los principales culpables en ralentizar 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 creadores de sitios web integran sus APIs para incluir estas fuentes en un menú desplegable súper simple de opciones. 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 su sitio web porque tiene que cargar varios archivos diferentes de fuentes externas solo para mostrar texto.

Esto puede ser un gran obstáculo para los tiempos de carga de la página. También es realmente frustrante para las personas que están tratando de leer su 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.

La cosa es… las fuentes son geniales. Y no hay nada de malo en querer hacer que su marca se sienta única y destacarse entre la multitud.

Entonces, ¿qué debería hacer?

Si ya está acelerando su sitio web utilizando muchas de las estrategias mencionadas aquí, probablemente pueda permitirse divertirse un poco con algunas fuentes.

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

Claro, no son tan bonitas. Pero la mejora en la experiencia del usuario lo compensa con creces, en mi opinión. ¡Las he usado aquí mismo en mi propio sitio web!

Eliminar plugins innecesarios

Es mejor mantener los plugins al mínimo.

Solo instale plugins que sean absolutamente necesarios para la funcionalidad de su sitio y que no perjudiquen la experiencia del usuario de su sitio.

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

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 web y lo reduje a 12.

Aquí está el antes y el después de su rediseño del 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) Optimizar sus 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 su sitio web:

Elegir el mejor formato de imagen

Qué formato de imagen es mejor para el rendimiento de su sitio web depende de para qué está 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 alguna pérdida de datos.

• PNG es mejor para imágenes que son dibujadas 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 emergente, y comenzará a verlo más a menudo, pero aún no es del todo común. No me preocuparía por él por ahora.

• SVG es su mejor opción para gráficos vectoriales e iconos si es un diseñador avanzado. Se escala hacia arriba y hacia abajo sin perder nitidez y calidad, y el tamaño del archivo es mucho más pequeño que los PNG.

Establecer las dimensiones correctas de la imagen

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

Es por eso que muchos diseñadores web y bloggers nuevos 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 imagen.

Ejemplo: Supongamos que quiero descargar esta imagen de mono lindo de Unsplash.

Si la descargo en su tamaño y dimensiones originales, vendrá en un asombroso 4928 x 3264. (ancho y alto) Cualquier cosa por encima de 1280 x 720 (también conocido como 720p) se considera alta definición.

Si quiero ir aún más alta calidad para asegurarme de que me vea bien en pantallas de mayor resolución, puedo hacer 1920 x 1080 (también conocido como 1080p) o 3840 x 2160 (también conocido como 4K).

Pero no planeo mostrar esta imagen de mono en toda la pantalla. Solo quiero mostrarla en mi publicación de blog. Y como sé que el ancho de mi contenido de publicación de blog es de aproximadamente 1000px, sé que el ancho 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 espacio de maniobra, por si acaso decido usar la imagen en un contexto más amplio en el futuro.

Entonces, ahora usaría un editor de fotos simple (prefiero Photoshop) para cambiar el tamaño de la imagen de 4928 x 3264 a 1280 x 848.

Esto hará que sea mucho más fácil para su sitio web cambiar automáticamente el tamaño de la imagen para que sea receptiva en todos los dispositivos. La cantidad de trabajo de código se ha reducido.

Pero aún hay un paso crítico más que debe tomar antes de que esa imagen esté lista para ser subida a su sitio.

Comprimir cada imagen

Es importante que las imágenes se compriman antes de ser subidas a su sitio web.

Esta es la forma más fácil y simple de acelerar la velocidad de carga de su sitio web.

¿Sabe todas esas fotos de stock gratuitas, hermosas y elegantes de las que acabamos de hablar? Son enormes.

Hay varias maneras de comprimir y optimizar sus imágenes, pero aquí está el método simple que uso:

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

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

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

Vaya a Archivo > Exportar > Guardar para Web

Nuevamente, el flujo de esto podría ser un poco diferente para su versión de Photoshop. Pero debería estar en la misma área general.

Elija sus opciones de compresión de imagen

Ahora, elija sus opciones.

La mayoría de sus fotos se pueden guardar en el formato JPEG LOW. Si necesita tener un fondo transparente, asegúrese de seleccionar PNG-8.

La calidad se establece en una escala de 1-100. Por lo general, nunca voy por encima de 5-10. Notará que el 90% de la calidad se conserva de todos modos. Y vale la pena perder ese 10% por los ahorros drásticos en el tamaño del archivo.

Luego, haga clic en Guardar.

Nombre su nueva imagen y haga clic en Guardar

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

Disfrute de la gloria de sus resultados!

¿Ve eso??

La imagen original pesaba un asombroso 3.8 MB.

¿La nueva versión comprimida y totalmente optimizada? 60 KB!

ESO, mi amigo, es cómo se hace.

Como dije, comprimir sus imágenes es la #1 forma de acelerar rápidamente el rendimiento de su sitio web.

4.3) Usar caché

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

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

El caché es beneficioso porque permite al navegador o dispositivo usar contenido que ya ha sido almacenado en lugar de cargarlo nuevo cada vez.

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

Una de las formas más poderosas de optimizar las velocidades de carga del sitio web es utilizando caché. Hay muchos tipos diferentes de caché disponibles dependiendo de cuáles sean sus necesidades.

Caché HTTP

El caché HTTP le permite minimizar el número de solicitudes que el navegador de un usuario hace a su servidor utilizando encabezados HTTP para almacenar en caché recursos enviados desde el servidor.

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

Caché de página

El caché de página es otro tipo de caché, 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 su servidor y descargar todos los componentes de su sitio web para esa página nuevamente.

Caché del navegador

El caché del navegador se refiere al caché 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 su sitio web, puedan cargar páginas más rápido.

Caché del servidor

El caché del servidor es un tipo de caché que ocurre en el servidor donde está alojado su sitio web.
Esto servirá archivos estáticos a sus visitantes para que puedan cargar su sitio web más rápido.

4.4) Eliminar o diferir CSS y Javascript que bloquean el renderizado

Si su sitio web no es muy grande, diferir la carga de CSS y JavaScript puede ser una forma muy efectiva de optimizar el rendimiento.

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

A menudo, esto se puede lograr fácilmente colocando scripts en el pie de página de su sitio.

Los scripts que se difieren solo se cargarán si es necesario, lo que reduce el peso inicial de la página requerido para cargar.

También puede usar un plugin para diferir scripts. Esto le permite cargar scripts cuando sea necesario sin retrasar el tiempo de carga para otros aspectos de su sitio web.

Cómo encontrar y eliminar CSS y Javascript que bloquean el renderizado

IMPORTANTE: Si no sabe lo que está haciendo aquí, puede romper fácilmente algunas características y contenido de su sitio web. Asegúrese de probar la eliminación o el diferimiento de archivos Javascript uno por uno, para que pueda deshacer fácilmente el cambio si su sitio web se rompe

Navegue a la pestaña “Estructura” en su informe de GT Metrix y haga clic en “Reducir Javascript no utilizado”

Esto le mostrará qué archivos Javascript GT Metrix cree que son innecesarios o que se pueden diferir para cargar más tarde.

Elimine o difiera cada archivo uno a la vez, luego pruebe su sitio web

Si está usando WordPress, este proceso es mucho más fácil. Puede usar un plugin de caché popular como WP Rocket o Hummingbird para diferir archivos Javascript.

Si no está usando WordPress, las cosas pueden volverse desordenadas rápidamente. Hay una serie de formas de diferir Javascript pero todas involucrarán codificación. Esto es solo para desarrolladores avanzados.

Si no quiere involucrarse en esas cosas, le recomiendo encarecidamente que simplemente elimine tantos de los plugins y scripts ofensivos que están usando este Javascript. Mucho más simple.

4.5) Elegir un servidor más cercano a sus 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é su servidor web de sus visitantes, más rápido se pueden entregar los datos a ellos.
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 forma real de saber dónde se encuentra un servidor es preguntando al host web antes de registrarse con ellos. Hay otros métodos, pero son mucho más avanzados. Ni siquiera sé cómo hacerlos.

Si elige alojamiento dedicado con una empresa como Cloudways, podrá elegir entre una serie de proveedores de alojamiento en la nube que ofrecen servidores en todo el mundo.

Usar 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 posible al visitante en lugar de desde el servidor de su sitio web.

Esto puede reducir los tiempos de carga para los visitantes del sitio web hasta en un 50% y reduce los costos de ancho de banda. Cada visitante del sitio web solo necesitará descargar los archivos que necesitan del 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 tiene muchos visitantes internacionales, particularmente si tiene un sitio web multilingüe, un CDN ayudará a que el contenido de su sitio web cargue más rápido para ellos. Esto puede aumentar la cantidad de tráfico que recibe del extranjero.

Un CDN también eliminará el estrés en sus propios servidores al alojar contenido en servidores internacionalmente. Esto significa que su servidor tendrá menos trabajo que hacer y será menos probable que falle debido al uso excesivo.

4.6) Evitar cadenas de redireccionamiento 301

Las cadenas de redireccionamiento son causadas cuando un redireccionamiento 301 envía a un visitante de una página a otra página en su sitio, y luego a otra… y otra.

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

La forma más simple de evitar este problema es mantener los redireccionamientos 301 al mínimo. Cuando los use, asegúrese de que solo redirijan una vez.

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

Un Sistema de Gestión de Contenido es una aplicación que le permite gestionar su contenido. El CMS podría 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 creador de sitios web.

Entonces, importa qué creador de sitios web use.

¿Por qué? Porque no todos los creadores de sitios web son creados igual cuando se trata del rendimiento del sitio web.

¡Otra razón más para amar Weebly! Y aún más razones para evitar Wix como la peste…

Si está usando WordPress, asegúrese de elegir un plugin de creación de páginas que sea lo más liviano posible.

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

4.8) Obtener un mejor alojamiento de sitios web

Si no está obteniendo la velocidad que su sitio web necesita para funcionar correctamente, podría ser el momento de actualizar su alojamiento de sitios web.

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

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

Veo a demasiados propietarios de pequeñas empresas escatimar en el alojamiento de sitios web y sufrir las consecuencias.
Tómese su tiempo e investigue para elegir el alojamiento web que sea adecuado para usted.

5) Conclusión: ¡Mejore la velocidad de su sitio web lo antes posible!

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

La velocidad de carga del sitio web puede impactar el éxito o el fracaso de un negocio en línea, por lo que vale la pena tener cuidado en cómo gestiona los recursos de su sitio.

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

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

Y si prefiere no preocuparse por el lado técnico, mantener su sitio rápido es parte de nuestro servicio de gestión web.

¡Pruebe estas sugerencias y hágame saber cómo le va!