Voor de scripters, hier heb je een paar JavaScript performance tips van Nicholas Zakas.

Vroeger had je CSS Zen Garden en – als ik het me goed herinner – een 5kb websites-competitie. Vorig jaar was er een nogal makkelijke 10kb javascript wedstrijd (waarbij je library niet werd meegeteld, duh!), als reactie daarop kwam de legendarische js1k-competitie met briljante inzendingen

Vroeger had je CSS Zen Garden en – als ik het me goed herinner – een 5kb websites-competitie. Vorig jaar was er een nogal makkelijke 10kb javascript wedstrijd (waarbij je library niet werd meegeteld, duh!), als reactie daarop kwam de legendarische js1k-competitie met briljante inzendingen. Laatst was daar ineens css1k (inderdaad) en nu is daar 140byt.es, een site met scripts die in een tweet passen. Powernerdalert!

Een tijdje geleden schreef Matt Wilcox een artikel over CSSLint en waarom hij het een slechte tool vindt. Oli Studholme is het vooral niet eens met een specifiek punt: het gebruik van ID's om content te stijlen. Matt vindt dat je dat wel moet doen en Oli geeft een heleboel redenen waarom je het niet

Als je meer over hardware acceleration wilt weten dan “use CSS translate3d”, als je wilt weten hoe het precies werkt dan moet je dit artikel lezen waarin het fenomeen gedetailleerd wordt uitgelegd. Ik het niet gelezen, voorlopig is “use CSS translate3d” genoeg voor mij.

Hoe groot is de cache eigenlijk van de verschillende browsers? En op mobieltjes? Interessante vraag met helaas geen eenvoudig antwoord. Wat ik me afvraag is of appcache ook bij deze caches hoort of dat dat weer een aparte cache is.

Een paar weken geleden werd CSSLint online gezet, een tool om je CSS code mee te testen. Zoals met elke nieuwe tool kwam hier ook een berg kritiek op, waarvan een flink deel eigenlijk best terecht is. Matt Wilcox vindt veel punten waarop getest wordt niet valide en legt, kort, uit waarom. Zoals bij e

Ik ben al lang blij als de javascriptjes die ik wel eens schrijf het gewoon doen maar er zijn natuurlijk ook mensen die graag willen weten hoe dat dan kan, hoe browsers die scripts nu eigenlijk parsen. Nicholas Nethercote legt uit hoe hij de JavaScript parser van Firefox twee keer zo snel heeft gekre

Als je een element er ander uit wilt laten zien dan kan je met behulp van JavaScript de inhoud van het style-attribuut aanpassen of je kan de className veranderen. Wat is sneller? Test het hier.

Problemen met JavaScript? Werkt het niet? Onzeker of je code wel goed is? Wellicht heb je iets aan zeon.js, een javascript analyse tool van Peter van der Zee. Wat ik zelf misschien wel de mooiste feature vind is de bookmarklet waarmee je elke textarea op elke willekeurige pagina omtovert tot deze too

Caching in Safari en sommige andere webkits is, zacht gezegd, klote. Dat geldt ook voor Safari op de iPhone. Steve Souders legt uit wat er precies klote aan is.

CSS1k bestaat nu een tijdje en er staan al flink wat tiffe inzendingen op, zoals deze oefening in generated content – http://css1k.com/#wolfr – deze onleesbare – http://css1k.com/#facetime – en deze bubbly versie – http://css1k.com/#bbubles. Ik heb er ook twee opgestuurd

Offline webapps maken, het is best lastig. Je moet gebruik maken van het cache manifest en dat moet je goed en secuur doen. Bovendien is de tooling niet optimaal. En er is nog wel meer wat niet optimaal is. In dit ietwat zeurderige artikel wordt stilgestaan bij al deze complexe aspecten van offline w

Heb je moeite om aan klanten duidelijk te maken hoe belangrijk performance is? Hier staat een flinke verzameling succesverhalen. Hanidg!

Een aardige infographic die laat zien waar de belangrijkste vertragingen optreden bij het laden van een webpagina. Jep, in de browser.

Martin Sutherland heeft wat geëxperimenteerd met jQuery Mobile en hij twijfelt er aan of het wel geschikt is om er mobiele sites mee te maken. Hij onderzoekt alle aspecten van het framework grondig en komt telkens met goede argumenten voor of tegen. Er staan wat zorgwekkende performancecijfers i

In zijn eindeloze drang naar snellere websites is google chrome nu met het idee van prerendering gekomen: je kunt nu op een pagina aangeven of er misschien alvast een volgende pagina moet worden opgehaald, een pagina waarvan je zo ongeveer zeker weet dat hij ook bekeken gaat worden. Op deze pagina wordt uitgelegd hoe je het kunt implementeren en hoe je er voor kunt zorgen dat je statistieken niet in de soep lopen. Ik kan overigens geen enkele use case verzinnen voor deze techniek; alleen bij Defiant Dog – http://defiantdog.com/ – weet je zeker dat mensen op de knop gaan klikken, op elke andere site is dat niet te voorspellen.

Performance is belangrijk. Hoe belangrijk? Zo belangrijk dat het een feature is. Jeff Atwood legt uit.

Stoyan Stefanov schrijft een boek over performance en doet dat gewoon direct online zodat wij de kennis die hij wil delen ook gewoon direct kunnen gebruiken. Wat mij betreft de enige juiste manier om een boek over zo'n belangrijk onderwerp te schrijven. De eerste hoofdstukken zijn inmiddels af, de re

Soms wil je het onload event uitstellen (om te testen of de meta viewport bijvoorbeeld wél dynamisch aangepast kan worden op een PlayBook voor onload, best een main stream use case, toch?). Je kan dit script daarvoor gebruiken.

Cache. Iets met bestanden die worden opgeslagen. Ik kan een stuk of drie soorten cache opnoemen, jij wellicht meer. Maar ken je er tien?

Canvasanimaties zijn blijkbaar traag op een iPhone 4 en dat blijkt te komen door het verschil tussen device-pixels en css-pixels. Je kan deze animaties veel sneller maken door de meta-viewport aan te passen. Als je dit in een productiesite gaat doen, check dan even met javascript of het een retina di

Wil je je JavaScript code zo compact mogelijk maken? Gebruik een minifier. Wil je dat handmatig kunnen doen? Of wil je meedoen aan competities als js1k en 140byt.es dan heeft het wellicht nut om deze pagina vol met tips over minimaal JavaScript eens te lezen. De disclaimer is erg goed: "please be con

Een - voor performance nerds - handige firefox extensie die kijkt hoeveel procent van jQuery een pagina nu eigenlijk gebruikt.

Steve Souders had een tijd geleden het HTTP Archief geopend, een site die de performance van de grootste sites door de jaren heen in de gaten houdt. Een erg belangrijk en nuttig project. Sinds vorige week is hier ook een mobiele variant van die specifieke mobiele sites in de gaten houdt.

Erg goede presentatie van Nicholas Zakas over performance, toegespists op hedendaagse mobieltjes en de specifieke problemen die daar bij horen. Staan absolute toptips tussen.

Bestanden vanaf meerdere subdomeinen serveren heet sharding en het is een goede performance-techniek voor desktop browsers - als je het goed doet. Stoyan Stefanov legt uit.

Aaron Gustafson legt de belangrijkste en eenvoudigste performance best practices uit. Doet u niks aan performance? Lees dan dit artikel, zo moeilijk is het niet om er mee te beginnen.

Een test om te zien of het sneller is om data uit localStorage te halen of uit een object.

Uiterst handig overzicht van micro-frameworks, een verzameling van kleine onafhankelijke scriptjes die één specifieke taak erg goed uitvoeren. Een combinatie van een paar van dit soort scripts zal in veel gevallen een betere keuze zijn dan het gebruik van een complete javascript library

Voor de snelheids- en statistiekenjunkies is er nu de mogelijkheid om een site speed rapport aan te maken in google analytics.

Als je gebruik wilt maken van preloaders om bijvoorbeeld javascript bestanden die niet direct nodig zijn pas op te halen als de rest van de pagina al beschikbaar is dan kan je hier lezen welke voor- en nadelen de verschillende technieken hebben. Voor performancejunkies.

Google host een aantal fonts en die kan je gratis gebruiken. Er zitten wat voordelen aan deze service maar ook nadelen, zoals: een gebruiker downloadt het hele font ook al is een subset vaak genoeg. Dit is opgelost, je kunt nu opgeven welke letters er nodig zijn via een querystring.

Paul Irish vertelt ons in deze video heel erg veel over performance van HTML, CSS en het DOM. Prettig om naar te luisteren en te kijken.

Wil je weten hoe SSL nu precies werkt? Lees dan dit artikel.

Met de meeste pixeleditors kan je geen 8-bit png's met alphatransparantie opslaan. Deze eenvoudige sleur-en-pleurtool kan dat wel. Scheelt snel meer dan de helft in aantal kb's. Must use (lees ook even het gelinkte artikel achter het vraagtekentje)

Trent Walton laat aan de hand van een mooie webpagina zien dat het een goed idee is om CSS3 te gebruiken in plaats van ouderwetse CSS voor oude browsers. Prachtig ontwerp, prima voorbeeld van hoe het moet.

Soms kan een stukje CSS je pagina een stuk trager maken: gradients en box-shadows staan er bijvoorbeeld om bekend dat scrollen moeizamer gaat. Met deze bookmarklet kan je testen wat die vertraging veroorzaakt.

Remy Sharp kwam een tijd geleden op het briljante idee om sprites te gebruiken voor audio. Stoyan Stefanov kwam laatst op ditzelfde briljante idee en ging wat verder op de materie in en geeft een complete client-server oplossing. Het internet heerst dankzij dit soort mensen.

In welke gevallen moet je client-side routing gebruiken (hashbangs). Een diepgravend essay over deze materie. Must read voor Ajax-fans (niet de voetbalclub).

De nieuwste versie van Opera wordt trager als je laptop niet aan de voeding zit. De browser wordt dus trager waardoor er in een belangrijke behoefte voorzien wordt. Dat is een ander soort performance dan we gewend zijn.

Een paar nuttige weetjes over @font-face en dan vooral weetjes over wat er niet zo goed aan is.

Een nieuwe dienst van Steve Souders, Http Archive, geeft een beeld van performance door de jaren heen.

Google Page Speed begon ooit als plugin voor een plugin, sinds kort is het een zelfstandige webservice. 

Steve Souders legt uit waarom hij HTTP Archive is begonnen, wat het idee er achter is en wat je er aan hebt. Deze man heeft weer een aantal Internetten toegevoegd aan zijn collectie.

Google en Bing maken gebruik van localStorage in hun mobiele browsers. Steve Souders introduceert een handige mobiele bookmarklet waarmee je localStorage kunt opslaan en laat aan de hand hiervan zien hoe het gebruikt wordt. Complex en slim. Lees de reacties ook even door, staan ook goede vragen en op

DOM scripts worden vaak traag doordat de layout verandert: het script is niet zozeer traag maar de browser moet de verandering renderen. Hier staan de evroorzakers van lyout-veranderingen, inclusief wat links naar optimalisatietips.

John Resig gaat met behulp van reaguurders door met het zoeken naar de prefecte oplossing voor het maken van een clientside woordenboek. Uiterst leerzame reeks artikelen.

Eindelijk. Nikola Malich heeft het artikel geschreven waar ik al een tijdje op wacht: hoe werkt Yepnope.js nu precies en wat kan je er allemaal mee? Een must read voor iedereen die browserquirks zo goed mogelijk wil oplossen.

New video where we walk through the #web #performance problems with major websites: This week Twitter!

Handig tooltje om in een oogopslag te zien hoe snel je site laadt vanuit verschillende fysieke lokaties op de aardkloot.

Een performancetool waarmee je de laadtijd van je site vanuit verschillende lokaties in de wereld en ook nog eens met verschillende browsers kunt checken.

Een performance tool die een x-aantal keer een site bezoekt en een gemiddelde laadsnelheid teruggeeft.

Wat is dat toch met websites die informatie geven over SVG. Ze zijn allemaal nog lelijker dan je je kunt bedenken. Terwijl het juist zo'n mooie technologie is! Ongelooflijk. Dankzij een totale afwezigheid aan stijling is dit een interessant maar onleesbaar document over de performance van SVG. SVG ge

YSlow, de oertool voor performance geeks is eindelijk beschikbaar als plugin voor Chrome. Iemand tweette al: "er blijven nu weinig redenen over om Firefox te blijven gebruiken". (Hoewel dat volgende week als FF4 uitkomt wel eens zou kunnen veranderen, wie weet?) 

Lang artikel boordevol performance tips die je niet van YSlow of Google Page Speed krijgt. Must read.

Waarom moet je zo min mogelijk css selectors gebruiken? Hier wordt het simpel uitgelegd

SetTimeout en setInterval waren blijkbaar aan vervanging toe, ik had het nog niet in de gaten. Maar als je deze post van Paul Irish leest dan snap je ineens waarom (zodat je kunt opscheppen over batterijvriendelijke animaties). Hij geeft een mooie polyfill zodat je hedendaagse javascript animaties klaar zijn voor toekomstige browsers. Toekomstig als in zeer binnenkort.

Ik heb regelmatig behoefte aan een parent selector in CSS, een selector waarmee je kunt aangeven dat een element anders gestyled moet worden als er een element in staat. Bijvoorbeeld: een label met een disabled input er in zou je anders willen stijlen dan een label met een abled input er in. Jonathan Snook legt uit waarom we dit (nog steeds) niet kunnen.

Erg handige service om data die gegenereerd wordt door verschillende performance bookmarklets op te slaan in de cloud. Nu al onmisbaar voor mobiele web optimalisatie

DOM Monster 1.3.0 is out, with support for Jdrop (store data for later & on mobile!) see @souders post at

Door wat redelijk eenvoudige ingrepen kan een site aanzienlijk sneller worden. Hier een succesverhaaltje inclusief technische uitleg.

Het laden van JavaScript bestanden zorgt voor aanzienlijke vertragingen en andere problemen. Naast een uitgebreide uitleg van deze problematiek komt Nicholas Zakas met een voorstel om in elk geval in de toekomst van deze problemen af te zijn.

@nefarioustim @isofarro Some expansion on what I think are weaker #! arguments:

I claim my prize for best post title.

Every millisecond matters /cc @kurafire

Een interessant artikel wat je eigenlijk alleen moet lezen als je begrijpt waarom je feature detection moet gebruiken en waarom UA sniffing slecht is. In dit artikel wordt namelijk een lans gebroken voor UA sniffing. De discussie in de comments is op z'n zachtst gezegd verhit te noemen, de emoties lopen hoog op. Mijn mening? Feature detection. Als dat niet werkt, opnieuw nadenken, opnieuw designen. Als het dan nog niet werkt advies inwinnen bij slimmere mensen. En als die dan zeggen: UA sniffing dan is dat maar zo.

Nicole Sullivan legt uit het het gebruik van grids, en dan specifiek reeds uitgewerkte grids, een goed idee is. Mijn advies is om een van de fluid grids te kiezen.

De website va twitter werd bijzonder trwwg tijdens het scrollen. Na wat onderzoek bleek dat probleem te zijn ontstaan na een upgrade van jQuery van versie 1.4.2 naar 1.4.4. <br />
John Resig van jQuery legt nu uit hoe dit komt en vertelt en passant waar deze bug eigenlijk aan ligt: twee slechte code praktijken.<br />
Dit is een must read voor iedereen die javascript schrijft.

new blog post: "bookmarklets for mobile: Mobile Perf and Page Resources" -

Small list of js minifiers. Missing "real" entires? Let me know :) (yes, @mathias, I'm looking at you ;)

DOM Monster; Gather information about your current page using this bookmarklet:

Cool - Smaller a UI for the YUI compressor on Mac. #performance

Proud to have written today's entry for the Performance Calendar:

En ja hoor, daar is ie weer: @mathias publiceert (samen met @jdalton) een artikel over JavaScript performance tests en benchmarks. Waarom zijn de bekende benchmarks niet goed (genoeg), hoe werken ze eigenlijk en wat is het alternatief? Verplicht leesvoer voor mensen die veel javascript schrijven.

Zo hee, worden twee performance libraries even deskundig de grond in geboord. En terecht zo te zien: ze gebruiken allebei technieken die in de toekomst (of nu al) problemen gaan veroorzaken. Denk aan sites die je waarschuwen dat jouw browser niet modern genoeg is en dat je moet upgraden naar IE6, dat soort problemen. En zoals het hoort, er staan ook oplossingen in dit artikel.

<iframe> loading techniques and performance: /by @aaronpeters

ControlJS, a JavaScript module by @souders for making scripts load faster:

ControlJS part 2: delayed execution -

ControlJS part 1: async loading -