[Website] Wat is een acceptabele pagina grootte?

[Reveller]

Ik ben bezig met een nieuwe website voor mijn eenmanszaakje, en maak op de homepagina een soortgelijk iets als op de Sun Microsystems website: een grote foto die verandert als je er met je muis overheen gaat.

Ik gebruik hiervoor 6 foto's van ongeveer 60KB per stuk. In totaal zal de homepagina dus plm. 400KB groot zijn. Met een dikke ADSL verbinding zoals ik thuis heb is dat geen probleem, maar je wilt natuurlijk toch dat zoveel mogelijk mensen je site kunnen bezoeken zonder lang te moeten wachten.

Mijn vraag is dan ook of 400KB een acceptabele grootte is voor een homepagina (de andere pagina's binnen de site zijn rond de 150 - 200KB in totaal, maar plaatjes worden natuurlijk gecached).

In een aantal artikelen die ik via Google vond, werd uitgegaan van plm. 100KB als acceptabele grootte, maar die artikelen zijn allemaal minstens 3 jaar oud. Daarom graag jullie mening / ervaringen!

[Not Pingu]

60kb per plaatje is best te doen als het om zo'n belangrijk element op je pagina gaat. Hoewel ik me kan voorstellen dat je een plaatje van die afmetingen kunt terugbrengen tot zo'n 40/50kb, zolang er geen tekst op hoeft. Gewoon een beetje spelen met de kwaliteitsinstellingen in Photoshop.

[Ramon]

400kB is absoluut veelste groot! Versimpel de plaatjes dan (misschien kan je ze leuk vectoren ofzo?), of maak het zo dat de plaatjes niet nodig zijn voor navigatie op die frontpagina (dus doe er een extra menu bij)

[André]

Van een inbelverbinding uitgaande: 400 KB / 7.075 KB/s = 57 seconden met een optimale verbinding, veels te veel dus. Ik zou het bij 50KB houden, dat is 7 seconden

[BasieP]

André schreef op donderdag 05 januari 2006 @ 23:03:
Van een inbelverbinding uitgaande: 400 KB / 7.075 KB/s = 57 seconden met een optimale verbinding, veels te veel dus. Ik zou het bij 50KB houden, dat is 7 seconden

de vraag is of je tegenwordig nog moet letten op mensen met een modempje..
in nederland denk ik dat 80% van de internetaansluitingen nu toch wel breedband is.. (en een groot deel van de andere 20% veilige banklijnen oid)

disclaimer: het is een gokje

@TSer:
kijk even naar compressie. En je plaatjes kan je door simpel het aantal kleuren te verminderen al heel gauw kleiner maken zonder dat het echt zichtbaar is.

[ Voor 15% gewijzigd door BasieP op 05-01-2006 23:09 ]

[Verwijderd]

Je dient natuurlijk ook te kijken wat voor een verbinding je doelgroep heeft.

[frickY]

Ook ik vind 400kb aan de grote kant. Sla ze in ieder geval als progressive JPEG op zodat je vast wat kunt zien zolang het aan het laden is. Of zet eerst een low-quality variant terwijl je in de achtergrond de juiste inlaad. (moet lukken met wat javascript)

[André]

De nederlandse breedbandpenetratie is op dit moment 55%
http://www.mediafact.nl/comments.php?id=10997_0_1_15_C

Inbellers zijn er dus nog best veel

[Verwijderd]

Er valt nog wel wat aan de grote te doen lijkt me?
Maar in ieder geval hoef je echt geen zorgen te maken voor al die mensen die nu nog met een inbel accountje zitten te prutsen.
Zelfde geldt voor 800x600.. dat is ook zwaar verleden tijd... (Dus got doe er eens wat aan. )

[BasieP]

André schreef op donderdag 05 januari 2006 @ 23:12:
De nederlandse breedbandpenetratie is op dit moment 55%
http://www.mediafact.nl/comments.php?id=10997_0_1_15_C

Inbellers zijn er dus nog best veel

mja maar zoals hierboven gezegt, kijk naar het publiek van de site.. marketing is belangrijk
verder zouden ze dit soort grafiekjes ook moeten maken voor het aantal hits/country en het aantal visitors/country

[Verwijderd]

Ook al ga je ervan uit dat al jouw bezoekers een vaste internet aansluiting hebben, dan nog is de laadtijd van een website belangrijk. De populariteit van google bijvoorbeeld is hoofdzakelijk te danken aan de gewelde search engine, maar OOK aan de laadtijd van de website. www.startpagina.nl is echt verschikkelijk om als start pagina in te stellen omdat het zolang duurdt om in te laden.

[crisp]

Verwijderd schreef op donderdag 05 januari 2006 @ 23:14:
[...]
Zelfde geldt voor 800x600.. dat is ook zwaar verleden tijd... (Dus got doe er eens wat aan. )

Onzin; designen voor 800 breed is prima. Niet alleen kom je daarmee tegemoet aan de mensen die er achter komen dat je browser fullscreen draaien helemaal niet zaligmakend is, maar ook is bewezen dat lange regels moeilijker lezen dan regels met zo'n 100 karakters.

Het enige dat je met extra breedte kan doen is bijvoorbeeld extra informatie beschikbaar stellen zoals we hier op GoT ook doen met de update tracker aan de rechterkant.

[Not Pingu]

André schreef op donderdag 05 januari 2006 @ 23:03:
Van een inbelverbinding uitgaande: 400 KB / 7.075 KB/s = 57 seconden met een optimale verbinding, veels te veel dus. Ik zou het bij 50KB houden, dat is 7 seconden

400kb is denk ik niet de initiele laadtijd, als ik naar de site van Sun kijk, dan worden de andere plaatjes ook pas later ingeladen. Er zit dus geen 57 seconden tussen de URL intikken en de site voor je neus krijgen.

Bovendien moet je de traagheid van de site afzetten tegen de vraag hoe belangrijk het is om een indrukwekkende site te maken. Zeker in het geval van zakelijke sites kun je er imho vanuitgaan dat de meeste potentiele klanten wel een breedbandverbinding hebben. Je moet dan de keuze maken of je voor die paar modemmers zulke concessies wilt doen dat de grote meerderheid aan breedbanders een veel minder indrukwekkende site te zien krijgt.

[TheRookie]

Mocht je je afvragen hoe lang e.e.a. duurt zou je eens een Web page speed report op kunnen vragen; dat report geeft een aardige indicatie hoe lang e.e.a. duurt en wat er verbeterd zou kunnen worden.

[Verwijderd]

TheRookie schreef op vrijdag 06 januari 2006 @ 11:49:
Mocht je je afvragen hoe lang e.e.a. duurt zou je eens een Web page speed report op kunnen vragen; dat report geeft een aardige indicatie hoe lang e.e.a. duurt en wat er verbeterd zou kunnen worden.

heb ff voor de grap " http://tweakers.net " als opgave gedaan;
volgens hun mankeert er nog wel het 1 en ander aan.
Tip voor http://tweakers.net om er nog even naar te kijken ? !

[RagaBaSH]

Doe die Web Page Speed Report eens op www.sun.com. dan zie je dat die page ongeveer 380kb is. hierbij horen laadtijden van tussen de 77 en 3 seconden (56k modem vs. T1 verbinding op 1500Kbit).

Met dit in je achterhoofd denk ik dat het aan te raden is je grootte tenminste 2x zo klein te maken, of voor je voorpagina een "low-bandwidth" versie aan te bieden (mocht dit binnen je doelgroep nuttig zijn). Hiermee maak je jezelf gewoon toegankelijker en vegroot je je kans op succes.

[Verwijderd]

@ RagaBaSH: De meeste mensen zitten niet te wachten op een keuze menu, dat is alleen maar irritant, net als een intro. Ik stel het iig neit erg op prijs.

Ik heb altijd als doelstelling om een site zo toegankelijk mogelijk te maken, ik houd dus rekening met de mensen die een 800x600 resolutie hebben én mensen die een trage internet verbinding hebben. Dus gebruik ik zo weinig mogelijk plaatjes. Met CSS kun je je site genoeg opleuken.

[crisp]

Verwijderd schreef op vrijdag 06 januari 2006 @ 11:57:
[...]


heb ff voor de grap " http://tweakers.net " als opgave gedaan;
volgens hun mankeert er nog wel het 1 en ander aan.
Tip voor http://tweakers.net om er nog even naar te kijken ? !

Gezien onze doelgroep vind ik het resultaat van die analyze behoorlijk acceptabel (voor zover ze correct zijn, maar volgens mij zitten er nog wel wat hiaten in).

[TheRookie]

Zou je aan kunnen geven op wat voor hiaten je doelt ?

[swampy]

merw, weet je wat het is als mensen niet binnen 8 seconden kunnen zien waarvoor je website is, dan heb je een groot probleem. Dat is het magische getal waar je rekening mee moet houden.

Als je een te zware pagina hebt dan zijn mensen veel sneller gewild om snel door te surfen.

380kb is gewoon te zwaar want je kan wel zeggen, iedereen heeft DSL... sommige hebben geen 8Mbyte. Sommige hebben 512Kbps, of ergen 256Kpbs. En als zulke mensen in je doelgroep zit dan heb je een probleem. Want 256Kbps is maar... 4 keer zo snel als ISDN. Dus alsnog iets van 17 seconden laad tijd, ALS alles meezit.

Probeer inderdaad een Low Quality versie te maken die wel snel laad en geef mensen een optie om die te gebruiken. En als ze willen kunnen zo ook de breedband versie laden!

BTW ook nagedacht over hoeveel traffic je genereert met zo'n mega amalia pagina!

[ Voor 6% gewijzigd door swampy op 06-01-2006 12:59 ]

[OkkE]

Zoals ik het zie...

Kleine HTML
Al wil je afbeeldingen van 200Kb in je website stoppen. Zolang je HTML klein en licht is, zal dat snel laden. Daarna worden de afbeeldingen wel geladen, waardoor er toch gelijk tekst/info in beeld is.
Wat sommige imho vergeten is dat websites in stukken laden. Je hoeft niet te wachten tot alles geladen is voordat er iets in beeld komt, dat begint (over het algemeen) gelijk al..

Doelgroep
Wanneer modemmers niet binnen je (gewenste) doelgroep vallen, mag het best 200Kb zijn. Of zelfs 400Kb. Oke, bij een bedrijfspagina wil je meestal wel een snel ladende pagina, maar misschien vind de doelgroep het geen punt.

Geen keuze scherm.
Ik wacht liever 2 sec langer, dan dat ik eerst moet kiezen wat ik wil. Vaak klik ik 4 of 5 links open, die laden in de achter grond en pas later ga ik ze lezen. Als ik dan nog een keuze moet maken welke pagina (low / high) dan is het Alt+F4.

[ Voor 6% gewijzigd door OkkE op 06-01-2006 12:59 ]

[Not Pingu]

swampy schreef op vrijdag 06 januari 2006 @ 12:49:
merw, weet je wat het is als mensen niet binnen 8 seconden kunnen zien waarvoor je website is, dan heb je een groot probleem. Dat is het magische getal waar je rekening mee moet houden.

Dit is napraten van je eerstejaars lesjes Webdesign. De werkelijkheid is altijd genuanceerder, je volgt nooit klakkeloos 'magische getallen', je moet nadenken over waarom je wel of niet dat magische getal zou volgen. Vaak wil je heel graag een bepaald doel bereiken met je website, en dan kan dat magische getal in de weg staan. Zou jij het hele doel van je website compromitteren omdat in een of ander boekje staat dat je 8 seconden aan moet houden?

[swampy]

Gunp01nt schreef op vrijdag 06 januari 2006 @ 13:23:
[...]


Dit is napraten van je eerstejaars lesjes Webdesign. De werkelijkheid is altijd genuanceerder, je volgt nooit klakkeloos 'magische getallen', je moet nadenken over waarom je wel of niet dat magische getal zou volgen. Vaak wil je heel graag een bepaald doel bereiken met je website, en dan kan dat magische getal in de weg staan. Zou jij het hele doel van je website compromitteren omdat in een of ander boekje staat dat je 8 seconden aan moet houden?

Goed punt, tuurlijk zijn sommige websites wat "langzamer" maar vaak zijn ze wel zo ge-structureerd dat je al kan zien waarvoor het is. Door het verdelen van de content en het zorgen dat belangrijke content al geladen is.

Tuurlijk als je spreekt over een website voor een metal band..tja dan is het juist weer artistiek om bijvoorbeeld met flash een krachtige Intro te maken.

Hoe dan ook, belangrijk is en blijft dat bezoekers, zo snel mogelijk zien wat je website te bieden heeft. Behalve natuurlijk in het geval van "artistieke" redenen!

[Not Pingu]

Dat een plaatje nog moet inladen wil natuurlijk niet zeggen dat er nog niks te bekijken valt

[Reveller]

Om de discussie wat concreter te maken hier een test van de pagina die ik bedoel: http://www.odisys.net. Je ziet dan een grote foto. Als je over de linker "navigatie" gaat, verandert de foto. De techniek die ik nu gebruik is gewoon 6 verschillende foto's die geladen worden. Omdat een groot deel van de foto gelijk blijft, zou je ook intelligenter met div'jes te werk kunnen gaan. Uiteindelijk wordt ook de achtergrond van elke foto anders, dus die discussie wil ik niet aangaan Wel graag jullie ideeen over de pagina an sich. De initiele achtergrondplaat wordt immers als eerste geladen, en dus heb je volgens mij al vrij snel een goed uitziende pagina?

Overigens vind ik het argument van extra dataverkeer ook een goede. Momenteel geeft de Web Page Speed Report 135444 bytes als groote van de pagina. De mouseovers veroorzaken nog eens 5 * 40 KB. Met wat tweaken zou ik de hele pagina op 300KB moeten kunnen krijgen...

[OkkE]

Als ik me niet vergis wordt een <tabel> pas zichtbaar wanneer de laatste cel geladen is. Hier door zullen mensen met een langzame verbinding dus, waarschijnlijk, een hele tijd niets zien.. Maar ook buiten dat, is het imho beter om de pagina zonder tabellen te bouwen.

-- edit --

Overgens worden afbeeldingen over het algemeen in de temp. internet files opgeslagen, die zullen dus niet elke keer opnieuw gedownload worden, waardoor het data-verkeer redelijk mee zal vallen.

[ Voor 30% gewijzigd door OkkE op 06-01-2006 15:36 ]

[--MeAngry--]

Ik denk niet dat je hier nog veel meer aan kunt doen, anders verlies je gewoon teveel aan info die je eigenlijk wil laten zien.
Wat OkkE zegt is wel waar voor de meeste browsers overigens, een table wordt pas weergegeven als deze helemaal geladen is, ik weet alleen niet hoe dat zit als er achtergrondimages of gewone plaatjes in staan, of dat verschil uitmaakt zeg maar.

[swampy]

Reveller schreef op vrijdag 06 januari 2006 @ 15:25:
Om de discussie wat concreter te maken hier een test van de pagina die ik bedoel: http://www.odisys.net. Je ziet dan een grote foto. Als je over de linker "navigatie" gaat, verandert de foto. De techniek die ik nu gebruik is gewoon 6 verschillende foto's die geladen worden. Omdat een groot deel van de foto gelijk blijft, zou je ook intelligenter met div'jes te werk kunnen gaan. Uiteindelijk wordt ook de achtergrond van elke foto anders, dus die discussie wil ik niet aangaan Wel graag jullie ideeen over de pagina an sich. De initiele achtergrondplaat wordt immers als eerste geladen, en dus heb je volgens mij al vrij snel een goed uitziende pagina?

Overigens vind ik het argument van extra dataverkeer ook een goede. Momenteel geeft de Web Page Speed Report 135444 bytes als groote van de pagina. De mouseovers veroorzaken nog eens 5 * 40 KB. Met wat tweaken zou ik de hele pagina op 300KB moeten kunnen krijgen...

Mmm dat valt onder "visual design" in zo'n geval is de bezoeker wel willend om langer te wachten. Ik zie dat je al een Image Placeholder gebruikt en via javascript de images in de placeholder laad.

Ik weet zeker dat je de plaatjes zo kan downgraden in kwaliteit dat je een goed effect hebt en toch dat je een website hebt die snel genoeg gaat.

Voor een service die jij probeert te bieden is het een mooie website trouwens. En laadt op zich snel genoeg, ik zou het houden zoals het nu is!

[ Voor 14% gewijzigd door swampy op 06-01-2006 16:48 ]

[André]

Reveller schreef op vrijdag 06 januari 2006 @ 15:25:
Om de discussie wat concreter te maken hier een test van de pagina die ik bedoel: http://www.odisys.net.

Maak de foto van de serveruimte je achtergrond. Plaats daarop 5 images aan de linkerkant die stoppen bij de blauwe golf. Zet op die 5 images een rollover van dezelfde grootte en laat tegelijk met JS een transparante div met tekst daarin zien aan de rechterkant die links onder het plaatje valt. Op het moment van de rollover zet je de normale tekst ("Wat is voor u.....") even op onzichtbaar. Visueel gezien exact hetzelfde maar 1/10e van het aantal kb's.

[ Voor 11% gewijzigd door André op 06-01-2006 16:52 ]

[Reveller]

André schreef op vrijdag 06 januari 2006 @ 16:50:
[...]
Maak de foto van de serveruimte je achtergrond. Plaats daarop 5 images aan de linkerkant die stoppen bij de blauwe golf. Zet op die 5 images een rollover van dezelfde grootte en laat tegelijk met JS een transparante div met tekst daarin zien aan de rechterkant die links onder het plaatje valt. Op het moment van de rollover zet je de normale tekst ("Wat is voor u.....") even op onzichtbaar. Visueel gezien exact hetzelfde maar 1/10e van het aantal kb's.

Dat vind ik een goed idee, maar heb een aantal vragen:

• bedoel je dat ik de teksten die rechts over de serverruimte heen verschijnen, niet meer als plaatje maar als "gewone" tekst in een div moet zetten?
• "Wat is voor u..." is tekst die in Photoshop over de serverruimte gezet is. Die kan ik dus alleen laten verdwijnen als ik van die tekst een apart plaatje maak OF als ik die tekst als HTML in een div stop (dus plain-tekst in plaats van een foto). Welke optie bedoel jij?
• stop ik de tekst rechts in divs die in tabelrijen liggen? Met andere woorden - snelle opzet:

HTML:

<table background="serverruimte.jpg">
<tr>
  <td>[img]"button1.jpg"></td>
[/img]<div id="t1" style="visibility: hidden">[img]"tekst1.jpg"></div></td>
</tr>
</table[/img]

[Verwijderd]

Reveller schreef op vrijdag 06 januari 2006 @ 17:46:
[...]

HTML:

<table background="serverruimte.jpg">
<tr>
  <td>[img]"button1.jpg"></td>
[/img]<div id="t1" style="visibility: hidden">[img]"tekst1.jpg"></div></td>
</tr>
</table[/img]

Volgens mij bedoelt 'ie juist dat je de tekst uit het plaatje haalt en gewoon als tekst weergeeft in een div, die je pas zichtbaar maakt op het moment dat de gebruiker over de juiste optie "hovert". Daardoor worden de vormen in de plaatjes veel eenvoudiger en de plaatjes dus een stuk kleiner.

[crisp]

TheRookie schreef op vrijdag 06 januari 2006 @ 12:42:
Zou je aan kunnen geven op wat voor hiaten je doelt ?

Hij mist nog wel eens dingen (externe JS- en CSS-files, images die vanuit CSS worden geladen) of rapporteert externe files die conditioneel worden ingeladen in situaties waarbij aan die conditie niet voldaan is (vaak binnen scripting).
Maar wat dat betreft zijn Tnet en (vooral) GoT ook best wel complexe pagina's.

Ik moet zeggen dat deze tool wel is verbeterd sinds de laatste keer (een paar maanden geleden) dat ik er naar gekeken heb

[TMC]

Verwijderd schreef op donderdag 05 januari 2006 @ 23:14:
Er valt nog wel wat aan de grote te doen lijkt me?
Maar in ieder geval hoef je echt geen zorgen te maken voor al die mensen die nu nog met een inbel accountje zitten te prutsen.
Zelfde geldt voor 800x600.. dat is ook zwaar verleden tijd... (Dus got doe er eens wat aan. )

Echt niet! Ik draai 1280, maar als er een site is waarbij de regels full screen zijn, maak ik m'n venster wat smaller. Korte regels (ongeveer die van 800px ) lezen veel fijner.

[André]

Reveller schreef op vrijdag 06 januari 2006 @ 17:46:
[...]

Dat vind ik een goed idee, maar heb een aantal vragen:[list]• bedoel je dat ik de teksten die rechts over de serverruimte heen verschijnen, niet meer als plaatje maar als "gewone" tekst in een div moet zetten?

Ja

• "Wat is voor u..." is tekst die in Photoshop over de serverruimte gezet is. Die kan ik dus alleen laten verdwijnen als ik van die tekst een apart plaatje maak OF als ik die tekst als HTML in een div stop (dus plain-tekst in plaats van een foto). Welke optie bedoel jij?

Apart plaatje van maken.

• stop ik de tekst rechts in divs die in tabelrijen liggen? Met andere woorden - snelle opzet:[/list]

HTML:

<table background="serverruimte.jpg">
<tr>
  <td><img onmouseover="t1.visibility: visible" src="button1.jpg"></td>
  <td><div id="t1" style="visibility: hidden"><img src="tekst1.jpg"></div></td>
</tr>
</table>

Mwah, het kan ook in normale divs zonder table enzo