Bookmarklets WPO

Publicado en Optimización web / WPO hace 10 meses y 1 semana. Leído 613 veces.

imagen destacada

¿ Qué es un bookmarklet ?

Un bookmarklet, según la wikipedia, es un marcador( o favorito ) del navegador que, en lugar de apuntar a una dirección URL, hace referencia a una pequeña porción de código JavaScript para ejecutar ciertas tareas automáticamente, como por ejemplo:

  • Cambiar el diseño de la página (el tamaño de letra o los colores, quitar el fondo, etc.).
  • Mostrar información de enlaces, imágenes, formularios, etc.
  • Abrir una consulta directamente en un motor de búsqueda acerca del texto que tengamos seleccionado.

Es decir, un bookmarklet es un marcador( o favorito ) que al clicarlo hará una acción:

  • sobre la página web actual
  • o utilizando la información y el código de la página actual.

Uso de bookmarklets para la optimización web

Ya seas un profesional WPO, un desarrollador web o un experto SEO. En tu día a día realizarás análisis de rendimiento de sitios webs continuamente. El problema con ello es que siempre es la misma tarea:

  1. Abres Gtmetrix, Google PageSpeed Insight o Pingdom Tools, por decir algunas páginas.
  2. Introduces la url del sitio que quieres escanear en uno de los sitios de comprobación de rendimiento web mencionado antes, u otros.
  3. Le das a "continuar"
  4. Esperas
  5. Analizas detalladamente los resultados para obtener la mejor forma de aumentar la velocidad de la web.
  6. Vuelves al punto 1 y compruebas la velocidad de la página con otro servicio o con el mismo( tras algunos cambios realizados en la web ).

Esto es poco productivo. Nos preocupamos por mejorar la velocidad de los sitios webs pero no por hacer más rápido nuestro trabajo. Este proceso se puede, y se debería, acelerar usando bookmarklets. Usando bookmarklets lo haríamos así:

  1. Abres la página a analizar introduciendo la url en el navegador.
  2. Pulsas en los bookmarklets de los servicios que quieras usar para analizar la página.
  3. Mientras se carga la acción de un bookmarklet, analizas la acción de otro.

Puedes ver una ejemplificación de lo que digo en el siguiente vídeo de 57 segundos:

Listas de bookmarklets

Por internet hay miles de bookmarklets disponibles. Sin embargo, yo te enlazaré a sitios para conseguir los mejores bookmarklets para WPO. Si tú tienes alguno que no esté en esta lista, y crees que debería de estarlo, no dudes de compartírnoslo en un comentario.

  • Pingdom’s Real User Monitoring bookmarklet: Desde esta página podréis conseguir el bookmarklet que es la ventana emergente amarilla que aparece en el vídeo. Esta ventana te muestra la información más relevante que podrías encontrar en el famoso test de Pingdom Tool.
  • Bookmarklet for Page Speed Insights: Este es otro de los que salen en el vídeo y permite hacer un test de Google Page Speed Insights a la página actual.
  • Gtmetrix bookmarklet: Este es el bookmarklet que faltaba de los tres que aparecen en el vídeo y te permitirá medir el rendimiento de la página web actual a través de Gtmetrix.
  • YSlow bookmarklet: Lo mismo que los anteriores pero el test lo realiza YSlow.
  • Dom Master: Te da información sobre el rendimiento del árbol DOM de tu página( además de otros elementos ) y te muestra tips de optimización en base a los resultados obstenidos.
  • Perfmap: Este bookmarklet le añadirá una capa extra a las imágenes de la página web actual. Esta capa nos proporcionará información del tiempo de carga de las imágenes.
  • Performance-Bookmarklet: Este bookmarklet, al contrario que la mayoría de los vistos, hace un análisis de rendimiento y velocidad basado en las funcionalidades que traen de serie los propios navegadores. Por tanto es rápido, se puede usar en local y está muy adaptado a tus condiciones( pais, tipo de conexión, ... )

Para instalar los bookmarklets, primero tenéis que acceder a las páginas anteriores, dónde encontraréis los enlaces bookmarklets. Una vez encontrado, sólo tenéis que arrastrarlo y soltarlo( drag & drop ) hacia la barra de marcadores de vuestro navegador.

Otra opción, si usáis Mozilla Firefox, es instalar la extensión FlagFox. Esta extensión te añadirá una bandera en la barra de navegación de firefox. Esta bandera corresponderá al pais dónde está alojada la web activa. Al usar el segundo botón, y abrir el menú contextual, sobre la bandera, te viene una lista de bookmarklets a usar en la página actual( también es posible añadir algunos popios o crear nuevos de una manera fácil ). También puedes especificar que se lance determinado bookmarklet al hacer clic sobre la bandera, lo mismo para doble clic e, incluso, triple clic. Es una maravilla. La imagen asociada al post es de mi FlagFox.

Espero que te sea de utilidad todo lo dicho. Cualquier aportación o problema, no dudéis de comentar.

0 comentarios

Deja un comentario

Puedes usar Markdown para formatear tu comentario.

Este sitio utiliza cookies propias y de terceros para mejorar tu experiencia con el sitio web. Al continuar con la navegación consideramos que acepta su uso.