Cómo acelerar su sitio web móvil en WordPress (11 buenas prácticas de rendimiento)

Probablemente lea esta publicación de blog en su teléfono que su sitio móvil es la clave de cómo se conecta con su audiencia, pero ¿qué sucede si su sitio es lento cuando se accede desde un móvil? ¿Cómo saber si su sitio es lento, especialmente en los dispositivos móviles? Esto crea otras preguntas sobre la optimización de sitios móviles … ¿por qué debería preocuparse por optimizar para usuarios móviles? ¿Cuáles son las formas de acelerar su sitio en su móvil? Google dice que si su sitio tarda más de cinco segundos en cargarse, el 90% de sus visitantes pueden abandonar el sitio de inmediato. Y si ha invertido mucho esfuerzo para generar tráfico en su sitio, ¡es una pena que los visitantes ni siquiera tengan tiempo para interactuar con su contenido es dinero en el desagüe!

En este artículo, le daremos algunos consejos de rendimiento para acelerar su sitio móvil, incluida la mejor manera de optimizar su contenido para un dispositivo móvil. Le mostraremos cómo hacerlo más fácil para todos, independientemente del dispositivo sus visitantes. Cómo probar la velocidad de la página móvil El primer paso antes de mejorar su sitio móvil es medir su rendimiento actual. Debe evaluar la salud de su sitio web y la velocidad general experimentada por los visitantes móviles.
Para realizar dicha auditoría, recomendamos usar la tecnología del faro. Lighthouse proporciona información simple sobre el rendimiento de su sitio tanto para escritorio como para dispositivos móviles. Vale la pena mencionar que los valores tienen diferentes umbrales entre el móvil y el escritorio: umbrales ecológicos para escritorio vs. Móvil: Fuente: Computadora de puntaje de faro (V8) para investigar las herramientas disponibles en el mercado para medir el rendimiento móvil.

Google PageSpeed ​​Insight
PageSpeed ​​Insights es una herramienta de SEO de Google que puede medir y analizar el tiempo de carga de cualquier URL.
Fuente de verificación de rendimiento móvil: Google PSI obtendrá una buena puntuación de PageSpeed ​​para dispositivos móviles, asegúrese de que sus indicadores estén en los siguientes umbrales:
Métricos-Weight bueno (verde) medio (naranja) bad (rojo) primer contenido lleno de contenido – 10% 0-1.8 S 1.8 S-3 S > 3s Velocidad de índice -10%

0 -3.3 S 3.3 -5.8 S > 5.8 S El mayor contenido lleno de contenido -25% 0 – 2.5 s 2.5 s – 4 s > 4 s tiempo para interactivo – 10% 0 – 3.8 S 3.8 S – 7.2 S > 7.2 S Tiempo de bloqueo total – 30% 0 – 200 ms 200 – 600 ms > 600 ms <
Cambio acumulativo – 15% 0 – 0.10 0.10 – 0.25 > 0.25

Instrumento de desarrolladores de Chrome
También puede generar una relación de rendimiento móvil utilizando la herramienta Chrome directamente desde el navegador Chrome. Siga los pasos a continuación para iniciar su informe móvil: vaya a su sitio web
Abra las “herramientas de desarrollador” en el menú SUS
Seleccione la pestaña “Lighthouse”.
Marque la casilla “Mobil” en la sección “Dispositivo”.
Haga clic en el botón “Generar informe”.
Gtmetrix
GTMetrix es una herramienta gratuita para probar el rendimiento de su página en su escritorio. Sin embargo, necesita una cuenta profesional para verificar su rendimiento móvil. Producto de Lighthouse, genere puntajes para sus páginas y ofrezca recomendaciones procesables.

Muchos dispositivos están disponibles. Puede ser útil convertirse en profesional para consultar su sitio en algunos dispositivos móviles diferentes.
Dispositivos móviles disponibles para pruebas – Fuente: GTMetrix

WebPagetest

WebPageTest es una herramienta gratuita que puede ayudarlo a identificar páginas de carga lenta en su sitio de WordPress y ajustarlas lo más rápido posible.
Probar mi sitio en la fuente móvil: WebPageTest WebPageTest le permite probar su sitio en múltiples dispositivos móviles:
WebPageTest le permite probar su sitio desde múltiples dispositivos móviles

Faro métrico

Es una herramienta muy fácil de usar para probar su sitio de WordPress en dispositivos móviles y en varias ubicaciones. ¡Esto es muy importante si desea averiguar cómo va su sitio móvil a los Estados Unidos y Australia!
Informes de rendimiento móvil según ubicaciones: Fuente: Lighthouse Metrics Todo lo que tiene que hacer es seleccionar una región y ejecutar el informe en consecuencia. Le recomendamos que pruebe nuestro RocketCDN. Un CDN mejora los tiempos de carga para las personas que están lejos de sus servidores web. (Razones comunes) 1. El móvil es diferente de la diferencia de escritorio # 1: los procesadores móviles de escritorio de teléfonos inteligentes vs procesador generalmente están diseñados primero para la eficiencia, y el rendimiento viene en el segundo. Los teléfonos móviles tienen una arquitectura de CPU más débil que las computadoras de escritorio. Significa que son menos potentes en términos de velocidad de procesamiento. Diferencia #2: Velocidad de red (latencia de red) El ancho de banda de una red se refiere a la rapidez con que la información se puede transferir de un punto a otro. Esta velocidad generalmente se mide en megabitas (Mbps). Una gran cantidad de Mbps significa que más tráfico puede circular sin interrupción. La latencia de la red es el tiempo requerido para que los datos se envíen a la red. Por lo general, las redes móviles tienen una latencia de red más importante que el escritorio. 2. No transmitir imágenes optimizadas para imágenes móviles a menudo son culpables por ralentizar su sitio de WordPress. Deben estar especialmente optimizados para dispositivos móviles. Para hacer que el contenido de legible en pantallas pequeñas, las imágenes deben reducirse en proporción.
3. No ha activado los sitios web de memoria móvil a menudo están llenos de datos para cargarse con imágenes y videos.¡Y a veces esto puede llevar algo de tiempo!La memorización de caché pondrá a disposición automáticamente estos elementos, por lo que no tiene que esperar cuando vuelva a ver la página en el futuro, ahorrando tiempo para conexiones más lentas o dispositivos móviles.4. Use diapositivas, pregardadores o animaciones Una inestabilidad de la apariencia o el diseño puede afectar negativamente a los usuarios de telefonía móvil, especialmente si no esperarlo.Demasiadas diapositivas y animaciones pueden ralentizar las páginas, afectar el SEO y las tasas de conversión.Google penalizará su sitio web con un puntaje CLS débil (cambio de diseño acumulativo) en caso de apariencia repentina.Este núcleo web vital afectará la puntuación final de la experiencia del usuario y afectará el tráfico de visibilidad y SEO.

5. Ha instalado demasiados complementos que instalar nuevos complementos pueden afectar la velocidad de su sitio móvil y muchos de ellos también pueden provocar seguridad y infracciones de bajo rendimiento. Los complementos pueden ralentizar su sitio haciendo solicitudes HTTP adicionales y agregando consultas de DB. Algunos complementos requieren estilo o scripts personalizados, lo que conduce a archivos JS adicionales en la página y los archivos CSS. 6. Otras razones por las cuales su móvil puede ser aspectos lentos son el elemento clave de cada sitio web: el navegador se da cuenta del tamaño y la ubicación de los elementos en la página. Sin ellos, no tendrá que organizar su contenido o crear usuarios atractivos. Si tiene mucha carga y elementos JS pesados, el navegador tardará en descubrir las ubicaciones y dimensiones. Otro culpable de bajo rendimiento es su tercera adicción al partido, como rastreadores, visitantes, servicios externos, como Feed de Instagram.
¿Reconoce su sitio móvil como uno de estos problemas? ¡Es bueno! Quédese con nosotros y vea cómo optimizar la velocidad de su sitio web cuando se accede desde un móvil. Cómo optimizar su sitio móvil para la velocidad Enumeré todas las técnicas para mejorar su puntaje móvil en Google PageSpeed ​​Insights. Investigamos el proceso de realizar la optimización del rendimiento con consejos súper útil para su sitio móvil de WordPress. 1. Use un tema receptivo de WordPress Un WordPress receptivo hará que su sitio se vea tan bien en un móvil o tableta, independientemente del tipo de dispositivo que se ve. ¿Cómo saber si el tema o el generador de páginas responden? Verifique su personalización o las opciones de tema, por ejemplo, Astra Theme proporciona una vista móvil al crear un encabezado personalizado:
Comience a construir su página y vea las opciones ofrecidas por el generador de páginas. Los creadores de la página Div o Elementor tienen este tipo de sección receptiva.

2. Active la memoria de memoria móvil en el caché móvil es una técnica común para reducir la carga de una aplicación y sus servidores. Para que estas aplicaciones y juegos funcionen sin problemas a altas velocidades, debe haber una forma de almacenamiento en caché, llamada “datos almacenados locales”, para que no necesiten solicitudes de descarga constantes. El objetivo es reducir el uso del ancho de banda, el aceree percibido por la red e incluso el consumo de batería. El complemento WP Rocket Cache le permite implementar un caché móvil de un solo clic (se recomienda si su sitio responde). Crea un archivo de caché dedicado para dispositivos móviles para cada documento que se almacena en caché. Aplicación de caché en un solo clic: WP Rocket echa un vistazo a nuestra lista, recopilando todo el mejor caché de WordPress. 3. Optimiza las imágenes para dispositivos móviles La imagen para dispositivos móviles es el proceso de creación y entrega de imágenes de alta calidad en un formato que aumentará la participación de los usuarios en su teléfono. Le recomendamos que siga las siguientes técnicas para garantizar que las imágenes estén bien optimizadas en el móvil:

Cambie las imágenes para guardar el ancho de banda: 640 x 320 píxeles suelen ser un buen estándar a seguir. También puede mantener la “Relación de apariencia 4: 3” como regla general para sus imágenes móviles.
Uso de boceto para cambiar el tamaño de sus imágenes manualmente – Fuente: Sketch

Comprima las imágenes para que los archivos sean más pequeños: encuentre el equilibrio correcto entre la calidad y el tamaño de la imagen. La calidad no se ve comprometida en nuestro ejemplo a continuación, pero el tamaño de mi archivo ha pasado de 517 KB a 70.3 KB! Fuente – ImageKit IO

Elija el formato de archivo correcto: WebP es el mejor formato de imagen que puede usar en su móvil (y escritorio). Proporciona compresión superior sin pérdidas y pérdidas para imágenes web. El siguiente gráfico muestra el tamaño del archivo después de la compresión.

Los archivos son más pequeños en WebP después de la compresión – Fuente: Smashing Magazine que podemos concluir:
WebP proporciona archivos un 25% más bajo que PNG y JPG, con la misma calidad

WebP se carga más rápido (debido al tamaño del archivo) que las imágenes PNG o JPG.
Use Imagify para optimizar sus imágenes móviles. Las características principales incluyen todas las mejores prácticas que acabamos de enumerar:

Cambiar el tamaño y comprimir imágenes móviles en el bloque o una por una, sin perder la calidad
Convierta automáticamente todos los archivos en webp

¿Qué tal tomar Imagify para una prueba de manejo? Es gratis para unas 200 imágenes al mes.
También tenemos una lista completa de los mejores complementos que puede usar para optimizar sus imágenes. Siéntase libre de comprobar. 4. Implemente la carga perezosa en sus imágenes y videos La última clave para la optimización de la imagen es perezrir sus imágenes y videos en su móvil. El script de carga perezosa retrasa la carga de una imagen que aún no lo ve.
Carga perezosa explicada – Fuente: WebDev Utilice el complemento gratuito Lazy Lazy by WP Rocket para implementar la carga perezosa en sus imágenes y videos. La función de carga perezosa ya está incluida: la función de carga perezosa en el cohete Media-WP también tenemos una lista completa de los mejores complementos que puede usar para implementar la carga perezosa. 5. Optimizar la entrega de imágenes con una entrega de imágenes de optimización de CDN es un paso clave para mejorar la velocidad de la página móvil. Es posible que necesite más servidores para aumentar la velocidad de los datos renderizados en cualquier parte del mundo. Es exactamente lo que hace un CDN.
Rocket CDN explicó – Fuente: WP Rocket Use RocketCDN para optimizar la entrega de sus imágenes en su móvil. 6. Mejore el tiempo para el primer byte La idea es mostrar algo lo antes posible a los visitantes móviles, para que no perciban su sitio como lento. Se trata de hacer una buena primera impresión.
TTFB explicó: KeyCDN debe tener un proveedor de alojamiento rápido para aceptar la compresión GZIP, si es posible, y un complemento de caché para reducir el tiempo de procesamiento del servidor. Un complemento como WP Rocket puede ayudarlo a limpiar su base de datos, activar la compresión GZIP, mantener sus páginas en caché y más. Use el cohete WP para reducir TTFB. 7. Elimine los recursos que bloquean la representación (JS y CSS) Cuando PSI le dice que elimine los recursos que bloquean la representación, significa que debe evitar cargar recursos innecesarios en la parte superior de su código de sitio si tiene muchos JS y CSS innecesarios Allí, los navegadores tardarán más en jugar la parte visible de su sitio móvil. Elimine los recursos que bloquean el juego PSI La solución es proporcionar a los críticos de JS y CSS en línea y posponer todos los JS y estilos no críticos. También puede eliminar el código no utilizado para ahorrar algo de tiempo de carga adicional. En otras palabras, primero debe priorizar lo que cargará el navegador. WP Rocket puede ayudarlo a cargar JS pospuesto y eliminar CSS sin usar:
Optimización JS – WP Rocket

Optimización CSS: WP Rocket también puede retrasar la ejecución de JS, que a menudo es uno de los principales culpables de un sitio móvil lento:

Si no desea utilizar un complemento de WordPress, puede usar los atributos Difer y Async y puede aplicar las etiquetas usted mismo. 8. Reduzca el peso de la página Una página más ligera se cargará más rápido en su móvil. Una página pesada generalmente será causada por videos, imágenes, scripts, estilos y fuentes. La mejor manera de reducir el peso de la página es optimizar sus imágenes, implementar la compresión de texto (GZIP) y combinar/minimizar el código y comprimir archivos CSS y JS en unos pocos clics. 9. Deshágase de lo que pueda causar teléfonos móviles (cuando sea posible) Evite usar diapositivas, animaciones, precargas o ventanas emergentes para sus visitantes móviles. Si desea cargar todos estos elementos, alcanzará un tamaño de página más grande, tiempo de carga y una mayor cantidad de solicitudes HTTP. Manténgalo simple y opte por imágenes estáticas, tratando de almacenar los datos localmente. Incluso la experiencia de la página de Google se basa en la estabilidad visual, la compatibilidad con dispositivos móviles e intersticiales intrusivos. Si desea que su clasificación sea buena, no use elementos pesados ​​innecesarios, como modelos, propiedades y JS en el móvil.

Experiencia en la página de Google 10. Entregue el caché para toda la página a través del CDN, además de almacenar en caché, puede usar un servicio de red de entrega de contenido, así como el servicio CloudFlala APO. Como expliqué anteriormente, un CDN significa que un visitante nunca está muy lejos de sus servidores, sin importar dónde se encuentren en el mundo. Imagine que su página tarda 1 segundo en cargarse en París, 2 segundos en Nueva York y 4 segundos en Sydney. Si está utilizando un CDN, la página debe cargarse por igual, sin importar dónde esté el usuario móvil. La desconexión de la conexión es menor con un CDN – Fuente: GTMTRIX 11. Administre y muestre los anuncios correctamente intente nunca mostrar anuncios por encima del pliegue del pliegue y cargarlos perezosamente hasta que lleguen a la ventana de vista. En otras palabras, significa la difusión de anuncios un poco más tarde y solo cuando sea necesario. También debe crear comerciales adaptables para mostrarlos en el móvil con un CTA receptivo, para que los usuarios tengan un deseo de interacción. Use un complemento como Advanced ADS Pro para controlar cuándo y dónde mostrar sus anuncios móviles. ¡Es hora de aplicar todas las técnicas!

Cómo aumentar la velocidad móvil en WordPress con WP Rocket para ver cómo WP Rocket nos permitió mejorar nuestra puntuación móvil PSI. Antes de comenzar, le recomendamos leer nuestra guía detallada sobre cómo probar el rendimiento del sitio de WordPress. Herramientas de rendimiento y KPI móviles que medimos:

Google PageSpeed ​​Insights (valores web básicos, índice de velocidad, tiempo total de bloqueo, primer contenido y tiempo de interacción)

WebPageTest (tiempo completamente cargado y número de solicitudes HTTP) Lugar de prueba: un sitio de prueba avanzado construido con Astra con muchas imágenes, un video de YouTube y un feed de Instagram.

Extraer de mi sitio de prueba de video de YouTube y mi cuenta de Instagram

Los escenarios:

Escenario #1-my Sitio de prueba sin cohete WP

Escenario #2-my Sitio de prueba con cohete WP

Escenario #3 my Sitio de prueba con WP Rocket + Optimización de imágenes móviles (bonificación)

Escenario #1-my Sitio de prueba sin cohete WP primero, veamos cómo se maneja mi sitio sin realizar ninguna optimización. Las primeras conclusiones no son tan grandes: mis valores centrales vitales de la web son rojos y naranjas, y mi puntaje de rendimiento general es 35/100.

Sitio móvil no optimizado – Fuente: PSI

Además, tengo un total de 12 problemas reportados por Lighthouse. Todos están relacionados con la optimización móvil:
Formación y tamaño incorrecto para imágenes
Demasiado código no utilizado
Necesidad urgente de un complemento de caché
Activación de la compresión de GZIP.

Por último, pero no menos importante, algunos problemas con los recursos de terceros (YouTube) que necesitan ser perezosos.
Problemas reportados por PSI: sin WP Rocket, esto nos lleva al segundo escenario. Escenario #2-my Sitio de prueba con WP Rocket Mi sitio va mucho mejor con WP Rocket. ¡Mi puntaje pasó de 35/100 a 87/100 en móvil! Mis vitales de web principales están en verde, excepto mis CLS, que necesita un poco más de trabajo. /td> 35/100 87/100 fcp 2.5 s 1 S si 10 s 1.4 s lcp 11 s 1.0 s tti 10.3 s 1.4 s tbt 410 ms 60 ms cls

0.361 0.544 a tiempo completo cargado 7.822s 1.204 S solicita http 62 8

En términos de problemas previamente reportados por Google, WP Rocket los resolvió la mayoría de ellos . Ahora se remedian todos los problemas de JavaScript, CSS, compresión GZIP, carga perezosa y problemas de caché. Como puede ver a continuación, los únicos problemas restantes son aquellos que están inclinados hacia la optimización de la imagen:
Los principales problemas han desaparecido con la fuente de cohetes WP: Escenario PSI #3-Optimización de imágenes móviles (bonificación) Los únicos problemas restantes en mi sitio están relacionados con la imagen. Utilicé el complemento Imagify para optimizar mis imágenes móviles. Hice dos cosas principales:
Imágenes de tamaño correcto para dispositivos móviles (cambiar el tamaño y comprimirlas)
PageSpeed ​​Insights me dijo que tenía un problema con esta imagen:
Fui a la biblioteca de WordPress y la optimicé con Imagify. Mi archivo ha pasado de 306 kb a 189 kb: convirtí imágenes en webp (nueve generaciones)

Uso de Imagify para convertir mis imágenes en fuente webp: imagory todos los problemas relacionados con las imágenes informadas previamente por PSI han desaparecido debido a Imagify:
Mi última nota de PSI es 95/100 y todos mis KPI son verdes después de usar WP Rocket e Imagify.
¿Quieres pasar de 35/100 a 95/100 y en el móvil? Aquí están mi cuadro de herramientas: utilicé WP Rocket para mantener mi página en caché, reducir mi código, posponer JS, eliminar CSS sin usar y aplicar el script de carga perezosa en imágenes y videos. Utilicé el complemento Imagify para comprimir mis imágenes y convertirlas en webp redimenté mis imágenes para uso móvil (Informe 3: 4) Eliminé cualquier diapositiva deslizante debido a las opciones de personalización para mejorar la velocidad de un sitio móvil requiere priorización. Comience por descubrir cuáles son las tareas más importantes y comunes para sus clientes móviles. Al construir los escenarios, puede ver qué contenido y páginas son esenciales para la optimización primero. Puede seguir nuestras técnicas para priorizar las optimizaciones del rendimiento web que necesita para iniciar primero. En cualquier caso, WP Rocket puede ayudarlo a implementar el 80% de estas buenas prácticas en unos pocos clics. Intente y vea cómo cambia su puntaje móvil en Google PageSpeed ​​Insight. (Si no nota mejoras, tenemos una garantía de reembolso de dinero de 14 días).