Optimizar WordPress para móviles

Home   /   Optimizar WordPress para móviles

Optimizar WordPress 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.
    Opciones plugin AMP

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.

Inspector Web Chrome

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.

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Optimizando WP

Optimizando WP es una guía para optimizar y acelerar la velocidad de carga de tu página web WordPress en constante construcción.

Autor: @betoayesa
Última actualización: 13/04/2020

Si necesitas ayuda contacta con PhpNinja

Cualquier duda, escribe en los comentarios, trataremos de responder rapidamente.