digitael.nl - design, usability en gebruikersvriendelijkheid » Blog Archive

HTTP Requests

Nog een heel belangrijk item op de optimalisatie check-list is het aantal HTTP Requests of Objecten. Met een HTTP Request wordt een connectie naar een object bedoeld wat los staat van de HTML code. Dit kan bijvoorbeeld een CSS bestand zijn, maar ook afbeeldingen of externe JavaScripts vallen hieronder. Eigenlijk dus alles wat buiten je HTML bestand valt en “ge-include” wordt in je code. HTTP Requests werken als een bottleneck voor alle browsers vandaag de dag. Hoe meer objecten, hoe slomer je site wordt.

Dit komt omdat browsers de beperking hebben maximaal 3 objecten (1 object per connectie) gelijktijdig te kunnen downloaden. Dus iedere keer als er een JavaScript, CSS file of Image moet worden gedownload op je website wordt er hiervoor 1 van de 3 beschikbare connecties gebruikt. Hoe minder objecten (HTTP Request), hoe sneller je website zal laden. Denk hier dus aan bij het bouwen van je website, want deze regel geldt ook voor images die in CSS gebruikt worden. Iedere keer als je dus een background image gebruikt zul je je dus af moeten vragen of je niet beter met HTML kleuren kan werken. Sommige ontwerpers gebruiken images bij het maken van bijvoorbeeld boxjes met een border. Dit is eenvoudig na te bootsen in HTML door een CSS class te maken met de dimensies (width/height) met daar een border element in (border: 1px solid #000000;) bijvoorbeeld.

Tip: Hier is nog een aanvulling op, maar deze is wat prijziger ;). De regel hierboven (van 3 objecten per keer) geldt per server/domein. Je voelt ‘m misschien al aankomen. Sommige websites hebben een aparte media server, deze server is vaak een wat lichtere machine (om het goedkoper te maken) waar alle images, flash, css, javascript en filmpjes vanaf worden geladen. Dit is helaas een prijzigere oplossing die niet 1,2,3 te realiseren is, maar zeker wel een goede tip om te vermelden.

CSS Optimaliseren
Bij de meeste mensen zullen de Cascading Style Sheets (CSS) er ongeveer zo uitzien:

.class1 {
background: #000000;
color: #FFFFFF;
width: 550px;
height; 430px;
margin-left: 130px;
margin-right: auto;
float:left;
}
.class2 {
background: #FFFFFF;
color: #000000;
width: 550px;
height: 430px;
margin-left: 130px;
margin-right: auto;
float:right;
}
.class3 {
background: #FFFFFF;
color: #FF0000;
width: auto;
height: 430px;
clear: both;
}

Hier is niks mis mee, het doet wat het moet doen en zoals je ziet is de code hierboven overzichtelijk en leesbaar. Hier kleeft echter ook een groot nadeel aan, namelijk: white space! Bij het schrijven van tekst is white space wel weer heel belangrijk omdat het de leesbaarheid van de tekst heel erg ten goede komt. Denk hierbij aan letter- en regelafstanden, maar ook aan breaks tussen de zinnen, hoofdstukken en paragrafen. Bij het optimaliseren van je CSS is het belangrijk dat je white spaces juist zoveel mogelijk gaat vermijden.

Ja zul je denken, maar dan zijn m’n stylesheets slecht onderhoudbaar. Ja dat klopt, maar hier moet je weer de balans in zien te vinden. Idealiter (in performance termen dan) zou je CSS code er zo uit moeten zien:

.class1{background:#000000;color:#FFFFFF;width:550px;height;430px;margin-left:130px;margin-right:auto;float:left;}.class2{background:#FFFFFF;color:#000000;width:550px;height:430px;margin-left:130px;margin-right:auto;float:right;}.class3{background:#FFFFFF;color:#FF0000;width:auto;height:430px;clear:both;}

Zoals je kan zien staat alle CSS code op 1 regel. Hier zit hem ook de truc: het maakt een browser namelijk geen fluit uit of alles op 1 regel staat of dat het duidelijk te lezen is hoe en wat je hebt gemaakt in je CSS bestand.

Bovenstaande regel bevat 3 CSS classes, moet je nagaan dat je dit voor 100 classes doet. En dan is dit nog niet eens een extreem voorbeeld van CSS optimalisatie, maar enkel het weghalen van white spaces uit je code. Nu zitten we dus met het probleem van onderhoud. Een stylesheet zoals hierboven deels is weergegeven is dus totaal niet onderhoudbaar. Je zoekt je waarschijnlijk een bult om iets aan te passen en je moet nog heel voorzichtig zijn dat er geen fouten in je CSS sluipen, waardoor je CSS bijvoorbeeld niet meer zal valideren of je de verkeerde elementen aan past. Ik ga meestal voor de gulden middenweg, omdat CSS via HTTP Compression ook kan worden ingepakt en zo klein mogelijk naar de browser wordt verstuurd. Nu is het niet zo dat HTTP Compression maar de ultieme oplossing is voor al je performance problemen. Als je je files nog kleiner maakt, resulteert dat natuurlijk ook weer in een nog kleinere gecomprimeerde file, waardoor alles nog sneller zal worden.

Mijn oplossing is als volgt, zet iedere class op een nieuwe regel:
.class1 { background: #000000; color: #FFFFFF; width: 550px; height; 430px; margin-left: 130px; margin-right: auto; float: left; }
.class2 { background: #FFFFFF; color: #000000; width: 550px; height: 430px; margin-left: 130px; margin-right: auto; float: right; }
.class3 { background: #FFFFFF; color: #FF0000; width: auto; height: 430px; clear: both; }

Dit zorgt ervoor dat je toch al die enters en lege regels vermijdt, maar dat je naar mijn mening toch die overzichtelijkheid blijft houden. Daarnaast zie je dat ik spaces tussen parameters in heb gehouden, dit heeft als reden dat je dan makkelijk dingen kunt selecteren in je editor. Sommige editors selecteren namelijk de complete regel als je dubbelklikt op 1 parameter ergens in die regel, hiermee voorkom je dat dus en kun je dus makkelijk blijven copy/pasten.

Tip 1: Geef in je HTTP Compression module aan dat je ook CSS files gecomprimeerd naar de browser wilt versturen, dit zorgt ervoor dat je CSS files aanzienlijk worden verkleind net als je HTML wat resulteert in een veel snellere laadtijd van je website.

Tip 2: Maak gebruik van overerving van je code. Overerving wil zeggen dat je iets op een zo hoog mogelijk niveau aangeeft in de boomstructuur zodat dit gegeven wordt overgegeven aan alle child classes in die CSS class. In plaats van bijvoorbeeld dit te doen:

.class1 { font-family: Arial, Verdana, Helvetica; font-size: 12px; color: #000000; }
.class2 { font-family: Arial, Verdana, Helvetica; font-size: 12px; color: #FFFFFF; }
.class3 { font-family: Arial, Verdana, Helvetica; font-size: 12px; color: #FF0000; }

De code hieronder is a) sneller om te maken en b) veel compacter omdat je maar 1 keer font-family en font-size gebruikt i.p.v. 3 keer.

body { font-family: Arial, Verdana, Helvetica; font-size: 12px; }
.class1 { color: #000000; }
.class2 { color: #FFFFFF; }
.class3 { color: #FF0000; }

Class 1, 2 en 3 zullen nu de font-family en font-size overerven van de body. Dit betekent dat de gehele body overal en altijd dezelfde font-family en font-size zal vertonen. Dus als je dit wilt overschrijven moet je dit binnen de div, span of font tags via een class of id (of style tag) doen. Nu moet je dit voorbeeld niet nemen in de zin van als je dit 1x in je code zou doen, je moet ervan uit gaan dat je dit wel 300x vermijd)t.

Tip 3: Indien je meerdere stylesheets gebruikt (stel je hebt een heleboel verschillende templates met veel CSS code) kun je deze aan elkaar hechten(stitchen in het Engels) via bijvoorbeeld PHP. Wat je dan doet is je CSS netjes maken (zoals hierboven beschreven) en een nieuwe PHP file aanmaakt in dezelfde map als je CSS files. Noem deze file bijvoorbeeld homepage.php. Wat je in deze PHP file aangeeft is het volgende:

<?
include(”header.css”);
include{”fonts.css”);
include(”color.css”);
include{”navigation.css”);
include{”homepage.css”);
include{”footer.css”);
?>

Dit zorgt ervoor dat je de “objecten” (zoals bij “Beperk het aantal HTTP Requests” is beschreven) terugbrengt van 6 naar 1. Dit betekent dat de browser van je bezoeker dus veel sneller je CSS heeft ingeladen dan dat je ze allemaal apart zou includen via de normale 6 regels:

De gehechte PHP file include je vervolgens als een standaard stylesheet link, alleen link je nu dus naar de PHP file
in plaats van de CSS. Ditzelfde kun je ook doen met Javascript, al

Afbeeldingen Optimaliseren
Hier gebruik ik zelf altijd Adobe Photoshop voor (net als de meeste mensen). Tegenwoordig maak je een mooi Photoshop documentje van je website alvorens je deze in elkaar bouwt. Je headers, backgroundjes, images met schaduwen etc. knip je los en sla je op als JPEG. De fout die hierbij vaak al meteen gemaakt wordt is dat de images als JPEG 100% quality worden opgeslagen. Dit is alleen nodig als je afbeelding heel veel verschillende kleuren bevat die dicht naast elkaar liggen (Gradients bijvoorbeeld). Je normale afbeeldingen kun je als 60% quality saven want je oog zal geen verschil zien bij foto’s die niet super gedetailleerd zijn. Dit scheelt wel vaak 30 tot 50% van de bestandsgrootte.

Tip: Een truc (of bug) die ik vorige keer heb ontdekt in Photoshop (CS3) is deze. Bewaar je afbeeldingen ALTIJD met “Save for Web”. Ik weet niet waarom dit is, maar als je een afbeelding opslaat met “Save As” is hij op de een of andere manier 2x zo groot dan als je het via “Save for Web” doet. Dit heb ik ondervonden met Photoshop CS3, hoe dit met andere Photoshop versies is weet ik niet (graag reacties indien dit hetzelfde is). Denk je maar eens in dat je 30 images in je design hebt die allemaal een paar kb te groot zijn, vooral op high traffic sites scheelt dit enorm in laadtijd als je deze kostbare kb’s eraf weet te snoepen!

Succes met optimaliseren!

Tags: HTTP Requests, Laadtijd, Optimalisatie, Snelheid

HTTP Requests

Reageer