Construye un analizador WPO casero usando WordPress

Publicado en Snippets · 28 September 2019.
Un analizador WPO casero

El movimiento de optimización web empezó hace más de 10 años, sin embargo, no fue hasta que Google anunció que tendría en cuenta la velocidad de carga en el posicionamiento de una web que la gente no lo empezó a considerar de verdad.

Algo necesario para saber si tu sitio web es óptimo o no( y para saber si tu web posicionará mejor o peor ), son los analizadores WPO. Un analizador WPO es un sitio web que, como su propio nombre indica, analiza el nivel de optimización web de un página web que le indiques, para normalmente después, darte consejos para hacerla más rápida.

Para ello, primero averigua/mide todo lo posible: cuantos recursos se usan, cuanto pesa cada uno de esos recursos, si están optimizados o no, etc. En segundo lugar, analiza esos datos obtenidos. Finalmente, muestra información sobre rendimiento del sitio web y da algunos consejos según el estudio realizado.

Para mi, los analizadores mejores son: WebPageTest, Google Page Insights, Gtmetrix, Pingdom Tools. Son estos también los primeros analizadores web. Posteriormente han salido muchas otras herramientas de este tipo. Es tanto el auge, que si te dedicas profesionalmente a algo relaionado con WPO, es raro que no tengas el tuyo propio. Sin embargo, si le echas un vistazo detalladamente a los resultados que dan, verás que casi todos son parecidos entre sí ( ...qué casualidad…).

Como vimos antes, un analizador cumple con tres funciones: la primera de métrica, la segunda de estudio/análisis de esas métricas y la tercera, mostrar datos y/o consejos. La primera parte, la de métrica, es básicamente igual para todos los analizadores. Entonces, ¿ no sería interesante que hubiera un sistema que pudiera reutilizarse para esa tarea y así no tener que reinventar la rueda ?. Algo muy sencillo, como decir: “OK, Google, dame todos los datos WPO del sitio web tal”. Luego, el analizador usaría esos datos a su conveniencia o según los criterios que considere. Sería un sueño, ¿ verdad ?.Pues… Te tengo una buena noticia... Hay APIs que hacen esa primera tarea, librándonos de tener que invertir recursos y tiempo en tener algo parecido.

En esta entrada crearemos un tema WordPress para crear un sitio web que sea un analizador WPO. En este theme, programaremos el acceso a una esas APIs( más concretamente el API de Google Speed Insights ) para obtener las métricas de la url de una web. Dejo al lector como tarea “para casa” la parte fácil: desarrollar la parte del análisis de los datos( si lo quieres hacer, aunque Page Speed también ya lo proporciona entre los datos devueltos ) y la apariencia( yo haré una apariencia sólo para salir del paso para no alargar el post ) del sitio web. Si después de todo lo dicho, sigues aquí y ni PHP ni WordPress te asustan, empecemos:

Lo primero necesario para nuestro tema, es una carpeta/directorio en la ruta wp-content/themes de nuestro WordPress. La llamarémos analizador_wpo, espero que te parezca un buen nombre. También de paso, baja y mete el archivo style.css en ese directorio( o incluso, si quieres adelantar, puedes bajarte todo el tema ). Lo único que tiene este archivo son unos estilos básicos para una tabla que usaremos para mostrar la información recogida de la API.

Lo segundo que tendrás que bajarte y meter en el directorio comprueba_wpo es el archivo que muestre el formulario que recoge la url del usuario. Es decir, el show_form.php:

Fíjate, es un formulario muy simple( línea 12 a 18 ), con un input para pedir la url( línea 14 ), un botón para mandar el formulario( línea 17 ). También se muestran los errores que hubiera habido durante el proceso de recogeda de información desde la API( línea 10 ).

Lo siguiente es bajarse show_data.php que mostrará los datos recogidos desde la API:

En la variable $wpo se guardan todos los datos recogidos de la API. Es un array con multitud de información:

  • $wpo['id'], usada en la línea 4 y en la línea 13 contiene la url que se usó para la métrica.
  • $wpo['final-screenshot']['details']['data'], usada en la línea 14, es una captura de pantalla de la url en formato base64.
  • $wpo['timing']['total'], contiene el tiempo de carga total de la web( línea 15 ). Fíjate que en la misma línea también se hace una llamada a una función get_speed, es algo muy pequeño de tratamiento de los valores de la API.
  • Todas las demás variables posibles de utilizar se muestran con el código de la función show_wpo_data de la línea 20.

Tanto show_wpo_data como get_speed son parte del archivo functions.php que también tendrás que bajar y meter en el directorio del tema.

Ahora queda conectar los dos archivos antes vistos( show_form.php y show_data.php ) y esto se hace en el archivo index.php:

  • En la línea 5, el script recoge la url, que se ha mandado por el fomulario antes visto, asegurándose que no tenga nada raro( seguridad ante todo ).
  • En la línea 10 llamamos a la API de Google a través de la clase PHP AnalizaWpo pasándole la url que tiene que analizar. En la línea 11 devolvemos los datos devuelto por la API y en la línea 12 algún posible error( ese que vimos que se visualizaba encima del formulario de url ).
  • En la línea 16 mostramos el formulario de petición de url, bien si no hubo datos wpo( por ejemplo, debido a que la url aún no se pidió ) o bien si hubo errores en el proceso de comunicación con la API.
  • Si todo fue bien, en la línea 18 mostramos los resultados( en show_data.php como ya vimos ).

Llego el último de los archivos y el más importante: la clase AnalizaWpo:

Creo que es bastante autoexplicativo, aún así trataré de describirlo un poco más:

  • En la línea 27 se hace la petición a los servidores de Google. Esperando por la respuesta TIMEOUT segundos.
  • La petición, en la línea 25, se hace contra la url formada por el ENDPOINT( línea 6 ) más unos parámetros( $request_params ) como cadena de búsqueda( o query string ).
  • Estos parámetros son url( dirección contra la que se van a hacer las métricas ), locale( el idioma de los resultados ), strategy( si se quiere medir la web desktop o mobile ) y la category( el área de métrica que se quiere. Es decir, esto no sirve sólo para medir el performance de una web, también sirve para medir el SEO, accesibilidad, ... ).
  • Los parámetros anteriores hay que pasarlos al constructor cuando se instancia( línea 18 ), aunque si lo omites no pasa nada, ya que hay algunos definidos por defecto( línea 9 ).
  • El servicio devuelve un json que es wrappeado por WordPress. El resultado es guardado como atributo response( línea 21 y 16 ) .
  • Cuando se hace un get_data de los datos del servicios, esa respuesta se transforma a formato array válido. Al principio con todos los datos( línea 37 ) para más tarde simplificarlos( método normalize_response, línea 42 a 49 ). También se cachea( línea 31 a 35 ) para evitar hacer el mismo trabajo varias veces.

Eso es todo. Ahora si le das una buena apariencia al tema y tratas los datos tendrás un analizador propio de primera. Espero que te haya gustado, si es así, no dejes de dar like al tuit y reenviarlo. Gracias y ¡hasta la próxima!

¡ Compártelo !
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.