Live verslag Kings of Code: Yahoo! & Open-source pitches

[14:15] Nate Koechley van [14:16]in de laatste 2 jaar zijn webpagina's gegroeid van 97k naar 312k. Dit is een grote groei waar oplossingen voor gevonden moeten worden. [14:18] HTML is slechts 5% van de content van je website. De andere 95% heeft te maken met front-end objecten: afbeeldinge, scripts, css, etc. Op dit moment kijken veel developers nog naar het topje van de ijsberg. Het belangrijkste is echter wat onder het water zit. [14:21] Om dit op te lossen kun je gebruik maken van cache of gebruik maken van meerdere domeinen bijv: images.freshheads.com, css.freshheads.com, etc. Dit is een oplossing die werkt voor kleine websites. Na een bepaald punt wordt de laad tijd echter langer wanneer er meerdere domeinen gebruiker worden.

[14:27] Make fewer HTTP request. Maak gebruik van Css sprites, combined / concatenated JS and CSS files, image maps en inline (data) images. Hierdoor kun je de laad tijd van je pagina enorm verkleinen. Denk hierbij aan al je menu afbeeldingen samengevoegd in één afbeelding, of het samenvoegen van css bestanden of javascript bestanden of Gzippen van je bestanden.

[14:30] Ga goed om met expires headers. Bijvoorbeed: Afbeeldingen, stijlesheets en scripts. Iets wat er belangrijk is, is de positie en de manier waarop css wordt ingeladen. Bovenaan de pagina is de beste plaats voor je css, aangezien het bestand dan geladen wordt voordat de afbeeldingen geladen worden, waardoor de layout van de pagina al vast gelegd is. Iets om op te letten is om geen @import te gebruiken. Hierdoor wordt namelijk het css bestand toch aan het einde van de pagina geladen.

[14:35] Javascript is echter een ander verhaal. Doormiddel van het plaatsen van je javascript bestanden aan het einde van je pagina laat je pagina sneller voor de bezoeker. De onderliggende code van javscript komt daarna.

[14:36] Reduce DNS-lookups. max. 2-4.

[14:40] Minify your Javscript. YUI Compressor is hoog aangeschreven. Als je op Google zoekt op CompressorRater kom je op een site waar je verschillende compressie parsers naast elkaar kunt leggen.

[14:42] Gebruik GET requests voor AJAX. Een GET request is één stap, waar een POST gequest 2 stappen moet doorlopen.

[14:43] Stuur het belangrijkste eerst YUI GET maakt on-the-fly JS & CSS makkelijk. Hierdoor kun je na het laden van de pagina, minder belangrijke dingen gaan laden.

[14:44] Google maakt hier ook gebruik van. Na het laden van de homepage (tekst en één afbeelding), laden ze op de achtergrond de code voor de vervolgpagina. Hierdoor kan de volgende pagina sneller geladen worden, aangezien deze op dat moment al in de cache staat.

[14:45] Minimize iFrames. Ik ben zelf al geen fan van iFrames en vind dit punt zeker de moeite waard. Mocht het niet nodig zijn, gebruik ze dan ook niet. Iedere iFrame vraagt namelijk weer een aantal extra requests op.

[14:47] Wacht niet altijd op het onLoad event. Maak bijvoorbeeld ook gebruik van onContentReady (als de content geladen is) of onDomReady (als de dom objecten geladen zijn, HTML)

[14:48] Een horizontale afbeelding voor sprites (CSS + images) is sneller dan een verticale afbeelding. Nate weet zelf niet waarom, maar het zij zo. Zelf kleuren die op elkaar lijken bij elkaar. Hierdoor wordt de grootte van het bestand na compressie een stuk kleiner.

[14:50] Biedt altijd een favicon.ico aan. Het niet aanbieden van een favicon lijdt toch een 404 voor dat bestand. Zorg ervoor dat je favicon.ico bestand ook onder de 1K blijft.

[14:51] Na deze wervelwind van tips is het nu tijd voor wat rust in de presentatie. Het volgende punt zijn tools die je kunt gebruiken.

IBM Page Detailer
LiveHTTPHeaders
Firebug
YSlow (extensie voor FireBug)

[15:00] Voor meer informatie naar aanleiding van zijn presentatie kun je kijken op zijn blog. Nu tijd voor de open-source projecten.

[15:05] Javeline platform. Creëer een user interface met javascript.

[15:10] Roomware project.
– A framework for interactive spaces.
– Bluetooth, SMS, RFID, Mobile client, etc. Dit alles gaat door het Roomware project en wordt uiteindelijk geparsed naar een XML formaat.
– Voor meer informatie kun je kijken naar de presentatie van het roomware project op slideshare.net.

[15:15] GIT Fast Version Control System

[15:20] oAuth
Simon de Haan geeft een presentatie over oAuth. Er zijn bepaalde dingen die je online persoonlijk wilt houden. Grote partijen als facebook, hyves, linkedin, myspace, etc. vragen je je e-mail gegevens in te vullen om aan de hand daarvan je contact personen toe te voegen. Maar is dit wel verstandig. oAuth biedt de mogelijkheid om je gegevens voor jezelf te houden. Doormiddel van het inloggen in de omgeving van je account kun je toegang verschaffen aan website die hier naar vragen zonder je wachtwoord gegevens door te sturen.

[15:30] Rails & Phusion Passengers. Easy and robust deployment of Ruby on Rails applications on Apache Webservers.

[15:45] pauze

Meer weten?

Gijs van Zon