Laadsnelheid verschil tussen oude en nieuwe website. The case mobiel

Speed is what we need! Deze populaire uitspraak dekt eigenlijk wel de lading. Snel of nog sneller graag. Niemand vind wachten fijn. Websites die 5 seconden of meer tijd nodig hebben om de content te laten zien is niet wat bezoekers willen. Het is op een mobiele telefoon veel moeilijker om je website snel te laden dan op een desktop.

Page speed, de laadsnelheid van een website of webshop is belangrijk. Het wordt eigenlijk steeds belangrijker. Resultaten op de mobiel zijn leidend voor je scores. Google gaat mede hierop je ranking in de zoekmachine bepalen. Dus als je website traag is geeft dit een negative ervaring voor de bezoeker.

 

Dit is ook een van de redenen waarom mijn website recentelijk geheel is vernieuwd met de nieuwste technieken.  Ik wil laten zien dat de manier hoe een website is gebouwd een groot verschil kan maken. Mijn website gaan we gebruiken als case om je de verschillen te laten zien.

Het probleem

De grootste tekortkoming van mijn oude website was de laadsnelheid op mobiele telefoons . Het kon wel tot 5 seconden duren voordat alle content was ingeladen en zichtbaar was voor de bezoeker. Dat willen we natuurlijk niet. Het belangrijkste is dat een bezoeker binnen 1 seconde beeld heeft.

Meten is weten

Met erkende meettools wil ik laten zien wat de verschillen zijn tussen mijn oude en mijn nieuwe website. Hiervoor zijn verschillende meet momenten gebruikt om een zo betrouwbaar mogelijk beeld te krijgen. De Meet tool van Google pagespeed werkt met een scores. 100 is de maximale score. Mijn oude website heeft voor mobiel een score van 27.

Voor de nieuwe website is de score mobiel 91. Een duidelijk verschil dus.

Waar komt het verschil vandaan?

De oude website was gebouwd met een template. Wat is een template? Een template kun je vergelijken met een kant en klaar huis dat voor zoveel mensen ‘passend’ is gemaakt. Het nadeel van dit kant en klare huis is dat het tegelijkertijd veel ingebouwde ballast heeft die je nooit allemaal nodig hebt. Daardoor wordt de website onnodig zwaar belast wat als effect heeft dat de website traag wordt.

Voor de nieuwe site ben ik begonnen met een blanco framewerk, een kaal casco huis, om in de ‘huis’ termen te blijven. Vanuit dit framewerk wordt de website opgebouwd met alleen de functionaliteiten en wensen die nodig zijn. Een custom made website is dus te vergelijken met een maatwerk huis zoals jij dat wenst.

Deze manier van bouwen geeft voordelen

Verschillende factoren bepalen de score

Laten we wat dieper op de scores ingaan. Die scores zijn gebaseerd op verschillende factoren.

Met onderstaande meetresulaten uit Pingdon wil ik in onderstaand voorbeeld waarde 2 en 4 uitlichten. De 2e waarde geeft de pagina grootte aan en de 4e waarde het aantal script opvragingen.

OUD. Resultaten voor de oude site.
NIEUW. Resultaten voor de nieuwe site.

Bij waarde 2 zie je duidelijk dat de nieuwe site een stuk lichter is geworden. De pagina grootte is afgenomen van 2.6 MB naar 1.8 MB. Dat is dus een deel van ballast die is verminderd. Bij waarde 4 is te zien  dat het aantal requests is afgenomen en zelfs is gehalveerd. (requests zijn opvragingen die ook vertragend werken) Dit wil je ook zo laag mogelijk houden.

De tools die gebruikt zijn Google pagespeed insights, Lighthouse en Pingdom.

 

 

Conclusie

De manier van je “huis” bouwen is dus uiterst belangrijk voor de snelheid van je website. De score op de mobiel is verbetert van 27 naar 91 op een score schaal van 100. Dit resulteert in een snellere manier van laden, hogere ranking in de Google zoekmachine en niet te vergeten een blije bezoeker.

André den Breejen
André den Breejen

Wil je weten wat Impress voor jouw website kan betekenen of wil je meer weten over laadsnelheid verbetering?

Bel of mail mij voor een vrijblijvend gesprek.

Webdesign trends 2022

In de voorgaande jaren zagen we vooral veel trends voorbij komen gericht op de lay-out van de website. Dit jaar verwacht ik dat de focus meer richting de content verplaatst gaat worden. De meest innovatieve webdesign trends heb ik voor je op een rij gezet. Maak je webssite beter en leuker!

1- Line Art-achtergronden

Webdesigners experimenteren al jaren met verschillende achtergrondtrends voor websites. Dramatische of juist subtiel kleur gebruik, kleurverlopen/gradiënten en natuurlijk videos’ worden veel gebruikt. In 2022 verwacht ik veel van Line art. Dit is op slimme of subtiele wijze lijnen verwerken in de achtergrond van je design. Je kan hier hier denken aan cirkels zoals hieronder in afebeelding getoond wordt maar het kan ook als navigatie gebruikt worden zoals in het voorbeeld van crusta.fr. Dit voorbeeld kun je vinden onder punt 5.

Line-art kan worden gebruikt om visuele interesse te creëren, maar ook om bezoekers nuttige begeleiding te bieden. Ideaal om in je content sturing en focus aan te brengen.

De cirkels in de twee hoeken trekken op hun eigen manier de aandacht. Van nog groter belang is hoe de vormen naar binnen buigen. Daarbij leggen ze meer nadruk op het boekingsformulier in het centrum.

2 – Interactieve muis aanwijzers

Waarom zou je een saaie standaard cursor gebruiken, als je deze kan aanpassen tot een gave eyecatcher! Door je cursor te laten veranderen, grijp je de aandacht van je bezoekers. Door dit speelse effect vergroot je de kans dat bezoekers langer op je website ronddwalen.

Wat ik vooral goed vind aan deze trend  is dat het de user experience en usability ten goede komt. De bezoeker krijgt direct feedback vanuit de website.

Hier een voobeeld van Jadesheng studio

Hieronder een voorbeeld van lironmoran-interiors

Deze site gebruikt het met nog een extra element. Je krijgt niet alleen feedback door de grootte verandering maar ook door de tekst die in de muisaanwijzer cirkel te zien is. Heel cool gedaan.Videospeler

3 – Exclusieve illustraties

Afgelopen jaren zagen we de  opmars van illustraties en animaties in de lay-outs van websites, met name om onderscheidend te kunnen zijn. Bijzonder illustraties zijn een goede manier om je te onderscheiden met unieke content.

4 -Organische vormen

Organische of vloeiende vormen zijn alles zonder rechte lijnen. Denk aan de vormen die in de natuur voorkomen, zoals heuvels, de randen van een meer of rivier, en hoe ze asymmetrisch en kronkelig zijn.

Vloeiende vormen zijn een geweldige manier om delen van een website op te splitsen zonder harde lijnen of hoeken. Ze zijn ook geweldig om op de achtergrond te gebruiken en geven balans en identiteit aan je site.

5 – Animatie en 3D movement

Van alle trends verwacht ik hier wel het meeste van. Van micro-interacties tot deeltjesachtergronden, we zijn jaar na jaar getuige geweest van de stijgende populariteit van animatietrends. Door nieuwe technieken zijn er weer meer mogelijkheden gekomen. Voor het jaar 2022  worden web animaties steeds geavanceerder en steeds creativer.  Door de scheiding van pagina-elementen in voorgrond en achtergrond extremen, het creëren van een indrukwekkende parallax effecten.

Hieronder gebruikt crusta.fr video animatie als effect en heeft letterlijk een rode lijn als rode draad door de site lopen. Ook deze is geanimeerd. De onderliggende content elementen komen mooi elegant tevoorschijn wanneer je naar beneden scrollt.


https://monopo.london

Monopo gebruikt een mix van trends. De gradient achtergrond, grote fonts en muis-aanwijzer effect als binnenkomer en als je scrolt komen de elementen met veel beweging over je scherm. Voor de contact pagina wordt weer een zwart-wit layout gebruikt.

Als laatste wil ik nog webshop https://seed.com/ laten zien.

Mooie sectie overgangen als je naar beneden scrolt. Mooie fotografie. Alles helemaal in de ‘green environment look’. Heel elegant gedaan.

Vertical movement up, opactiy-changes, zoom in – out transities. Allemaal toffe technieken om je website beter te laten opvallen tussen de concurrenten.

Jezelf onderscheiden, meer betrokkenheid creeren en uiteindelijk meer conversies.

Samengevat kun je zeggen dat met de nieuwe webdesign trends van 2022 er meer mogelijkheden zijn, vooral om meer de focus op de content te verkrijgen. Met een goed plan zal dit leiden tot meer betrokkenheid en conversies. Al zin om de nieuwe trends in je eigen website (shop) terug te zien?

André den Breejen
André den Breejen

Wil je weten wat Impress voor jouw website kan betekenen?

Bel of mail mij voor een vrijblijvend gesprek.