WordPress

Cómo quitar query strings de JavaScript y CSS en WordPress

remove-query-strings-from-static-resources-wordpress

Introducción

Las query strings son URLs que contienen ? o &. Los recursos estáticos (como JavaScript y CSS) suelen almacenarse en caché por proxies o CDNs. Cuando un desarrollador realiza un cambio, no será procesado instantáneamente debido a los efectos de almacenamiento en caché, que es cuando entran en juego las query strings. Estas cadenas de caracteres o strings no se almacenan en caché, lo que permite que las actualizaciones se procesen de inmediato. Sin embargo, esto también aumentará el tiempo de carga de una página web. Las herramientas de optimización de sitios web sugieren eliminar las query strings de los recursos estáticos (algo que también se conoce como remove query strings from static resources) para aumentar la velocidad del sitio web. Esto es especialmente útil para sitios de WordPress, ya que le proporcionará muchos beneficios.

Al eliminar las query strings de los recursos estáticos, se habilitará el almacenamiento en caché en los servidores proxy, lo que aumentará la velocidad general del sitio de WordPress. Tu CSS y JavaScript harán menos solicitudes al servidor, disminuyendo así el uso de recursos de tu sitio de WordPress. Esto también ayudará a mejorar el SEO de tu sitio de WordPress, ya que los sitios de WordPress con una mejor optimización generalmente tienen un mejor posicionamiento en Google.

La desventaja de eliminar las query strings en WordPress se puede superar fácilmente mediante la administración de su caché, que se explicará con más detalle en esta guía de optimización de WordPress.

Lo que necesitarás

Antes de comenzar con esta guía, necesitarás lo siguiente:

  • Acceso FTP
  • Acceso al Panel de administración de WordPress

Paso 1 – Analizar el sitio

Para este paso, recomendaría usar GTMetrix. Después de analizar un sitio de prueba de WordPress, estos son los resultados:remove-query-strings

Dependiendo de tu plantilla de WordPress, el tamaño del sitio web y otros factores, la cantidad de archivos CSS y JavaScript puede variar. Cada vez que un visitante ingrese a tu sitio web, el navegador solicitará obtener CSS, JavaScript u otro contenido estático. Esto generará más solicitudes a tu servidor y se demorará un poco más en cargar. Si utilizas un CDN, o plugins de almacenamiento en caché del navegador o de WordPress, puede que tus archivos no se almacenen en caché, lo que provocará una entrega de archivos más lenta, por lo que la eliminación de query strings ayudará a mejorar el almacenamiento en caché de tu sitio de WordPress y disminuirá el uso de recursos al mismo tiempo.

Paso 2 – Eliminar query strings en WordPress

Hay varias maneras de eliminar efectivamente las query strings de los recursos estáticos en WordPress (Remove query strings from static resources).

Opción 1 – Eliminar las query strings de los recursos estáticos (CSS, JavaScript) en WordPress usando plugins

El plugin más conveniente para la eliminar las query strings en WordPress es Speed ​​Booster Pack.

Después de implementar Speed ​​Booster Pack en WordPress, ve a la Configuración (Settings) del plugin.query-strings-removal-wordpress-speed-booster-configuracion

Marca la casilla Defer parsing of javascript files y presiona Save Changesquery-strings-removal-wordpress-speed-booster

También es posible usar plugins como Remove Query Strings From Static Resources o Query Strings Remover para lograr el mismo objetivo.

Opción 2: Eliminar las query strings de los recursos estáticos (CSS, JavaScript) en WordPress a través de functions.php

¡IMPORTANTE! Asegúrate de tener una copia de seguridad del archivo functions.php antes de realizar cualquier cambio.

Las query strings se pueden eliminar de WordPress agregando este código en la parte inferior de tu archivo functions.php ubicado en el directorio wp-includes:

// Remove query string from static files
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );

En algunos casos (dependiendo de tu configuración de WordPress) este código puede causar el error 500 Internal Server Error. En ese caso, los plugins del Paso 1 serán la mejor opción.

Contrarrestar la desventaja de eliminar las query strings en WordPress

La correcta administración de la caché de WordPress te permitirá entregar los últimos archivos a todos los visitantes sin causar ningún problema. Si está utilizando plugins de caché de WordPress, simplemente tendrás que borrar la caché de WordPress después de hacer un cambio. Lo mismo ocurre si implementaste el almacenamiento en caché del navegador para tu sitio de WordPress, borrar la caché del navegador te permitirá ver los últimos cambios. Estos pocos trucos te permitirán contrarrestar la pequeña desventaja que puede causar el eliminar las query strings de los recursos estáticos en WordPress.

Paso 3 – Probar los cambios

A modo de comparación, aquí están los resultados del análisis de GTMetrix después de eliminar las query strings de los recursos estáticos en WordPress:remove-query-strings-2

Conclusión

En esta breve guía, hemos aprendido a aumentar el rendimiento de tu sitio web de WordPress eliminando las query strings de los recursos estáticos como JavaScript o CSS.

Agrega un Comentario

Dale clic aquí para dejar un comentario

This site uses Akismet to reduce spam. Learn how your comment data is processed.

¡Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio por

AR$36
00
/mes