Validar un sitio Web en usabilidad móvil y Pagespeed

Llevo un mes luchando. GWT mostraba que la totalidad de las páginas de mi sitio tenían problemas de usabilidad, y al mismo tiempo la herramienta de Usabilidad Móvil me decía "¡Enhorabuena!" porque mi sitio estaba perfectamente bien.

Esto me hizo dudar de la herramienta de Usabilidad Móvil de Google. Tal vez la herramienta no mentía, pero había un factor extra que no permitía que mis páginas salieran de la lista con problemas móviles ("elementos táctiles demasiado próximos entre sí" y "el contenido no se adapta a la ventana gráfica").

Entonces probé Pagespeed Insights. Utilizando la misma tecnología que la herramienta de UM, entrega datos adicionales acerca de la velocidad del sitio en móvil y desktop, poniendo énfasis en la vista móvil. La imagen a continuación muestra el estado de mi sitio, después que hice todos los cambios necesarios. Antes de este registro, marcaba 76% de logro en velocidad móvil (color salmón).

Google está pensando en móvil, eso está claro. La tendencia de uso de aparatos móviles extrapolada a un par de años en el futuro, muestra que los equipos desktop van en retroceso. Entonces toda la tecnología y los esfuerzos de Google están enfocados en una Web móvil y georeferenciada.

Y hoy al fin, una semana después de hacer los últimos cambios en el sitio, obtuve resultados. La estadística de páginas que no validan bajó a menos de la mitad. Y dado que GWT demora al menos una semana en dar resultados fidedignos de usabilidad móvil, podría esperar que los problemas se reduzcan al mínimo para la próxima semana.

¿Y cómo lo logré?

Pagespeed da buenos consejos, y trata de dar ejemplos y tácticas de manera genérica. En mi caso, mi servidor no comprimía en gzip los archivos css ni js. Así que hice trampa (luego de investigar y hacer muchos experimentos) y pasé esos archivos a php, les di sus cabeceras correspondientes, les designé caché y les otorgué compresión.

Esta es la cabecera y footer de mi archivo style.php

<?php
if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
header("Content-type: text/css");
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: must-revalidate");
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
acá va todo el CSS
<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Pueden hacer lo mismo con los JS y con cualquier archivo de texto que esté dando problemas de compresión y caché. Solo asegúrense que el Content-type sea el correcto. También lo hice con algunas imágenes externas que me daban problemas, pero para eso necesitas hacer un cargador de imágenes php. El resultado al final es el mismo.

También seguí las recomendaciones de Pagespeed, con el siguiente aprendizaje: no marquen el llamado a jQuery con el atributo async, porque la mitad de las veces no carga la librería.

1. No cargues la librería de jQuery en la cabecera. Evita que los plugins y que tu CMS llamen a jQuery en la cabecera. En cambio, asegúrate que se cargue en el Footer. NO USES UN PLUGIN que haga esto por ti.
2. Mueve las librerías de CSS de tu sitio al footer, antes de la carga de jQuery. Si esto causa problemas de carga, como por ejemplo que se ve el sitio descuadrado y luego se cuadra, entonces mueve algunas líneas del CSS a la cabecera usando el llamado de estilos embebidos. Así puedes colocar arriba los estilos básicos de estructura, y en el archivo de estilos pones el resto.
3. Mueve todas las librerías JS al footer, al menos las que no sean indispensables para el funcionamiento del sitio.

Quedaría así:

<!-- acá llamas a styles.php -->

<!-- acá llamas a jquery.php -->

<!-- acá llamas a otras librerías JS y CSS necesarias para el uso del sitio, como efectos visuales y validación de formularios, etc. -->

</body>

</html>

<!-- acá llamas a la librería CSS que carga las fuentes Web -->

Otras soluciones

Algunos contenidos embebidos, como los iframes de Youtube, son posibles de ajustar con CSS a un ambiente móvil. Pero cargan imágenes y links que no pasan el test de usabilidad móvil y causan que la página cargue más lento. Mi solución al problema, es que no se cargue el iframe de Youtube, sino que en su lugar se cargue un botón, que es modificado con jQuery para transformarse en un iframe de Youtube cuando se le hace clic.

Hice algo similar con Facebook, pero en su lugar, en vez de implementar el plugin de comentarios de Facebook directo en la página, puse un botón que abre un modal que carga un iframe, y este iframe hace la carga de la ventana de comentarios de Facebook. 

Es un poco rebuscado y en el caso de Facebook hace que los visitantes no estén muy proclives a comentar. Pero en mi sitio al menos nunca han sido muy comentadores que digamos.