Welcome to the Webmove Blog. Here you can find blog posts on new projects, Umbraco, new services, etc ... Webmove Blog http://webmove.be/startpagina/blog do, 12 april 2012 20:04:00 do, 12 april 2012 20:04:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2012/de-performantie-van-je-website-verbeteren-deel-4/ Als je nog het eerste deel van deze reeks herinnert, daarin had ik het over de 'vuistregels voor de performantie van je website'. Eén van die vuistregels luidt als volgt:  "Verstuur het zo infrequent mogelijk" Een techniek hiervoor zagen we in deel 3 , namelijk het instellen van Content Expiration Headers In het vierde deel van deze reeks over de optimalisatie van de performantie van je website bekijken we een andere techniek om data infrequent te versturen, namelijk het inschakelen van Content Distribution Networks Content Distribution Networks (CDN) Het idee achter een CDN, is dat de webserver wordt ontlast doordat statische bestanden (CSS, afbeeldingen, Javascript) niet op de eigen server worden opgeslagen, maar op een netwerk van geografisch verspreide servers. Deze servers slaan de bestanden van je website op in hun cache. Wanneer een bezoeker op je website komt en een bestand opvraagt die nog niet in de cache van het CDN zit, zal dese server het bestand ophalen van jou server en in zijn cache opslaan. De volgende bezoeker die dit bestand opvraagt krijgt het bestand rechtstreeks vanuit de cache van het CDN opgediend. Omdat de servers van het CDN geografisch verspreid zijn over de wereld, krijgt een bezoeker die een bestand op je website opvraagt, dit heel snel via de dichtsbijgelegen CDN server in zijn regio. Dit verloopt een stuk sneller dan wanneer de bezoeker het bestand via jou server zou moeten ophalen. Grote spelers op de CDN markt zijn Akamai, Limelight, Internap en Amazon. CDN's worden voornamelijk gebruikt voor statische bestanden zoals afbeeldingen, CSS en Javascript maar er zijn manieren om het ook te gebruiken voor dynamisch gegenereerde bestanden. CDN's worden tegenwoordig ook vaak gebruikt voor het hosten van jQuery libraries. Zowel Microsoft ,Google als jQuery.com voorzien gratis diensten om jQuerie libraries te downloaden van hun CDN-netwerk: Microsoft: http://www.asp.net/ajaxlibrary/CDN.ashx Google https://developers.google.com/speed/libraries/devguide Jquery.com: http://docs.jquery.com/Downloading_jQuery In het volgende demonstreer ik hoe je een link naar een bestand in een lokale folder (/scripts) op de server kunt vervangen door een link naar hetzelfde jQuery library bestand op het CDN van Microsoft. Verwijzing naar een lokaal bestand op de webserver: <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"> Verwijzen naar het jQuery library bestand op het CDN van Microsoft <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"> Een kritische lezer zal opmerken dat je op deze manier afhankelijk bent van de uptime van het CDN. Alhoewel de kans dat een CDN van Google of Microsoft uitvalt gering is, kan een uptime van 100% inderdaad niet gegarandeerd worden. Dit kan echter opgelost worden met een fallback naar een lokaal bestand indien het CDN down is: <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"> <script>window.jQuery || document.write('<script src="/scripts/jquery-1.7.2.min.js">\x3C/script>')</script> In de eerste script-tag staat de verwijzing naar de jQuery library op het CDN. Indien dit bestand niet kan opgehaald worden, bijvoorbeeld omdat het CDN down is, dan wordt dynamisch een verwijzing naar het bestand op de lokale server gegenereerd, waardoor de jQuery library ten allen tijde beschikbaar is. Samenvatting Er is eigenlijk geen reden om geen CDN te gebruiken: je statische bestanden zoals afbeeldingen, css en Javascript worden sneller gedownload door je bezoekers omdat de servers waarop deze bestanden zich bevinden, geografisch dichter gelokaliseerd zijn dan je eigen webserver. Dit is zeker het geval bij websites die veel internationale bezoekers hebben. Daarnaast wordt je eigen webserver ook voor een stuk ontlast omdat deze minder requests te verwerken krijgt. http://webmove.be/startpagina/blog/startpagina/blog/blog/2012/de-performantie-van-je-website-verbeteren-deel-4/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2012/de-performantie-van-je-website-verbeteren-deel-4/ do, 12 april 2012 20:04:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2012/belangrijk-umbraco-nieuws-op-het-dutch-umbraco-group-festival-2012/ Het Dutch Umbraco User Festival (DUUG) 2012 werd gehouden in Leiden en is georganiseerd door Mindbus , de eerste Umbraco Certified Gold Partner in Nederland. Zo'n 100 Umbraco ontwikkelaars hoorden Niels Hartvig, de oprichter van Umbraco, enkele belangrijke aankondigingen maken met betrekking tot de toekomst van Umbraco. Hartvig begon echter met een kritische noot met betrekking tot Umbraco versie V5. Dit is, zoals je misschien al hebt gehoord, een volledig opnieuw opgebouwde versie die gebouwd is op Microsoft's ASP.NET MVC. Deze versie belooft nog meer uitbreidbaar te zijn door data te integreren die van verschillende bronnen afkomstig kan zijn. Dit wordt mogelijk gemaakt door wat men 'the Hive' noemt. Het blijkt nu dat het Umbraco core team iets te veel vertrouwen had in de eerste Umbraco V5 versie, en deze te weinig getest had in concrete websites. Deze versie is te traag en heeft usability gebreken. Hartvig slaat nu Mea Culpa en sprak over de verbeteringen die in de steigers staan voor Umbraco V5. Umbraco 5.1 Zo wordt volgende week Umbraco 5.1 uitgebracht. Deze versie heeft heel wat performantie verbeteringen . Ook de langverwachte Membership functionaliteit is geïntegreerd en er zitten 20 Razor snippets voor bijvoorbeeld navigatie en breadcrumbs in deze versie. Daarnaast werd er ook aandacht besteed aan het gebruik van ontwikkeltools zoals Visual Studio en Webmatrix. Een online enqûete wees uit dat 75 % van de Umbraco ontwikkeling met behulp van deze tools gebeurd. Met Umbraco 5.1 is het daarom mogelijk om via Scaffolding controllers en views aan te maken, wat Umbraco 5 ontwikkeling een stuk gemakkelijker maakt. Ook een Visual Studio Template voor een Umbraco 5 project is in de maak. Een andere verbetering in Umbraco 5.1 is de beschikbaarheid van Fluent API's . Deze API's werden sterk geïnspireerd door jQuery waar het mogelijk is om verschillende methods aaneen te reigen. Via deze Fluent API's wordt het een stuk gemakkelijker om nieuwe content programmatorisch aan te maken. Umbraco 5.2 Hartvig lichtte ook al een tipje van de sluier voor de Umbraco versie die na versie 5.1 komt.In deze versie, die verwacht wordt rond de periode dat Umbraco's jaarlijkse community event Code Garden 2012 plaats vindt, zal er een Node Selector beschikbaar zijn. Deze Node Selector is de opvolger van de populaire Multinode Tree Picker in Umbraco 4. Aangekondigd voor Umbraco 5.2 is ook betere functionaliteit voor het creëren en distribueren van packages via een Package Creator . Umbraco 4.8, the 'Ultimate V4 version' Umbraco 4.8 wordt verwacht in mei 2012. Niels omschreef deze versie als 'de ultieme versie voor Umbraco 4'. Het zal tevens ook de laatste upgrade voor Umbraco 4 zijn. Alle externe class libraries worden geüpgraded naar hun laatste versie en alle pull requests zullen ingevoegd worden. Het grote nieuws met deze versie is echter dat de beste componenten van uComponents geïntegreerd worden in de Umbraco core. Umbraco Concorde Zoals wijlen Steve Jobs de gewoonte had, werd het belangrijste nieuws echter voor het laatst bewaard. Niels Hartvig lichtte een tipje van de sluier met betrekking tot een Umbraco versie voor de Cloud. Deze versie, het 'Concorde' project gedoopt zal ' Umbraco as a Service ' aanbieden. Umbraco wil zich hiermee diversifiëren van andere CMS cloud oplossingen die volgens Hartvig teveel oude wijn in nieuwe zakken is en de traditionele hosting problemen niet oplossen. Umbraco Concorde zal daarom geöptimaliseerd zijn voor team development door het gebruik van Git voor versie management beheer. Hierdoor zal het mogelijk zijn om volledige Umbraco oplossingen te 'branchen' en te 'mergen'. Ook worden automatisch upgrades voorzien met Umbraco Concorde en zal de prijs goedkoper uitvallen dan voor een VPS oplossing. Gevraagd naar de prijs liet hij ontvallen dat die zal schommelen rond de 19 Euro per maand voor een Umbraco Concorde project. Deze nieuwe bron van inkomsten moet het voor het Umbraco Core Team mogelijk maken zich meer toe te leggen op het doorontwikkelen van de Umbraco Core. Samenvatting De toekomst van Umbraco ziet er zeer rooskleurig uit. Ontwikkelen voor Umbraco 5 wordt een stuk gemakkelijker met behulp van de Fluent API's en Scaffolding. Terwijl je dit leest werkt het Umbraco Core Team hard aan de ontwikkeling van documentatie voor Umbraco V5 en is een volledige makeover van hun video bibliotheek, Umbraco.tv, voorzien. Het Umbraco Concorde project zal het mogelijk maken om met het gemak van een vingerknip Umbraco websites aan te bieden via de Cloud. De inkomsten die Umbraco Concorde zal genereren zullen door het Umbraco Core Team aangewend worden om zich meer toe te leggen op de ontwikkeling aan de Umbraco Core. http://webmove.be/startpagina/blog/startpagina/blog/blog/2012/belangrijk-umbraco-nieuws-op-het-dutch-umbraco-group-festival-2012/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2012/belangrijk-umbraco-nieuws-op-het-dutch-umbraco-group-festival-2012/ vr, 20 april 2012 17:05:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/september/multilanguage-websites-met-umbraco-deel4/ Deze blogpost is het vierde deel in een blogpost reeks over de ontwikkeling van meertalige websites in Umbraco. In deel 1 en deel 2 bespraken we de structurele opties voor een meertalige website en gingen we stap voor stap aan de slag met de ontwikkeling van een meertalige website. In deel drie bespraken we hoe je via de Relations API meertalige pagina's aan elkaar kunt linken zodat de bezoeker bij selectie van een taalkeuze op dezelfde pagina blijft maar de content in de geselecteerde taal krijgt. We sluiten deze reeks rond de ontwikkeling van meertalige websites af met een toelichting van de Translation Workflow in Umbraco. De Translator Account Umbraco maakt het mogelijk via de Umbraco Backoffice op een geïntegreerde manier samen te werken met professionele vertaalbureaus. Hiervoor werd een speciale account, de Translator Account (zie fig.1), in het leven geroepen. Deze geeft de vertaler toegang tot een beperkt gedeelte van het systeem, nl. enkel de hem toegewezen vertaalopdrachten, en de account heeft ook geen publiceerrechten, deze blijven voorbehouden aan de content administrators. Fig. 1 de translator account met beperkte toegangsrechten Een vertaalopdracht toekennen aan een vertaler. Eens een translator account is aangemaakt is het toekennen van een vertaalopdracht heel eenvoudig: Log in als administrator en ga naar de te vertalen content in de Content Sectie. Klik rechts op de node die vertaalt moet worden Klik op het ' Send To Translation ' menu item (zie fig.2) Selecteer in het dialoogvenster de vertaler aan wie je de vertaalopdracht wil toekennen. Selecteer de taal waarnaar de content moet vertaald worden. Optioneel kun je ook de subpagina's selecteren en commentaar aan de vertaalopdracht toevoegen. Fig. 2 Send To Translation Fig. 3 Een vertaalopdracht toekennen aan een vertaler Indien je dit wenst kun je ook de volledige website toekennen in een vertaalopdracht. Je hoeft dan enkel de rootnode van de website te selecteren voor je vertaalopdracht. Het taakvenster van de vertaler Wanneer de vertaler, aan wie de vertaalopdracht werd toegekend, inlogt met zijn Translator account, dan ziet hij in de Vertaal Sectie de aan hem toegekende vertaalopdrachten (fig.3): Fig. 4 Details van een vertaalopdracht De vertaler ziet in dit venster de content die moet vertaalt worden, alsook de commentaar die de content administrator hierbij gevoegd heeft. De vertaler kan nu het Xml bestand downloaden naar zijn lokale schijf door te klikken op de 'Download' link. Deze Xml is volgens industriële standaarden opgesteld en kan in alle courante vertaalsoftware programma's geopend worden. Umbraco verwerkt de vertaling en toont de vertaler dat de pagina werd geüpdated en bewaard. De vertaler heeft ook de mogelijkheid om een preview van de vertaalde pagina te zien (fig.5): Fig. 5 Bevestiging van geüploade vertaling Een vertaling nakijken en publiceren Zoals reeds aangegeven kan de vertaler enkel vertaalde pagina's uploaden maar niet publiceren. De volgende stap in de Translation Workflow is dan dat de content administrator de vertalingen nakijkt en publiceert. In de content tree zijn vertaalde, maar nog niet gepubliceerde pagina's, aangeduid met een oranje asterisks: Fig. 6 De oranje asterisks geeft aan dat de pagina gewijzigd is maar nog niet werd gepubliceerd Als de vertalingen zijn nagekeken hoeft de content administrator enkel te klikken op 'Save & Publish' om de veranderingen zichtbaar op de website te maken. Conclusie Hierbij zijn we aan het einde van onze reeks over meertalige websites ontwikkelen met Umbraco gekomen. Het Umbraco CMS laat toe om een multilanguage structuur te kiezen die het best past bij jou website. Via de Relations API kunnen meertalige alternatieven van een content pagina met elkaar gelinkt worden zodat men bij selectie van een andere taal dezelfde pagina in de geselecteerde taal te zien krijgt. We zijn ten slotte ook dieper ingegaan op de ingebouwde Translation Workflow die het mogelijk maakt op een geïntegreerde manier binnen de Umbraco Backoffice samen te werken met professionele vertaalbureaus. http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/september/multilanguage-websites-met-umbraco-deel4/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/september/multilanguage-websites-met-umbraco-deel4/ do, 08 september 2011 19:11:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel1/ In deze blogpost reeks gaan we dieper in hoe je met Umbraco een multilanguage website kan ontwikkelen en onderhouden. In deel 1 bespreken we de overwegingen die je moet maken en de benaderingen die er zijn om een multilanguage website te implementeren. In deel 2 zullen we dan stap voor stap een multilanguage website aanmaken in Umbraco. In deel 3 gaan we gebruikmaken van de Relations API en implementeren we een taalkeuze element zodat de bezoeker tussen taalversies van een pagina kan switchen. Informatie in meerdere talen aanbieden is belangrijk, zeker voor een land als België waar meerdere talen gesproken worden, maar ook voor ondernemingen en organisaties die internationale markten willen aanboren. Naast het bereiken van een internationale markt heeft een meertalige website ook als voordeel dat elke taalversie door Google geïndexeerd wordt. Webmove, wordt bijvoorbeeld geïndexeerd op 'webdevelopment' én 'webontwikkeling'. Multilanguage = multiwork Als webeigenaar dien je wel te realiseren dat een multilanguage website ook een hogere werklast en meerkost betekent. Voor elke taalversie moet immers content worden aangereikt, en ook bij updates moet dit telkens voor elke taalversie van je website gebeuren. Technisch is een multilanguage website een meer complex gegeven dan een website in één taalversie. Gelukkig werd Umbraco van bij het begin ontwikkeld met meertaligheid in het achterhoofd . Het Umbraco framework biedt enkele krachtige tools en functionaliteiten om multilanguage websites te ontwikkelen en te beheren: Het Umbraco CMS is gebouwd in ASP.NET (Microsoft) en kan de globalization en localization features van dit framework benutten Het Umbraco Framework beschikt over een Relations API die het mogelijk maakt om wederzijdse relaties tussen anderstalige pagina's aan te maken. Dictionary items maken het mogelijk om verschillende taalvarianten op te geven voor statische tekst en termen. Het Umbraco CMS bevat een translator account en Translation Workflow die samenwerking met professionele vertaalbureaus integreert in het Umbraco CMS. Vooraleer we van start gaan met het stap-voor-stap opbouwen van een multilanguage website, wil ik twee benaderingen toelichten die worden toegepast bij de ontwikkeling van een multilanguage website: Structurele benaderingen voor een multilanguage website Er zijn hoofdzakelijk twee grote benaderingen om een multilanguage website te ontwikkelen: Multi-site structuur 1:1 structuur (lees "one on one") Multi-sites structuur Bij een multi-sites structuur wordt binnen één Umbraco installatie, voor elke taalversie een rootnode aangemaakt: nl-BE                 pagina1                 pagina2                 ... fr-BE                 pagina1                 pagina2                 ... 1:1 structuur. Bij deze benadering is er slechts één website en bevat elk document alle vertaalde velden bij dit document. Afhankelijk van de taalkeuze van de eindgebruiker wordt dan dynamisch de vertaalde velden en segmenten getoond. Bij deze structuur is er een strikte binding tussen alle taalversies van een pagina. Meer informatie over het implementeren van een 1:1 multilanguage in Umbraco Een package die een 1:1 oplossing implementeert in een Umbraco installatie is de Polyglot package van Dimitri Kourkoulis ( http://our.umbraco.org/projects/backoffice-extensions/polyglot ) multi-sites vs 1-1 structuur Beide benaderingen hebben voor- en nadelen. Op de discussiefora worden verwoede discussies tussen voor- en tegenstanders gevoerd . Het merendeel van de multilanguage websites die met Umbraco ontwikkeld worden implementeren de multi-site structuur. Dit is de geprefereerde methode waarvoor het Umbraco CMS ingebouwde functionaliteit voorziet.  Het grote voordeel bij de multi-site structuur is dat er geen relatie wordt opgedrongen tussen de verschillende taalversies van een bepaalde pagina. Een content beheerder kan bijvoorbeeld beslissen om geen Engelstalige variant van een Nederlandstalige pagina te voorzien omdat dit om bepaalde redenen niet relevant is, of omdat de Engelstalige content voor deze informatie nog niet beschikbaar is. Webmove koos er voor om haar multilanguage website te implementeren met een multi-site structuur: Fig.1 Een multi-site structuur in de Umbraco Backoffice Volgende week bekijken we stap voor stap hoe je een multilanguage website ontwikkelt met Umbraco http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel1/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel1/ vr, 12 augustus 2011 13:57:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel2/ Deze blogpost reeks behandelt mogelijkheden en tools die Umbraco CMS biedt bij het ontwikkelen van een multilanguage website. In het eerste deel zagen welke structurele benaderingen er zijn om een multilanguage website in Umbraco aan te maken. In dit deel steken we de handen uit de mouwen en maken we stap voor stap een multilanguage website aan bestaande uit twee taalversies, Engels en Nederlands. Instellen van de taal Vooraleer je kunt beginnen met het implementeren van een multilanguage website in Umbraco, dien je op te geven welke talen je in je website wilt gebruiken. In de settings-sectie bevindt zich de 'Languages'-node. Standaard bij de installatie is English (United States) als taal geïnstalleerd: fig. 1 De Languages-node in de Settings sectie Je kunt hier gemakkelijk een taal aan toevoegen door rechts te klikken op 'Languages' en een taal te selecteren uit de dropdownlist: Fig.2 Selecteer een taal uit de Languages-dropdownlist Het resultaat is dat een tweede taal werd toegevoegd aan de Languages -node: Fig.3 Een tweede taal is toegevoegd aan de Languages-node Aanmaken van de default website Vervolgens maak ik de eerste rootnode met onderliggende childnodes aan in de content tree: Fig.4 De rootnode en childnodes voor de Nederlandstalige website Als de Nederlandstalige versie volledig af is kopieer ik deze structuur. Dit kan heel eenvoudig door rechts te klikken op de Nederlandstalige rootnode ('Startpagina') en de ' Copy ' functie te selecteren. Kopieer de rootnode vervolgens naar de Content node in de Content tree. Als je wil dat er een wederzijdse relatie tussen de anderstalige pagina's wordt aangemaakt, dien je ook de checkbox ' Relate copied items to original ' aan te vinken: Fig.5 Kopieer de rootnode 'Startpagina' naar de Content-node Als de 'Relate copied items to original' checkbox is aangevinkt, worden de wederzijdse relatie tussen de oorspronkelijke pagina en de gekopieerde pagina weggeschreven naar de umbracoRelation tabel in de database. In deel drie zullen we zien hoe we deze functionaliteit kunnen aanwenden om gebruikers onmiddelijk naar een anderstalige versie van een pagina te leiden wanneer ze de taalversie van een pagina wijzigen via een taalkeuze element. Vervolgens kun je de naam van de rootnode en de onderliggende pagina's voor de nieuwe website aanpassen. Het resultaat kun je zien in fig. 6: Fig.6 Een multi-site structuur met Nederlandstalige en een Engelstalige website We hebben de talen opgegeven en onze multi-site structuur geïmplementeerd. We moeten nu enkel het Umbraco framework duidelijk maken welke taalinstellingen we toegepast willen zien op welke website in onze structuur. Dit doen we via de ' Manage Hostnames ' functie. Manage Hostnames Rechtsklik op een rootnode in de Content tree. Klik vervolgens op 'Manage Hostnames': Fig. 7 Afzonderlijke hostnames instellen via de 'Manage hostnames' functie In het Manage hostnames dialoogvenster kun je twee instellingen opgeven, de domeinnaam en de gewenste taal : Fig.8 creëer een domeinnaam voor je rootnode en selecteer de gewenste taalinstelling Domain In een testomgeving kun je in het Domain-veld gerust een nep domeinnaam opgeven. In productie kun je, indien gewenst, ook een subdomein naam opgeven, bijv. nl.webmove.be . Contacteer voor het aanmaken van een subdomein je netwerkbeheerder of ISP. Language Selecteer in de Language dropdownlist de taalinstellingen die je wil toepassen op je website rootnode. Zoals eerder aangehaald is Umbraco gebouwd bovenop het ASP.NET framework , en maakt het gebruik van de localization en internationalization functionaliteit van ASP.NET. Dit betekent dat ook datums, getalnotitatie, munteenheid en alle andere cultuurgebonden informatie correct zullen weergegeven worden voor je rootnode pagina en alle onderliggende childnode pagina's. De Language-instelling is ook belangrijk bij het gebruik van Dictionary Items Dictionary items Het probleem bij websites met een content management systeem, is dat de content beheerder meestal enkel toegang heeft tot de content die is ingevoerd via het CMS. Een website heeft echter ook vaak statische inhoud die niet kan beheerd worden via de 'Content' sectie. Het gaat hier voornamelijk over statische tekst in Umbraco Templates of scriptbestanden (Xslt-bestanden, Razor-scripts). Umbraco heeft een handige oplossing, de zogenaamde Dictionary Items. Wanneer je verschillende talen hebt toegevoegd aan je website, kun je voor alle statische tekst, bijv. 'Laatste Nieuws' een Dictionary item aanmaken en voor elke taalversie een variant voor deze tekst opgeven: fig.9 Geef voor elke Dictionary Item de verschillende taalvarianten op Je kunt dan vervolgens vanuit je Umbraco Template of je Umbraco scriptbestanden het Dictionary Item aanroepen: <h2><xsl:value-of select="umbraco.library:GetDictionaryItem('LatestNews')"/></h2> Het Umbraco framework zal vervolgens de juiste taalversie van deze Dictionary Item tonen aan de gebruiker: Fig.10 op de Nederlandstalige website luidt de statische tekst 'Laatste Nieuws'   Fig 11 Op de Engelstalige site luidt de statische tekst 'Latest News' Met behulp van de Dictionary Items, kan werkelijk elk stukje tekst op website gelocalized worden. We zijn nu klaar met de implementatie van onze multi-site structuur. Door het toevoegen van talen, het opgeven van domeinnamen en het toewijzen van die talen voor elke website via de Manage Hostname functie vermijden we naamsconflicten tussen pagina's met eenzelfde naam, en worden localizatie en cultuurgebonden informatie (datums, getalnotatie, munteenheid, etc ... ) automatisch toegepast. Met behulp van Dictionary Items worden ook teksten en labels die niet via het CMS beheerd worden dynamisch aangepast aan de juiste taalversie. In het derde deel zullen we dieper ingaan op de Relations functionaliteit, en hoe we deze functionaliteit kunnen aanwenden om alle taalversies van een bepaalde pagina aan elkaar te linken zodat een eindgebruiker bij wijzigen van de taalkeuze onmiddellijk naar het anderstalige equivalent wordt geleid. http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel2/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel2/ vr, 19 augustus 2011 10:01:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel3/ Deze blogpost reeks behandelt mogelijkheden en tools die Umbraco CMS biedt bij het ontwikkelen van een multilanguage website. In het eerste deel zagen welke structurele benaderingen er zijn om een multilanguage website in Umbraco aan te maken. In deel twee zijn we dan begonnen met het stap voor stap aanmaken van een multilanguage website. In dit derde deel gaan we gebruikmaken van de Relations API en implementeren we een taalkeuze element zodat de bezoeker tussen taalversies van een pagina kan switchen. Relations API Vaak keert men bij multilanguage sites terug naar de homepage van een andere taalversie, wanneer een andere taal wordt geselecteerd. Zou het niet veel handiger zijn, dat wanneer men op de 'Diensten'-pagina zit, men automatisch op de 'Services'-pagina terecht komt wanneer men de Engelstalige versie selecteert? Met de Relations functionaliteit in Umbraco kan dit scenario perfect gerealiseerd worden. Via de Relations API kunnen enkelvoudige of wederkerige relaties tussen twee objecten (pagina's, documenten, media, etc ...) gelegd worden. Deze relaties worden opgeslagen in de umbracoRelation tabel in de database. In deel twee zagen we hoe we bij het kopiëren van de Nederlandstalige rootnode de checkbox 'Relate copied items to original' kunnen aanvinken. Op dat moment worden alle relaties tussen de gekopieerde nodes en de orginele nodes weggeschreven naar de umbracoRelation tabel: fig.1 De umbracoRelation tabel in de database Een Language Selector implementeren in Umbraco Het enige wat we nu nog nodig hebben is een component die het mogelijk maakt voor de gebruiker om een andere taal te selecteren. Tim Geyssens beschrijft in zijn blog hoe je zelf zo'n Language Selector kunt implementeren in je Umbraco website ( http://www.nibble.be/?p=32 ). Webmove gebruikt echter de uitstekende Goyaweb Multilanguage Tools , ontwikkelt door Yannick Smits. Deze language selector bevat ook een Razor-script die automatisch naar de anderstalige pagina switched indien er een relatie bestaat in de Relations table. Je hebt ook drie weergave mogelijkheden voor de Language Selector: een dropdownlist, textuele links of afbeeldingen van vlaggetjes: fig.2 weergave mogelijkheden voor de Language Selector van de Goyaweb Multilanguage Tools na installatie van de package hoef je enkel een macro aan je template toe te voegen: < umbraco:Macro  RenderType = "Flags"  Alias = "MLLanguageSwitcher"  runat = "server" > </ umbraco:Macro > De bezoekers kunnen nu een ander taalversie van een pagina selecteren door op de vlaggetjes van de taalkeuze component te klikken: fig.3 De implementatie van de taalkeuze component op de website Een andere handige package is de Vizioz Relationship package van Chris Houston. Deze package voegt een document type toe via dewelke je de relaties tussen pagina's kunt beheren in de Umbraco Backoffice. We zijn nu klaar met onze multi-site structuur voor onze multilanguage website. We kunnen onze anderstalige websites onafhankelijk van elkaar beheren, en waar nodig relaties leggen tussen de onderlinge anderstalige pagina's. Gebruikers kunnen via een Language Selector de gewenste taal selecteren. In het vierde en laatste deel zullen we de ingebouwde Translation Workflow in Umbraco nader bekijken. Deze Translation Workflow maakt het mogelijk om de samenwerking met professionele vertaalbureaus te integreren in de Umbraco Backoffice. http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel3/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/august/multilanguage-websites-met-umbraco-deel3/ zo, 28 augustus 2011 10:05:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/oktober/verbeteren-performantie-van-website-deel-1/ In deze blogpost reeks bespreken we hoe je de performantie van je website kunt verbeteren In de eerste blogpost in deze reeks krijg je een overzicht van het belang van snelle download tijden van je webpagina's, de vuistregels van performantie optimalisatie en bespreken we ook enkele tools en services voor het meten van de performantie van je website. Waarom de performantie van je website optimaliseren? Het optimaliseren van de performantie van je website is hoofdzakelijk voor twee redenene van belang: Snellere pagina download tijden Beperking bandbreedte verbruik Snellere pagina download tijden Snellere download tijden van je webpagina's is niet enkel van belang voor je bezoekers - waarvan we weten dat ze je website zullen verlaten als ze te lang moeten wachten vooraleer een webpagina gedownload is. Snelle download tijden van je webpagina's is ook van belang voor de indexering van je webpagina's door Google. Google maakte in 2008 officieel bekend dat het voortaan ook de download tijden van de pagina's mee in rekening zou brengen bij het berekenen van de kwaliteitsscore van de webpagina's die het indexeert ( lees het officiële bericht van Google ). Beperking bandbreedte verbruik Het beperken van het dataverkeer tussen de clients (browsers) en je server kan de belasting op je server reduceren en je aldus geld besparen. In volgende blogposts zullen we bijvoorbeeld zien hoe je het aantal requests van de clients naar je server kunt verminderen. Vuistregels voor de performantie van je website Er zijn drie vuistregels: Reduceer het aantal http requests Verstuur zo weinig mogelijk Verstuur het zo infrequent als mogelijk Reduceer het aantal http requests Om de performantie van je website te verbeteren moet je proberen het aantal requests van de browser naar de server te beperken. Technieken hiervoor is het bundelen van verschillende bestanden in één bestand en het gebruik van sprites voor je afbeeldingen. In een volgende blogpost in deze reeks over web performantie zullen we dieper op deze technieken ingaan. Verstuur zo weinig mogelijk Technieken hiervoor zijn: Minificatie van je CSS Stylesheet bestanden en je Javascript bestanden Configureren van http compressie op je webserver Optimaliseren van je afbeeldingen In een volgende blogpost gaan we dieper in op deze technieken. Verstuur het zo infrequent als mogelijk Hiervoor bestaan er hoofdzakelijk twee technieken: Instellen van Content Expiration headers Gebruik van een Content Delivery Network (CDN) In een volgende blogpost behandelen we hoe je content expiration headers in IIS kunt instellen om het aantal requests van browsers naar je webserver te beperken. We bekijken ook enkele CDN's. Dit zijn globale netwerken van webservers die je eigen webserver ontlasten. Een ander voordeel is dat deze servers zich geografisch gezien dichter bij je bezoekers bevinden waardoor deze de content van je website sneller kunnen downloaden. Meten, meten en meten Vooraleer je van start gaat met het optimaliseren van de performantie van je website moet je eerste de performantie meten voor de verbeteringen en de problemen localiseren die zorgen voor tragere download tijden van je webpagina's. Nadat je de problemen gelocaliseerd hebt en hiervoor de nodige aanpassingen hebt aangebracht dien je terug de performantie te meten en te onderzoeken of je remedies werkelijk een oplossing zijn voor deze performantie problemen. In het nu volgende bekijken we enkele tools waarmee je de performantie van je website kunt meten. Fiddler Een van de meest gebruikte tools voor het analyseren van de performantie van je website is Fiddler. Fiddler werd ontwikkeld door Microsoft ingenieur Erik Lawrence en maakt het mogelijk om alle trafiek tussen de browser en de webserver te analyseren. Fiddler beschikt over enkele aardige features zoals de Transfer Timeline die een visuele weergave geeft van alle requests naar de server en de tijd nodig om deze bestanden te downloaden. Afbeelding 1: de Transfer Timeline in Fiddler meer informatie: www.fiddlertool.com Network Monitor (Microsoft) Network Monitor is een gratis tool van Microsoft. Het verschil met Fiddler is dat Fiddler enkel de http trafiek analyseert terwijl Network Monitor alle netwerk protocols analyseert. Meer informatie: http://www.microsoft.com/download/en/details.aspx?id=4865#overview Page Speed (Google) Page Speed is een open source project voor het meten van de performantie van je website. Het leuke aan Page Speed is dat het aanbevelingen geeft voor het verbeteren van de performantie van je website. Afbeelding 2: Google Page Speed als uitbreiding voor de Chrome browser Page Speed is beschikbaar als een uitbreiding voor de Chrome browser en als een online service. Meer informatie: http://code.google.com/speed/page-speed/ LogParser (Microsoft) LogParser is een andere Microsoft tool voor het analyseren van je IIS log files. Je kunt hiervoor SQL query achtige instructies invoeren en het resultaat exporteren naar .CSV, XML en vele andere formaten. Meer informatie: http://www.iis.net/community/default.aspx?tabid=34&g=6&i=1976 LogParser is een tool die gebruikt wordt via de Command line. Er bestaan ook tools met een grafische interface bovenop LogParser zoals LogParser Lizard van Lizard Labs  ( http://www.lizard-labs.net/log_parser_lizard.aspx ) Third party services Keynote and Gomez  zijn commerciële diensten voor lange termijn performantie trends die ook benchmarks ten opzichte van andere grote websites uitvoeren. Keynote: http://www.keynote.com/products/web_performance/web-performance-testing.html Gomez: http://www.gomez.com/instant-test-pro/ Samenvatting In deze eerste blogpost in de reeks over de optimalisatie van de performantie van je website werd een overzicht gegeven van de vuistregels en de technieken voor het verbeteren van de performantie. Hierbij werd het belang van het meten benadrukt, meten zowel voor als na het optimaliseren van de performantie. Ten slotte werden enkele tools voor het meten van de performantie besproken. In de volgende blogpost in deze reeks zullen we dieper ingaan op de performantie maatregelen die je kunt nemen op het niveau van de webserver. Hierbij zullen we technieken behandelen zoals http compressie, het instellen van Content Expiration headers en het gebruik van een Content Delivery Network (CDN). http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/oktober/verbeteren-performantie-van-website-deel-1/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/oktober/verbeteren-performantie-van-website-deel-1/ zo, 30 oktober 2011 17:14:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/july/webmove-op-code-garden-2011/ Webmove was aanwezig op het jaarlijkse Umbraco CMS event, Code Garden, dat doorging van 15 tot 17 juni 2011 in Kopenhagen (Denemarken). Codegarden != congres Code Garden is de hoogmis voor de community rond het Umbraco CMS. De organisatoren noemen Code Garden bewust geen congres maar een festival. Alhoewel er op Code Garden veel op te steken valt is het boven alles een sociaal evenement waar Umbraco enthousiastelingen van over gans de wereld elkaar kunnen ontmoeten en ervaringen uitwisselen. Om het sociale aspect van dit event te onderstrepen worden ook een aantal eerder ludieke dan technische activiteiten georganiseerd. Zo was er op het einde van de eerste festivaldag een boottocht gepland langs de kanalen van Kopenhagen. 300 deelnemers werden verdeeld over twee toeristische rondvaart boten die ruim voorzien waren van drank en orgelmuziek van Deens orgelfenomeen Ole Erling (dit laatste met dank aan Umbraco-stichter Niels Hartvig). Uiteraard voeren we ook langs de beroemde "kleine zeemeermin" die inderdaad vrij klein was. De tweede dag van het festival werd afgesloten met wat de organisatie zelf omschrijft als een "infame" bingo. Het infame zat hem dit keer in een dwerg Elvis die ons de regels van het spel moest uitleggen. Ook nogal infaam was de Deense 'marching band' die uitsluitend uit vrouwen bestond en tot ieders jolijt hun marcheer talenten tentoon spreidde op strakke AC/DC riffs. Het jolijt werd enigzins getemperd toen de marching band maar bleef rondmarcheren. Een incident die ondertussen is uitgegroeid tot een Umbraco inside joke, en zelfs zijn weg gevonden heeft naar de Umbraco package uBrokeIt. Om het infame karakter van de bingo volledig te verzekeren werd ook een kussengevecht georganiseerd tussen twee rivaliserende clans, de Xslt Rebel Alliance en The Razor Empire. Ondergetekende die in het kamp van The Razor Empire zit, en ondertussen ook zijn eerste Razor-macro gecodeerd heeft, werd verzocht zich naar een apart zaaltje samen met 60 andere clanleden te begeven. Daar speelde een echte Deense metal band loeiharde muziek en zorgde stroboscooplicht ervoor dat ik de indruk kreeg mij door de poorten van de hel te begeven. Op de grond lagen kussens. Aanvankelijk stelde ik mezelf gerust dat die kussens er waren om al zittend het gastoptreden te volgen, maar deze hoop bleek ijdel toen men de kussens begon rond te delen. Na enige aarzeling bij beide clans overwon uiteindelijk iemand van The Xslt Rebel Alliance zijn schroom en stormde naar de clan aan de overkant waardoor het hek volledig van de dam was. Umbraco 5: nog meer flexibiliteit en schaalbaarheid Men zou zich nu stilletjesaan kunnen beginnen afvragen of het hier wel om een software evenement ging, dus laat ik misschien ook iets vertellen over de technische sessies. Deze Code Carden stond bijna volledig in het kader van Umbraco 5, de nieuwe Umbraco release die in de steigers staat. Umbraco 5, waarover meer informatie zal volgen in latere blogs, is wat men een major release noemt. En in dit geval is deze term meer dan toepasselijk. Het Umbraco hoofdkwartier (HQ) heeft geopteerd om de kern van het systeem volledig opnieuw op te bouwen. Dit moet Umbraco nog meer flexibel en uitbreidbaar te maken, en klaar te zijn voor de technische vernieuwingen die de volgende jaren ongetwijfeld op ons afkomen. De meest ingrijpende verandering in Umbraco 5 is dat men overstapt van ASP.NET Webforms technologie naar het recentere ASP.NET MVC. Het is niet mijn bedoeling om in deze blog dieper in te gaan op ASP.NET MVC. Laat mij volstaan met te zeggen dat er in ASP.NET MVC een grotere architecturale scheiding is tussen de verschillende lagen en componenten van een webapplicatie (het zogenaamde Model-View-Controller pattern), en dat webapplicaties op basis van ASP.NET MVC ook beter getest kunnen worden en dus meer robuust zijn dan webapplicaties gebouwd met ASP.NET Webforms. Voor meer informatie over ASP.NET MVC verwijs ik graag door naar de officiële website van Microsoft: http://www.asp.net/mvc De toekomst: meer ondersteuning van Microsoft Met andere woorden, de toekomst van het Umbraco CMS ziet er zeer rooskleurig uit. Op dit moment van schrijven is het Umbraco CMS reeds het meest populaire CMS framework in Europa wat betreft CMS systemen gebaseerd op Microsoft .NET technologie. Ook mogen we in de toekomst nog meer ondersteuning van Microsoft gaan verwachten. Dat de softwaregigant in Redmond (Verenigde Staten) veel potentieeel ziet in het Umbraco CMS mag blijken uit het feit dat ze besloten hebben om het volledige ontwikkelaarsnetwerk, MSDN.com, aan te bieden via het Umbraco CMS. Om je een idee te geven, MSDN.com heeft meer dan 200 miljoen pageviews per maand, 100 miljoen unieke bezoekers per maand, meer dan 30.000 webpagina's, en meer dan 40.000 web artikelen. De website heeft ook gelocaliseerde versies in meer dan 40 regio's en ondersteunt meer dan 40 talen. Ten slotte wordt MSDN.com door meer dan 300 site managers geëditeerd en onderhouden. Het feit dat Microsoft voor een project van dergelijke omvang kiest voor het Umbraco CMS zegt veel, zoniet alles, over de technische superioriteit en de maturiteit van dit systeem. Alle afbeeldingen werden genomen door Douglas Robar (@ Percipient Studios) http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/july/webmove-op-code-garden-2011/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/july/webmove-op-code-garden-2011/ ma, 11 juli 2011 14:54:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/november/verbeteren-performantie-van-website-deel-2/ Http Compression In deel 1 van de blogpost reeks over het verbeteren van de performantie van je website heb ik gesteld dat één van de vuistregels van web performantie is om 'zo weinig mogelijk te versturen' van de server naar de browser. Een manier om dit te bewerkstelligen is het gebruiken van http compression op je webserver. Zoals we later zullen zien is dit heel gemakkelijk in te stellen op IIS 7 Wat is http compression? Http compressie reduceert de omvang van de bestanden die verstuurd worden van de server naar de browser door deze bestanden in een compressie formaat te versturen. De server analyseert de "Accept Encoding" header in de request van de browser, dit is de manier waarop de browser aan de server te kennen heeft dat het gecompresseerde content kan verwerken. Als de server deze header aantreft zal het in zijn response de content in gecompresseerd formaat versturen. Als de server een request ontvangt waarbij de browser geen gecompresseerd formaat ondersteunt zal het zijn response in een normaal formaat versturen. Http compression in IIS 7 Http compression is ingebouwd vanaf IIS 7. Als je nog steeds IIS 6 gebruikt kun je deze blogpost raadplegen om http compressie in te schakelen met IIS 6 ( http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx ) Op IIS 7 is standaard enkel static compression ingeschakeld. Static compression betekent dat IIS bij de eerste request de statische bestanden zoals Javascript en CSS bestanden zal compresseren, en die vervolgens gecached zal bewaren zodat het bij een volgende request deze gecachete en gecompresseerde bestanden kan aanbieden. Bij Dynamic compression wordt ook dynamische content gecompresseerd. Dat is ten koste van een kleine belasting, ongeveer 1%, op de processor, maar als je zo krap zit aan rekenkracht heb je een groter probleem dan dynamische compressie. Bovendien kun je IIS 7 opdragen om dynamische compressie uit te schakelen van zodra de processor belasting een bepaalde grens overschrijdt. Http compression demo met IIS 7.5 Om de voordelen van IIS compressie te demonstreren gaan we een kleine test doen. Ik heb een testsite geïnstalleerd en static en dynamic compression op de webserver uitgeschakeld. Als ik de Google Page Speed test uitvoer op de homepage, krijg ik een Page Speed score van 76/100 (zie afbeelding 1). De rode indicator geeft aan compressie een kritische factor voor de performantie is: "If you compress your files with gzip, their filesize will be decreased with 104.4 KiB (a gain of 71%)" Afbeelding 1 Met http compression uitgeschakeld, bedraagt de  Page Speed score 76/100 Voer de volgende stappen uit om compression in te schakelen in IIS: Open IIS 7.5 Kies je website in de boomstructuur Dubbelklik op 'Compression' in het Features pane Vink zowel 'enable static content compression' als 'enable dynamic content compression'  aan (zie afbeelding 2) Klik  'apply' in het Actions Pane om de aanpassingen op te slaan Afbeeling 2 Static en dynamic content compression inschakelen in IIS 7.5 Wanneer ik nogmaal de Page Speed test laat uitvoeren levert dit een enorme snelheidswinst op. In plaats van 76/100 krijgt mijn homepage nu een Page Speed score van 91/100  (zie afbeelding 3) Afbeelding 3 Na het inschakelen van http compression op IIS, krijgt de homepage een Page Speed score van 91/100 Conclusie Het inschakelen van static en dynamic compression in IIS levert een enorme reductie op van de grootte van de bestanden die de server naar de browser stuurt. Dit resulteert niet enkele in een aanzienlijke performantiewinst, maar ook in een beperkter verbruik van de bandbreedte. Nu dat alle grote browsers http compressie ondersteunen is er eigelnlijk geen goede reden meer om http compressie niet in te schakelen. http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/november/verbeteren-performantie-van-website-deel-2/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/november/verbeteren-performantie-van-website-deel-2/ zo, 06 november 2011 14:07:00 Anthony Candaele http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/november/verbeteren-performantie-van-website-deel-3/ Content Expiration In deel 1 van deze reeks over het verbeteren van de performantie van je website, zagen we drie vuistregels van web performantie: Reduceer het aantal http requests Verstuur zo weinig mogelijk Verstuur het zo infrequent als mogelijk In deze blogpost gaan we dieper in op een techniek om data van de server naar de browser zo infrequent als mogelijk te versturen. Zoals bij http compressie is dit ook een maatregel op het niveau van de infrastructuur, meer bepaald de webserver. Waarom Content Expiration? Wanneer een bezoeker een webpagina op je website consulteert, slaat de browser bestanden zoals afbeeldingen, css en Javascript bestanden op de browser cache. Men zou verwachten wanneer de webpagina opnieuw wordt opgevraagd, de browser deze bestanden onmiddellijk laadt vanuit de cach, maar dit is helaas niet het geval. De browser stuurt eerst een request naar de server om te controleren of de desbetreffende files in zijn cache niet gewijzigd zijn op de server. Indien dit het geval is stuurt de server de file opnieuw naar de browser, indien de file niet gewijzigd is antwoord de server met een 304 status code. Dit is hoe een server de browser te kennen heeft dat de inhoud van een file niet gewijzigd is. Als de file niet gewijzigd is worden dus heel wat onnodige requests en responses verstuurt voor bestanden die onmiddellijk vanuit de browsercache geladen zouden kunnen worden. Wat we in het nu volgende zullen doen is de browsercache beter benutten met behulp van content expiration. Een voorafgaande test Om het effect van het instellen van content expiration aan te tonen voer ik een Page Speed test uit op mijn website: Afbeelding 1 Page Speed test voorafgaand aan het instellen van content expiration De Page Speed Score is 91/100. Dit is hetzelfde als mijn vorige test toen ik http compressie had ingesteld (lees mijn blogpost over http compressie ). Content expiration instellen op een webfolder Zoals je in afbeelding 1 kunt zien, geeft de Page Speed tool aan om browser caching in te stellen voor de webfolders 'css' en 'scripts'. Ik zal voor deze demo content expiration instellen op de 'css' folder: Ik open IIS 7.5 en browse naar de css folder van mijn website In het Functie Paneel dubbelklik ik op 'HTTP Response Headers' In het Actie Paneel klik ik op de link 'Set Common Headers' Het dialoogvenster 'Set Common HTTP Response Headers' verschijnt en ik vink 'expire web content' aan In hetzelfde dialoogvenster kies ik het 'After' keuzerondje en vul 365 (dagen) in bij 'expiration period' (zie afbeelding 2) Afbeelding 2 de content expiration headers voor de css folder worden ingesteld op 365 dagen Test na het instellen van de content expiration headers Als ik een nieuwe Page Speed test uitvoer op de homepage van mijn test site, stel ik vast dat de Page Speed Score gestegen is van 91/100 naar 96/100. Het indicator licht voor browser caching staat nu op groen en de suggestie om de css folder te cachen is verdwenen (zie afbeelding 3). Afbeeling 3 Na het instellen van content expiration op de css folder is de Page Speed Score gestegen naar 96/100 Een nader onderzoek met Fiddler Om een meer gedetailleerd overzicht te krijgen van het dataverkeer tussen mijn browser en de server gebruik ik Fiddler . Vooraleer ik de content expiration header instelde op de css folder, kon ik in Fiddler verschillende 304 status codes zien voor de files in de css en scripts folder (zie afbeelding 4). Afbeelding 4 Fiddler toon de 304 status responses van de server aan de browser Zoals ik voorheen betekent een 304 status code dat de inhoud van het bestand op de server niet gewijzigd is. Nadat ik de content expiration op de css folder heb ingesteld kan ik in Fiddler zien dat al de bestanden in deze folder een max-age header hebben van 31536000 seconden (zie afbeelding 5). Dit is uitgerekend, 365 dagen. De browser laadt deze bestanden nu direct vanuit de browsercache zonder eerst een request naar de server de sturen om te weten of dit bestand gewijzigd is op de server. Dit is de reden waarom de Page Speed Score gestegen is van 91/100 naar 96/100 Afbeeling 5 de bestanden van de css folder worden voor 365 dagen gecached (max-age=31536000) Wat als mijn bestand op de server gewijzigd is? De lezer kan zich afvragen wat er gebeurd als een gecached bestand gewijzigd is op de server. De browser zal in dit geval nog steeds het oude bestand vanuit de cache laden. Een manier om de browser duidelijk te maken dat het bestand gewijgid is en dat hij een nieuw bestand moet cachen, kunnen we onze bestanden voorzien van volgnummers. De browser zal dan zien dat er nieuwe bestanden zijn, deze downloaden en ze opslaan in de browsercache. Het is natuurlijk omslachtig om elk bestand een volgnummer te geven. Daarom worden verschillende bestanden meestal gebundeld in één bestand, dit gebundelde bestand krijgt dan een volgnummer. Het bundelen van bestanden is echter een onderwerp van een volgende blogpost. Besluit Door het verstandig aanwenden van content expiration headers op onze webfolders kunnen we ervoor zorgen dat de browser gecachete bestanden onmiddellijk laadt zonder voorafgaande request naar de server. Dit is niet alleen een grote verbetering voor de performantie van onze website, maar ontlast ook de server van onnodige werk en zorgt voor minder dataverkeer. In de volgende blogpost bekijken we een andere techniek om de server minder te belasten, namelijk het gebruik van Content Delivery Networks . http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/november/verbeteren-performantie-van-website-deel-3/ http://webmove.be/startpagina/blog/startpagina/blog/blog/2011/november/verbeteren-performantie-van-website-deel-3/ zo, 13 november 2011 09:23:00