Diseño diferente en movil con tema responsive  

Hola,

Personalmente no te recomiendo utilizar esta plantilla para tu web, porque siempre tendrás un rendimiento malo en dispositivos móviles. No me refiero a la adaptabilidad al dispositivo, sino a los tiempos de carga, debido al gran número de imágenes que se están cargando.

Muchas de esas imágenes de la home son fondos que adaptan su ancho al disponible en la ventana del navegador, sea un equipo de escritorio o un móvil. De esta forma, en los móviles se están usando imágenes muy grandes que se redimensionan a tamaños muy pequeños, lo que no es nada recomendable.

Te pongo un ejemplo, uno de los fondos que se carga es el sigiuente:

Esta imagen tiene un tamaño de 2025x1350 píxeles. Para un dispositivo móvil esto sería un tamaño muy grande, lo que hace aumentar los tiempos de carga. Y solo te he puesto un ejemplo, pero verás que tienes muchas imágenes de fondo en la home.

Por otro lado, analizando la carga de la web con el inspector de elementos veo que se hacen 301 peticiones de elementos (muchos) y que el peso de la página es de más de 8,5Mb. En una conexión ADSL o por cable normal esto tampoco supone un gran problema, pero desde un dispositivo móvil sí, es especial si se está cargando la web con 3G o un sistema más lento.

El hecho de que ocultemos en móviles elementos de la web vía CSS colocando un "display:none;" no servirá para aumentar la velocidad de carga, ya que con este CSS simplemente ocultamos el elemento, pero sigue cargando igual.

Por todo ello, tendrías que plantearte un cambio de tema o, si quieres continuar con el actual, pensar en rehacer la página de de inicio, para que no tenga tanto fondo.

Dado que cada vez hay más conexiones con dispositivo móviles y tablets, hay que pensar que la web tiene que cargar bien en ellos, y en ocasiones hay que sacrificar algo el diseño en busca de una navegación más cómoda con estos dispositivos.

Muchas gracias por la observación Pablo, es una plantilla que me ha costado mucho trabajo entender cómo trabajaba, debido a que era relativamente nuevo en el mundo de WordPress, si quisiera quedarme con esta plantilla ya que le he invertido mucho tiempo para llegar a terminarla para web, pero si, descuide los dispositivos móviles... Y sería una pena que la cambiara así nada más. Por esto, pregunto, habrá algún plugin que pueda hacer / ocupar una plantilla diferente para móvil, teniendo para web la que está ahorita? Porque con lo que me dices sería a fuerza cambiarla 🙁

Me siento triste 🙁

Ah! Y quisiera agregar algo más Pablo... Cuando hice mi selección de tema vi que la que uso es responsive 100%

https://accesspressthemes.com/wordpress-themes/accesspress-parallax/?wpam_id=25

Entonces tengo que reclamarles a ellos? o yo soy el que está haciendo el diseño de la página mal?

Hola,

De hecho el tema es 100% responsive pero no parece estar correctamente optimizada en tu caso. Veo que la web demo carga mas rápido que el tuyo, es muy probable por el peso de las imágenes que te comento Pablo.

Te recomendaría que busques disminuir la cantidad de bloques y así mismo reducir el tamaño o peso de los ficheros, existen herramientas en linea por ejemplo: https://compressor.io/compress

Entonces que debería de hacer en este caso?

Uso un plug que se llama WP Smush, pero combinaré los dos para tener mejores resultados.

Hola,

Nosotros disponemos de un optimizador de imágenes, puedes revisar el siguiente enlace:
https://www.webempresa.com/optimizacion-de-imagenes-gratuito-con-imgoptimizer.html

También existen plugins como el que comentas.
- Optimiza desde la nube las imágenes que publicas en WordPress - https://www.webempresa.com/blog/item/1408-optimiza-desde-la-nube-las-imagenes-que-publicas-en-wordpress.html
- Optimiza la calidad, peso y dimensión de tus imágenes en WordPress -

Perfecto, voy a hacer uso de esas herramientas y comento los resultados obtenidos. Espero y se resuelva el problema con ello...

Tomé de ejemplo la imagen que me comentaba Pablo, pero no creo que mejore mucho mi situación ya que... no baja mucho

Y según WP Smush ya la tenía optimizada

:silly: :silly: :silly: :silly: :silly:

Ya no entiendo, se supone que comprimí mis imágenes con WP Smush y antes de volver a subirlas las pase por https://compressor.io/ pero cuando veo mis resultados en Google PageSpeed, me dice que debo de optimizar mis imágenes... ¿Cómo? si ya están optimizadas... :unsure: :unsure:

Hola,

Es probable que necesites un programa mas avanzado por ejemplo si revisas el siguiente enlace: en el minuto 5:42 se explica mediante un programa de adobe como realizar la optimización de una imagen.

De igual forma como te comentaba anteriormente lo recomendable es que elimines algunos bloques ya que la pagina de inicio esta sobre-saturado.

Gracias Johnny.

Pero si hago más pequeña la imagen, ya no cubriría toda el área de la sección 🙁

Hola David,

El truco no está en hacerlas más pequeñas sino en reducirles el peso para agilizar la carga.

Para el blog de Webempresa por ejemplo utilizo https://tinypng.com/ y obtengo imágenes de peso un 60 u 80% reducido pero conservando el tamaño y la relación aspecto/calidad.

Saludos

Gracias Luis, estuve ocupando la herramienta que me indicas, parece ser que si las meto dos o tres veces pueden llegar a ser todavía de menos peso, solo que eso es lo que comento en el post, ya que eso había hecho con la otra herramienta https://compressor.io/ y al final las imágenes fueron el mismo problema al hacer el test con Google PageSpeed.

Entonces estoy resubiendo todas las imágenes pero ahora con el compresor tinypng.com , terminando comentaré el resultado de Google PageSpeed, para posteriormente ver que otras cosas se pueden hacer para que funcione mucho mejor el móvil y no tener que cambiar de plantilla como me decía Pablo.

También cabe mencionar que una vez que subo la imagen a la biblioteca de WP, las vuelvo a comprimir de nuevo con WP Smush.

Gracias

Hola,

El problema que te indica PageSpeed con las imágenes no necesariamente se tiene que arreglar con la optmización de la imagen. Ten en cuenta que si pasas un buen optimizador de imágenes, que uses otros para la misma imagen tampoco reducirán el tamaño de la imagen de forma significativa.

Cuando Google te indica que una imagen no está optimizada, puede ser por 2 razones: la imagen no está optimizada (tiene demasiada calidad, contiene elementos de descripción que ocupan espacio, etc.) o la imagen tiene un tamaño real mayor que el tamaño con el que se muestra.

Lo primero es lo que ya estás corrigiendo con las herramientas de optimización como compressor.io. Lo segundo es seguramente lo que te está pasando. Te pongo el ejemplo de la imagen que te había comentado en una respuesta anterior:

Esta imagen tiene un tamaño de 2025x1335 píxeles. Si se muestra en un teléfono móvil con una resolución mucho menor se estará cargando una imagen mucho más grande de lo que necesita este dispostivo.

En todo caso, el ahorro de espacio que PageSpeed te indica que se puede conseguir no es demasiado alto: el 18%.

Tendrías que verificar que tienes estas imágenes que él te indica realmente optimizadas, aunque el problema puede ser el que te comentaba.

Una herramienta online que a mi me da muy buenos resultados es esta:

https://kraken.io/web-interface

Perfecto, muchas gracias por las recomendaciones de todos. Ahora, viendo este problema... Solo me puedo imaginar resolviendolo de la siguiente manera.

¿Cómo se puede hacer una página personalizada tipo HOME? Así podría reducir las imágenes que contiene mi home actual y la estaría distribuyendo para cada página correspondiente, en vez de saturar la página inicial.

¿Se podría arreglar con dicha opción?