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.

Website Vandervegt

Vakmanschap en ambacht

Dit zijn een aantal kernwoorden die in het ontwerp terug moeten komen. Een maatwerk website waarbij gebruik is gemaakt van professionele fotografie. Er is veel aandacht besteed aan de vormgeving en het gebruikersgemak.

Deze custom made website is verder geoptimaliseerd voor een snelle laadtijd en een perfecte mobiele weergave.

#Hosting#Laadsnelheid#Ontwerp#Responsive#Wordpress

Website voor Schoonheidssalon Beauty Natural

Makkelijk en snel je afspraak maken.

Dat kan met deze custom made website voor schoonheidssalon Beauty Natural.
Een maatwerk website waarbij gebruik is gemaakt van professionele fotografie. Er is veel aandacht besteed aan de vormgeving en het gebruikersgemak voor een optimale ‘look and feel. Volledig responsive voor alle schermen.

Snel en goed met 98% snelheidscore.

#Hosting#Laadsnelheid#Ontwerp#Responsive#Wordpress

Website voor Schoonheidssalons

Heb jij al een website voor je schoonheidssalon die voor je werkt? Want jouw klanten zoeken je online! Je website moet dus snel vindbaar zijn in Google. Daarbij moet de 1e indruk kloppen. Hoe beter de ‘look en feel’, hoe meer kans op een nieuwe klant aanvraag.

Tijd dus voor een professionele website en meer aanvragen.

Schoonheidssalon website laten maken

Als je je afvraagt hoe je een website voor een schoonheids – of beautysalon kunt laten maken die de aandacht van jouw potentiële klanten zal trekken, ben je op de juiste plek.

Je kunt de websites altijd makkelijk zelf beheren. Je kunt ook alles door laten verzorgen. Zo kun jij je blijven focussen op jouw business.

Vraag vrijblijvende offerte op.

Wil je je investering in je nieuwe website liever spreiden? Ook dat is mogelijk. Neem contact met mij op voor de mogelijkheden.

Website autoverhuur den Breejen

Website voor Den Breejen Autoverhuur

Makkelijk en super snel online je auto reserveren.
Redesign en vernieuwen van bestaande website. Emigreren naar nieuwe domein naam.
Responsive wordpress website met gebruiksvriendelijk content management systeem (CMS) en gebouwd met de nieuwste technieken..

#Conversie#Laadsnelheid#Ontwerp#Responsive

Webwinkel LaminaatXXL

Custom made webshop gebouwd met Woocommerce. De oude Magento webshop is vervangen door een Woocommerce webshop.  Maatwerk design voor de homepagina, categorieën en productpagina’s. Volledig responsive voor alle schermen. Complete product import van Magento naar Woocommerce.

De standaard Woocommerce mogelijkheden zijn nog verder uitgebreid.  Zo zijn er nu uitgebreide offerte mogelijkheden vanuit de back end, is er een Mega menu met Ads per categorie, custom made categorie banners en zeer flexibele maatwerk Up sells bundels. Zelf volledige controle over producten, instellen van diensten , bulk-import en categorieën.

#Conversie#Hosting#Laadsnelheid#Landingspagina’s#Ontwerp#Responsive#Woocommerce#Wordpress
Product pagina – Upsell bundels per product of categorie. Upsells zelf aan te kiezen door de klant en uitgerekend per vloeroppervlak in dit geval.
Categoriepagina – Banners en meldingen per categorieen aan te passen
Product pagina – Korting acties per product zelf instelbaar. Dymanisch overzicht besteloverzicht.

Website deVisser Optiek

Nieuwe website voor De Visser in Heinkenszand

Alweer een mooi project mogen afronden. Vorige week is de nieuwe website van De Visser Optiek live gegaan.
De vormgeving van deze homepage maakt dat deze website zich onderscheidt en tegelijk een grote herkenbaarheid bewerkstelligd.
Met een uitgekiende navigatie is het voor de bezoekers zo makkelijk mogelijk gemaakt om de benodigde informatie te vinden. Deze website is verder geoptimaliseerd voor een snelle laadtijd en een perfecte mobiele weergave.

#Conversie#Laadsnelheid#Ontwerp#Responsive#Wordpress
Mobiel weergave
Informatie pagina

Heeft u al een snelle website?

Het belang van pagespeed en een snelle laadtijd?

De term pagespeed optimalisatie zie je steeds vaker voorbij komen en dat is niet voor niets. Met de term Pagespeed wordt bedoelt; hoe lang duurt het voordat de website in zijn geheel getoond wordt aan de bezoeker.

Vind jij het fijn om lang te wachten bij de slager? Nee, natuurlijk niet. En net zo min vindt je bezoeker het fijn om lang te moeten wachten tot jouw website of webshop op zijn of haar scherm verschijnt.

Als je thuis of op je werk over een snelle internetverbinding beschikt (bijvoorbeeld 100MB) kan het op het eerste gezicht nog wel meevallen met de laadtijd van je website. Bezoek je deze website dan via een gemiddeld wifi netwerk of via het mobiele netwerk dan merk je dat het allemaal een stuk minder snel gaat.

Nu wordt pas goed duidelijk of je website op een snelle server is gehost, of er bijvoorbeeld afbeeldingen zijn optimaliseert en of er compressie technieken zijn toegepast. Kortom, staat de meter in groen of in het rood?

Pagina wachttijd.

Hoe snel moet je website dan zijn?
Dat hangt af van de situatie en het geduld van die persoon. Zelf ben ik aardig ongeduldig en heb een tijdspanne van 4 á 5 seconden maximaal. In 2011 heeft onderzoek uitgewezen dat bezoekers binnen 10 seconden beslissen of ze op de site blijven of niet. In 2017 ligt de situatie heel anders. Uit een onderzoek van jan. 2017 blijkt dat als je website niet binnen 3 seconden is geladen zal je bezoeker verder zoeken.

Samenvattend : Zorg dat het in ieder geval onder de 5 seconden is maar 3 sec.is beter.

Ranking
Behalve het feit dat je niet wilt dat je bezoeker weg klikt van je site door een trage laadtijd speelt er mee dat Google een steeds groter belang toedicht aan snelle websites. In november 2016 publiceerde Google dit bericht.

“Our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site”

Uiteindelijk zal dus de laadtijd van de  mobile versie van de website bepalend worden voor de algemene ranking in de zoekmachines.

Test jouw website hier

Prijzen pagespeed optimalisatie

Redenen genoeg om te investeren in de snelheid van je website. Ik kan je website sneller maken.

Wil jij een speedboost voor je website?

Ik bied een page speed optimalisatie pakketten aan  waarbij je website tot wel 85% sneller wordt. Daarbij werken we met aantoonbare resultaten met meet gegevens van voor en na optimalisatie.

Vraag je speed boost aan >

André den Breejen
André den Breejen

Wil je weten wat Impress voor jouw website kan betekenen?

Bel of mail mij voor een vrijblijvend gesprek.

Hoe verbeter je de laadsnelheid van een website met veel video’s

Laadsnelheid website traag door video’s.

Recentelijk werd ik door een klant benaderd over een van zijn websites. De laden van de website duurde in zijn ogen te lang. Ok, wanneer is een website te traag? Daar zijn diverse getallen en meningen over te vinden op het internet, maar je merkt het zelf wanneer je een webshop of website bezoekt. Meer als 10 seconden ervaart men als echt  teveel. Zelf heb ik de regel, maximaal 5 seconden, maar onder de 3 seconden is beter.

Doormeten van de website

Als eerste begin ik dan met het doormeten van de website. Dit doe ik op verschillende momenten en met meerdere tools om een zo goed mogelijk beeld te krijgen.
Zo krijg ik in beeld hoe de laadtijd is op de verschillende devices, mobiel, tablet en desktop. Tevens geven een meerdere testen een beter beeld. Eén meting snel of traag, kan een incident zijn. Het kan namelijk zo zijn dat je even een slechte server response of een lagere internet snelheid hebt.

De verschillende aspecten van laadsnelheid.

Belangrijk is ook om even onderscheid te maken. Er zijn verschillende fasen in laadsnelheid.
> Time to first byte (TTFB): dit is de tijd die het kost om de eerste byte aan informatie binnen te krijgen. De TTFB-waarde geeft de snelheid van het netwerk, de server én de site weer. De time to first byte is deels afhankelijk van de locatie van waaruit je de gegevens opvraagt. Meer over TTFB kun hier lezen.

> Start render: dit is de tijd die het kost voordat een bezoeker de eerste informatie op het scherm ziet staan.

> De totale laadtijd: Dit is wanneer alle elementen van een pagina (images, CSS, Video’s en JavaScript) ingeladen zijn.

Om het niet al te ingewikkeld te maken gebruiken we in de metingen die hier genoemd worden alleen de totale laadtijd als meet resultaat.

Laadsnelheid voor optimalisatie

De website PremiumKeur Alkmaar die ik heb doormeten is was al eerder geoptimaliseerd en heeft en geeft een keurige 80 / 92 waarde op de Google pagespeed ranking.

Dit betekent dat je volgens Google een goede en snelle website hebt maar dat is niet helemaal waar. Het betekent meer dat je volgens de Google normen de basics goed voor elkaar hebt maar het zegt weinig over de laadsnelheid van je site.

Als we deze website met meerdere tools gaan meten krijgen we andere waarden te zien. De meet tool die ik veel gebruik is bijvoorbeeld GT Matrix. Hiermee kan je goed de laadtijden en oorzaken uitlezen.

Nu zie je wat de echte laadtijd is , namelijk 17,7 seconden. Dit is de tijd die nodig is om de gehele pagina te laden.

Oorzaak
Het probleem zijn de 8 video’s die in de loop van de tijd geplaatst zijn. Die maken de pagina zwaarder en geven een aanzienlijke toename van de laadtijd.

Oplossing
Wat ik gedaan heb is een script geschreven dat niet de video’s laadt maar een afbeelding van de video. Een afbeelding of ook wel tumbnail genoemd heeft slechts een fractie van de grootte van een video.

Het script zorgt ervoor dat niet de video wordt ingeladen maar een tumbnail van de video.
De video speelt nu pas af wanneer de gebruiker op de tumbnail drukt.

Laadsnelheid na de optimalisatie

Wat is nu de laadsnelheid na deze optimalisatie? Na de implementatie van het script gaan we opnieuw testen.
Zoals je ziet is de snelheid spectaculair verbeterd. Nu zien we een laadtijd van 2.4 seconden

Dit is verbetering van 637% ! Ook kun je zien dat de pagina grootte (page size) en de request sterk zijn gereduceerd.

Laadsnelheid van uw website is?

Bent u benieuwd of uw website een goede laadsnelheid heeft? Mail uw website gegevens naar [email protected] en ik laat uw de mogelijkheden tot verbetering 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.

Remat

Website voor Remat Services

Remat wilde een nieuwe design dat de filosofie van het bedrijf goed zou weergegeven. Tevens zijn er nieuwe functionaliteiten toegevoegd en is het menu onderhanden genomen. Er is gekozen voor duidelijke layout met een full width slider welke ook perfect wordt weergegeven op breedbeeld, pc, tablets en mobiel. De website is volledig tweetalig opgezet en de SEO is technisch hier op aangepast .

website voor bouwkundigekeuringen

Bouwkundige keuring Amsterdam
Websites voor Bouwkundige keuringen

Eén van de nieuwe websites van PremiumKeur. Premiumkeur voort bouwkundige keuringen uit in de regio Amsterdam en Utrecht. Hiervoor is een website ontworpen met de bezoeker als uitgangspunt. Modern , duidelijk en de knoppen op de juiste plaatsen. Er is veel aandacht besteed aan page speed, teksten en SEO. En met succes. Inmiddels staan de tot nu 12 nieuwe websites van Premium Keur op de 1e pagina van de Google zoekmachines.