Bloggen

...om livet bag teknikken

Konceptet bag kombinering af javascripts og stylesheets (combining) er ret overskueligt:

  1. Først identificere man flere filer af samme type (javascript/stylesheet)
  2. Dernæst tager man indholdet fra dem og lægger ind i én fil i stedet.

 Kombinerer man f.eks. 5 javascripts til 1, vil browseren spare de 4 kald. 
"Koster" et kald 200ms, spare man således 800ms!

 

Men - Hvad skal der kombineres?

Det kan dog være udfordrende at lave en god løsning, da stylesheets og javascripts ikke er fast defineret men afhænger af flere parametre, som vi lige er nødt til at slå fast først.

 

 

Hvem loader hvad?

1. Dit CMS
CMS'et loader sit eget sæt af værktøjer, som både det selv og dets udvidelser bygger på.
Disse er ofte ufravigelige.

 

2. Dit tema / skabelon
Skabeloner loader ofte et noget større sæt af ressourcer, da den skal understøtte mange tænkelige funktioner (gallerier, slidere, forums, kontaktsider, etc).
Ofte kan skabelonen faktisk være den værste ræv i skoven; Den kan være nok så flot og imponerende, men ingen ser de 33 javascripts den loader!

 

3. Dine udvidelser
Udvidelser er typisk ret begrænsede i deres ressourceforbrug, da de kun skal understøtte sig selv.
Nogle udvidelser er dog så store og komplicerede at de har set sig nødt til at lave deres egne løsninger og derfor vælger at inkludere en masse scripts. Det er dog langt fra normalen.

 

Ofte går ressourcerne fra CMS og skabelon igen på alle sider, mens udvidelser kun vises på nogle få sider.
Tænk f.eks. på en slider der viser billeder i artikler. Slideren vises ikke på alle sider, og derfor loader den kun på nogle udvalgte sider.

Og netop derfor vil antallet af scripts/stylesheets variere på et individuelt sidebasis.

 

Godt. Lad os prøve nogle løsninger.
Start med at tage en backup af dit site, så du kan komme tilbage til udgangspunktet igen hvis alt går galt (og det gør det nogle gange).

 


Undersøg din skabelon

Start med at undersøge din skabelon.
De fleste skabeloner (især købe-skabeloner) indeholder en indstilling til at hjælpe med at kombinere og optimere dets egne ressourcer. 

Led efter en indstilling i stil af "Combine files" eller "Compress files" (de to ting er ofte tæt forbundne) eller spørg evt. på udviklerens forum om mulighederne for optimering.

 

 

Brug et plugin eller widget

Findes der ikke nogle indstillinger eller er du i gang med dit eget projekt?
Så find et plugin eller en kompetent udvikler!

Både Joomla og Wordpress tilbyder et nogenlunde udvalg af udvidelser til at hjælpe her.

Husk dog, at langt de fleste af disse udvidelser har, efter installering, magten til at lægge dit site helt eller delvist ned. Sørg derfor for en grundig test efterfølgende.

 

 

PHP - Kombiner en hel mappe

Har du den fulde kontrol over koden, er det lettest at holde alle sine ressourcer i én mappe og så inkludere dem i ét hug via et script. På den måde er den endelige fil browseren får, altid opdateret. 

 

HTML: 

<head>
<script type="text/javascript" src="/combine.php?src=js"></script>
<link rel="stylesheet" href="/combine.php?src=css" type="text/css" />
</head>

 

Combine.php:

// Sanitize input
$src = preg_replace("/[^a-zA-Z0-9]+/", "", $_GET['src']);
$path = '';
if ($src == 'css')
{
$path = './includes/css/';// Path to include from
header("Content-Type: text/css");// Set header
}
elseif ($src == 'js')
{
$path = './includes/js/';// Path to include from
header("Content-Type: text/javascript");// Set header
}
// If $path exists ...
if (file_exists($path) && is_dir($path))
{
// ... echo out each file
foreach (new DirectoryIterator($path) as $file)
{
if ($file->isFile())
{
echo file_get_contents($file->getPathname()) . "\n";
}
}
}
die();

 

Har man brug for at prioritere filerne ift. hinanden, skal det dog rettes lidt til:

// Sanitize input
$src = preg_replace("/[^a-zA-Z0-9]+/", "", $_GET['src']);
$path = '';
$prio = array();
if ($src == 'css')
{
$path = './includes/css/';// Path to include from
$prio = array('base.css', 'layout.css');// Load these first
header("Content-Type: text/css");// Set header
}
elseif ($src == 'js')
{
$path = './includes/js/';// Path to include from
$prio = array('jquery.js', 'bootstrap.js');// Load these first
header("Content-Type: text/javascript");// Set header
}
// If $path exists...
if (file_exists($path) && is_dir($path))
{
// echo out the prioritised files first
foreach ($prio as $file)
{
echo file_get_contents($file) . "\n";
}
// Then echo out the rest of the files
foreach (new DirectoryIterator($path) as $file)
{
if ($file->isFile() && !in_array($file->getFilename(), $prio))
{
echo file_get_contents($file->getPathname()) . "\n";
}
}
}
die();

 

 

Htaccess - Proxy alle requests til combine.php

Har man ikke mulighed for at rette i headeren på sitet, kan man redirecte flere requests fra samme mappe gennem et script i stedet.

Her tager vi f.eks. alle css/ og javascript/ requests og sender gennem combine.php som et array. 
Combine.php skal selvfølgelig tage højde for et array i stedet, men det er en smal sag. Se evt. den originale løsning her.

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?src=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?src=js&files=$1

 

 

En note om rækkefølgen...

Langt de fleste scripts og stylesheets har afhængigheder. Bryder man dem, vil det give uhensigtsmæssige resultater.
F.eks. skal Bootstrap loades før næsten alle andre scripts - dog efter jQuery - ellers vil dets funktioner ikke fungerer.

 

 

Tl;dr

Der findes flere måeder at kombinere sine ressourcer på, men de afhænger i høj grad af situationen. 
Der er derfor ikke bare én universel løsning. 

Brug udviklingsværktøjerne i din browser til at vise resultaterne og tag ét skridt ad gangen.
Husk på; Kan bare 4 ressourcer kombineres, er der vundet. Potentialet er stort.

 

 

Læs mere i guiden til teknisk mobiloptimering:

 

Janich Rasmussen
Om forfatteren: Janich Rasmussen

Problemknuser, nørd og stifter af CGOnline.dk - Løser alt fra lavpraktisk opsætning til advanceret performance optimering.

Har tidligere arbejdet for bl.a. Eniro, Geodatastyrelsen & Dealsales.

Involveret i flere Open Source projekter, herunder Joomla som Janich har elsket at været med til at udvikle og bruge siden 2006.