Als je je veel bezig houdt met het maken van websites, is het belangrijk te snappen dat je je websites snel moet houden. Hierin behandel ik standaard technieken die worden gebruikt om dit zoveel mogelijk te garanderen. Waarom zou je je website willen optimaliseren op snelheid?
(afbeelding van de html5boilerplate website).
Hier zie je het verschil in laadtijd van een geoptimaliseerde pagina en een niet geoptimaliseerde. Hoe groter je websites worden, hoe groter het verschil zal zijn.
HTML5boilerplate
In deze post zal ik een hoop technieken behandelen die je kan uitvoeren om je pagina’s te optimaliseren. Je kan ook nieuwe websites maken op basis van de HTML5boilerplate, hierin zitten alle optimalisaties ingebakken die ik behandel (plus nog veel meer). Er zit een tool bij die heel snel alles voor je kan optimaliseren.
Expire Headers
Met Expire Headers kan je instellen hoelang een document gecached moet worden. Als je bijvoorbeeld je CSS bestanden voorziet van versie nummers (geautomatiseerd natuurlijk, bijvoorbeeld via HTML5boilerplate) zoals style.1.css weet je zeker dat het bestand style.1.css nooit zal veranderen, als jij iets in je code veranderd wordt het bestand style.2.css genoemd. Dit wetend kan je in je webserver (waarschijnlijk Apache) instellen dat het bestand style.1.css heel lang gecached mag worden. Je webserver geeft dit dan mee aan de client en met een beetje geluk hoeft de client maar eenmalig je CSS file binnen te trekken. Hier kan je voorbeeld code voorin je .htaccess (configuratie bestand van Apache) vinden.
Zet je JavaScript onderaan de pagina
(niet van mij, bron: onbekend)
Op een moment dat een browser een pagina laadt en hij komt JavaScript code tegen (inline, of externe scripts) wordt alles op pauze gezet totdat alle JavaScript gedownload en verwerkt is. als je JavaScript in je head zet gaat je browser aan de slag met je JS en gaat hierna pas beginnen met het renderen van de pagina. Omdat je 9 van de 10 keer alleen JavaScript gebruikt om iets op de pagina te manipuleren, doe je hier toch nog niks mee totdat de complete pagina gerenderd is. Als de browser toch op pauze moet, doe dit dan terwijl de gebruiker alvast naar je pagina kan kijken ipv. een wit scherm.
Als je je JS vlak voor je zet valideert hij netjes en oogt je pagina een stuk sneller.
Minimaliseer het aantal HTTP requests
Het grote protocol achter het web (HTTP) is redelijk oud en niet zo efficient, als je bijvoorbeeld 10 losse bestanden aanvraagt zal dit in de regel langzamer gaan dan 1 bestand dat 2x zo groot is als de losse bestanden verzamelt. Dit komt omdat er bij elke aanvraag opnieuw een connectie moet worden gemaakt. Hierdoor is het belangrijk er altijd voor te zorgen dat je zo min mogelijk links naar scripts, CSS, afbeeldingen ed. staan. Als je werkt met meerdere CSS bestanden is het in de regel altijd verstandiger om ze in 1 bestand te stoppen (ook een @import is een nieuwe HTTP request). Je hoeft je werkwijze niet aan te passen, zolang je er maar voor zorgt dat de productie versie maar een CSS bestand heeft (HTML5boilerplate doet dit automatisch voor je). Ook zijn sprites (meerdere afbeeldingen in een plaatje) beter dan losse afbeeldingen.
Bij JavaScript ligt het iets ingewikkelder omdat je soms op een bepaalde pagina een heel zwaar script nodig hebt en op de rest van je site niet. In dat geval zou ik kijken naar hoe waarschijnlijk het is dat een bezoeker op je site op die pagina komt, als dat niet waarschijnlijk is kan je dat scriptje in een los bestand zetten.
Hou je bestanden zo klein mogelijk
CSS en JS: Het is slim om je CSS voor de productie versie te minify’en (dit haalt alle witregels weg). Browsers interpreteren zulke code net zo snel als gewone CSS alleen is het bestand in een keer een stuk kleiner. Dit gaat ook op voor al je JavaScript (hier worden lange variabele en functie namen ook nog vervangen door a, b, c enz.
HTML: Standaarden VS optimalisatie
Je kan je HTML een stuk kleiner maken door bijv. accolades te laten bij id’s en classes:
VS
Browsers hebben hier geen moeite mee, maar de validator struikelt hier wel over. Dit is een moeilijke discussie aangezien de standaarden wel een kwaliteitsnorm garanderen die je anders negeert.
Test je pagina’s
Yahoo heeft een tooltje gemaakt waarmee je kan testen hoe goed je pagina voldoet aan ‘algemen optmialisatie regels’. Installeer YSlow en test hem op je websites.
Vorig jaar heb ik een project gerealiseerd waarmee gebruikers gebeurtenissen aan geolocatie’s konden koppelen (zie hier het demo filmpje). De kracht van het concept lag in de mogelijkheid voor gebruikers om zelf gebeurtenissen toe te voegen. Helaas had dat zo zijn gevolgen zoals je hieronder kan zien.
Ik heb alle spam verwijderd en het is nu niet meer mogelijk om iets toe te voegen aan het project. May she rest in peace in the eternal memory of the internet.
Dit is een oud artikel die mij erg geholpen heeft, ik liep namelijk mijn stage bij The Next Web. En ja dat is echt heel vet.
Ik hoor vaak studenten om me heen die zich willen profileren in frontend webdevelopment. In de V1 merk ik af en toe dat jaargenoten interesse hebben in frontend en een stage zouden willen richting dit vakgebied. Voor die studenten deze post met wat tips om jezelf te ontwikkelen in dit vakgebied.
Stap 1: begrijp de basis
Binnen de studie CMDA worden een hoop vakken aangeboden die heel handig als je die kant op wil. Zorg dat je ze beheerst: push jezelf in deze vakken in plaats van je alleen aan de basiscriterea te houden. Zorg dat je alle behandelde stof begrijpt door hier vragen over te stellen. Lees de (verplichte en niet verplichte) literatuur bij het vak.
Stap 2: Verdiep je in een expertise
Binnen het vak gebied kan je een aantal kanten op, als jij ervoor kan zorgen dat je een richting goed kan heb je iets te bieden bij stagebedrijven. Profileer je bijvoorbeeld in HTML, CSS, Javascript, de DOM, webGL, browsers of HTML5 (en CSS3). Verdiep je in dit onderwerp, snap het en lees erover. Zorg dat jij degene bent naar wie mensen toekomen als ze jouw expertise niet begrijpen.
Stap 3: Maak, maak, maak
De beste manier om frontend te leren is door het veel te doen. Maak websites in het kwadraat. Begin bijvoorbeeld bij een Portfolio (van je eigen CMS tot een WordPress thema tweaken tot een tumblr blog) en verzin nieuwe doelen voor websites: hou een blog bij van iets (anders) wat je interessant vindt, verzin projectjes, zoek klanten die je betalen om websites te maken.
Stap 4: Stay up to date
In onze wereld gaan de ontwikkelingen hard, HTML5 staat al een tijdje aan onze deur te bonken of er is wel weer een nieuwe versie van ECMAscript uit (Javascript) en Adobe tekent de doodvonnis van Flash. Twitter is een goed medium om te zorgen dat je af en toe wat ontwikkelingen mee pikt (als je al op twitter zit, ga eens op zoek naar webdevelopers die je interessant lijken). Onlangs heeft Paul Irish (een guru in het vakgebied) een lijst met meer dan 250 RSS feeds van blogs die zich bezig houden met het vakgebied gepubliceerd.
Stap 5: Share your code
Vind je het niet zo erg dat anderen je code zien? Gooi het op github! Dit helpt niet alleen anderen maar dit biedt ook mogelijkheden om samen te werken met andere coders en je eigen skills te verbeteren. Ook kan je snel aan anderen laten zien wat je hebt gemaakt.
Bij het vak ontwerptechnieken (van het P jaar interactieve media) moeten we oa. wireframes maken. Uiteindelijk moeten we van elk uniek scherm een wireframe hebben gemaakt. Dus hoe doe je dat zo goed (en het liefst ook zo snel) mogelijk?
Dit plaatje hierboven heb ik gemaakt met een online tool gemaakt om wireframes te maken. Dit was even snel een voorbeeldje ter illustratie wat je allemaal kan maken. Het voordeel van deze tool is dat alles heel erg sketchy is, wat iedereen duidelijk maakt dat je nog niet in een designfase zit en het niet om de vormpjes, lettertypes en kleuren gaat. Dit voorbeeld hierboven heb ik in enkele minuten gemaakt.
De tool is webbased wat betekent dat het op elk platform draait, zolang je maar flash hebt. Hier kan je hem bereiken:
http://builds.balsamiq.com/b/mockups-web-demo/
Als je iets wilt opslaan kan je dat doen via mockup – export, je krijgt dan code die je later weer kan importeren om terug te gaan waar je gebleven was. Als je klaar bent kan je er een plaatje van maken (of printscreenen).