Corregir errores de PageSpeed Insight relacionados con archivos JavaScripts

Diferir scripts es la mejor manera de lidiar con los errores arrojados por PageSpeed Insight referente a archivos Javascript.

Voy a explicar cómo corrijo los errores relacionados con scripts en los resultados de PageSpeed Insight. Tanto para el bloqueo de renderizado como para cuando el script que no se usa aplica lo siguiente.

Insertar bien el código JavaScript

Esto debe tomarse en cuenta desde el mismo momentos que se trabaja con el código. Es decir, si se inserta código que es vital para el primer vistazo de la página, entonces estos scripts deberían estar en el header entre etiquetas <script>.

Pero, peor aún, se suele usar librerías para desarrollar código, dificultando más la situación debido a que se hace importante que estas librerías estén en el header si el código que las usa es necesario para el primer renderizado. Dicho de otra manera, ya que es necesario tener el script en el header porque es necesario para el renderizado y ese scrip usa una librería, entonces obliga a que la librería también esté en el header.

Lo que ocurre con esto es que las librerías son cantidades grandes de código, y el script que la necesita, solo usa una fracción de ese código, entonces PageSpeed Insight te informa que hay código que no se usa y tiene toda la lógica del mundo.

Un proyecto que tenga como uno de los objetivos el SEO, debe incorporar un código que no necesite scripts para el primer renderizado, o si lo hace, entonces escribirlo sin usar jQuery e incorporarlo en el head del index.

Pero lo anterior es si desarrollas el código, lo normal con WordPress es usarlo con código creado por terceros, lo que llamamos temas de WordPress. Por lo que en caso de que se necesite optimizar una web WordPress que está usando un tema que a su vez usa jQuery y ese jQuery es necesario para el primer pantallazo entonces hay que aplicar cierta lógica.

Primero, se suele recomendar que jQuery ni con el pétalo de una rosa, ni siquiera diferirlo, pero yo por la práctica podría decir, por ahora, que cuando se trata de scripts, aplico, veo y si todo ok lo dejo y si no, echo para atrás (cuando se trata de códigos de terceros como los temas de WordPress).

Primero hay que evaluar

Hay que analizar el código fuente y avaluar el tema de los scripts, se puede determinar por ensayo y error si algún script se colocó en el header cuando no es necesario.

Hay temas que se pueden apreciar que están bien diseñados cuando observas que hay scripts al final del cuerpo y otros en la cabecera. Incluso algunos que tienen lo anterior y algún que otro script escrito en la cabecera entre etiquetas <script>, lo que hace pensar que el creador del tema se tomó la molestia de insertar scripts críticos fuera de archivos directamente en la cabecera. Cuando es así, podría concluir que los scripts que están en la cabecera son por algo. Pero igual a lo anterior, no pasa nada si aplico ensayo y error.

La ejecución

La corrección se basa en pasar todo el código al footer pero esto tiene sus contrariedades. La otra acción y que es lo más recomendable es diferir los scripts.

Luego, los scripts que están diferidos y los que estén en el pie de página habría que minimizarlos. Hay herramientas online que pueden ayudar con esto o también hay buenos plugins que lo hacen.

Leave a comment

Your email address will not be published. Required fields are marked *