Curso Blogger - Únete Gratis

Mejora el desempeño en móviles de tu Blogger gracias a Lighthouse

Mejora el desempeño en móviles de tu Blogger gracias a Lighthouse



Usa Lighthouse para mejorar tu blog Si has visitado mi página   'Acerca de...',   y espero que sí, sabrás que he declarado la optimización como uno de los pilares de ANMATT Studio.

Para poder optimizar, hay que conocer como se está desempeñando nuestro sitio. A principios de año compartí cómo auditar una web de manera general gracias a Pingdom Tools, una herramienta muy completa y de la que escribí este artículo aquí en TutorialBlogger.org


Hoy, hablaré de la  auditoría que haremos gracias a Lighthouse, creada por Google y que mediante su extensión para Chrome podemos ejecutar rápidamente y así mejorar cómo se visualiza nuestro sitio en móviles.

Usa Lighthouse para mejorar tu blog




¿Y qué es Lighthouse?

Para empezar, debo explicar que es una herramienta enfocada a las web apps, o dicho más claro, una página que se puede visualizar desde cualquier dispositivo sin importar el sistema operativo. Y por supuesto, un sitio alojado en Blogger con una plantilla responsive o en su defecto con versión móvil cabe en esta descripción.

Si bien tiene relación con PagespeedInsights, y de hecho ésta hace uso de la tecnología de Lighthouse en su informe, personalmente me parecen más prácticas y aplicables las recomendaciones que nos brinda Lighthouse.

Estas recomendaciones están categorizadas en cinco aspectos:
  • Rendimiento - Performance
  • Aplicación Web Progresiva - PWA
  • Accesibilidad - Accessibility
  • Mejores prácticas - Best practices
  • SEO

Según la evaluación y recomendaciones que te brinde la herramienta, podrás ir mejorando el desempeño general de tu sitio cuando es visualizado desde móviles y te comparto los cambios más comunes que suelen hacerse.


Rendimiento

El rendimiento determina el tiempo que el lector demora en visualizar el sitio. Diría que es una categoría crítica si no deseamos perder lectores en la espera de ver lo que ofrecemos.

Algunas técnicas que siempre sugiero son:
  • Reducir el tamaño de la plantilla: los archivos como HTML, JavaScript y CSS se pueden comprimir fácilmente usando el proceso de Minificación.  Las imágenes consumen la mayor parte del tamaño de la página y siempre se deben tener imágenes comprimidas y con el tamaño del área que necesita cubrir.
  • Reducir el número de solicitudes HTTP: Combinar múltiples archivos de Javascript o CSS en uno o insertar directamente en la plantilla ayuda a reducir el tiempo de carga. 
  • Reducir la actividad de carga de la página inicial: Evita siempre que el contenido de la página sea bloqueado en espera de ejecutar recursos. Por ejemplo, las animaciones que ocultan mediante Javascript el contenido para 'salir' al ir haciendo scroll pueden lucir llamativas, pero en caso de que dicho script no se ejecute o se ralentice, el contenido no sería mostrado, afectando la carga y sobre todo la experiencia del usuario.



Aplicación Web Progresiva - PWA

PWA, del inglés Progressive Web App, implica que si el sitio cumple con ciertas características actuará como una app nativa para móviles, haciendo que el sitio sea más ligero y funcione offline (al descargar todos los recursos necesarios en segundo plano y mostrándolos sin realizar solicitudes HTTP).

Una PWA tiene básicamente tres requisitos para su implementación:
  1. Conexión segura HTTPS, que Blogger nos ofrece a dos clics y sin costo adicional.
  2. Un manifest.json válido, que si bien no podemos instalar directamente como indican desde CodeLabs, podemos hacer uso de Github + Staticaly para tenerle.
  3. Un service worker, y aquí ya no es posible continuar, ya que por fuerza debe ser instalado en la raíz del dominio, algo que en Blogger no podemos manipular.

Informe de sitio en Blogger
Informe de la anterior entrada en ANMATT Studio
Como ves, en el informe que solicité de la entrada anterior a esta, se puede observar que a pesar de no poder instalar un Service Worker en Blogger, aún se puede conseguir un buen puntaje en PWA.


Informe de sitio PWA
Informe de Sitio en Github Page - PWA
Mientras que para el sitio que recientemente desarrollé para uso de mi pequeño hijo (una simple landing animada más juego tic tac toe para dar uso a su propio dominio) vemos que consigue buen desempeño y PWA, a pesar de no dar énfasis a la Accesibilidad ni SEO.


Accesibilidad

Es la facilidad de uso que brindamos a los usuarios que, por ejemplo, no tienen una visión clara. 
Pero además de asegurarnos de usar suficiente contraste para facilitar la legibilidad, es importante tener bien codificados los diferentes elementos del sitio: formularios con sus label, imágenes con sus alt...




Mejores prácticas

Ofrecer siempre contenido seguro es primordial. Además del certificado HTTPS debemos asegurarnos de que cualquier solicitud de datos sea segura y cifrada, y en caso de usar enlaces que abran en otra pestaña mediante el target='_blank' siempre agregar el siguiente atributo:
rel='noopener noreferrer'


SEO

Tener bien estructurado el blog y sus títulos, implementar un favicon distintivo, agregar las metatags sociales adecuadas, además de ofrecer un diseño responsive son la clave en este punto.


Lighthouse no es la única herramienta para analizar nuestro sitio, pero es una adición muy valiosa al ser más detallada en su informe y porque brinda una respuesta inmediata basada en el uso en el mundo real. Realiza la prueba y recuerda que estoy a un correo de distancia para asistirte si lo requieres.


Mamá, coder y creadora de ANMATT Studio

Usuaria de Blogger.com desde 2012, soy una apasionada del coding para esta y otras plataformas.
Colaboro con Vicente en la redacción de artículos para hacer más eficientes nuestros blogspot.

Más artículos por la Autora