PhantomJS (GitHub) es una implementación del motor WebKit scriptable con JavaScript que nos permite ejecutar nuestros propios scripts directamente sobre WebKit. Gracias a ello, PhantomJS es capaz de entender el DOM, CSS, JavaScript, Canvas y SVG con el beneficio de que no es un navegador web. Al ejecutarse mediante línea de comandos en Linux, Windows y Mac OS X, podremos ejecutar tareas como realizar capturas de pantalla y exportarlas a imagen, realizar tests unitarios automáticamente o analizar el rendimiento de nuestro sitio web cómodamente.
Análisis de rendimiento
En este caso vamos a hablar de la última de las opciones: analizar el rendimiento de nuestro sitio web.
Empezaremos instalando PhantomJS, en el caso de Windows podemos utilizar la versión binaria que se distribuye desde el sitio web oficial, pero si utilizáis Linux seguramente vuestra distribución incluya PhantomJS en su gestor de paquetes (apt-get, yum, emerge, etc). También se proporcionan unos scripts de ejemplo en la carpeta examples.
LoadSpeed
Un script de ejemplo es el llamado loadspeed.js, que como bien indica su nombre, nos devolverá únicamente el tiempo de carga de una página:
Netsniff
El script netsniff.js es capaz de analizar una página web y exportar los resultados en formato HAR:
El formato HAR es un fichero JSON con toda la información necesaria para generar la "network waterfall". El fichero HAR también se puede generar desde Google Chrome a través de las herramientas para desarrolladores. Más información en la especificación HAR 1.2.
Después podemos utilizar Har Viewer o ChromeHAR para ver nuestros resultados. Arrastramos el fichero HAR y los datos se importarán, dándonos resultados más fáciles de leer por los humanos. Esto incluye datos como las cabeceras y el tamaño de cada fichero que utiliza la página web, el tiempo total de carga y gráficos sobre el impacto de los recursos en el tiempo de carga.
Yslow
Hoy por hoy Yslow para PhantomJS está prácticamente abandonado y no funciona, pero con un simple cambio podemos volver a tenerlo funcionando.
Yslow no sólo nos ofrecerá datos si no también una puntuación y consejos para optimizar nuestra página web. El script de Yslow para PhantomJS se puede descargar aquí. Mediante el siguiente comando, obtendremos un resumen de los datos:
Podemos ir más allá de un simple test y obtener información de porqué obtenemos una puntuación de 81/100, mediante el siguiente comando:
Si el test dio "not ok", se ofrece un mensaje y los culpables. Message indica el problema en cuestión y offenders se refiere a los recursos que son afectados por el mensaje. En nuestro caso los errores se encuentran en los siguientes mensajes:
ycdn: Use a Content Delivery Network (CDN) yexpires: Add Expires headers
En este caso no podemos hacer nada, ya que nuestra lista de errores son culpa de Google Analytics, los botones y cajas sociales, etc. Pero por supuesto esto es un valioso recurso que os invito a probar para optimizar un sitio web, algo que nosotros ya hicimos de la mejor forma que pudimos (¡queremos un 100/100!).
Resumen
Hay otros recursos compatibles con PhantomJS para monitorizar y optimizar la velocidad de nuestro sitio web, por ejemplo: sitespeed.io (GitHub) o basset. Esto sólo ha sido una breve introducción de las posibilidades que ofrece PhantomJS en este tipo de acciones y esperamos que os haya gustado.