Ese extraño código PHP en WordPress

Publicado en Blog · 17 June 2019.
Tips programación WordPress

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. 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 APIs 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 el análisis.
  • $wpo['final-screenshot']['details']['data'], usada en la línea 14, es una captura 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 en la línea 20, Para ello se usa la función show_wpo_data que es recursiva.

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, asegurándose que no tenga nada raro( seguridad ante todo ), que se ha mandado por el fomulario antes visto.
  • 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 posibles errores( esos que vimos que se visualizaban encima del formulario ).
  • 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( como ya vimos ).

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

¡ 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.