Mejores prácticas y consejos de mejora para la velocidad de carga del sitio web

Cuando se trata de usuarios en línea hoy, quieren lo que quieren y lo quieren ahora. Todos hemos estado en una situación en la que un recurso en línea tiene una velocidad de carga del sitio web demasiado lenta y simplemente hicimos clic. Gracias a las redes sociales, la televisión y todas las demás tecnologías modernas, los seres humanos de hoy no son exactamente conocidos por su paciencia y concentración.

La velocidad es el asesino silencioso de los sitios web. Casi la mitad de todos los usuarios del sitio web esperan que su sitio web se cargue en 2 segundos o menos. Eso puede parecer una locura, pero es cierto que incluso unos segundos de tiempo de carga lenta asustarán a los usuarios sin pensarlo dos veces. La realidad es que necesitas que tu sitio web se cargue de forma correcta y rápida.

Mejores prácticas para la velocidad de carga del sitio web

Es posible que no se dé cuenta de lo lento que es su sitio web a menos que lo pruebe usted mismo. Afortunadamente, puede hacer esto de forma gratuita en Google PageSpeed. Es una herramienta basada en la web para identificar sus tiempos de carga y encontrar áreas problemáticas. ¿Cómo se acumula el tiempo de carga de su sitio web? Si necesita algo de trabajo, no se preocupe. Es más fácil de lo que piensa mejorar el tiempo de carga de su sitio web con solo unos pocos clics. A continuación, se ofrecen algunos consejos adicionales para comenzar.

Utilice la compresión Gzip para una mejor velocidad de carga del sitio web

La compresión Gzip es una herramienta poderosa que reduce el tamaño de respuesta en alrededor de un 70%, lo cual es impresionante. Gzip es algo que se hace a través de su host, por lo que deberá preguntarle a su proveedor de alojamiento web si usa esta compresión en sus servidores. Con Gzip, reduce el tiempo de respuesta sin comprometer la calidad de sus videos, imágenes u otros elementos.

Puede ejecutar una prueba para ver si su sitio web es GZIPPED y ejecutar una Prueba de compresión Zip. El funcionamiento de Gzipping es reduciendo el tamaño de la respuesta HTTP. En última instancia, cambia el peso de la página.

Guarde sus archivos en caché

El almacenamiento en caché es cuando una versión de su sitio web se almacena en los navegadores de sus usuarios. De esta manera, cuando vuelvan a visitar su sitio web, hay una versión anterior que se cargará hasta que se actualice la nueva. El almacenamiento en caché puede reducir el tiempo de carga de más de 2 segundos a menos de 1 segundo. Ese es un gran salto y uno que debería preocuparle. Afortunadamente, es fácil configurar el almacenamiento en caché con su sitio web. Si usa WordPress, puede usar el complemento gratuito W3 Total Cache. El almacenamiento en caché es imprescindible hoy en día para agregar ese impulso adicional al rendimiento de carga de su sitio web.

Además del almacenamiento en caché del lado del servidor, también debe habilitar el almacenamiento en caché del navegador. Esta es esencialmente una forma de indicar a los navegadores que almacenen una copia de archivos estáticos como imágenes, CSS y archivos JS en el navegador para que los visitantes no tengan que esperar a que estos archivos se descarguen nuevamente cuando visiten su sitio web nuevamente. Puede leer más en esta recopilación de información sobre el aprovechamiento del almacenamiento en caché del navegador de WordPress.

Actualice el host de su sitio web

Tener el host adecuado para su sitio web puede influir en el rendimiento de su página. Puede realizar tantos cambios como desee en su sitio web, pero si no ve mucha mejora, es posible que su anfitrión sea el culpable. Es tentador elegir la opción de alojamiento más barata cuando lanza su sitio web por primera vez. Si bien esto puede estar bien por un tiempo, es probable que lo supere si está alojando una gran cantidad de archivos o si está experimentando un mayor tráfico.

Es probable que se compartan planes más baratos, y esto significa que cualquier problema en los sitios web de su vecino también afectará a los suyos. Tener un servidor dedicado le permite evitar cualquiera de los problemas que pueden ocurrir si está en un servidor compartido. También tendrá más opciones de servicio al cliente si necesita ayuda con su tiempo de respuesta.

Comprar hosting

Compruebe el tema de su sitio web

La forma en que está diseñado su sitio web también influirá en lo bien y la rapidez con que su sitio web se muestra a los visitantes. Cambiar de tema puede ser todo lo que se necesita para liberar unos preciosos segundos en el tiempo de carga de su sitio web.

El uso de un creador de páginas de sitios web o un tema profesional asegurará que su sitio web no esté lleno de código innecesario y desordenado. Por eso es esencial analizar más que solo la estética de la plantilla, el tema o el creador de su sitio web. Además, considere iniciar sesión en su sitio web o aplicación web. El registro del sitio web le ayuda a descubrir problemas antes de que ocurran y puede evitar que su sitio web experimente problemas. Alternativamente, puede enviar mensajes de registro directamente con una herramienta como la aplicación Papertrail.

Reduzca sus archivos Java y CSS

La mayoría de los sitios web utilizan muchos archivos JavaScript y CSS, y estos archivos pueden tratarse individualmente en los navegadores de sus usuarios. Tener demasiadas solicitudes a la vez reducirá la velocidad de carga de su sitio web. Si puede minificar todos estos archivos, no agregará tanto peso al tiempo de carga de su sitio web.

Tener sus archivos Java y CSS cargados externamente en lugar de obstaculizar cada página es una idea inteligente. Luego, los usuarios solo necesitan cargar los archivos a medida que aparecen, no cada vez que alguien visita una nueva página en su sitio web. No altere los navegadores de sus usuarios con demasiados archivos.

Lleve su carga a través de la red

Si está experimentando mucho tráfico, debe tomarse en serio su red. Un servicio de Content Delivery Network (CDN) lleva los archivos a sus usuarios directamente mediante el uso de servidores en muchas áreas geográficas diferentes. Esto significa que hay menos tiempo entre lugares para que su sitio se cargue más rápido. El CDN más conocido es Amazon CloudFront, y es fácil de integrar con su sitio web actual.

Pruebe plataformas de alojamiento externas

Similar a CDN, puede alojar sus archivos en plataformas de alojamiento externas para evitar ralentizar su tiempo de carga. Esto es más común para archivos de video. Los videos son bastante masivos y subirlos directamente a su sitio web ocupará mucho espacio. Pueden tener fácilmente más de 100 MB, por lo que no es una decisión inteligente alojar videos u otros archivos grandes en su propio servidor.

Es una mejor idea alojar estos archivos externamente. YouTube y Vimeo son excelentes opciones para archivos de video. Desde allí, puede incrustar el video en su sitio web. Ahorra espacio y no ralentiza el tiempo de carga. ¡También es mucho más fácil!

El uso de YouTube, en particular, abre su contenido a una audiencia completamente nueva. De hecho, YouTube es considerado uno de los motores de búsqueda más grandes que existen y atrae a más de mil millones de usuarios mensuales. Es de uso gratuito y puede cargar videos de hasta 15 minutos (o más si envía una solicitud). Simplemente no puedes equivocarte.

Verifique sus solicitudes HTTP

Yahoo afirma que el 80% del tiempo de carga de un sitio web proviene de la descarga de todas las diferentes partes de una página. Si bien ya discutimos las mejores prácticas cuando se trata de archivos Java y CSS, ¿qué pasa con todo lo demás? Cuantos más elementos de la página deban cargarse, más tiempo tardará la página en aparecer por completo.

Puede verificar cuántas de estas solicitudes se están produciendo yendo a su navegador. Google Chrome viene equipado con herramientas para desarrolladores que se enfocan en solicitudes HTTP. Para acceder a estas herramientas, haga clic derecho en su página en Google Chrome, haga clic en Inspeccionar, luego navegue a la pestaña Red.

Ahora, puede ver cuánto tiempo tarda cada archivo en cargarse en la sección "Tiempo". En la esquina, también verá el número total de solicitudes. Reducir las solicitudes que toman más tiempo es una manera fácil de acelerar el tiempo de carga de su sitio web. Siga leyendo para conocer la mejor manera de combinar archivos en el siguiente consejo.

Combinar y minimizar archivos HTML

Cuando minimizas un archivo, eliminas cualquier espacio en blanco o código innecesario. Todas estas pequeñas cosas pueden no parecer importantes, pero eso aumenta su tiempo de carga. El objetivo es tener archivos HTML lo más ajustados posible.

Revise su sitio web para ver si hay páginas innecesarias que ya no está utilizando. ¿Hay lugares en los que pueda eliminar los espacios en blanco o el código innecesario? Finalmente, combine archivos HTML para asegurarse de que no está atascando el tiempo de carga de su sitio web.

Usar CSS externo

CSS es cómo incluyes los elementos de estilo y diseño de tu página. Su sitio web puede acceder a un archivo externo que se carga antes de su página o acceder al estilo en línea. Incluir su CSS en su propio documento HTML agrega mucho código. Como dijimos antes, eso no es bueno.

En su lugar, debe utilizar un CSS externo que se carga en el encabezado de su HTML. No pongas CSS en tu HTML si puedes evitarlo. Esto especialmente significa divs o encabezados. Es mucho más limpio y sencillo si usa una hoja de estilo externa. También es mucho más fácil de editar.

Si no está seguro del estado de su CSS, use las herramientas de entrega de CSS para ver cómo se acumulan sus archivos CSS. Esto le permitirá saber dónde se encuentra su archivo externo y si tiene elementos en línea en su HTML. Cuando sea posible, utilice solo un archivo CSS externo. Es probable que pueda combinar archivos si tiene más de uno.

Aplazar la carga de JavaScript

Cuando pospone un archivo, como JavaScript, se asegura de que el resto de su sitio web se cargue correctamente antes de cargar los elementos adicionales de Java. A veces, aplazar Java es tan simple como usar un complemento. Otras veces, deberá agregar manualmente un script HTML para que el sitio web sepa que desea cargar Java en último lugar.

Este script requiere un archivo JavaScript externo. Aquí hay un tutorial completo para aplazar su Java. Si bien no es una gran diferencia, esto puede hacer que parezca que su papel se carga más rápido.

Revise su tiempo hasta el primer byte

Su tiempo hasta el primer byte (TTFB) es el tiempo que espera un navegador antes de comenzar a cargar su primer byte de datos. Según Google, su TTFB debería ser inferior a 200 ms. Sin embargo, esta es una preocupación del lado del servidor, por lo que es fácil que la pasen por alto más desarrolladores web.

Cuando los usuarios visitan su sitio web, no comienza a cargarse automáticamente. Aunque parezca que es un proceso instantáneo, hay 3 pasos que se dan primero. Su navegador envía una solicitud HTTP inicial al servidor que aloja el sitio web y, desde allí, los pasos son la búsqueda de DNS, el procesamiento del servidor y la respuesta.

Una vez más, sus herramientas de desarrollo de Chrome mostrarán cuánto tiempo lleva este proceso en su página web. Esto también dependerá en gran medida de la fuerza de la conexión a Internet. Una conexión lenta tiene un TTFB más lento. Verifique su TTFB para asegurarse de que sea inferior a 200 ms. Si no es así, es hora de hablar con su anfitrión sobre la solución adecuada. Es posible que no tenga suficiente espacio o que experimente demasiado tráfico.

Primero el contenido por encima del pliegue

A veces tienes páginas largas que tardan un poco en cargarse. Eso es una realidad. Sin embargo, asegurarse de que la información de la mitad superior de la página se cargue primero puede ahorrarle algunos visitantes. Mejore su experiencia de usuario asegurándose de que todo el contenido de la parte superior de la página aparezca rápidamente.

Este es un proceso llamado "carga diferida" y el nombre tiene sentido. Es como cargar lentamente en la página, pero comienza en la parte superior donde sus usuarios están más enfocados. Con la carga diferida, sus usuarios pueden ver el contenido principal y aumentar la velocidad de carga del sitio web sin tener que esperar a que se cargue el resto de la página. Esta es una gran idea porque imagina tener más de 10 fotos en toda la página. No querrás que tus visitantes esperen hasta que se carguen todas esas imágenes para comenzar a leer.

Lazy load usa jQuery.sonar para cargar solo imágenes que son visibles. Hay muchos complementos que facilitan la adición de carga diferida a sus páginas, pero aquí hay un tutorial completo para hacerlo manualmente. Sus usuarios se alegrarán de no tener que esperar más por el contenido de la mitad superior de la página.

Verifique los tamaños de sus imágenes

Es fácil cargar imágenes sin verificar el tamaño de su archivo. Esto puede estar bien de vez en cuando, pero puede ralentizar fácilmente su sitio web si no tiene cuidado. Cuando guarde sus imágenes, intente guardarlas con la opción "Guardar para web". Está disponible con herramientas como Photoshop o Fireworks. Con "Guardar para web", el tamaño de la imagen se puede reducir sin perder la nitidez de la imagen.

En general, evite archivos de mayor tamaño. PNG al guardar sus imágenes. Puede verificar las propiedades de su imagen para ver si están al borde de tamaños más grandes. Finalmente, si ya tiene imágenes grandes en su sitio web, use un complemento o comprima manualmente esos archivos para mejorar la velocidad de carga de su sitio web.

Elimine los extras innecesarios para una mejor velocidad de carga del sitio web

A veces agregamos cosas nuevas a nuestros sitios web y nos olvidamos de ellas. O pasamos a otra cosa o ya no necesitamos una solución anterior. Cualquiera sea el motivo, asegúrese de consultar con frecuencia su sitio web para asegurarse de que no está desperdiciando espacio en nada que no esté usando. Esto se aplica a todos los siguientes:

• Imágenes;
• Complementos;
• Elementos de navegación;
• Elementos de diseño;
• Páginas;
• Publicaciones de blog archivadas.

No importa cuán pequeños sean, estos afectarán negativamente la velocidad de carga de su sitio web. Además, pueden crear áreas débiles en la seguridad de su sitio web, particularmente con complementos. Estos se dañan fácilmente y esto puede reducir su seguridad. Adquiera el hábito de revisar regularmente su sitio web en busca de extras desactualizados.

Limite sus botones para compartir en redes sociales

Los botones para compartir en redes sociales son una excelente manera de fomentar la participación en las redes sociales. Sin embargo, debe haber un límite. A veces, estos botones son muy eficaces. Sin embargo, también pueden ser un fracaso. En lo que podemos estar de acuerdo es en que estos botones para compartir en redes sociales usan varios JavaScripts externos y estos ralentizan su sitio web.

Facebook, en particular, ha sido uno de los principales culpables de esto. Los scripts de Facebook pueden ralentizar el rendimiento del sitio web con sus botones para compartir. Considere si estos botones para compartir realmente valen la pena. Aún puede conservarlos, pero solo conserve aquellos que hayan demostrado ser de alto rendimiento.

Entrega asincrónica

Hablando de códigos de terceros, hay muchas cosas que pueden salir mal. Si el tercero experimenta una interrupción o se ralentiza repentinamente, su página puede atascarse fácilmente al intentar cargar ese recurso, ya sea un botón para compartir en redes sociales o un script de análisis de red.

La entrega asincrónica es la solución a esa desaceleración. Con esto habilitado, si su red de terceros experimenta una interrupción, su propio sitio web no se verá afectado. Puede habilitar la entrega asincrónica de varias formas, todas las cuales se describen aquí.

Instalar Google PageSpeed

Google PageSpeed ​​es un módulo de servidor de código abierto que optimiza la velocidad de carga de su sitio web. Está diseñado por Google para que su sitio web sea más rápido y fácil de usar. Básicamente, realiza diferentes modificaciones tanto en su servidor como en los archivos de su sitio web. No tiene que hacer nada manualmente y su sitio web funcionará mejor.

Es lo más parecido a una solución única para todos que encontrará en lo que respecta al rendimiento de su sitio web. Puede instalar Google PageSpeed ​​en su administrador de archivos usted mismo, o puede pedirle a su anfitrión o desarrollador que lo ayude con la instalación. Puede configurarlo y olvidarlo.

Combinar imágenes de fondo

Muchos temas utilizan varias imágenes de fondo para crear una imagen única y completa. Si bien esto puede verse genial y simultáneo, podría estar ralentizando el rendimiento de su sitio web. Debido a que los navegadores de sus usuarios necesitarán realizar varias solicitudes diferentes para cargar las fotos de fondo, esto le dedica tiempo al proceso de carga.

En su lugar, combine sus imágenes en una sola para aumentar la velocidad de carga de su sitio web. De esta manera, sus usuarios solo necesitan realizar una única solicitud en lugar de muchas. Su sitio web será más rápido ya que ya no hay varias solicitudes de ida y vuelta para que el fondo se cargue correctamente.

Detener el enlace directo de imágenes

Hotlinking es la práctica de incrustar una foto de otro sitio web en el suyo sin cargarla en su servidor. Esto es simple con un poco de código, pero es una mala práctica que puede conducir a una ralentización del sitio web, entre otras cosas.

Hotlinking no solo daña su sitio web, sino que técnicamente es un robo si lo hace sin permiso. Los propietarios de sitios web pagan por el espacio para alojar estos archivos, y cuando colocas ese mismo archivo en tu propio sitio web a través de un código de inserción, estás tomando sus recursos sin permiso.

Si bien hay algunos sitios web que le permiten cargar imágenes directamente con la intención de compartirlas, esto todavía no es una buena idea. Cuando estos sitios web son lentos o experimentan un alto tráfico, pueden ralentizar la velocidad de carga de su sitio web si los está incrustando. Además, a menos que pague por espacio, estos archivos se pueden eliminar en cualquier momento sin previo aviso.

Sí, el enlace directo puede ahorrarle algo de ancho de banda, pero es más probable que ralentice su sitio web a largo plazo. Aloje siempre sus imágenes en su propio servidor en lugar de hacer un hotlinking. En caso de duda, es mejor comprar más espacio en su propio servidor para que pueda permitirse subirlos. De todos modos, debería utilizar archivos de imagen pequeños, por lo que no debería ser un problema.

Aumente la velocidad de carga de su sitio web hoy

¿Estás listo para llevar tu sitio web a nuevas alturas? Es hora de aumentar la velocidad de carga de su sitio web. Si su sitio web tiene una velocidad de carga lenta, es fácil perder visitantes sin querer. Piense en lo frustrante que le ha resultado cuando un sitio web tarda demasiado en cargarse. Un retraso de un segundo en el tiempo de carga del sitio web dará como resultado una disminución del 7% en las conversiones y del 11% en las visitas a la página. No les haga eso a sus usuarios si se toma en serio estos consejos anteriores.

Acelerar su sitio web no es complicado, caro ni confuso. Es una de las formas más simples y rápidas de mejorar su SEO y tener un impacto positivo en sus usuarios. Si desea que su sitio web funcione mejor e impresione a sus usuarios, vale la pena invertir en los consejos anteriores.

Desde evitar enlaces directos y enlaces rotos hasta actualizar su alojamiento web, incluso los pequeños pasos anteriores tienen un gran impacto. Si está abrumado, simplemente comience probando la velocidad de carga de su sitio web. A partir de ahí, tendrá una buena idea de cuánta mejora necesita hacer para asegurarse de que su sitio web se esté ejecutando al máximo nivel de rendimiento. Es posible que su sitio web solo necesite algunos ajustes para cumplir con los estándares de Google. Tus usuarios están cansados ​​de esperar, así que es hora de empezar a trabajar.

Vector de velocidad de carga del sitio web creado por ibrandify