Cómo hacer que su sitio web se cargue rápido en dispositivos móviles (2022)

El rendimiento de su sitio web en dispositivos móviles ahora es más importante que en computadoras de escritorio.

Esto se debe a que hay más personas que usan dispositivos móviles para acceder a Internet que personas que usan computadoras de escritorio.

Según StatCounter, más del 50 % de los usuarios de Internet en todo el mundo utilizan dispositivos móviles. Mientras que solo un poco más del 47% usa computadoras de escritorio.

Si está optimizando su sitio principalmente para computadoras de escritorio, está perjudicando el éxito de su negocio. El móvil es más importante ahora que nunca.

El rendimiento de su sitio en dispositivos móviles es muy importante para el SEO. El enfoque de Google ahora es la indexación móvil primero. Esto significa que Google usa la versión móvil de un sitio web para indexar y clasificar.

Si su sitio es rápido en el escritorio y lento en el móvil, su clasificación se verá afectada. El rendimiento de su sitio en dispositivos móviles debería ser más importante que su rendimiento en computadoras de escritorio.

Hacer que su sitio web cargue rápido en dispositivos móviles mejorará su SEO, reducirá la tasa de rebote y aumentará la conversión.

Pero optimizar la velocidad de un sitio en dispositivos móviles no es tan fácil como optimizar la velocidad de un sitio en computadoras de escritorio. Afortunadamente, este artículo puede ayudarlo a que su sitio web se cargue rápidamente en dispositivos móviles si sigue los consejos que he enumerado aquí.

Probando la velocidad de tu sitio web

Lo primero que debe hacer es probar la velocidad de su sitio en dispositivos móviles. Esto le dará una idea clara de qué tan rápido o lento es su sitio.

El hecho de que su sitio se cargue rápido en el escritorio no garantiza que se cargue rápido en el móvil. Es posible que su sitio sea súper rápido en el escritorio pero muy lento en el móvil.

Hay muchas herramientas de prueba móvil, pero prefiero usar Test My Site de Google para la prueba de velocidad móvil.

Simplemente visite ThinkWithGoogle e ingrese la URL de su sitio. Debería poder probar qué tan rápido es su sitio.

Para mí, un sitio que se carga en 3 segundos es lo suficientemente bueno. Pero Think With Google recomienda al menos 2,4 segundos.

Cómo hacer que tu sitio web se cargue rápido en dispositivos móviles

Estas son las mejores prácticas para acelerar su sitio en dispositivos móviles:

Usa un tema receptivo

Un tema receptivo es un tema que se ajusta para adaptarse a todos los dispositivos. Esto significa que incluso si sus usuarios provienen de computadoras de escritorio, dispositivos móviles o tabletas, su tema les brindará una versión de su sitio web que se adapte a cualquier dispositivo que estén usando.

Servir la versión de escritorio de un sitio web a los usuarios móviles ralentizará el tiempo de carga. Y es terrible para la experiencia del usuario.

Usar un tema responsive es muy importante. Es la primera base de un sitio web rápido en dispositivos móviles. Hay varios temas receptivos entre los que puede elegir. Lea mi lista de los 10 mejores y más rápidos temas de WordPress, cualquiera de los temas enumerados allí es lo suficientemente bueno y receptivo.

Utilice un servidor web rápido

Su servidor web juega el papel más importante en la aceleración de su sitio web. Un servidor web muy rápido con las últimas tecnologías de alojamiento hará que su sitio web se cargue rápidamente en dispositivos móviles.

Si tiene un servidor web lento, no importa cómo optimice su sitio web, es posible que no vea una mejora significativa.

Recomiendo Cloudways y Kinsta para sitios web establecidos. TargetTrend está alojado en Cloudways. Para sitios para principiantes, recomiendo Bluehost.

Usar AMP

Accelerated Mobile Pages (AMP) es un proyecto de Google para acelerar los sitios web en dispositivos móviles.

AMP está optimizado para la navegación móvil y puede ayudar a acelerar significativamente el tiempo de carga de un sitio web. También puede reducir el número de solicitudes en más del 77% según un estudio.

Puede comenzar con AMP instalando el complemento oficial de AMP. Hay otros complementos de AMP, también puede usarlos.

Una vez que active el complemento, puede elegir cualquiera de los tres modos disponibles. Si la mayoría de sus visitantes provienen de dispositivos móviles, considere usar el modo de transición o estándar. Pero su tema debe ser compatible con AMP.

Imágenes de carga diferida

Las imágenes pueden ralentizar un sitio web, especialmente en dispositivos móviles. La mejor manera de manejarlos es cargarlos cuando los usuarios se hayan desplazado hasta ellos. De esa forma, solo se cargarán cuando sea necesario y, por lo tanto, tendrán poco o ningún efecto en el tiempo de carga.

Si intenta probar su sitio web en PageSpeed ​​Insight o Web.dev y se le advierte que "difiera las imágenes fuera de pantalla", significa que las imágenes están ralentizando su tiempo de carga y debería considerar cargarlas de forma diferida.

Lazing loading images se trata de retrasar la carga de imágenes hasta que un usuario se desplace hasta ellas. Esto puede mejorar la velocidad.

Hay muchos complementos para manejar la carga diferida. La mayoría de los complementos de caché y los complementos de optimización de imágenes tienen opciones de carga diferida.

Elimine los recursos que bloquean el renderizado

La eliminación de los recursos que bloquean el renderizado puede acelerar el tiempo de carga de su sitio web en dispositivos móviles.

Por lo general, hay algunos scripts de Java y CSS que dificultan que el navegador muestre un sitio web rápidamente cuando un usuario lo visita. Esto se debe a que el navegador debe detenerse y leer estos archivos antes de poder mostrar el sitio al usuario.

La eliminación de estos recursos puede acelerar el tiempo de carga. Hay complementos como Autoptimize que pueden ayudar a eliminar los recursos que bloquean el renderizado.

Tengo un artículo útil sobre esto, deberías leer: Cómo eliminar los recursos que bloquean el renderizado en WordPress.

Eliminar CSS no utilizado

Tener mucho CSS sin usar puede ralentizar un sitio web. Los CSS no utilizados son CSS que no son necesarios para que se cargue un sitio web. Pero debido a que están presentes, el navegador aún necesita descargarlos, analizarlos y procesarlos.

Hay complementos como Perfmatters y Asset CleanUp que pueden ayudar a eliminar el CSS no utilizado.

He escrito una guía simple sobre esto: Cómo eliminar CSS y JS no utilizados en WordPress.

Generar CSS crítico

El CSS crítico se utiliza para extraer fácilmente el contenido de la mitad superior de la página para mostrarlo rápidamente al usuario. Tener una ruta CSS crítica puede acelerar el tiempo de carga de su sitio web en dispositivos móviles y de escritorio.

Hay complementos que pueden ayudar a generar Criticall CSS. WP Rocket puede hacer eso, LiteSpeed ​​Cache y WP Performance también pueden generar CSS crítico.

Tener un buen sistema de almacenamiento en caché

El almacenamiento en caché es una forma muy confiable de acelerar un sitio web. Debe usar un complemento de almacenamiento en caché efectivo para servir contenido en caché a sus visitantes móviles. WP Rocket es un complemento de almacenamiento en caché premium que es muy efectivo. Caché W3 Total, si está bien configurado puede ser muy efectivo.

La mayoría de las empresas de alojamiento web administrado ofrecen almacenamiento en caché a nivel de servidor. Averigüe si su servidor web ofrece lo mismo y pídales que lo activen para su sitio si no está listo para usar.

Puede solicitar a su host que instale y active Varnish caché. El caché Varnish es conocido por acelerar los sitios web.

Optimizar imágenes

Asegúrate de comprimir las imágenes. Prefiero comprimir completamente las imágenes antes de subirlas. Sin embargo, existen muchos complementos como optimole y otros que pueden ayudar a comprimir imágenes dentro de WordPress.

Servir imágenes WebP también puede ayudar a aumentar la velocidad del sitio web. WebP son más pequeños que JPG y PNG, por lo tanto, son más amigables con la velocidad.

Hay muchos complementos que pueden ayudar a convertir y servir imágenes WebP. Optimole y las imágenes voladoras pueden hacer esto muy bien.

Minificar código

La minificación es el proceso de comprimir el código de un sitio web de un tamaño más grande a uno más pequeño. Cuanto más pequeño mejor siempre y cuando no se rompa nada.

Debería considerar minimizar JS y CSS.

La mayoría de los complementos de almacenamiento en caché ofrecen funciones de minificación. Pero asegúrese de usar la puesta en escena para probar porque se sabe que la minificación rompe los sitios web.

Minimizar redireccionamientos

Demasiados redireccionamientos pueden ralentizar su sitio web, especialmente en dispositivos móviles. Puede ralentizar el tiempo de respuesta del servidor.

Asegúrese de no tener demasiados redireccionamientos. Si es así, redúzcalos tanto como pueda.

Habilitar la compresión

Comprima archivos para que su sitio web sea más rápido en dispositivos móviles. Cuanto más pequeñas sean las cosas, más rápido será su sitio.

Gzip o Brotli pueden aumentar significativamente la velocidad de su sitio web al comprimir los archivos del sitio web. Generalmente, Brotli es mejor que Gzip. Pero cualquiera de ellos funcionará bien. Consulte con su servidor web para habilitar la compresión para usted.

También hay complementos que pueden ayudarlo a habilitar la compresión si una solución de complemento es más adecuada para usted.

Reducir el número de AdSense por página

Google AdSense es una de las formas más populares de ganar dinero con los blogs, pero también se sabe que ralentiza significativamente los sitios web.

Según mi observación, si desactiva AdSense, notará instantáneamente una gran diferencia en su tiempo de carga.

Pero el dinero es muy importante, así como la velocidad. Así que tienes que llegar a un compromiso. Google recomienda 3 bloques de anuncios por página. Si te quedas con eso, entonces deberías estar bien.

He notado que las unidades de contenido relacionado y los anuncios a nivel de página tienen el impacto más negativo en el tiempo de carga móvil.

Usar un CDN

Una red de entrega de contenido puede ayudar a aumentar la velocidad de su sitio web al hacer una copia estática de su sitio web y servirla a los usuarios de todo el mundo desde una ubicación más cercana cuando intentan visitar su sitio web.

Si no está utilizando un CDN, ¡entonces se lo está perdiendo!

Consulte los mejores proveedores de CDN de WordPress.

Usar fuente de pila del sistema

Recientemente estaba tratando de acelerar el tiempo de carga de este sitio web en dispositivos móviles. Así que decidí dejar de usar la fuente de Google y probé la pila del sistema y, para mi sorpresa, hubo una mejora significativa en la velocidad.

Las fuentes de Google y Font Awesome son increíbles, pero pueden ralentizar el sitio web. El uso de la pila del sistema garantiza que no se realicen solicitudes externas, ya que lo que se necesita es la fuente de cualquier dispositivo que esté usando el usuario.

Algunos temas facilitan el cambio a la pila del sistema. Simplemente cambie a la pila del sistema.

Hacer uso de las versiones más nuevas de PHP

Las versiones de PHP más nuevas suelen ser más rápidas que las anteriores. Debe asegurarse de estar utilizando la última versión de PHP o solo una versión anterior.

No solo por velocidad, sino también por seguridad.