Snelle Websites met Jammit

In navolging op mijn “Snelle Websites” artikel nu een paar concrete tips.

Ik zei vorige keer dat zo’n 90% van de performancewinst te behalen is aan de frontend. Maar het zijn vaak backenders en hosting providers die een een groot deel van een snellere frontend kunnen bewerkstelligen. Belangrijk is te begrijpen wat er moet gebeuren en vooral hoe je dat zo goed mogelijk kunt automatiseren.

Neem nu Jammit, een rubygem die zich speciaal richt op het optimaliseren van frontend code. Huh? Een gem? Dat is toch backend library? Stimmt. Deze library stelt een aantal methods beschikbaar die  frontenend code genereert in je views. Daarnaast geeft het deployment hooks die je kunt gebruiken. Een “View” is typisch het domein van de frontender. De twee belangrijkste functies hier zijn:

• include_stylesheets [bundlename]
• include_javascripts [bundlename]

De [bundlename] kunnen we terugvinden in assets.yml (een config bestandje). Bij onze site ziet die er bijvoorbeeld zo uit:

 

---

javascripts:

  common:
    - public/javascripts/jquery-1.3.2.min.js
    - public/javascripts/jquery.cookie.js
    - public/javascripts/jquery.form.js
    - public/javascripts/jquery.blockUI.js
    - public/javascripts/ajax.js
    - public/javascripts/sifr.js
    - public/javascripts/swfobject.js
    - public/javascripts/thickbox.js
    - public/javascripts/lostboys.js
    - public/javascripts/admin.js

  home:
    - public/javascripts/jquery-1.3.2.min.js
    - public/javascripts/jumpstations.js
    - public/javascripts/lostboys.js

stylesheets:
  common:
    - public/stylesheets/styleguide.css
    - public/stylesheets/layout.css
    - public/stylesheets/content.css
    - public/stylesheets/prikbord.css
    - public/stylesheets/navigation.css
    - public/stylesheets/forms.css
    - public/stylesheets/thickbox.css
    - public/stylesheets/werk.css
    - public/stylesheets/bedrijf.css
    - public/stylesheets/contact.css
    - public/stylesheets/admin.css

  home:
    - public/stylesheets/styleguide.css
    - public/stylesheets/layout.css
    - public/stylesheets/content.css
    - public/stylesheets/navigation.css
    - public/stylesheets/home.css

 

 

---

 

(lekker leesbaar trouwens dat yml, XML voor config stinkt)

Je ziet hier dat we twee bundles hebben, home en common. In development worden de assets gewoon “as is” aangeroepen, niks nieuws, gewoon meerdere script en link tags. Makkelijk debuggen en developen. Op andere omgevingen echter, staging en productie bijvoorbeeld, gebeuren er wat gave dingen.

CSS files worden aan elkaar gelijmd tot 1 file met zo’n beetje 1 regel, lekker knus.

De javascripts wordt gecomprimeerd en geminified (naar keuze met tools van Google of Yahoo) en aan elkaar gelijmd tot 1 file. Copyright comments  in het standaard formaat worden overigens intact gehouden. Kijk zelf maar:

http://assets-production1.lostboys.nl/assets/home.css
http://assets-production2.lostboys.nl/stylesheets/print.css

Hier zie je ook de distributed asset hosts, ook zo’n handig dingetje van Rails, hoewel het een beetje achterhaald is voor moderne browsers..

Als extraatje, nou ja dit moet je eigenlijk wel echt doen om het feest compleet te maken, kun je de deze optimized css & js precachen. Het precachen kun je doen mbv een deployment “hook”. Na afloop ziet je /assets mapje er ongeveer zo uit:

En dan komen Good Ol’ HTTP en Apache weer om de hoek kijken. Je browser kan namelijk aangeven wat voor content hij wil ontvangen:

Doe mij maar css en als je zipped content hebt wil ik dat wel. Liever dat eigenlijk.

De files staan er in twee varianten, zoals je ziet en m.b.v. Apache MultiViews kan de webserver er voor kiezen om meteen de gecomprimeerde varianten (.gz) uit te sturen. Er wordt dus niks meer on-the-fly gezipped, behalve natuurlijk de gegenereerde HTML, XML, JSON etc. Als je iets on-the-fly genereert moet je het ook on-the-fly zippen, dat kan nu eenmaal niet anders.

Zoals te zien is op het plaatje scheelt het al snel een factor 4 in Kb. En dan laat ik de Kb winst door het minifyen nog achterwege.

Ik weet zeker dat de javascript zelf nog veel compacter kan, puur door effecienter code te gebruiken en niet zomaar mega libraries te gebruiken voor een klein kunstje, maar met bovenstaande technieken komen we er nog best mee weg ;-)

Conclusie: Rails & Jammit zijn cool. En als je snelle, goed onderhoudbare sites wilt bouwen zonder al te veel gedoe, dan moeten Frontend, Backend en Hosting elkaar goed begrijpen en samenwerken.

2 reacties

• Dit is ZO VET omfg

  reactie van Peter op 08 Januari 2010 11:23

• Stimmt.... > Typical! :-)

  reactie van Martijn op 08 Januari 2010 13:22