La guía de 6 pasos para acelerar la carga de su sitio móvil


cómo acelerar la carga de su sitio móvil.

Sus usuarios esperan que su sitio se cargue rápido. De lo contrario, corre el riesgo de perder mucho tráfico.

¿Qué tan rápido, preguntas?

Algunas investigaciones sugieren que si una página no se carga en un abrir y cerrar de ojos, los usuarios de Internet pueden perder interés. Han pasado unos 400 milisegundos.

Un retraso de solo un segundo puede reducir la satisfacción del cliente en un 16%, y uno de cada cuatro visitantes abandonará un sitio si tarda más de cuatro segundos en cargarse.

estadísticas de velocidad del sitio móvil "class =" wp-image-106857 "srcset =" https://improvvisa.es/wp-content/uploads/2021/04/La-guia-de-6-pasos-para-acelerar-la-carga-de.png 700w, https: // neilpatel.com/wp-content/uploads/2021/03/mobile-site-speed-350x104.png 350w, https://neilpatel.com/wp-content/uploads/2021/03/mobile-site-speed -768x227 .png 768w, https://neilpatel.com/wp-content/uploads/2021/03/mobile-site-speed.png 1170w "data-lazy-size =" (ancho máximo: 700px) 100vw, 700px "src = "https://improvvisa.es/wp-content/uploads/2021/04/La-guia-de-6-pasos-para-acelerar-la-carga-de.png

Sin mencionar al poderoso Google, la velocidad del sitio es un factor de clasificación para los sitios móviles.

Entonces, si su sitio no es rápido, su audiencia y Google lo pensarán mal. Perderás visibilidad y tráfico.

Entonces, ¿qué tan rápido es su sitio?

Porque si tarda más de uno o dos segundos en cargar, está perdiendo tráfico en este momento.

Está bien si su sitio es lento. Hay pasos que puede seguir para acelerar el proceso y asegurarse de no dejar que un solo visitante se le escape entre los dedos. Así es cómo.

Paso 1: prueba la velocidad de tu sitio móvil

Antes de hacer nada, debe probar la velocidad real de su sitio móvil.

Puede pensar que se carga bien, pero puede que sea más lento de lo que cree.

Una de las mejores reseñas móviles proviene de Ubersuggest. Así es como funciona:

Etapa 1: Ingrese su URL y haga clic en "Buscar"

ubersuggest hace que su sitio se cargue más rápido "class =" wp-image-94285 "srcset =" https://neilpatel.com/wp-content/uploads/2017/06/screen-shot-2020-05-05-at- 11.07 .38-am-700x232.png 700w, https://neilpatel.com/wp-content/uploads/2017/06/screen-shot-2020-05-05-at-11.07.38-am-350x116.png 350w , https://neilpatel.com/wp-content/uploads/2017/06/screen-shot-2020-05-05-at-11.07.38-am-768x254.png 768w, https://neilpatel.com / wp-content / uploads / 2017/06 / screen-shot-2020-05-05-at-11.07.38-am.png 1022w "data-lazy-size =" (ancho máximo: 700px) 100vw, 700px "src = "https://improvvisa.es/wp-content/uploads/2021/04/1617295607_605_La-guia-de-6-pasos-para-acelerar-la-carga-de.png

2do paso: Haga clic en "Auditoría del sitio" en la barra lateral izquierda.

ubersuggest acelera la carga del sitio Auditoría del sitio "class =" wp-image-94286 "src =" https://neilpatel.com/wp-content/uploads/2017/06/screen-shot-2020-05-05- at- 11.08.51-am.png

Paso 3: Desplácese hacia abajo hasta "Velocidad del sitio".

ubersuggest hace que el sitio se cargue más rápido. "class =" wp-image-94287 "srcset =" https://neilpatel.com/wp-content/uploads/2017/06/screen-shot-2020-05-05-at-11.09.49-am-700x242 .png 700w, https://neilpatel.com/wp-content/uploads/2017/06/screen-shot-2020-05-05-at-11.09.49-am-350x121.png 350w, https: // neilpatel .com / wp-content / uploads / 2017/06 / screen-shot-2020-05-05-at-11.09.49-am-768x265.png 768w, https://neilpatel.com/wp-content/uploads/ 2017/06 / captura de pantalla-2020-05-05-a-11.09.49-am.png 1505w "data-lazy-size =" (ancho máximo: 700px) 100vw, 700px "src =" https: // neilpatel.com/wp-content/uploads/2017/06/screen-shot-2020-05-05-at-11.09.49-am-700x242.png

Aquí es donde encontrará el tiempo de carga para computadoras de escritorio y dispositivos móviles. Esto muestra que el tiempo de carga móvil de mi sitio es de 2 segundos, que es una puntuación "excelente".

También prueba la velocidad relacionada con seis elementos clave de su sitio web:

  • Primera pintura satisfecha
  • Índice de velocidad
  • Tiempo de interactividad
  • Primera pintura significativa
  • Primer procesador inactivo
  • Latencia de entrada estimada

Si la velocidad de su sitio es excelente, no debería tener ningún problema. Pero si hay margen de mejora, no espere para actuar. Cada 0,5 segundos adicionales que lleva cargar su sitio aumenta el porcentaje de visitantes que se irán.

Cubriré las causas más comunes de los sitios móviles lentos y explicaré qué puede hacer para mejorar el suyo.

Paso 2: perfeccione el diseño de su sitio móvil

Piense en el diseño de su sitio.

¿Estabas pensando en dispositivos móviles?

Supongo que no. (Si lo hizo, dése una palmadita en la espalda).

Si no lo ha hecho ahora, es hora de repensar su diseño con una mentalidad móvil.

Los sitios móviles han cambiado mucho en los últimos años.

Anteriormente, los sitios tenían dos versiones, una para dispositivos móviles y otra para computadoras de escritorio.

Un sitio móvil se identifica fácilmente con la "m". subdominio:

el subdominio móvil hace que su sitio se cargue más rápido. "class =" wp-image-29815 "width =" 542 "height =" 159 "srcset =" https://improvvisa.es/wp-content/uploads/2021/04/1617295607_543_La-guia-de-6-pasos-para-acelerar-la-carga-de.png 722w, https: //neilpatel.com/wp-content/uploads/2017/06/image14-3-350x103.png 350w, https://neilpatel.com/wp-content/uploads/2017/06/image14-3-700x206.png 700w "data-lazy-size =" (ancho máximo: 542px) 100vw, 542px "src =" https://improvvisa.es/wp-content/uploads/2021/04/1617295607_543_La-guia-de-6-pasos-para-acelerar-la-carga-de.png

En esta situación, los sitios móviles y de escritorio son dos animales completamente diferentes que operan por separado.

Este ya no es el caso. Ahora, la mayoría de los sitios utilizan un diseño receptivo.

El diseño receptivo le permite tener un sitio que cambia dinámicamente en función de cómo se accede a él.

Por lo tanto, los usuarios de dispositivos móviles y de escritorio verán el mismo sitio, pero aparecerá de manera diferente en cada dispositivo.

En realidad, esto es lo que prefiere Google. Simplemente lo dicen:

"El diseño adaptable es la plantilla de diseño recomendada por Google".

Probablemente estés pensando, "Está bien, genial, pero ¿qué tiene eso que ver con la velocidad?"

Los diseños receptivos generalmente se cargan más rápido que los sitios solo para dispositivos móviles, por lo que obtienes una gran ventaja de SEO de eso.

Si utiliza un diseño receptivo, su sitio recibirá más atención en forma de acciones sociales que también impulsarán su SEO.

Hacer que su sitio sea receptivo es bueno tanto a corto como a largo plazo. Si aún no tiene un sitio receptivo, le recomiendo que lo revise lo antes posible.

Paso 3: Mantenga su sitio ligero

Es fácil comenzar a crear el mejor y más llamativo diseño que existe.

A veces te quedas demasiado atrapado y, como resultado, tu sitio se vuelve cada vez más lento porque sigues agregando más y más.

Esta es una condición que los desarrolladores llaman hinchazón de código.

La hinchazón del código ocurre cuando su sitio está abrumado por un exceso de código.

haga que su sitio cargue más rápido código hinchado "class =" wp-image-29810 "width =" 700 "height =" 394 "src =" https://neilpatel.com/wp-content/uploads/2017/06/ image9- 3.png

La mayoría de las veces, la hinchazón del código ocurre cuando un diseñador está demasiado concentrado en la presentación visual de un sitio.

No se confunda. El aspecto de un sitio es extremadamente importante.

Pero el rendimiento no puede tener prioridad sobre la apariencia.

Afortunadamente, no es necesario. Puedes tener tu pastel y comértelo también. A continuación, se incluyen algunos consejos que debe tener en cuenta al diseñar su sitio:

Mantenlo simple

Leonardo da Vinci dijo esto sobre la simplicidad:

Simplicidad es la máxima sofisticación.

Hoy, unos quinientos años después, sus palabras todavía suenan verdaderas.

Mira a tu alrededor. Los intrincados diseños del pasado han sido reemplazados por los diseños minimalistas del futuro.

Esto también se aplica a los sitios web. Sobretodo sitios móviles.

En una pantalla móvil, los sitios pueden estar demasiado llenos de gente, por lo que es importante mantener todo abierto y ordenado.

Por lo general, solo debe tener una llamada a la acción por página. Esto le ayudará a reducir la cantidad de código que utiliza y también a mejorar la experiencia del usuario de su sitio.

También es posible que desee considerar un diseño más simplista como Rug Doctor:

No es llamativo, pero llama la atención por su estilo elegante.

No necesita muchos colores y fotos brillantes para que su sitio se destaque. Cuando se trata de diseño móvil, menos es más.

Eliminar pasos

Cuanto menos tengan que hacer los usuarios, mejor.

Piénsalo. ¿Por qué debería haber siete etapas entre un cliente y una venta cuando solo podría haber 3?

Esto acorta efectivamente su embudo de ventas, pero también simplifica aún más la experiencia del usuario.

Muchos sitios de comercio electrónico utilizan esta estrategia para aumentar sus ventas.

En el sitio móvil de Boden es muy fácil comprar un producto. Lo agrega a su carrito, haga clic en finalizar la compra y pague.

Es simple y sencillo. No hay pasos innecesarios.

También ayuda naturalmente a aliviar la inflamación del código. Es difícil exagerar con el código si no tiene toneladas de páginas en su sitio.

Eliminar pasos innecesarios es una de las mejores cosas que puede hacer por sus visitantes. Es mucho más probable que los usuarios de dispositivos móviles permanezcan en su sitio si no tienen que hacer mucho.

Registre a sus usuarios con solo unos pocos clics y obtendrá grandes recompensas.

Usa menos imágenes

Antes de entrar en el meollo de la cuestión, quiero decir que las buenas imágenes son definitivamente importantes para cualquier sitio, y también tienen beneficios de SEO.

Sin embargo, puede tener demasiadas cosas buenas.

En este caso, puede volverse loco con las imágenes y ralentizar su sitio en el proceso.

Puede que no creas que esto es un gran problema, pero las imágenes representan aproximadamente el 63% del "peso" de una página.

De 2011 a 2015, el tamaño de la página móvil promedio se triplicó.

acelere la carga de su sitio use menos imágenes "class =" wp-image-29802 "width =" 600 "height =" 370 "srcset =" https://neilpatel.com/wp-content/uploads/ 2017/06 / image1 -3.png 800w, https://neilpatel.com/wp-content/uploads/2017/06/image1-3-350x216.png 350w, https://neilpatel.com/wp-content/ uploads / 2017/06 /image1-3-768x473.png 768w, https://neilpatel.com/wp-content/uploads/2017/06/image1-3-700x431.png 700w "data-lazy-size =" (ancho máximo: 600px) 100vw, 600px "src =" https://improvvisa.es/wp-content/uploads/2021/04/1617295607_909_La-guia-de-6-pasos-para-acelerar-la-carga-de.png

Esto significa que las imágenes se encuentran entre los elementos más exigentes de su sitio. Ocupan mucho espacio, por lo que tener demasiado no es bueno.

Una solución es simplemente reducir las imágenes.

Otra solución (probablemente más práctica) es comprimir sus imágenes y reducir el tamaño de sus archivos.

La compresión hace que sus imágenes sean más pequeñas sin degradar la calidad. Esto reduce el tiempo que lleva cargar su sitio.

Como beneficio adicional, también reduce el tiempo que tardan los robots de los motores de búsqueda en rastrear e indexar su sitio.

Sitios como Compressor.io pueden hacer esto en un abrir y cerrar de ojos.

acelerar la carga de su sitio comprimir imágenes "class =" wp-image-29812 "width =" 675 "height =" 455 "srcset =" https://neilpatel.com/wp-content/uploads/2017/06/ image11- 3.png 900w, https://neilpatel.com/wp-content/uploads/2017/06/image11-3-350x236.png 350w, https://neilpatel.com/wp-content/uploads/2017/ 06 / image11-3-768x518.png 768w, https://neilpatel.com/wp-content/uploads/2017/06/image11-3-700x472.png 700w "data-lazy-size =" (ancho máximo: 675px) 100vw , 675px "src =" https://improvvisa.es/wp-content/uploads/2021/04/1617295608_269_La-guia-de-6-pasos-para-acelerar-la-carga-de.png

De hecho, esta es una buena práctica que debe adoptar incluso si su sitio ya es muy rápido.

No uses fuentes personalizadas

Me encantan las hermosas fuentes personalizadas tanto como a cualquier otra persona, pero algunas de ellas requieren mucho mantenimiento.

Algunas fuentes usan toneladas de CSS, mientras que otras usan mucho JavaScript. De cualquier manera, estás viendo un montón de código.

Si desea una lectura en profundidad sobre este tema, consulte este artículo en el sitio web de Fundamentos de Google.

Si desea la versión corta, aquí está: Use fuentes personalizadas solo cuando sea absolutamente necesario.

Paso 4: Reduce tu código

La minificación es una técnica muy útil para optimizar su código.

Aquí hay una definición rápida de lo que significa "encoger" el código:

acelerar la carga del sitio minimizar la definición del código "class =" wp-image-29805 "width =" 668 "height =" 356 "srcset =" https://neilpatel.com/wp-content/uploads/2017/06 / image4- 3.png 890w, https://neilpatel.com/wp-content/uploads/2017/06/image4-3-350x187.png 350w, https://neilpatel.com/wp-content/uploads/2017 / 06 / image4-3-768x410.png 768w, https://neilpatel.com/wp-content/uploads/2017/06/image4-3-700x374.png 700w "data-lazy-size =" (ancho máximo: 668 px) 100vw, 668px "src =" https://improvvisa.es/wp-content/uploads/2021/04/1617295608_624_La-guia-de-6-pasos-para-acelerar-la-carga-de.png

Básicamente, reducir su código elimina todo lo que sea redundante e innecesario. Se asegura de que su sitio utilice solo el código que necesita.

Es muy útil para hacer que su sitio sea liviano.

Vosotras puede Minifica el código manualmente (instrucciones aquí), pero si no tienes experiencia en codificación, puede ser un poco intimidante.

Afortunadamente, existen varias herramientas gratuitas que puede utilizar para reducir su código en poco tiempo.

Minifycode.com ofrece varias herramientas de minificación para permitirle simplificar su HTML, CSS, JavaScript, etc.

La herramienta de minificación de código acelera la carga del sitio "class =" wp-image-29816 "width =" 504 "height =" 250 "srcset =" https://neilpatel.com/wp-content/uploads / 2017/06 / image15- 3.png 1008w, https://neilpatel.com/wp-content/uploads/2017/06/image15-3-350x174.png 350w, https://neilpatel.com/wp-content / uploads / 2017/06 / image15-3-768x381.png 768w, https://neilpatel.com/wp-content/uploads/2017/06/image15-3-700x347.png 700w "data-lazy-size =" (ancho máximo: 504px) 100vw , 504px "src =" https://improvvisa.es/wp-content/uploads/2021/04/1617295608_323_La-guia-de-6-pasos-para-acelerar-la-carga-de.png

Si su sitio se ejecuta en WordPress, tiene aún más opciones gracias a complementos como Better WordPress Minify:

El plugin minify code wp acelera la carga del sitio "class =" wp-image-29809 "width =" 633 "height =" 469 "srcset =" https://neilpatel.com/wp-content/uploads/2017 / 06 / image8-3.png 844w, https://neilpatel.com/wp-content/uploads/2017/06/image8-3-350x259.png 350w, https://neilpatel.com/wp-content/uploads / 2017/06 /image8-3-768x569.png 768w, https://neilpatel.com/wp-content/uploads/2017/06/image8-3-700x518.png 700w "data-lazy-size =" (máx. ancho: 633px) 100vw, 633px "src =" https://improvvisa.es/wp-content/uploads/2021/04/1617295608_920_La-guia-de-6-pasos-para-acelerar-la-carga-de.png

Al usar estas herramientas, puede reducir su código con solo unos pocos clics y estará en camino a un sitio más rápido.

Por supuesto, debe hacer todo lo posible para asegurarse de que no haya código innecesario, pero se producen errores. Estas herramientas le permiten corregir estos errores y mejorar su sitio al mismo tiempo.

Paso 5: reducir las redirecciones

Me encantan las redirecciones. Pueden ser realmente útiles para el SEO y la experiencia del usuario.

Pero al igual que el código, las redirecciones tienen usos limitados. No puede usar redireccionamientos en todas partes y esperar que su sitio funcione bien.

Esto se debe a que los redireccionamientos ralentizan de forma inherente su sitio.

Cuando hace clic en un enlace móvil normal, el servidor entrega el documento que se encuentra en ese enlace.

Pero una redirección significa que no hay ningún documento en ese enlace en particular. Por este motivo, el servidor debe ir a la página donde se encuentra el documento y recuperarlo.

hacer que el sitio se cargue más rápido, reducir las redirecciones. "class =" wp-image-29813 "srcset =" https://improvvisa.es/wp-content/uploads/2021/04/1617295608_829_La-guia-de-6-pasos-para-acelerar-la-carga-de.png 1106w, https://neilpatel.com/wp-content/ uploads / 2017/06 / image12-3-350x184.png 350w, https://neilpatel.com/wp-content/uploads/2017/06/image12-3-768x404.png 768w, https://neilpatel.com/ wp-content / uploads / 2017/06 / image12-3-700x368.png 700w "data-lazy-size =" (ancho máximo: 1106px) 100vw, 1106px "src =" https://neilpatel.com/wp- content / uploads / 2017/06 / image12-3.png

Este proceso debería ocurrir con todos los archivos de una página web. Esto significa que todas las imágenes, archivos CSS y archivos JavaScript pasarán por la redirección.

Como resultado, la página correcta puede tardar varios segundos en cargarse. Para entonces, es posible que sus usuarios se hayan ido hace mucho tiempo.

Recomiendo usar Screaming Frog para verificar si hay redireccionamientos.

Luego, puede rastrear las raíces de sus redireccionamientos y cambiar los que no sean del todo necesarios.

Cuanto menos trabajo tenga que hacer su sitio, más rápido irá. Si bien los redireccionamientos tienen un momento y un lugar, no abuse de ellos ni se vuelva dependiente de ellos.

Paso 6: Primera carga por encima del pliegue

Es obvio que los usuarios ven arriba el contenido del pliegue antes de ver cualquier otra cosa.

Entonces, ¿por qué cargar toda la página de una vez?

¿Por qué no cargar el contenido anterior al principio y luego cargar el resto si es necesario?

Es un concepto llamado 'carga diferida' y puede hacer maravillas con la velocidad del sitio.

Apuesto a que si tuviera la opción preferiría levantar tres libras en lugar de 30. ¿Estoy en lo cierto?

La carga diferida es exactamente el mismo concepto que se aplica a los sitios web.

Al implementar la carga diferida, le está diciendo a su sitio que haga solo el trabajo que necesita y no más.

Si se siente cómodo con el código, puede usar este complemento de jQuery.

Para los sitios de WordPress, hay complementos como BJ Lazy Load que vienen al rescate.

la carga diferida acelera la carga del sitio "class =" wp-image-29824 "width =" 498 "height =" 367 "srcset =" https://neilpatel.com/wp-content/uploads/2017/06/ Captura de pantalla -2017-06-13-au-12.31.52-AM.png 1990w, https://neilpatel.com/wp-content/uploads/2017/06/Screen-Shot-2017-06-13-at -12,31. 52-AM-350x258.png 350w, https://neilpatel.com/wp-content/uploads/2017/06/Screen-Shot-2017-06-13-at-12.31.52-AM-768x567.png 768w, https://neilpatel.com/wp-content/uploads/2017/06/Screen-Shot-2017-06-13-at-12.31.52-AM-700x516.png 700w "data-lazy-size =" (máx. -ancho: 498px) 100vw, 498px "src =" https://improvvisa.es/wp-content/uploads/2021/04/1617295608_622_La-guia-de-6-pasos-para-acelerar-la-carga-de.png

Si ninguna de estas opciones es adecuada para usted, es posible que deba contratar a un desarrollador para que lo ayude.

Esta es una técnica más avanzada, pero puede ahorrarle mucho trabajo a su sitio a largo plazo.

Conclusión

La velocidad no es solo para autos de carreras. Este es uno de los ingredientes más fundamentales de un gran sitio móvil.

Un sitio más rápido y optimizado para dispositivos móviles puede aumentar el tráfico y generar una avalancha de nuevos clientes y conversiones.

No es ninguna sorpresa.

El móvil está aquí y está aquí para quedarse.

El rendimiento de las computadoras de escritorio sigue siendo importante, pero los dispositivos móviles son el presente y el futuro.

En resumen, haga que su sitio sea lo más rápido posible y reduzca el peso de su sitio.

Este artículo de Think With Google lo expresa perfectamente: "Si la velocidad excita, la fricción mata".

Mejorar la velocidad de su sitio móvil es un doble impulso que mejorará su sitio para sus usuarios y para los motores de búsqueda.

Si aún no se ha centrado en los dispositivos móviles, lo invito a comenzar hoy mismo.

¿Cuál de estas técnicas utilizará para acelerar su sitio móvil?

Consulta con Neil Patel "src =" https://improvvisa.es/wp-content/uploads/2021/02/1612471355_9_20-preguntas-para-una-calificacion-de-clientes-potenciales-mas-rapida.png

Descubra cómo mi agencia puede liderar Masivo Cantidades de tráfico a su sitio web

  • SEO – desbloquear grandes cantidades de tráfico SEO. Vea resultados reales.
  • Marketing de contenidos – nuestro equipo crea contenido épico que se compartirá, obtendrá enlaces y generará tráfico.
  • Medios de pago – Estrategias rentables eficaces con un claro retorno de la inversión.

Reservar una llamada

Deja un comentario