Website laad sloom en tips?

Status
Niet open voor verdere reacties.

MrHook

Gebruiker
Lid geworden
28 dec 2008
Berichten
354
Hee allemaal,

Ik heb onlangs een website gemaakt en ik wil graag weten hoe ik hem sneller kan laten laden. ik heb hem nu nog op 000webhost staan dus die is van zich zelf al niet snel maar hij laad wel echt heel sloom. en misschien heeft iemand tips voor het aanpassen of andere dingen?

Ik heb nu eerst de lay-out gemaakt in fotoshop CS4 en toen met de slice tool de menu afbeeldingen en het vak waar de tekst moet komen en het logo en nog wat gesliced en de bestanden opgeslagen als PNG-24 maar hij laad heel sloom.
en is er een andere manier? dat ik vanuit dreamweaver alles opbouw zeg maar. want nu heb ik de navigatiebalk onder in afbeeldingen maari k wil het graag onderstreept en als ik er op kom dat het dik gedrukt krijg, zoiets als de header van deze site zeg maar.

ik werk ook met schaduw maar die kan ik niet met dreamweaver maken of wel? kan iemand met mij stap voor stap uit leggen hoe het werkt of weet iemand iets.

de site is: http://koenmaassen.comxa.com/

alvast heel erg bedankt!

MrHook
 
Laatst bewerkt:
000webhost heeft sowieso servers in de VS staan dus verwacht een niet al te snelle laadtijd.
De pc die de website opzoekt moet allereerst naar de server in de VS communiceren en dan moet die communicatie weer terug.
Dat kost nou eenmaal wat meer tijd.
 
He!

Ik vind hem bij mij niet bepaald sloom lopen, juist lekker snel en soepel :D

Maarja wat me voorganger ook al zei de servers zitten in de VS, je kan eventueel een Nederlandse host zoeken die wel hun servers in Nederland hebben staan.
 
Ik weet het nu echt zeker: het ligt zelfs niet alleen aan de hosting maar ook aan de domeinnaam die op een subdomein van 000webhost.com (eigenlijk comxa.com) is gehost.

Dit maakt sites ook veel langzamer.
 
Wat al veel zal helpen, ook met je vindbaarheid door google, is tekst daadwerkelijk als tekst en niet als plaatjes op de site zetten. Dat zou al een stuk sneller laden. Voor ieder plaatje moet de browser een verzoek doen aan de server en dan wachten tot het plaatje binnenkomt. Tekst wordt gewoon gelijk met het html bestand geladen waar het in zit.

Overigens, als dit bedoeld is als een professionele site raad ik je toch aan te investeren in een echte domeinnaam en degelijke hosting (hoeft niet eens duur te zijn), want op deze manier trek je geen klanten.
 
Allemaal bedankt voor deze reacties, het is ook inderdaad de bedoeling voor een .nl domein en .com en .eu

dit is tijdelijk voor het uitproberen van de site.

de tekst zelf zet ik in editeble regions.

de tekst eronder weer ik niet hoe ik die in tekst krijg, kan iemand mij dat misschien uitleggen?

MrHook
 
Hoi MrHook,
Aha, nu begrijp ik ook wat je in een andere vraag bedoelde met het invliegen van een vogeltje in een nestkastje! ;)
Daar zullen we ook een mouw aan passen. Maar eerst nog heel wat anders ...
- - - - - - - - - - -
Nou, die Photoshop met zijn "handige" slice-tool en Dreamweaver hebben er een mooie bende van gemaakt. Dit is helaas een goed voorbeeld van hoe het niet moet:
  • Deze toch simpel opgezette pagina is in 50 images (vijf-tig!) gesliced.
  • Om die op hun plaats te krijgen, zijn tabellen voor de opmaak gebruikt.
  • De afbeeldingen zitten er allemaal als voorgrond-afbeeldingen in, zodat je er geen tekst overheen kunt zetten (tenzij met heel veel moeite).
  • Er zitten ook wat essentiële fouten in de html.
  • Als je de handel ombouwt tot achtergrondafbeeldingen (waar wel tekst overheen kan komen), dan zorgt de tabel-opmaak in vaste cellen ervoor, dat de pagina uit elkaar valt bij meer tekst dan er in een cel past.
  • De html wordt door de tabellen vreselijk onoverzichtelijk, en als je over een paar maanden eens iets wilt wijzigen, zoek je je het rimram.
  • Voor elke pagina zou je opnieuw zo'n verfoeilijke tabel moeten maken, wat schouwspelen oplevert als dit:
HTML:
<tr>
    <td colspan="2"><img src="images/index_41.png" width="32" height="9" alt=""></td>
    <td colspan="2"><img src="images/index_42.png" width="41" height="9" alt=""></td>
    <td colspan="3"><img src="images/index_43.png" width="22" height="9" alt=""></td>
    <td><img src="images/index_44.png" width="37" height="9" alt=""></td>
    <td colspan="2"><img src="images/index_45.png" width="46" height="9" alt=""></td>
    <td colspan="2"><img src="images/index_46.png" width="43" height="9" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
    <td rowspan="2"><img src="images/index_47.png" width="19" height="30" alt=""></td>
    <td colspan="15"><img src="images/index_48.png" width="214" height="10" alt=""></td>
    <td rowspan="2"><img src="images/index_49.png" width="23" height="30" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
    <td colspan="15"><img src="images/index_50.png" width="214" height="20" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
    <td><img src="images/spacer.gif" width="63" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="38" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="101" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="27" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="13" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="34" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="4" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="11" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="37" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="31" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="20" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="23" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="55" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="5" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="137" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="23" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="51" height="1" alt=""></td>
</tr>
enz.
enz.
enz.
't Is bar en boos!
Maar we gaan die jongens en meisjes van Adobe eens een lesje leren!
:d :d :d
We slopen de tabel uit de pagina, en ach, de hele rest eigenlijk ook maar: we beginnen gewoon overnieuw met een lege pagina.
  • Alle afbeeldingen gaan naar de achtergrond, behalve het logo.
  • Met CSS zetten we alles op z'n plaats.
  • Ik werk altijd direct in de broncode (code-weergave), dat gaat wel zo vlot. En dat kan ook in Kladblok (of de betere Notepad++), dus de hele Dreamweaver hebben we niet nodig.
  • Bij elke fase kan je in de broncode zien wat ik precies gedaan heb.

Fase 1
Behalve bovenaan en onderaan bestaat de pagina eigenlijk uit één kolom met verloop-grijs aan de randen, en wit in het midden. Die kolom plaatsen we zichzelf naar beneden toe herhalend (met repeat-y) in het midden van de pagina. Hij wordt 770px breed, anders wordt het zo smalletjes op een breedscherm monitor (en op een resolutie van 800x600px past het er nog steeds op).

Fase 2
Aan de onderkant maken we een <div> ("division" = indelingsblok) precies zo groot als het onderrandje met schaduw.

Fase 3
Bovenaan maken we ook een <div>, de "header". Deze ligt vanzelf in een vlak boven de achtergondkolom, en in deze <div> kunnen we een nieuwe achtergrondfiguur zetten. Dat is de achtergrond voor de kop, die nu mooi op de onderliggende kolom is geplakt, en deze op die plek onzichtbaar maakt.

Fase 4
Tot nu toe hebben we 3 afbeeldingen gebruikt. Maar die kunnen we naast elkaar in één afbeelding samenvoegen. Dan hoeft er maar één keer een image op de server opgehaald te worden in plaats van drie. Omdat het achtergrond-afbeeldingen zijn, kunnen we met de onderdelen van het ene image gaan schuiven tot ze op de goede plek zitten: met de eigenschap, jawel: background-position.

Fase 5
Tijd voor het logo. Ik heb 't logo wat minder hoog gemaakt, zodat er meer ruimte overblijft voor de inhoud van de pagina, en 't vogeltje war gezelliger ingekleurd.
Eerst in de html zetten ...

Fase 6
... en dan naar de goede plek verhuizen. Op het logo kan geklikt worden om naar de homepage te gaan.

Fase 7
Maar het logo als plaatje heeft geen tekst, en dat is wat moeilijk lezen voor Google en tekstvoorlees-browsers. We maken er ook een tekst-link bij.

Fase 8
Maar dat staat niet mooi. Dus halen we die tekst-link van het scherm af door 'm op een positie van 9999px links van het beeldscherm te zetten. Niets meer te zien! Maar Google en tekstbrowsers kunnen 'm wel lezen.

Fase 9
Faviconnetje gemaakt en toegevoegd.

Fase 10
De nestkastjes! Deze namen in het origineel nogal wat ruimte in beslag. XZe zijn wat verkleind, en naar rechts boven verhuisd, zodat er weer meer ruimte overblijft voor de inhoude van de pagina zelf. Zo kunnen ze ook op alle pagina's blijven staan zonder te storen.
Er meteen een gecombineerd e afbeelding van gemaakt, meer ook de kastjes met hover-effect erin. Eerst een horizontaal menu-lijstje met allemaal dezelfde.

Fase 11
Dan de achtergrondposities aangepast zodat het de verschillende kastjes voor de links zijn.

Fase 12
De hover-posities erbij. Daar vliegen je vogeltjes! :)

Fase 13
Met een class-naam voor de body (.home, .kim, .kosten, enz.) kan je regelen dat bij een bekeken pagina telkens zijn eigen kastjes uit het menu "aan" staat.

Fase 14
Als de opmaak van de voetregels klaar is, kan de opmaak van de inhoud in de css gezet worden: alles is klaar om de pagina te vullen.

Fase 15
Alle css is in een apart "stylesheet" gezet. Dat kan nu meteen voor alle andere pagina's gebruikt worden.
Klaar! :)

Resultaten
  • Er zijn nu 3 images gebruikt in plaats van 50: dat scheelt dus 47 keer aanvragen van een image bij de server.
  • De gecombineerde afbeeldingen hebben een meer dan drie keer kleinere bestandsgrootte dan de losse.
  • De tabellen zijn van het toneel verdwenen.
  • De nu nog lege pagina is zeker vier keer zo snel geworden. Bij een pagina die met inhoud gevuld wordt, is het verschil tussen de twee modellen nog groter.
  • Aan html in de <body> is een hele pagina nu geworden:
HTML:
<body class="home">

<div id="wrapper">
   <div id="header">
      <ul id="menu">
         <li><a id="home"    title="Home"    href="#"><span>Home</span></a></li>
         <li><a id="kim"     title="Kim"     href="kim.htm"><span>Kim</span></a></li>
         <li><a id="kosten"  title="Kosten"  href="kosten.htm"><span>Kosten</span></a></li>
         <li><a id="kadobon" title="Kadobon" href="kadobon.htm"><span>Kadobon</span></a></li>
         <li><a id="kontakt" title="Kontakt" href="kontakt.htm"><span>Kontakt</span></a></li>
      </ul>
      <a href="index.html" title="Naar Kim's Kiekjes homepage"><img 
         src="images/kkiekjes-logo287x145.png" width="287" height="145" 
         alt="" /><span>Kim's Kiekjes</span></a>
   </div>
   <div id="content">
   ...
   hier de inhoud van de pagina
   ...
   </div>
</div>

<div id="bottom"><!-- ! --></div>

<div id="footer">
   ...
   hier de inhoud van de voettekst
   ...
</div>

</body>

Zo, dat was in sneltreinvaart van tabel- naar css-opmaak, en van slices naar css-sprites. ;)
De theorie in een wat langzamer tempo staat hier mooi uitgelegd:
Succes!
Met vriendelijke groet,
CSShunter
 
dit is nou een goede uitleg, hier ben ik echt heel blij mee. dus helpt echt!

Bedankt!

nu heb ik nog een paar kleine vraagjes.
ik ga even net doen alsof ik net begin met alles, hoe krijg ik dit nu in dreamweaver? en hoe sla ik het op als template? ik wil graag alle pagina's die er zo komen uit te zien. en sorry van de vogeltjes, maar de kleuren moeten blijven zoals ze waren, die zijn gekocht bij een bedrijf en ze wil ook dat ze zo blijven.

waar kan ik trouwens alle afbeeldingen vinden?

Gr,
MrHook

Echt super bedankt!
 
Heb je misschien ergens de afbeeldingen voor me?

echt super bedankt! alles gaat super snel en dit is inderdaad veel sneller!

MrHook
 
Heb je misschien ergens de afbeeldingen voor me?
Yo! Hiervoor zijn verschillende alternatieven:
  • De gebruikte images heb ik in de verschillende fases van m'n voorbeelden aanklikbaar gemaakt: even klikken en downloaden maar.
  • Even in de broncode van mijn pagina's kijken waar ze bij mij zitten, en downloaden maar.
  • Allemaal op een rijtje (1): via de Web Developer Toolbar in Firefox (zeer aanbevolen!), en dan in Menu > Images > View Image Information.
  • Allemaal op een rijtje (2): in het mapje www.developerscorner.nl/csshunter/tests/images/?C=M;O=D, met het trefwoord kkiekjes-. :)
met vriendelijke groet,
CSShunter

PS: het idee van het vogeltje is leuk, maar dat je er als fotograaf voor kiest om te betalen voor zo'n saaie kleur, daar kan ik nou met mijn pet niet bij.
Maar ja, wie ben ik? ;)
 
Okee, echt heel erg bedankt!

ik zal is kijken wat ik er van kan maken en dan laat ik hier nog zien wat het is geworden,

Heel erg bedankt voor alles!

ik maak de site voor iemand, zei wil het zelf ook zo dus ik vind het goed:)
 
Ik heb nu de site af, hoe kan ik nu de homepage maken met die css code?
ik heb al een beetje zitten knutselen maar het is nog best lastig.

kan je die niet even bekijken met mij?

MrHook
 
hier de foto's bij de info die ik je gemaild heb:

sub.jpghome kim.jpg

Alvast bedankt!

Mvg,
MrHook
 
Hoi MrHook,
Als ik een screenshot van de huidige pagina http://koenmaassen.comxa.com/ maak, en ik leg daar je plaatje met de nestkastjes home_kim.jpg overheen, dan kloppen de maten niet.
De breedte van de echte pagina is 740px, die van het image is 560px.
Als je de maten wilt laten kloppen, zou je het nestkastjes-menublok met 1/3 moeten vergroten. Maar vanuit de huidige afbeelding gaat dat niet.
Het is nu al een veel te veel gecomprimeerde .jpg afbeelding die een onscherp resultaat met rare pixel-wolken te zien geeft. Vergroot je dat met een factor 1,3 dan wordt het in de best haalbare kwaliteit:

kkiekjes-homemenu-kastje-new.png

(op ware nieuwe grootte)

Bij uitvergroten zie je goed wat er aan de hand is:
kkiekjes-homemenu-kastje-new3x.png

(nieuwe grootte, 3x uitvergroot)

Da's niet zo mooi! :confused:
Het eerste wat nodig is, is dus een nieuw image met de nestkastjes op ware grootte (en dan van goede kwaliteit). Het beste kan je dat opslaan als .png-bestand (niet als .jpg).

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo csshunter,

Ik heb de plaatjes met printscreen en paint gepost. dus de maten kloppen inderdaad niet. ik heb de originele plaatjes als je die wilt? je helpt me echt!

Mvg,
 
Laatst bewerkt:
ik heb de originele plaatjes, als je die wilt?
Mooi, maar ik wil ze niet! :P

Je kunt eerst zelf de "css-sprite" voor het hovermenu op de homepage gaan maken:
  1. Alle vogelkastjes samen uitsnijden en in één img zetten.
  2. Dat img vervolgens twee keer zo hoog maken.
  3. In de onderste helft nogmaals het plaatje van de bovenste helft zetten.
  4. Nu ga je in de bovenste helft ook in het eerste kastje een vogeltje zetten.
  5. In de onderste helft haal je alle vogeltjes weg, en worden het lege kastjes.
  6. Als je nog iets anders wilt veranderen bij de hovers (bv. kastjeskleur, tekstkleur, enz.), dan verander je dat in de onderste helft (want dat is de hover-helft).
  7. Opslaan als png!
Nu wil ik het wel eens zien! :)
(zet maar in je mapje /images/ op je server, met hier een link ernaartoe)

Met vriendelijke groet,
CSShunter
 
okee, welke afmetingen moeten de huisjes hebben?

Heel erg bedankt in ieder geval!
 
Mooi, dat ziet er een stuk beter uit! :thumb:
Nu kunnen we het menu gaan verplaatsen.
Ik stel voor dat je de huidige index.html even kopieert, en dan opslaat als "home.html". Dan hebben we die als testpagina zonder dat er iets mis kan gaan.
  • Als je nu in de <head> van de home.html zet:
    <style type="text/css">
    ...
    </style>
  • en dan i.p.v. de stippeltjes de hele inhoud van het stylesheet k-kiekjes.css inplakt,
  • en dan de link <link rel="stylesheet" type="text/css" href="k-kiekjes.css" /> weghaalt,
... dan kunnen we in de home.html zowel de html gaan aanpassen als de css, dan zie je meteen wat er gebeurt. Later kunnen we de uitgevonden css weer tot apart stylesheet promoveren.

We gaan eerst het bestaande menu uit de <div id="header"> weghalen en op de goede plaats zetten.
  • Waar denk je dat het menu in de html moet komen?
  • Zet 't menu daar maar neer, en geef hier de link naar de gefabriekte home.html.
Dan kunnen we daarna het nieuwe menuknoppen-plaatje gaan gebruiken, en de css daarop aanpassen (alléén voor deze homepage).

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan