Drupal en de kunst van snelheid

dit artikel is als gast blog verschenen op true.nl/blog

De meeste bedrijven die een website online hebben, hebben als doel om er geld mee te verdienen. Voor sommige websites is dat een directe manier van geld verdienen, omdat ze een webshop hebben, donaties verkrijgen of leadgeneratie hebben. En voor vele bedrijven is het een vorm van marketing, om gevonden te worden door hun prospects. Webperformance is dus niet een technisch trucje, maar een must voor een ieder. Als je geld verdient online, verlies je dat door een langzame website!

Snelle website

Content Management Systemen als Drupal zijn geweldig voor een gebruiker, zowel de redacteur als de bezoeker kan eenvoudig content toevoegen. Plaatjes worden automatisch geschaald en de tienduizenden modules leveren vaak de gevraagde functionaliteit. Maar dat komt met een prijs, ook in opensourceland. Voor elke pagina die het systeem samenstelt, moet de inhoud uit de database gehaald worden. Elke pagina die overzichtslijsten heeft (views) is een query naar de database. Elke pagina van een grotere website kan zo al snel honderden queries bevatten, enkel om een enkele pagina aan een enkele gebruiker te serveren. En dus ook met een snelle database vele seconden om de pagina aan de gebruiker te leveren. Een statische HTML-pagina serveren, is vele malen sneller.

Snelheid is de som van alle elementen

Dus aan de ene kant wil de business flexibiliteit om met een CMS content te kunnen veranderen. En aan de andere kant is het een eis dat een pagina binnen enkele seconden bij de gebruiker op het scherm staat. Om dit probleem op te lossen, is er niet een enkele actie die je kunt doen. Snelheid is de som van alle elementen tussen content en browser, de oplossing raakt dus ook alle elementen in deze keten; netwerk, operating systeem, het CMS, http en HTML. De enige oplossing om de performance te verbeteren van elke website – ongeacht het CMS – is dan ook er voor te zorgen dat de gehele keten wordt geanalyseerd en verbeterd waar noodzakelijk.

CSS en JS aggregate

Voor Drupal geldt dat het natuurlijk standaard is dat je CSS en JS aggregate gebruikt, hierdoor worden de tientallen CSS- en Javascript-bestanden samengevoegd en geminimaliseerd. Mooi. Tientallen minder hits is een aantal seconden sneller door een paar vinkjes. Maar nu begint het grijpen naar het hoger gelegen fruit. Hieronder staan enkel van de best practises, zoals deze geleerd zijn in de gemeenschap.

Minder hits

Vanuit de klant is het vaak gewenst om veel derde diensten te integreren, te meten met analystics en te delen via share this en a/b testing met Optimizely. Allemaal valide, maar elk Javascript-bestand is een extra DNS-request, een extra hit en extra parsing aan de browserzijde. Probeer de klant te overtuigen dat minder hits beter is Deze stap is waarschijnlijk het ingewikkeldste te realiseren, maar wel een die van belang is.

Caching in Drupal

Standaard heeft een CMS als Drupal caching staan in de database, het verste weg van de gebruiker vandaan. Dus alles wat deze caching kan verbeteren, is noodzakelijk. Dit kan door views en blokken te cachen.

Memcache en Varnish

Maar het verder ‘naar voren brengen’ van de cache, zodat deze niet in de database komt of zelfs Drupal ‘raakt’, is nog beter. Memcache is een goede methode, een platte tabel in het geheugen die direct door de webserver geraadpleegd wordt en waarvoor een Drupal module bestaat. Nog beter is het om Varnish te gebruiken, een reverse proxy, waardoor de verzoek nooit bij het CMS komt, maar direct geserveerd wordt. Dit werkt echter enkel voor niet ingelogde gebruikers en wil je in het CMS meten hoe vaak een artikel gelezen is in Drupal dan moet je hier dus omheen werken met een extra Javascript-call bijvoorbeeld. Typisch kan je met Varnish honderden keren meer gelijktijdig bezoek verwerken, terwijl het maken van de ‘index,html’-pagina onder deze druk van seconden naar 20 milliseconde gaat.

SSL-decrypter

Om er voor te zorgen dat de content zo ‘vers’ mogelijk blijft, dien je de expiratie-headers in de webserver zo te zetten dat de caching lang genoeg is, zonder dat de site gedateerd wordt en kan je de purge-module gebruiken. Je doet er goed aan om in de headers van de site te controleren dat het verzoek ook daadwerkelijk gecachet wordt en uit Varnish geserveerd wordt. Sommige modules en maatwerk willen dit nog wel eens voorkomen. Als jouw website https gebruikt, kan deze niet door Varnish gecachet worden. Hiervoor kan je een SSL-decrypter gebruiken voor Varnish, bijvoorbeeld pound, zodat Varnish toch gewoon http-verkeer ziet.

Zoekfunctionaliteit

Als de website een zoekfunctionaliteit heeft en je deze eigenlijk wil uitbreiden naar zoeken in binaire bestanden (PDF, MS-Word etc), neem dan een extra virtuele server met SOLR, installeer de module. En meest van belang, zorg dat de interne search de content niet meer indexeert, want de searchtabel is vaak de helft van de omvang van de database.

SPDY

Als je https gebruikt, denk dan ook aan de optie SPDY te gebruiken, de opvolger van het oude stateless http-protocol en de kandidaat voor http/2.0. Talloze browsers ondersteunen dit protocol al. Met SPDY worden de elementen van de pagina in een keer in een request gecomprimeerd geserveerd en dit kan zeker bij netwerken met een hoge latency het laden van een pagina halveren. Voor vele webservers (waaronder Apache en Nginx) zijn modules voor SPDY beschikbaar. Als dit nog geen optie is, kan je kijken naar de Google module ‘pagespeed’. Deze beschikt over een keur van opties; on the fly Javascript en CSS in de HTML injecteren als dat sneller is, lazyloading van plaatjes ‘onder de vouw’, het genereren van sprites en talloze andere opties die je site aanzienlijk sneller kunnen maken.

CDN

Een CDN kan een oplossing zijn voor tal van problemen: DDoS-bescherming, lagere roundtrip-tijden voor internationale gebruikers, maar ook meerdere requests serieel doen om de site sneller te laden. Dit kan je ook doen, zonder een echt CDN te gebruiken. De meeste browsers hebben een laag maximum aan het aantal requests dat men een dergelijke tijd kan doen naar een enkele server. Dus voor een pagina met 40 plaatjes vuurt de browser bijvoorbeeld 16 requests op de webserver af en wordt het volgende request pas geplaatst als er een succesvol is verwerkt. Hiervoor zou men dus kunnen werken subdomainen, om de pagina voor example.com te serveren gebruikt men CNAMES als images1.example.com en images2.example.com en doet men round robin loadlbalancing over deze namen. Hierdoor kan de browser nu 16 requests naar images1 sturen en 16 naar images2 op het zelfde moment. Er is een Drupal-module die dit voor je doet en ook kan integreren met de grote echte CDN’s als Akamai. Deze truc heeft enkele nadelen, je moet voorkomen dat searchengines images1.example.com gaan indexeren en er is een tradeoff omdat een extra DNS-request ook tijd vergt. Daarbij zal in de toekomst mede door SPDY deze techniek snel overbodig zijn.

Tips op servergebied

Op het gebied van de server zelf zijn er ook tal van tips van toepassing, al is dit verre van laaghangend fruit. Door bijvoorbeeld het renderbare deel van de pagina binnen de 1400 bytes te houden, kun je ervoor zorgen dat dit binnen een packet valt voor een ethernetverbinding. Het veranderen van de TCP slowstart-paramaters is een kernel hacking-ervaring, maar draagt ook bij aan een snellere website. Als gesteld, op elk gebied van business tot ethernet-frames dient men integraal webperformance te analyseren en verbeteren.

Meten van de snelheid

Er zijn vele tools die je kunnen helpen bij het meten van de snelheid en dit te verbeteren. Webpagetest en Yslow! zijn goede punten om te beginnen. Steve Souders is de autoriteit op dit gebied wereldwijd en zijn blog heeft tal van goede aanknopingspunten, 2bits heeft veel Drupal-specifieke artikelen online.

Drupal SplashAwards 2014

Drupal-splash-awards-2014_klein_600x400
On december 12 the Dutch Drupal Foundation will organise the first edition of the "SplashAwards". This award is to put outstanding projects in the spotlight, the best Drupal projects and community contributions from Belgium and The Netherlands.

Both Drupal agencies and individuals who have achieved extraordinary results get special recognition from inside and outside the Drupal community. The international jury selects winners out of hundreds of contestants in several categories including best government project and best Drupal theme.

The jury includes well known people in the broader PHP and Drupal community from all around the world: Joost de Valk (SEO WP fame) , Moshe Weitzman (contributor since 2001), Jeffrey "jam" McGuire (evangelist with a mo), Holly Ross (Executive Director DA) , Morten Birch Heide-Jorgensen (enfant terrible and good friend :-)), Stefan Koopmanschap (PHP / Symfony guru from the Netherlands) , Guido Jansen (magento fame) and Robert Douglass (SOLR fame and most of all around friendly chap) will select the ten winners who will walk home along the canals with a great award and a smiling face.

There are 10 awards to be given, from architecture and commerce to best governmental site and theme. The award self will be held for some 100 people, in an old cinema in the centre of Amsterdam. We are really looking forward to this event. And in fact, it will be the last event of the year for the Dutch and a great year it has been.

From a record breaking DrupalJam, via the social events around DrupalCon to 100's of students getting a free training on the Drupal Training Day and now the bowtie SplashAwards, showing of the Dutch Drupal community never was better.

Splashbox Kinect Make up kit

Splash Box from David Sweeney on Vimeo.

The Fashion Digital Studio used Microsoft’s Kinect to create a virtual make up kit for celebrated make up artist Alex Box. The gesture based real time painting application is used as the finale to her MAC Masterclasses in London, NY, LA and Miami. Applying colour with a sweep of the hand to a 3D scan of the models face.

Kreek - Kinect Controlled Interface

25/05/2012 - Kreek

Kreek is a Kinect controlled interface which extends a normally two-dimensional multi-touch environment by the perception of depth. This allows the user to literally reach into the interface and gives applications the possibility to interprete parameters like pressure or solid distance.

See the amazing video

Working on becoming a VJ/DJ using the kinect

Untitled

Working on scratching and drumming in mid air with the kinect as my turntable on my Mac with ableton live. More to follow