Optimizar WordPress para móviles

Puntos a optimizar

1 Optimizar WordPress para móviles
2 Automático
3 Semi Automático
4 Manual
5 ¿Cómo hacer que el móvil vaya mas rápido?
6 Test de optimización para móviles

Tenemos 3 formas de optimizar nuestro WordPress para móviles.

Automático

Instala el plugin AMP (Accelerated Mobile Pages). Se creará una versión diferente de tu página web para móviles. No me acaba de gustar mucho porqué cedes todo el control, pero por lo que parece en páginas webs de contenido simple, funciona bien. Selecciona la opción que rompa menos tu diseño y tu página web en general.

Semi Automático

Instala plugin WP touch: Crea una versión paralela exclusivamente para tus visitantes que usan móvil.

Manual

Lo más adecuado, para no perder control sobre lo que se muestra o no en la versión para móviles, es esconder vía CSS los elementos más pesados.

@media only screen and (max-width: 720px) { // Pantallas con un ancho máximo de 720px (las reglas de dentro afectarán sólo a estos dispositivos)
  .mobile-hidden{
      display: none !important;
  }
}

Ahora podemos añadir esta clase «mobile-hidden» en cualquier elemento que tengamos en nuestra página, para que de esta forma no se cargue en móviles.

Si no podemos acceder y modificar las clases de los elementos. Lo aplicaremos uno a uno, usando el inspector del navegador.

Es necesario usar la id o clase de tus elementos. Usa el inspector para seleccionar el elemento, copia su clase o id (mejor que sea única) y pégalo en el css cómo en el siguiente ejemplo. Cada elemento de HTML puede tener atributo class= o atributo id=. Cuando es id= en tu css debe quedar como #LaIdDelElemento, en este caso por ejemplo #content, si es clase, va precedida de un punto. En este caso podría ser .header-area. Esto varía con cada página web. No siempre son las mismas ids ni clases, tienes que ver que elementos quieres esconder, y luego copiar su id o clase directamente en la hoja de css.

@media only screen and (max-width: 720px) { // Pantallas con un ancho máximo de 720px (las reglas de dentro afectarán sólo a estos dispositivos) 
   #homeslider{ 
     display: none !important; 
   } 
   video {
     display: none !important; 
   }
   img { // este no te lo recomiendo pero lo pongo cómo referencia. Esconderás todas las imágenes en la versión móvil. 
      display: none !important; 
   }
}

En WordPress puedes modificar el archivo CSS desde Apariencia > editor de Temas, y buscando style.css en el menú lateral derecho.

¿Cómo hacer que el móvil vaya mas rápido?

Para hacer que el móvil cargue más rápido y tu página web esté optimizada para móviles, no uses contenido que carga lento en móviles : ) Olvídate de Videos, chats, juegos, Sliders, imágenes de 1 Mb … Muy importante mantener imágenes optimizadas y de poco peso, y seguir los consejos manuales anteriores para esconder todo este tipo de contenidos.

Test de optimización para móviles

Puedes usar cualquier de los servicios externos de análisis para testear tu sitio en móviles, aunque la mejor prueba la realizarás desde tu móvil sin usar WIFI, usa directamente tu conexión 3G, 4G o 5G.