{ CSS } Background-image laad langzaam.

[Zakkenwasser]

Nu ben ik al de hele ochtend bezig met mijn website.

Ik ben al via google en GoT wezen zoeken maar kom niet tot de resultaten die ik hoop te krijgen.

www.misterjey.com laad al vrij snel.
en mijn CSS2.1 is W3c validated, net als mijn XHTML.

Alleen laad de CSS propertie
"background-image: url(bglay.jpg);
background-repeat: repeat;"

als laatst, waardoor je moet wachten voordat je de volledige website in volle glorie kan zien.

+ Wat ook vrij vervelend is dat ik een paar seconden moet wachten voordat ik de andere menu delen kan gebruiken.

Ik heb mijn XHTML ook al geoptimaliseerd, net als mijn javascript en mijn CSS bestanden.

[Icekiller2k6]

Kun je is een .zip op de host zetten? maakt niet uit wat kunnen we is een speedtest doen.. denk dat je gewoon een trage webhost hebt.

[Spockz]

Hier met Fx 3 heb ik geen problemen. Het laden van je headerplaatje duurt het langst maar ik kan wel meteen doorklikken naar andere pagina's. Welke browser gebruik je?

edit: IE7 Vertoont inderdaad de gemelde kuren.

[ Voor 13% gewijzigd door Spockz op 28-06-2008 11:21 ]

[CodeCaster]

Ik vind dat de banner verschrikkelijk traag laadt voor een bestand van 89 KB

[ Voor 3% gewijzigd door CodeCaster op 28-06-2008 11:21 ]

[WeeJeWel]

in de html, kun je een <img src="bglay.jpg alt="" style="display:none;"> plaatsen net na de body tag.

[Onbekend]

In FF3 zie ik dat probleem niet, maar in IE7 wel.

Ik begin dan ook wel te denken dat je webhost de oorzaak is van die vertraging.
Heb je al eens geprobeerd om de website lokaal te draaien en te testen?

[Knaak]

Tip: Schoon je bron ook eens op, dat leest makkelijker en zo kunnen wij naar eventuele fouten kijken.

De Header laad enorm traag ja, zoiets noem je geen banner

[Bozozo]

Je laadt alle content in op de eerste pagina. Vervolgens gebruik je javascript om de juiste content weer te geven.

Mijn suggestie:
1. Gebruik gewoon subpagina's. Dus normale links.
2. Als je dan toch hip wil doen met javascript, gebruik dan AJAX om de subpagina's te laden en plemp niet alle content in 1 html file.

Verder kun je stylesheets volgens mij het beste zo hoog mogelijk in je head plaatsen, en scripts zo laag mogelijk.

[Zakkenwasser]

MOAW schreef op zaterdag 28 juni 2008 @ 11:22:
Tip: Schoon je bron ook eens op, dat leest makkelijker en zo kunnen wij naar eventuele fouten kijken.

De Header laad enorm traag ja, zoiets noem je geen banner

done, heb ff xhtml terug gezet naar beter leesbare code

[Onbekend]

Ik zie dat je een fotopagina hebt.
Deze foto's worden altijd opgehaald, ook al bekijkt je bezoeker deze foto's niet.
Ik raad je aan om hiervan een aparte pagina te maken. Je hebt niet alleen tijdwinst, maar het scheelt ook veel bandbreedte.

[apokalypse]

Misschien download de browser eerst de favicon? Die is ruim 300kB

Trouwens, de gehele pagina + images + css e.d. is ruim 1 mB!

[Voutloos]

apokalypse schreef op zaterdag 28 juni 2008 @ 11:40:
Misschien download de browser eerst de favicon? Die is ruim 300kB

Holy shit.

Anders kijk je gewoon zelf eens eerst in FireBug > Net, of YSlow.

[Johnny]

Standard-based design is meer dan door de validator komen. Door alles op een pagina te zetten gooi je zomaar het hele idee achter URI's uit het raam en krijg je ook dit soort problemen met lange wachttijden omdat alle content wordt geladen ongeacht of de gebruiker daar om gevraagd heeft of niet.

[Zakkenwasser]

apokalypse schreef op zaterdag 28 juni 2008 @ 11:40:
Misschien download de browser eerst de favicon? Die is ruim 300kB

Trouwens, de gehele pagina + images + css e.d. is ruim 1 mB!

rectificatie: 300kB, is wel veel voor een favicon

[ Voor 16% gewijzigd door Zakkenwasser op 28-06-2008 11:56 ]

[apokalypse]

[quote]MrJey schreef op zaterdag 28 juni 2008 @ 11:48:
[...]

eerder 3kB
[/quote]
?

MrJey schreef op zaterdag 28 juni 2008 @ 11:48:
[...]

de favicon weegt 3kB, geen 300kB

Volgens Firefox niet. Zie bij pageinfo. (staat precies: 361.4KB voor shizzel.ico)

Kan ik geen images uploaden hier

[ Voor 53% gewijzigd door apokalypse op 28-06-2008 11:59 ]

[Voutloos]

MrJey schreef op zaterdag 28 juni 2008 @ 11:48:
[...]
eerder 3kB

Eerder drie honderd en zestig duizend bytes.

En eens met Johnny, standaarden begrijpen betekent ook dat je snapt waar URLs voor dienen. En bovendien zuigt je pagina compleet zodra js uit staat.

Zie http://www.websiteoptimiz...http://www.misterjey.com/ voor meer dan genoeg commentaar op je filesize. En dan neemt deze niet eens shizzel.ico mee.

[ Voor 22% gewijzigd door Voutloos op 28-06-2008 11:58 ]

[apokalypse]

Goed, als je niet steeds je bericht veranderd, is dat minder verwarrend.

Anyway, 300KB of niet. 1MB is zeer groot voor een webpagina.

[Zakkenwasser]

Voutloos schreef op zaterdag 28 juni 2008 @ 11:55:
[...]
Eerder drie honderd en zestig duizend bytes.

En eens met Johnny, standaarden begrijpen betekent ook dat je snapt waar URLs voor dienen. En bovendien zuigt je pagina compleet zodra js uit staat.

enige suggestie's om pagina ook te laten werken zonder javascript ?

- Ajax?

[apokalypse]

MrJey schreef op zaterdag 28 juni 2008 @ 12:01:
[...]

enige suggestie's om pagina ook te laten werken zonder javascript ?

- Ajax?

AJAX: Asynchronous JavaScript and XML

Gewoon subpagina's maken, losse HTML bestanden dus.
Gebruik van AJAX zou wel beter zijn dan nu. Nu laad je alles in 1x.

[ Voor 21% gewijzigd door apokalypse op 28-06-2008 12:03 ]

[Zakkenwasser]

apokalypse schreef op zaterdag 28 juni 2008 @ 12:02:
[...]

AJAX: Asynchronous JavaScript and XML

Gewoon subpagina's maken, losse HTML bestanden dus.
Gebruik van AJAX zou wel beter zijn dan nu. Nu laad je alles in 1x.

Is iets om een saaie zondag middag mee te vullen, ik zie inderdaad nu wat er zoal fout gaat.

Maar ook daar leer je weer van

Bedankt zover

[Knaak]

Je zou ook gewoon alles uit een database kunnen opvragen, dit geld natuurlijk alleen voor content gerichte pagina's. Tevens even je favicon wegdoen, dit is overbodig. Ook zou je je foto pagina volledig uit kunnen laten lezen van de root dir van je server. Dit natuurlijk alleen wanneer een bezoeker de pagina opvraagd.

WIl je het niet moeilijk doen, maar simpel beginnen, dan raad ik je echt aan om 5-6 verschillende XHTML bestanden te maken met hierin de desbetreffende content. Dat scheelt enorm.

[TheBorg]

WeeJeWel schreef op zaterdag 28 juni 2008 @ 11:21:
in de html, kun je een <img src="bglay.jpg alt="" style="display:none;"> plaatsen net na de body tag.

Smart.

Als het om een achtergrond plaatje zou een het zetten van een achtergrond kleur een optie kunnen zijn. In dit geval bijv. de kleur oranje uit bglay.jpg, alles is dan meteen goed leesbaar.

MOAW schreef op zaterdag 28 juni 2008 @ 17:07:
Tevens even je favicon wegdoen, dit is overbodig.

Wat een onzin (hij moet natuurlijk wel worden aangepast). Tegenwoordig hebben alle browsers tabs en herkennen mensen het venster juist aan de favicon.

[ Voor 3% gewijzigd door TheBorg op 28-06-2008 17:22 ]

[Knaak]

Dus jij vind het nuttig om 360KB te downloaden voor een icoon van 16x16?

Ik bedoel het meer van "waarom nu al met fancy favicons aankomen als de paginas/website zelf nog niet naar behoren werkt". Dat soort dingen horen pas later, want het is geen must om een goed draaiende en snel ladende website te hebben.

[Icekiller2k6]

MOAW schreef op zaterdag 28 juni 2008 @ 17:29:
Dus jij vind het nuttig om 360KB te downloaden voor een icoon van 16x16?

Ik bedoel het meer van "waarom nu al met fancy favicons aankomen als de paginas/website zelf nog niet naar behoren werkt". Dat soort dingen horen pas later, want het is geen must om een goed draaiende en snel ladende website te hebben.

dat zei hij helemaal niet.. hij zei dat favicon moet blijven maar een 'simpelere' een lichtere.. lezen wat er staat en niet wat je denkt dat er staat

[Zakkenwasser]

Opgelost, ben bezig geweest met ajax implentatie en externe htm bestanden.

nu gaat de site veel sneller, en wordt content pas opgeroepen als de user zelf op een link drukt

maarjah die 56k users moeten maar 8 seconden wachten, of een breeedband abo nemen denk ik

[Onbekend]

Je site werkt nog niet goed.
Ik heb hier IE6 en daarin geeft hij een javascript fout.
Hierdoor zie ik geen alleen de pagina lay-out maar geen tekst er in.
Je navigatiemenu werkt ook niet.

[Blaise]

MrJey schreef op zondag 29 juni 2008 @ 11:55:
Opgelost, ben bezig geweest met ajax implentatie en externe htm bestanden.

... waardoor je niet meer kan linken naar losse pagina's, je site niet werkt zonder javascript, en Google je website niet kan indexeren. Waarom niet gewoon linken naar nieuwe pagina's? Alle statische bestanden (plaatjes, externe javascript, externe css) worden gecached, dus hoeven na de eerste pagina niet opnieuw te laden.

[Zakkenwasser]

Blaise schreef op zondag 29 juni 2008 @ 13:01:
[...]

... waardoor je niet meer kan linken naar losse pagina's, je site niet werkt zonder javascript, en Google je website niet kan indexeren. Waarom niet gewoon linken naar nieuwe pagina's? Alle statische bestanden (plaatjes, externe javascript, externe css) worden gecached, dus hoeven na de eerste pagina niet opnieuw te laden.

Dat is enigzins wel begrijpenlijk.

Maar een simpele versie van:
<a href="film.htm">click</a>
in een
<div id="dynamica"></div>

die zonder javascript werkt heb ik nog niet kunnen vinden

/Probleem van een nieuwe pagina laden, is dat er een wit scherm te zien is voor korte duur na een menu-klik.
Ik wil het allemaal zo smooth mogenlijk laten verlopen.

Vandaar deze oplossing dacht ik dus.

[ Voor 14% gewijzigd door Zakkenwasser op 29-06-2008 13:56 ]

[Facer]

BIj me vorige werkgever hadden we daar een stuk JavaScript code voor waardoor je dat probleem van overgang naar andere pagina kan "vermijden".

Fake Alternative to Ajax

Fajax -- the fake alternative to ajax werkt alleen in Internet Explorer

[ Voor 42% gewijzigd door Facer op 29-06-2008 14:22 ]

[Bosmonster]

Die overgang verschilt ook per browser. Ik heb hier in Firefox zelden last van flikkeringen als ik tussen pagina's van dezelfde opbouw klik. Niet echt iets om rekening mee te houden in ieder geval en al helemaal geen reden om een of andere oplossing te bedenken die je vervolgens weer meer problemen geeft dan dat het oplost.

Dat 'Fajax' (of eigenlijk gewoon een kazige page-transition, wat dat in hemelsnaam met AJAX te maken heeft is mij een raadsel..) snap ik ook niet. Daarmee weet je zeker dat iedere pagina overgang minimaal 0.5 seconde duurt. Joepie, daar gaat je snelle overgang en responsiviteit.

edit: Ah ik snap al waarom ze die met ajax associeren. Het komt door een andere ranzige Microsoft uitvinding: PostBack. Voor de mensen die niet met echt AJAX kunnen werken en voor ieder wijzigingetje de complete pagina refreshen, heb je dan minder flikkeringen in IE.

[ Voor 47% gewijzigd door Bosmonster op 29-06-2008 14:28 ]

[Facer]

Bosmonster schreef op zondag 29 juni 2008 @ 14:22:
Die overgang verschilt ook per browser. Ik heb hier in Firefox zelden last van flikkeringen als ik tussen pagina's van dezelfde opbouw klik. Niet echt iets om rekening mee te houden in ieder geval en al helemaal geen reden om een of andere oplossing te bedenken die je vervolgens weer meer problemen geeft dan dat het oplost.

Dat 'Fajax' (of eigenlijk gewoon een kazige page-transition) snap ik ook niet. Daarmee weet je zeker dat iedere pagina overgang minimaal 0.5 seconde duurt. Joepie, daar gaat je snelle overgang en responsiviteit.

Van de website commentaar:

'Ricaute' on Thu, 01 Jun 2006 17:03:25 GMT, sez:

This meta tag paint the page without the fade effects. No delay to show a page.

<meta http-equiv="Page-Enter" content="Alpha(opacity=100)">

Zelf heb ik de code niet gecontroleerd en weet ook niet precies wat er nu gebeurd als je deze tag toevoegt aan de site.

[ Voor 4% gewijzigd door Facer op 29-06-2008 14:27 ]

[Zakkenwasser]

sorry guys,
ik ben nog geen AJAX expert, ik probeer een oploossing te vinden om externe pagina's in een div container te laden, zonder dat google of non-javascript browsers er problemen mee gaat krijgen.

Zodat iedereen, zelfs voor mensen met MSI 3.0

[Blaise]

Maar een simpele versie van:
<a href="film.htm">click</a>
in een
<div id="dynamica"></div>

die zonder javascript werkt heb ik nog niet kunnen vinden

PHP:

<?php 
    include('film.htm'); 
?>

[Zakkenwasser]

Blaise schreef op zondag 29 juni 2008 @ 15:16:
[...]

PHP:

<?php 
    include('film.htm'); 
?>

ik heb nog geen kaas gegeten van PHP, maar ziet er wel makkenlijk uit om te knippen en te plakken, en aan te passen naar het doen en laten van mijn website.

als ik van iedere pagina een nieuwe pagina zou moeten gaan maken, dan heb ik 14 losse bestanden die bijna even zwaar zijn, afhankenlijk van de inhoud dan wel.

Weet ik de 2 Hoofdpagina's : Engels/ Nederlands, te voorzien van de totale site. = 2 zwaardere bestandjes met de 12 Menu informatie bestanden die alleen de informatie dragen en daardoor ook minder zwaar wegen.

Waardoor de gebruiker minder kB's aan download tijd kwijt is, en alles vloeinder gaat zonder dat de browser hoeft te refreshen.

Ik gok dat PHP include mij wel gaat helpen

[ Voor 45% gewijzigd door Zakkenwasser op 29-06-2008 15:38 ]

[WeeJeWel]

Dat Fake ajax kan veel beter crossbrowser.

even de blendTrans code downloaden, en dan de body laten uitfaden. Easy as that.

[Zakkenwasser]

Ik ben vannacht nog ff wezen zoeken op Dynamic Drive, waarvan ik de huidige "incompatible with IE5.5 en IE6.0"script vandaan heb geplukt.

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Hier wordt echter wel beweerd dat ie5.0+ en ff1.0+ ermee zou moeten werken.
Ik ben nu dus opzoek naar een manier om de code aantepassen waardoor oudere browser er wel mee kunnen werken.

tips zijn welkom :-)

[Voutloos]

Bosmonster schreef op zondag 29 juni 2008 @ 14:22:
Niet echt iets om rekening mee te houden in ieder geval en al helemaal geen reden om een of andere oplossing te bedenken die je vervolgens weer meer problemen geeft dan dat het oplost.

Met stom.

Leuk dat je je design en je front end buzzwords onder de knie hebt, maar van basic html, http en toegankelijkheid snap je echt helemaal geen ene (*$&%. Ja, dat is bot, maar de logica achter je site, of eerder het gebrek aan, slaat echt alles.

Denk eens wat meer aan de basis en KISS. Of specifiek gericht: blijf aub voorlopig van alle javascript troep af.

[TeeDee]

MrJey schreef op zondag 29 juni 2008 @ 15:24:
[...]
als ik van iedere pagina een nieuwe pagina zou moeten gaan maken, dan heb ik 14 losse bestanden die bijna even zwaar zijn, afhankenlijk van de inhoud dan wel.

Dus? Je bent wel bekend met het fenomeen 'cache'?

Weet ik de 2 Hoofdpagina's : Engels/ Nederlands, te voorzien van de totale site. = 2 zwaardere bestandjes met de 12 Menu informatie bestanden die alleen de informatie dragen en daardoor ook minder zwaar wegen.

Volgens mij zie je er gewoon tegen op om 2 x n-aantal bestanden bij te houden.

Waardoor de gebruiker minder kB's aan download tijd kwijt is, en alles vloeinder gaat zonder dat de browser hoeft te refreshen.

Onzin, nu moet je als first-time visitor lang wachten op een site. Langer dan ~6 secondes wachten en ik ben weg.

Doordat je nu heel leuk verschillende buzzwords hebt gehoord (en misbruikt) ben je imo verder van huis. Ik zou eerst eens even kijken naar wat elementaire kennis aangaande caching en usability.

[Zakkenwasser]

TeeDee schreef op maandag 30 juni 2008 @ 09:36:
[...]

Dus? Je bent wel bekend met het fenomeen 'cache'?

[...]

Volgens mij zie je er gewoon tegen op om 2 x n-aantal bestanden bij te houden.

[...]

Onzin, nu moet je als first-time visitor lang wachten op een site. Langer dan ~6 secondes wachten en ik ben weg.

Doordat je nu heel leuk verschillende buzzwords hebt gehoord (en misbruikt) ben je imo verder van huis. Ik zou eerst eens even kijken naar wat elementaire kennis aangaande caching en usability.

Ik sta overal voor open, ik kan inderdaad zoals je aangeeft wat kritieke basis punten over het hoofd hebben gezien.
Ik zal me eens wat meer gaan verdiepen in caching en usability

maar over dat buzzwords misbruiken moet je me nog meer uitleg gaan geven

[ Voor 4% gewijzigd door Zakkenwasser op 30-06-2008 10:08 ]

[TeeDee]

Onder andere dit

ik ben nog geen AJAX expert, ik probeer een oploossing te vinden om externe pagina's in een div container te laden,

In combinatie met

zonder dat google of non-javascript browsers er problemen mee gaat krijgen.

Dan krijg ik het idee dat je de melk hebt horen klotsen maar niet weten waar de uiers hangen.

Zorg dat je site zonder Javascript werkt, en wil je echt zo graag ajax (en dan dus alleen puur omdat het kan, niet omdat het van toegevoegde waarde is) gebruiken, decoreer je site ermee. Meer niet.

[apokalypse]

Ik snap niet zo goed waarom deze discussie nog loopt.....
Probleem is gevonden, en nu maar ruzie-en over wel/niet javascript/ajax/andere coole naam techniek, terwijl de topicstarter alleen zijn keuze heeft gemaakt.

[ Voor 58% gewijzigd door apokalypse op 30-06-2008 20:04 ]

[TeeDee]

apokalypse schreef op maandag 30 juni 2008 @ 20:03:
Ik snap niet zo goed waarom deze discussie nog loopt.....
Probleem is gevonden, en nu maar ruzie-en over wel/niet javascript/ajax/andere coole naam techniek, terwijl de topicstarter alleen zijn keuze heeft gemaakt.

Ach ja, we kunnen TS ook in het wilde weg laten slaan naar 'nieuwe' dingen terwijl dat niet eens hoeft. Als TS geholpen wordt met nieuwe inzichten in plaats van een oplossing voor een probleem wat er niet eens had hoeven te zijn...

goed dat je de discussie weer neer boven haalt

[Johnny]

Misschien wil MrJey ook nog wel een AJAX powered web 2.1 blink text op zijn website:

http://cheese.blartwendo.com/web21-demo.html

[Room42]

Johnny schreef op dinsdag 01 juli 2008 @ 00:20:
Misschien wil MrJey ook nog wel een AJAX powered web 2.1 blink text op zijn website:

http://cheese.blartwendo.com/web21-demo.html

offtopic:
Die is echt BRILJANT!