Casi todos los sitios web suelen utilizar archivos JavaScript externos. Los necesitamos, por ejemplo, cuando utilizamos Google Analytics o por ejemplo un proveedor de anuncios como BuySellAds. Para aprovechar el almacenamiento en caché del navegador y optimizar la velocidad de tu sitio web, es recomendable agregar encabezados de expiración en tus scripts. En este artículo, os mostraremos cómo importar dinámicamente archivos JavaScript externos en tu propio sitio web para un mejor rendimiento.
El problema con los scripts externos
Cuando utilizas un servicio externo como Google Analytics, a menudo se te exige que incluyas archivos JavaScript externos en tu propio sitio web.
Si bien esto no es un problema en sí, obviamente no tendrás tanto control sobre esos archivos como los que tienes alojados en tu propio servidor. Esto puede convertirse en un problema, ya que siempre debes establecer un header de expiración en archivos estáticos para aprovechar el almacenamiento en caché del navegador y optimizar la velocidad de su sitio web.
Servicios como Google PageSpeed Insight te recomendarán hacerlo.
La solución: agregar headers de expiración a los scripts externos
Por lo tanto, lo que debemos hacer es importar dinámicamente todos los archivos .js a nuestro sitio web. Para hacerlo, usaremos PHP y la función file_get_contents().
Lo primero que hay que hacer es localizar el script externo:
<script type="text/javascript" src="https://ssl.google-analytics.com/ga.js"></script>
El siguiente paso es crear un archivo .php. Llamémoslo externaljs.php. Inserta el siguiente código en él:
<?php
$files = array(
'ga.js' => 'https://ssl.google-analytics.com/ga.js',
'bsa.js' => 'https://s3.buysellads.com/ac/bsa.js',
'pro.js' => 'https://s3.buysellads.com/ac/pro.js'
);
if(isset($files[$_GET['file']])) {
if ($files[$_GET['file']] == 'ga.js'){
header('Expires: '.gmdate('D, d M Y H:i:s GMT', time() + ((60 * 60) * 48))); // 2 days for GA
} else {
header('Expires: '.gmdate('D, d M Y H:i:s GMT', time() + (60 * 60))); // Default set to 1 hour
}
echo file_get_contents($files[$_GET['file']]);
}
?>
Echemos un vistazo al código:
- Líneas 3 a 7: creamos un array que contiene los archivos aceptados. Esto es muy importante ya que, de lo contrario, cualquier archivo se podría embeber en tu sitio, lo que podría generar posibles problemas de seguridad.
- Líneas 9 a 14: ya que necesitamos ajustar el tiempo de expiración de cada script, necesitamos una declaración condicional para hacerlo.
- Línea 16: Si la secuencia de comandos que se pasa como un parámetro GET se encuentra en nuestro array, podemos mostrarlo de manera segura.
Tendrás que modificar el código para ingresar las URL de tus scripts externos. Una vez hecho esto, simplemente súbelo a tu servidor. Si estás utilizando WordPress, es muy buena idea colocar el archivo en la carpeta de tu theme.
Ahora, simplemente reemplace la llamada a los .js externos y reemplázala por una llamada a tu archivo externaljs.php, como puedes ver a continuación:
<script type="text/javascript" src="externaljs.php?file=ga.js"></script>
Y ya estaría todo. Ahora puedes importar dinámicamente archivos .js externos en tu servidor y, por lo tanto, establecer el header de expiración correcto para cada script.