en NoEsTanDificil: Optimización de carga de archivos estáticos con PHP

HTML5

25-02-2023

Optimización de carga de archivos estáticos con PHP

Este artículo lo quería dedicar a la organización de proyectos web y a la mejora de carga de archivos estáticos que muchas veces por las prisas no se llegan a optimizar.

En ocasiones, para proyectos complejos, nos gusta fragmentar el código de javascript en pequeños archivos para que cada uno de ellos corresponda a la programación de ciertos componentes, su comportamiento... o que en vez de crear un archivo .css con miles de líneas, preferimos crear un archivo para maquetar nuestro template (template.css), otro archivo para el menú principal (main_menu.css), otro para las tablas (tables.css)... y así hasta X archivos...

Ésta organización es ideal, porque cuando quiera modificar la apariencia de mis tablas, sólo tendré que abrir ese archivo en cuestión, cambiar las clases necesarias, subirlo a mi servidor y listo. Todo bonito de nuevo ;)

Ahora bien, si acabas con 25 archivos .css y otros tantos .js (25 + tantos = X), piensa que cada vez que cargas la página web (al menos la primera vez, que no tienes nada en caché) tu navegador va a hacer X llamadas a esos archivos... estará esperando X respuestas... las recibirá y las procesará para que todo quede bien maquetado y con el comportamiento óptimo... pero imagínate que tienes que hacer una llamada a 30 amigos... 1 a uno.. para eso se crearon los grupos de Whatsapp, una lata, verdad¿? :P

Pues bien, para evitar eso, en mis proyectos, tengo un pequeño método, que recorre mis archivos estáticos, los agrupa, minimiza y lo guarda en un archivo para ser servido al cargar mi páginas webs... de esta forma, al cargar mi página, sólo se pedirá un archivo .css y/o .js, algo más pesado, pero sólo 1 vez...

<?
// definimos la ruta de los archivos, 
// los CSS que tengo en el proyecto 
// y el nombre del archivo que quiero crear
$path = '/mi/ruta/a-los/archivos/www/';
$archivosCSS = ['template.css', 'main_menu.css', 'tables.css', ...];
$cargaCSS = 'mi_proyecto.css';

// obtengo la fecha de mi archivo en producción
$fechaMiProyecto = fechaModificado($path . $cargaCSS);
// inicializamos variables
$ultimaActualizacion = $fechaMiProyecto;
$codigoCSS = '';

// recorremos los archivos CSS del proyecto
foreach ($archivosCSS as $css) {
  // obtenemos la fecha del archivo CSS
  $fechaCSS = fechaModificado($path . $css);
  // si es posterior al archivo de producción, actualizo la última fecha de actualización
  if ($fechaCSS > $fechaMiProyecto)
    $ultimaActualizacion = $fechaCSS;

  // añado el contenido del archivo CSS en la variable
  $codigoCSS .= file_get_contents($path . $css);
}

// si la última actualización es posterior a la fecha del archivo en producción
if ($ultimaActualizacion > $fechaMiProyecto) {
  // actualizo fecha de mi proyecto
  $fechaMiProyecto = $ultimaActualizacion;
  //genero un archivo con el código de mis archivos CSS
  $minCSS = minScript($codigoCSS);
  $file = fopen($path . $cargaCSS, 'w');
  fwrite($file, $codigoCSS);
  fclose($file);
}
?>
// pongo la fecha de mi proyecto como parámetro en la URL de mi contenido estátivo
<link href="/estilos/<?=$cargaCSS?>?v=<?=$fechaMiProyecto?>" rel="stylesheet" type="text/css">

Como has podido observar, uso 2 métodos en el código:

fechaModificado() => me devuelve la fecha que tiene el archivo en timestamp, si no encuentra el archivo, me devolverá la dirección que le he enviado para podre comprobar porqué ha fallado.
minSCRIPT() => me permite quitar los tabuladores, retornos de carro y alguna cosa más de los archivos, sé que es muy mejorable, pero suficiente para el ejemplo, se admiten sugerencias ^_^¡

<?
functionfechaModificado($archivo){
  if (file_exists($archivo)) {
    $fecha = date("Y-m-d H:i:s", filectime($archivo));
    $milisegundos = strtotime($fecha) - strtotime('1970-01-01') * 1000;
    return $milisegundos;
  } else
    return $archivo;
}

function minSCRIPT($script)
{
  $script = str_replace("\r", ' ', $script);
  $script = str_replace("\n", ' ', $script);
  $script = str_replace("\t", ' ', $script);
  $script = str_replace(' ;', ';', $script);
  $script = preg_replace('/\s+/', ' ', $script);

  return $script;
}
?>

Además, para que el navegador sepa que el archivo .css de mi proyecto está o no actualizado desde la última vez que se cargó la página web, le añado la fecha que obtenemos de $fechaMiProyecto. Dando como resultado "1669034198"

<link href="/estilos/mi_proyecto.css?v=1669034198" rel="stylesheet" type="text/css">

Área Privada

Destacados

Buscador

Síguenos en...

Categorias

Últimos comentarios