Snabbare Zend-applikationer med Minify

October 29, 2011

Minify är ett simpelt PHP-skript som packar ihop flera CSS-filer eller Javascript-filer till en enda dataström, vilket gör att webbläsaren inte behöver fråga efter flera filer. Storleken är oftast inte den avgörande faktorn när en fil efterfrågas, utan varje förfrågan har en viss svarstid som aldrig går att kringgå.

Att dela upp en webbplats i flera separata stilmallar och Javascript-filer gör det enklare att underhålla sidan och att utveckla nya funktioner. Nackdelen är att den formatering som är mest bekväm för oss människor innehåller onödiga mellanslag och tabuleringar som gör att filen tar längre tid att hantera för webbläsaren.

På grund av svartsiden som alltid måste genomlidas vid varje förfrågan leder separata stilmallar/Javascript-filer även till att dessa (förhoppningsvis) små svarstiderna summeras. Att ha 20 inlänkade CSS-filer kräver alltså 19 gånger så hög total svarstid som att ha en enda CSS-fil.

I idealfallet kan alltså en förfrågan till webbplatsen innebära:

En HTTP-förfrågan för innehåll (XHTML)
En HTTP-förfrågan för stilmallar (CSS)
En HTTP-förfrågan för Javascript
En HTTP-förfrågan för varje bildelement

Minify (http://code.google.com/p/minify/) erbjuder det bästa utav båda världar: läsbara CSS-filer och Javascript samtidigt som webbplatsen i sig bara behöver länka in en enda CSS-fil och en enda Javascript-fil.

Genom att installera Minify i webbroten (public/ för ett Zend-projekt) kan en förfrågan om ett gäng Javascript-filer istället länkas in som:

/min/?f=/js/main.js,/js/bootstrap-modal.js

Minify kommer då se till att kombinera de två Javascript-filerna till en enda fil utan mellanslag och tabuleringar. Om det görs ändringar i Javascript-filerna kommer Minify automatiskt generera en ny version med jämna mellanrum (standard är 1800 sekunder, det vill säga en halvtimme).

För en webbapplikation i produktionsmiljö rekommenderas en cache-tid på en vecka (604800 sekunder).

Minify i Zend Framework

För att få ett bättre arbetsflöde med Minify i Zend finns det två hjälpskript som placeras i

application/views/helpers/

Hjälpskripten finns här: https://github.com/bubba-h57/zf-helpers

För att länka in Javascript-filer i <head>:

<?php 
echo $this->minifyHeadScript()
->prependFile('/js/bootstrap-modal.js')       
->prependFile('/js/jquery.min.js');
?>

Och för CSS:

<?php  
echo $this->minifyHeadLink()
->prependStylesheet('/css/style.css')
->prependStylesheet('/bootstrap/bootstrap-1.2.0.css');
?>

Om du har installerat Minify i public/min bör du göra följande ändringar i config.php:

$min_documentRoot = dirname(__FILE__) . '/../';

$min_cachePath = '/tmp';

Beroende på var dina CSS-filer och Javascript befinner sig så måste varje sökväg tillåtas. Detta är för att skydda mot att Minify används för att läsa andra filer i systemet:

$min_serveOptions['minApp']['allowDirs'] = array('//js', '//css', '//bootstrap');

I det här fallet ligger Javascript i public/js, CSS i public/css och jag använder ett CSS-ramverk som heter Bootstrap som ligger i public/bootstrap.

Minify och Memcache

Istället för att lagra de genererade filerna i /tmp går det att använda Memcache. Lägg till följande i config.php för Minify:

require 'lib/Minify/Cache/Memcache.php';
$memcache = new Memcache;
$memcache->connect('localhost', 11211);
$min_cachePath = new Minify_Cache_Memcache($memcache);

Glöm inte att kommentera ut:

//$min_cachePath = '/tmp';

Resultat

Pingdom släppte för ett tag sedan ett riktigt bra verktyg för att mäta prestandan för en webbplats.

Efter att ha installerat Minify och gått igenom alla steg ovan:

Anledningen till att prestanda-betyget inte blir 100/100 är att Minify använder GET-variabler (till exempel /min/?f=), vilket gör att vissa proxy-servrar inte kommer cacha förfrågan.