Stefanie: Akzeptable Ladezeiten?

Hallo,

wie hoch sollte maximal die akzeptable Ladezeit einer Webseite bei einem
56K-Modem sein? (Unter Berücksichtigung der fallenden Verbreitung dieser
Modems.)
Gibt es darüber Statistiken oder Untersuchungen wann spätestens die meisten
Besucher wegen zu hoher Ladezeiten wegklicken?
Wie/wo kann man die Ladezeit der eigenen Webseite einfach und schnell messen
ohne alles "zu Fuß" ausrechnen zu müssen?

Gruß
Stefanie

  1. Hi!

    Wie/wo kann man die Ladezeit der eigenen Webseite einfach und schnell messen

    hier z.B.
    LG Ulysses

    1. Wie/wo kann man die Ladezeit der eigenen Webseite einfach und schnell messen
      hier z.B.
      LG Ulysses

      Genau was ich gesucht habe! Danke :-) Bleibt nur die Frage wieviel Sekunden
      bei einem 56K-Modem noch gerade so akzeptabel sind.

      1. Hi!

        Genau was ich gesucht habe! Danke :-) Bleibt nur die Frage wieviel Sekunden
        bei einem 56K-Modem noch gerade so akzeptabel sind.

        Darüber steht auch etwas dort:
        „Based on current average web page size and composition trends you want your page to load in less than 20 seconds on a 56Kbps connection, with progressive feedback.“
        Mir persönlich wäre das aber zu langsam...

        LG Ulysses

        1. Hi!

          Genau was ich gesucht habe! Danke :-) Bleibt nur die Frage wieviel Sekunden
          bei einem 56K-Modem noch gerade so akzeptabel sind.
          Darüber steht auch etwas dort:
          „Based on current average web page size and composition trends you want your page to load in less than 20 seconds on a 56Kbps connection, with progressive feedback.“
          Mir persönlich wäre das aber zu langsam...

          progressive feedback ist das ausschlaggebende

          wenn man seite seite "richtig herum" baut - dh zuerst den inhalt laden, dann das menü (reihenfolge im quelltext beachten) ist die gefühlte ladezeit um einiges schneller

        2. Genau was ich gesucht habe! Danke :-) Bleibt nur die Frage wieviel Sekunden
          bei einem 56K-Modem noch gerade so akzeptabel sind.
          Darüber steht auch etwas dort:
          „Based on current average web page size and composition trends you want your page to load in less than 20 seconds on a 56Kbps connection, with progressive feedback.“
          Mir persönlich wäre das aber zu langsam...

          Oh, dann war meine eigene Schätzung gar nicht so schlecht. Ich hatte
          10 bis 15 Sekunden bei 56K als akteptabel eingeschätzt. Meine Startseite
          lädt 8,4 Sekunden bei 56K, wobei das Headerbild satte 6,4 Sekunden lädt.
          Die restlichen Seiten dann nur ca. 2 Sekunden, da das Headerbild ja bereits
          geladen wurde. Ich denke insgesamt akzeptabel oder?

          1. Hallo!

            Genau was ich gesucht habe! Danke :-) Bleibt nur die Frage wieviel Sekunden bei einem 56K-Modem noch gerade so akzeptabel sind.
            Darüber steht auch etwas dort:
            „Based on current average web page size and composition trends you want your page to load in less than 20 seconds on a 56Kbps connection, with progressive feedback.“

            Du gehst das imho von der falschen Seite aus an. Die Ladezeit ist nur eine sekundäre Geschichte, die von vielen Faktoren abhängt, und von denen du etliche selber nicht beeinflussen kannst.

            Was du aber beeinflussen kannst, ist die Größe deiner Start-/ Einstiegsseite!
            Halte diese so gering wie irgend möglich. Verwende keine von fremden Servern eingebundene Sachen. Präsentiere möglichst kurz, prägnant und übersichtlich, was den User auf deinen Seiten erwartet, bzw. welche Inhalte er dort finden kann.

            Wenn man das berücksichtigt, dann kannst du den anderen Punkt getrost vergessen, denn die Antwort lautet dann immer:"Die Seite lädt so schnell, wie es die beteiligten Faktoren zulassen!".

            Oh, dann war meine eigene Schätzung gar nicht so schlecht. Ich hatte
            10 bis 15 Sekunden bei 56K als akteptabel eingeschätzt.

            Und wieviele User glaubst du teilen deine Einschätzung? Wieviele von denen besuchen deine Seite? Was ich sagen will ist, dass die Aussagekraft von eigenen Einschätzungen im Bezug auf eine "allgemeine" Gültigkeit, gegen Null tendiert.

            Meine Startseite lädt 8,4 Sekunden bei 56K, wobei das Headerbild satte 6,4 Sekunden lädt.
            Die restlichen Seiten dann nur ca. 2 Sekunden, da das Headerbild ja bereits
            geladen wurde. Ich denke insgesamt akzeptabel oder?

            Das hängt vom jeweiligen User und seiner persönlichen Einschätzung, Lust & Laune ab.

            Mein Eindruck ist folgender: Wenig Inhalte, aber dafür eine "tolle" (riesige) Grafik im Header, die vermutlich null Inhalt vermittelt.

            Gruß Gunther

            1. Meine Seiten werden in etwa 80KB insgesamt haben, davon das Headerbild 45KB.
              Wäre das akzeptabel?

              1. Hallo Stefanie!

                Meine Seiten werden in etwa 80KB insgesamt haben, davon das Headerbild 45KB.

                Wie? Und keine CSS-Datei? ;-)

                Wäre das akzeptabel?

                Nochmal: Ob das "akzeptabel" ist oder nicht, wird man letztendlich nie für alle potentiellen Besucher sagen können.

                Es geht doch vielmehr darum, dass du dich um einen sinnvollen Aufbau/ sinnvolle Struktur und "ordentlichen" Code bemühst, um somit alles Unnötige im Bezug auf Datenmengen und somit auch auf die Ladezeit vermeidest.

                Konkret: 80KB stellen sicherlich kein Problem dar - erscheinen mir eher sogar sehr gering. Das sagt aber im Endeffekt nichts über die bereits aufgezählten Kriterien aus.

                Mit anderen Worten: Imho machst du dir Gedanken über die "falschen" Dinge und läufst so Gefahr, die wirklich wichtigen zu übersehen, bzw. außer Acht zu lassen.

                Gruß Gunther

                1. Hallo Gunther!

                  Verstehe so langsam, daß Browser und Co. die Webseite halt irgendwie "ver-
                  arbeitet" und daß dabei eine ordentliche html-Struktur wichtig ist.

                  css-Datei habe ich ausgelagert. Schau doch mal kurz auf mein html, ist
                  das einigermaßen ordentlich strukturiert???

                  https://forum.selfhtml.org/?t=178617&m=1178952

  2. Hi Stefanie,

    Wie/wo kann man die Ladezeit der eigenen Webseite einfach und schnell messen ohne alles "zu Fuß" ausrechnen zu müssen?

    Ich empfehle: sloppy
    Damit kannst du deine Seite bei verschiednenen Geschwindigkeiten testen.

    Eine Statistik für das Nutzerverhalten kenne ich nicht, würde aber sagen:
    0-10s: In Ordnung (mit 56k)
    11-30s: Lahm, aber wenn gute Info erwartet wird, noch abwartbar
    30s+: Nervt, wird weggeklickt (es sei den es ist irgend ein flash Link, den man sehen will).

    Grüße,
    Richard

  3. wie hoch sollte maximal die akzeptable Ladezeit einer Webseite bei einem
    56K-Modem sein? (Unter Berücksichtigung der fallenden Verbreitung dieser
    Modems.)

    Unter der Voraussetzung, dass der Leser gleich mit Lesen Beginnen kann, ohne dass die Seite ganz geladen ist, spielen etwas grössere ladezeiten keine besondere Rolle.

    Gibt es darüber Statistiken oder Untersuchungen wann spätestens die meisten
    Besucher wegen zu hoher Ladezeiten wegklicken?

    Keine Ahnung. Ich kenne nur mein eigenes langjähriges K56 Verhalten. Ladezeit spielt keine Rolle, solange der Lesbare Inhalt dies rechtfertigt.

    Die Frage ist eher, welche unnütze Inhalte du mir sonst noch servierst (Javascript etc...)

    Wie/wo kann man die Ladezeit der eigenen Webseite einfach und schnell messen ohne alles "zu Fuß" ausrechnen zu müssen?

    Gar nicht. Die Ladezeit drückt einen höchst individuellen Wert aus. 2 verschiedene Anbieter können die gleiche Seite über ein 56k Modem verschieden schnell ausliefern. Zum beispiel, weil einer mod-deflate unterstützt, der andere aber nicht.

    mfg Beat;

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    1. Gar nicht. Die Ladezeit drückt einen höchst individuellen Wert aus. 2 verschiedene Anbieter können die gleiche Seite über ein 56k Modem verschieden schnell ausliefern. Zum beispiel, weil einer mod-deflate unterstützt, der andere aber nicht.

      Okay. Gilt jedoch grundsätzlich die Formel: Kapazität der Webseite /
      eine bestimmte Übertrragungsgeschwindigkeit = Ladezeit???

      Also dann doch besser alles zu Fuß ausrechnen um auf die genaue Ladezeit
      zu kommen?

      1. Okay. Gilt jedoch grundsätzlich die Formel: Kapazität der Webseite /
        eine bestimmte Übertrragungsgeschwindigkeit = Ladezeit???

        nein, da die ladezeit selbst irrelevant ist

        faktor 1)
        wie lange dauert es, bis der client die http-anfrage verschickt?
        faktor 2)
        wie schnell wird die seite am server erzeugt?
        faktor 3)
        wie lange dauerts bis der client beginnt, die daten zu erhalten
        faktor 4)
        wie lange dauerts bis die daten vollständig übertragen wurden
        faktor 5)
        wie lange benötigt der browser, bis die seite vollständig gerendert ist
        faktor 6)
        wie lange dauerts dann noch, bis das fertige dokument manipuliert wurde (etwa durch javascript)

        jeder einzelne dieser faktoren lässt sich aufteilen - zb faktor 2)
        c) datenbankreaktionszeit
        b) dateisystem
        c) prozessorleistung
        d) geschwindigkeit der script-engine

        Also dann doch besser alles zu Fuß ausrechnen um auf die genaue Ladezeit
        zu kommen?

        rechnen bringt nix, da du nicht alle faktoren und deren kombinationen kennst - sieh einfach zu, dass die seite "gefühlt" schnell geladen wird

        achte darauf auf möglichst schlanken quelltext mit einfacher html-struktur, welcher relevante informatione VOR den irrelevanten beinhaltet (menü, werbung und sonstiger dreck NACH dem inhalt)

        1. Hello,

          faktor 1)
          wie lange dauert es, bis der client die http-anfrage verschickt?
          faktor 2)
          wie schnell wird die seite am server erzeugt?
          faktor 3)
          wie lange dauerts bis der client beginnt, die daten zu erhalten
          faktor 4)
          wie lange dauerts bis die daten vollständig übertragen wurden
          faktor 5)
          wie lange benötigt der browser, bis die seite vollständig gerendert ist
          faktor 6)

          Wann beginnt der Client überhaupt mit dem Rendern?
          Dazu ich doch neulich erst 'was in die Finger bekommen. Muss aber zugeben, dass ich das im Moment selber nicht wiederfinde.

          informatione VOR den irrelevanten beinhaltet (menü, werbung und sonstiger dreck NACH dem inhalt)
          Liebe Grüße aus Syburg bei Dortmund

          Tom vom Berg

          --
          Nur selber lernen macht schlau
          http://bergpost.annerschbarrich.de
          1. Wann beginnt der Client überhaupt mit dem Rendern?

            HTML oder XML?

            mfg Beat

            --
            Woran ich arbeite:
            X-Torah
            ><o(((°>           ><o(((°>
               <°)))o><                     ><o(((°>o
            1. Wann beginnt der Client überhaupt mit dem Rendern?
              HTML oder XML?

              kommt sicher auf den browser drauf an - es ist durchaus möglich, dass auch sgml-parser anhand einer dtd vorhersagen kann, ob ein element zu einem bestimmten zeitpunkt geschlossen (wenn auch nur logisch und nicht physisch) sein wird

              sollte das dokument dann widererwarten doch anders aussehen, kann der browser immer noch umkrempeln

              ob das ganze als xml oder tagsoup geparst wird, spielt da nur eine untergeordnete rolle, da das parsen des dokuments nicht zwangsläufig wärend dem rendern passiert bzw ein fertig geparstes xhtml-file (als xml) vom xml-parser auch wieder an die layoutengine weiterreicht

              der unterschied zwischen application/xhtml+xml und text/html ist dabei schlichtweg, dass der browser bei ersterem davon ausgehen kann, dass er ein wohlgeformtes dokument rendert und sich die gegebenheiten während des reflow-prozesses nicht mehr ändern werden - bei html ist das eben nicht der fall

              1. Ausschließlich html, css, größere headergrafik und kleinere andere Grafiken.
                Nix wildes, keine Datenbank, kein Javascript usw.
                80KB für eine Startseite dann okay (Headergrafik 45KB)?

                1. Ausschließlich html, css, größere headergrafik und kleinere andere Grafiken.
                  Nix wildes, keine Datenbank, kein Javascript usw.
                  80KB für eine Startseite dann okay (Headergrafik 45KB)?

                  80kb kann heissen, dass du extrem effizenten quelltext geschrieben hast oder dass du absoluten, redundanten schwachsinn produziert hast :)

                  55kb für die startseite (das sind etwa 56.000 zeichen quelltext) erscheint mir aber doch etwas viel zu sein

                  im übrigen zählen auch leerzeichen, tabulatoren und umbrüche als zeichen - wenns hart auf hart kommt, kann man diese auch einsparen

                  1. Ausschließlich html, css, größere headergrafik und kleinere andere Grafiken.
                    Nix wildes, keine Datenbank, kein Javascript usw.
                    80KB für eine Startseite dann okay (Headergrafik 45KB)?

                    80kb kann heissen, dass du extrem effizenten quelltext geschrieben hast oder dass du absoluten, redundanten schwachsinn produziert hast :)

                    55kb für die startseite (das sind etwa 56.000 zeichen quelltext) erscheint mir aber doch etwas viel zu sein

                    Denke daran, dass 56k-Modem-User nicht permanent Online sind,und zuweilen Offline Content fragmentierten Häppchen vorziehen.
                    Man sollte nicht nur über Bandbreite sprechen.
                    Ich fand in meiner Vergangenheit 200kB vorwiegend Text angenehmer, und inhaltsrelevante Bilder nahm ich in Kauf.

                    Des weiteren gilt: Jede indexierte Seite ist eine Eintrittsseite.

                    im übrigen zählen auch leerzeichen, tabulatoren und umbrüche als zeichen - wenns hart auf hart kommt, kann man diese auch einsparen

                    BS is for Bullshit

                    mfg Beat

                    --
                    Woran ich arbeite:
                    X-Torah
                               ><o(((°>   ><o(((°>           ><o(((°>
                       <°)))o><                     ><o(((°>o
                    1. im übrigen zählen auch leerzeichen, tabulatoren und umbrüche als zeichen - wenns hart auf hart kommt, kann man diese auch einsparen

                      BS is for Bullshit

                      kannst du das irgendwie belegen?

                      ein zeilenumbruch belegt je nach system 1 oder 2 bytes, ein leerzeichen und ein tabulator auch

                      deine bullshit-keule hat den falschen getroffen ;)

                      besonders in stark verschachtelten html oder xml-konstrukten kann es äusserst schlau sein, am zeilenanfang anstatt um 4 oder gar 8 leerzeichen alternativ um 1 tab pro ebene einzurücken oder gar ganz auf umbrüche zu verzichten

                      wenn man wirklich das äusserste rausoptimieren will, ist das ein nicht zu unterschätzender einsparungspunkt

                      folgendes html benötigt 153 bytes

                        
                          <div>  
                              <p>  
                                  foo  
                              </p>  
                              <p>  
                                  bar  
                              </p>  
                              <p>  
                                  baz  
                              </p>  
                          </div>  
                      
                      

                      dieser hier, allein durch das ersetzen der 4 leerzeichen pro einrückung durch 1x tag verringert das ganze auf 107 bytes

                        
                        <div>  
                          <p>  
                            foo  
                          </p>  
                          <p>  
                            bar  
                          </p>  
                          <p>  
                            baz  
                          </p>  
                        </div>  
                      
                      

                      dieses hier ohen einrückungen: 41

                        
                      <div><p>foo</p><p>bar</p><p>baz</p></div>  
                      
                      
                      1. im übrigen zählen auch leerzeichen, tabulatoren und umbrüche als zeichen - wenns hart auf hart kommt, kann man diese auch einsparen

                        BS is for Bullshit
                        kannst du das irgendwie belegen?

                        Ja, anhand deines irrealen Belegs:

                        folgendes html benötigt 153 bytes

                        ...

                        dieser hier, allein durch das ersetzen der 4 leerzeichen pro einrückung durch 1x tag verringert das ganze auf 107 bytes

                        ...

                        dieses hier ohen einrückungen: 41

                        <div><p>foo</p><p>bar</p><p>baz</p></div>

                          
                        Kann Herr foo\_bar\_baz etwas Reales zwischen <p> stellen, damit die Zahlen weniger pompös daher kommen?  
                        Ein einziges Bild optimieren bringt 10 mal mehr und schadet bestimmt nicht.  
                        Das Gleiche kann man vom Whitespace-Knabbern nicht sagen.  
                          
                        mfg Beat;
                        
                        -- 
                        Woran ich arbeite:  
                        [X-Torah](http://www.elcappuccino.ch/cgi/tok.pl?extern=1-pub-com3306-1)  
                        
                        ><o(((°>           ><o(((°>  
                        
                           <°)))o><                     ><o(((°>o  
                        
                        
                        1. Kann Herr foo_bar_baz etwas Reales zwischen <p> stellen, damit die Zahlen weniger pompös daher kommen?

                          google.at

                          5800 bytes
                          schön eingerückt (2 leerzeichen pro einrückungsschritt) 11461 bytes
                          mit 4 leerzeichen pro einrückungsschritt sinds gar 16349 bytes
                          bei einer breite von 8 leerzeichen sind dann 26125 bytes

                          mir ist klar, dass der quelltext der google-startseite nicht das beste beispiel ist - aber es ist imho schon ein unterschied, ob meine starteseite 5 kb oder 11kb hat ;)

                          Ein einziges Bild optimieren bringt 10 mal mehr und schadet bestimmt nicht.

                          das ist klar, ich hab auch nichts gegenteiliges behauptet - es kommt aber auf die bildinformationen an, oft ist da auch nicht so viel zu holen

                          Das Gleiche kann man vom Whitespace-Knabbern nicht sagen.

                          wenn das entfernen sämtlicher einrückungen und umbrüche mindestens 50% ersparnis bedeutet, mach ich das sofort, wenns um den traffic geht ;)

                          1. [latex]Mae  govannen![/latex]

                            Kann Herr foo_bar_baz etwas Reales zwischen <p> stellen, damit die Zahlen weniger pompös daher kommen?
                            google.at

                            5800 bytes
                            schön eingerückt (2 leerzeichen pro einrückungsschritt) 11461 bytes
                            mit 4 leerzeichen pro einrückungsschritt sinds gar 16349 bytes
                            bei einer breite von 8 leerzeichen sind dann 26125 bytes

                            mir ist klar, dass der quelltext der google-startseite nicht das beste beispiel ist - aber es ist imho schon ein unterschied, ob meine starteseite 5 kb oder 11kb hat ;)

                            Seite                    |  Normal  |  gzip

                            formatiert, 8 LZ/ebene   |  15719   |  4716
                            -----------------------------------------------
                            alles entfernt           |  11798   |  4478

                            Ersparnis                |   3921   |   238

                            Das Gleiche kann man vom Whitespace-Knabbern nicht sagen.
                            wenn das entfernen sämtlicher einrückungen und umbrüche mindestens 50% ersparnis bedeutet, mach ich das sofort, wenns um den traffic geht ;)

                            fast 4K bringt gerade mal 238 Bytes, wenn der Webserver komprimiert.

                            Cü,

                            Kai

                            --
                            Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
                            selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
                            Mein Selfhtml-Kram
                  2. 80kb kann heissen, dass du extrem effizenten quelltext geschrieben hast oder dass du absoluten, redundanten schwachsinn produziert hast :)

                    Ich fürchte es ist redundanter Schwachsinn, weil ichs nur hobbymäßig mache.
                    :) Naja, immerhin w3c-konform und die Grafiken sehen einigermaßen gut aus,
                    schau mal:

                      
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
                    <html xmlns="http://www.w3.org/1999/xhtml">  
                    <head>  
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
                    <meta name="description" content="Bla." />  
                    <meta name="keywords" content="bla, bla, bla" />  
                    <meta http-equiv="pragma" content="no-cache" />  
                    <meta http-equiv="expires" content="0" />  
                    <title>bla.de</title>  
                    <link href="style.css" rel="stylesheet" type="text/css" />  
                    <link rel="shortcut icon" href="http://www.bla.de/favicon.ico" type="image/x-icon" />  
                    </head>  
                    <body>  
                    <div id="container">  
                        <div id="header">  
                         <div id="logo">&nbsp;</div>  
                            <div id="menu">  
                             <ul>  
                                <li><a href="index.html" class="active">Startseite</a></li>  
                                <li><a href="bla.html">Bla</a></li>  
                                <li><a href="bla.html">Bla</a></li>  
                                <li><a href="bla.html">Bla</a></li>  
                                <li><a href="bla.html">Bla</a></li>  
                                </ul>  
                            </div>  
                        </div>  
                        <div id="main">  
                            <div id="content">  
                            <div id="head_image">  
                             <div id="slogan"></div>  
                                <div id="under_slogan_text"></div>  
                            </div>  
                            <div id="text">  
                       <h1>Bla.</h1>  
                       <br />  
                       <p><a href="index.html">bla.de</a> bla bla<br />bla bla.</p>  
                       <p>Bla bla<br />bla bla<br />bla bla<br />bla bla.</p>  
                       <p>Bla.</p>  
                           </div>  
                           <div id="sidebar">  
                           <h2>Bla</h2>  
                           <p>Bla:</p>  
                        <ul>  
                        <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>  
                        <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>  
                        <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>  
                        <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>  
                        </ul>  
                        </div>  
                           </div>  
                        </div>  
                        <div id="footer">  
                        <div id="left_footer">&copy; 2008 bla.de  
                        </div>  
                        <div id="right_footer">  
                    <a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bla by <a href="http://www.bla.de" title="Bla">Bla</a>  
                        </div>  
                        </div>  
                    </div>  
                    </body>  
                    </html>  
                    
                    
                    1. <div id="right_footer">
                      <a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bla by <a href="http://www.bla.de" title="Bla">Bla</a>
                          </div>

                      Es braucht nicht viel Nachdenken, um das als Unsinn zu erkennen.
                      &nbsp; waren noch nie geeignete Formatierungsmittel und Zahnstocher | hören sich vorgelesen wunderbar an.

                      Studiere gefloatete Listen und border als Alternative

                      mfg Beat;

                      --
                      Woran ich arbeite:
                      X-Torah
                      ><o(((°>           ><o(((°>
                         <°)))o><                     ><o(((°>o
                      1. Studiere gefloatete Listen und border als Alternative

                        oder ein hintergrundbild, da ein rahmen meistens etwas höher ist, als ein pipe-zeichen - ausserm lässt sich dann zwischen herzchen, kästchen, zahlstochern oder "bindestrichen" herumwechseln, ohne den html-code zu ändern

                    2. Ich fürchte es ist redundanter Schwachsinn, weil ichs nur hobbymäßig mache.

                      teilweise, der rest sieht aber recht gut aus

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml">

                      die natürliche sprache des dokuments fehlt

                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                      <meta name="description" content="Bla." />
                      <meta name="keywords" content="bla, bla, bla" />
                      <meta http-equiv="pragma" content="no-cache" />
                      <meta http-equiv="expires" content="0" />

                      die beiden obrigen zeilen kannst du dir schenken, pack sie (wenn du schon meinst) in den http-header)

                      <title>bla.de</title>
                      <link href="style.css" rel="stylesheet" type="text/css" />
                      <link rel="shortcut icon" href="http://www.bla.de/favicon.ico" type="image/x-icon" />
                      </head>
                      <body>
                      <div id="container">
                          <div id="header">
                           <div id="logo">&nbsp;</div>

                      -----------------------^
                      &nbsp; ist niemals gut für sowas (siehe beats post)
                      warum bindest du das logo nicht als hintergrundbild des headers ein?

                      <div id="menu">
                               <ul>
                                  <li><a href="index.html" class="active">Startseite</a></li>
                                  <li><a href="bla.html">Bla</a></li>
                                  <li><a href="bla.html">Bla</a></li>
                                  <li><a href="bla.html">Bla</a></li>
                                  <li><a href="bla.html">Bla</a></li>
                                  </ul>
                              </div>
                          </div>
                          <div id="main">
                              <div id="content">
                              <div id="head_image">
                               <div id="slogan"></div>
                                  <div id="under_slogan_text"></div>
                              </div>
                              <div id="text">
                         <h1>Bla.</h1>
                         <br />

                      ------^
                      uberflüssig, margin-bottom verwenden

                      <p><a href="index.html">bla.de</a> bla bla<br />bla bla.</p>
                         <p>Bla bla<br />bla bla<br />bla bla<br />bla bla.</p>
                         <p>Bla.</p>
                             </div>
                             <div id="sidebar">
                             <h2>Bla</h2>
                             <p>Bla:</p>
                          <ul>
                          <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>

                      --------------^
                      überflüssig - display: block für den link, dann gibts uach eine neue zeile

                      <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>
                          <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>
                          <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>
                          </ul>
                          </div>
                             </div>
                          </div>
                          <div id="footer">
                          <div id="left_footer">&copy; 2008 bla.de

                      -----------------------------^
                      was spricht gegen © wo du doch utf-8 verwendest? wobei copyright im deutschen eh nicht existiert

                      "left" oder ähnliches als klassen oder id-namen war übrigens noch nie schlau ;) wenn dein footer kontaktdaten oder ähnliche beinhaltet, nimm ein address-element

                      </div>
                          <div id="right_footer">
                      <a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="bla.html">Bla</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bla by <a href="http://www.bla.de" title="Bla">Bla</a>

                      das hat beat schon angemerkt, &nbsp; ist noch nie das mittel der wahl gewesen :)

                      </div>
                          </div>
                      </div>
                      </body>
                      </html>

                        
                      alles in allem verstehe ich nicht wo du die 80 kb hernimmst? "ich" zähle 2334 bytes bei dem von dir geposteten quelltext  
                        
                      
                      
                      1. Danke für die nette Hilfe, übrigens.

                        <html xmlns="http://www.w3.org/1999/xhtml">
                        die natürliche sprache des dokuments fehlt

                        Habe ich schon mal irgendwo gesehen, warum macht man das und welche
                        Auswirkungen hat das?

                        <meta http-equiv="pragma" content="no-cache" />
                        <meta http-equiv="expires" content="0" />
                        die beiden obrigen zeilen kannst du dir schenken, pack sie (wenn du schon meinst) in den http-header)

                        Warum kann ich mir die schenken? :)

                        <div id="logo">&nbsp;</div>
                        -----------------------^
                        &nbsp; ist niemals gut für sowas (siehe beats post)

                        Mit der Vermeidung von &nbsp; muß ich mich noch beschäftigen...

                        <br />
                        ------^
                        uberflüssig, margin-bottom verwenden

                        Stimmt, das <br /> war mal wieder so ein Schnellschuß.

                        <li>Bla<br /><a href="http://www.bla.de">Bla</a></li>
                        --------------^
                        überflüssig - display: block für den link, dann gibts uach eine neue zeile

                        Probier ich.

                        <div id="left_footer">&copy; 2008 bla.de
                        -----------------------------^
                        was spricht gegen © wo du doch utf-8 verwendest? wobei copyright im deutschen eh nicht existiert

                        Nichts! Ich wußte nicht mehr wie die Tastenkombination geht. Wie
                        geht die noch mal??? :-)

                        "left" oder ähnliches als klassen oder id-namen war übrigens noch nie schlau ;) wenn dein footer kontaktdaten oder ähnliche beinhaltet, nimm ein address-element

                        Enthält keine Kontaktdaten, warum kein "left" verwenden???

                        1. Habe ich schon mal irgendwo gesehen, warum macht man das und welche
                          Auswirkungen hat das?

                          damit man weiss, in welcher sprache das dokument verfasst ist - besonders wichtig für suchmaschinen und screenreader

                          Warum kann ich mir die schenken? :)

                          weil http-equiv nur dann "gilt" wenn kein http-header existiert - mit hoher wahrscheinlichkeit wird ein proxy (für den diese beiden zeilen vemutlich da sind) aber keine seite "offline" betrachten sondern vom server anfordern - wenn der server die http-header korrekt mitschickt, kanns du dir die beiden zeilen sparen

                          Mit der Vermeidung von &nbsp; muß ich mich noch beschäftigen...

                          ist nicht so schwierig, verwende ein geschütztes leerzeichen nur dann, wenn kein umbuch stattfinden darf, weil es typographisch erforderlich ist

                          z.b.: "mein wohnung hat 82 m²" hier wäre ein geschütztes leerzeichen zwischen dem wert (82) und der einheit(m²) nötig

                          <div id="left_footer">&copy; 2008 bla.de
                          -----------------------------^
                          was spricht gegen © wo du doch utf-8 verwendest? wobei copyright im deutschen eh nicht existiert

                          Nichts! Ich wußte nicht mehr wie die Tastenkombination geht. Wie
                          geht die noch mal??? :-)

                          im schlimmsten fall fügst du das entity und kopierst es dann wieder raus, ansonsten gibts zeichentabellen ;)

                          U+00A9 (169 in dezimal) also einfach alt+0169 (am num-bock)

                          Enthält keine Kontaktdaten, warum kein "left" verwenden???

                          auf ein link auf das impressum könnte man als kontaktdaten interpretieren - aber das musst du wissen ;)

                          klassen/id-namen die das erscheinungsbild von "etwas" beschreiben sind unklug, wenn man irgendwann mal ein design ändert

                          stell dir vor du hast ein suchformular rechts oben - du nennest es id="suchformular_rechts_oben"

                          jetzt entscheidest du dich, dass du das formular links oben haben willst - dh du änderst dein html, dein css und ggf noch dein javascript, welches diverse dinge mit dem forumular tut, nur damit die benennung wieder konsistent ist

                          beschreibe die dinger immer nach ihrer funktion, nicht nach ihrem aussehen

                          zb "warnung", "hinweis", "einleitung" usw

                          1. damit man weiss, in welcher sprache das dokument verfasst ist - besonders wichtig für suchmaschinen und screenreader

                            Die Sprache der Inhalte??? Also wenn man eine Seite in deutsch erstellt
                            hat, dann diese deutschen Kürzel angeben? Ist damit beispielsweise googles
                            "Seiten auf Deutsch" gemeint?

                            U+00A9 (169 in dezimal) also einfach alt+0169 (am num-bock)

                            Ich habe gar keinen Num-Block. Naja, das Problemchen werde ich schon irgend-
                            wie lösen. :)

                            1. damit man weiss, in welcher sprache das dokument verfasst ist - besonders wichtig für suchmaschinen und screenreader

                              Die Sprache der Inhalte??? Also wenn man eine Seite in deutsch erstellt
                              hat, dann diese deutschen Kürzel angeben?

                              ja, allerdings kann das recht kompliziert werden, wenn die sprache wechselt

                              idealerweise solltest du jedes fremdwort entsprechend auszeichnen

                              z.B.
                              <p>man hat gehört, er wäre ein <span land="en">insider</en></p>

                              Ist damit beispielsweise googles
                              "Seiten auf Deutsch" gemeint?

                              prinzipiell ja, wobei ich darauf wette, dass google auch den text und die darin vorkommenden wörter analysiert um die sprache zu ermitteln

                              Ich habe gar keinen Num-Block. Naja, das Problemchen werde ich schon irgend-
                              wie lösen. :)

                              wozu der umbruch? war die zeile zuende?

                              wenn du keinen num-block hast, hast du meistens einen abstrahierten num-block auf den tasten u bis p, k bis l und m bis . - diesen kannst du meistens mit einer zusatzfunktionstaste (fn) aktivieren

                              1. [latex]Mae  govannen![/latex]

                                z.B.
                                <p>man hat gehört, er wäre ein <span land="en">insider</en></p>

                                ^
                                Hmmmm...

                                Cü,

                                Kai

                                --
                                Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
                                selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
                                Mein Selfhtml-Kram
                                1. <p>man hat gehört, er wäre ein <span land="en">insider</en></p>
                                  Hmmmm...

                                  das kommt davon, wenn man unterbewusst tippt ;) natürlich sollte da "lang" stehen ;)

  4. Deine HTML Seite(n) + alles andere auch in in eine Grösse zusammen fassen (z.b.: alle bilder + html + php = 10 mb), dann teilist di die 10 mb durch die bandbreite, und du hast (ca.) die ladegeschwindigkeit, natürlich kommen da noch viele, viele andere faktoren zusammen, aber das ergwebnis ist ca. richtig.

    1. Habe lediglich html, css und ein paar Grafiken. Die Startseite hat
      80KB, davon die Headergrafik 45KB.
      Dürfte "gefühlt" in Ordnung sein oder?

      1. Dürfte "gefühlt" in Ordnung sein oder?

        wie schon erwähnt hat die größte selbst keine auswirkung auf die gefühlte ladezeit

        eine deart komplexe verschachtelung aus tabellen, dass der browser zum rendern 30 sekunden benötigt, kann man ebenso mit html erzeugen wie einen gegliederten fließtext ohne einer einzigen verschachtelung (mit ausnahme der zwangsweisen verschachtelungen html > body ;)

        1. eine deart komplexe verschachtelung aus tabellen, dass der browser zum rendern 30 sekunden benötigt, kann man ebenso mit html erzeugen wie einen gegliederten fließtext ohne einer einzigen verschachtelung (mit ausnahme der zwangsweisen verschachtelungen html > body ;)

          Verstehe so langsam, es kommt auf ein möglichst elegantes Konstrukt an.
          w3c-validität ist dann ja schon fast pillepalle. :) Ist mein html (siehe
          andere Antwort) komplex verschachtelt???

          1. eine deart komplexe verschachtelung aus tabellen, dass der browser zum rendern 30 sekunden benötigt, kann man ebenso mit html erzeugen wie einen gegliederten fließtext ohne einer einzigen verschachtelung (mit ausnahme der zwangsweisen verschachtelungen html > body ;)

            Verstehe so langsam, es kommt auf ein möglichst elegantes Konstrukt an.

            nein, elegant ist nur eine ästhetische sache - es muss funktionell sein und du solltest sinnlosen code vermeiden

            zb <div class="ueberschriftebene1"><h1>foobar</h1></div> - wenn du wirklich 2 elemente brauchst, weil du zb 2 hintergrundbilder brauchst, die sich überlager usw, dann eignen sich ein solches konstrukt viel besser
            <h1><span>foobar</span></h1>

            das ist einerseits funktioneller, der code ist kürzer, es ist leichter lesbar und über css besser selektierbar (das css file wird dadurch auch etwas kompakter) und natürlich ist die lösung viel "eleganter"

            man kann eine schlitz-schraube mit einem schraubendreher reindrehen oder man nimmt ein abgebrochenes messer oder hammer[1]

            wenn du dein html ändern musst, wenn du am design eine kleinigkeit änderst, hast du etwas falsch gemacht[2]

            w3c-validität ist dann ja schon fast pillepalle. :) Ist mein html (siehe
            andere Antwort) komplex verschachtelt???

            nein, ist ansich ganz vernünftig - nur ohne zu sehen, wie das ganze live aussieht, ist das schwer zu beurteilen

            ein eckiger kasten benötigt 1 element, wenn du runde ecken mit css realisieren willst, brauchst du, wenn das ding dynamisch wachsen soll, nochmal 3 extra elemente - ohne zu sehen, warum du deine extra-elemente eingefügt hast, ist das eben nicht zu sagen

            [1] ab und an kann es sinnvoll sein, ein schlauer fuchs zu sein, alternative werkzeuge können durchaus sinnvoll sein - meistens aber nicht ;)
            [2] ausnahmen gibts natürlich immer

  5. Hallo Stefanie,

    Zunächst stimmt, dass die eigentliche Ladezeit für die gefühlte Ladezeit nicht so die Rolle Spielt. Wenn Du bspw. die größe Deiner Grafiken angibst, kann die Seite schon sehr gut angezeigt werden, bevor diese geladen werden. Entscheidend ist einfach, bis der Benutzer etwas relevantes sieht.
    Die Navigation nach hinten zu packen, wie hier jemand vorgeschlagen hat, kann da übrigens meiner Meinung nach eine schlechte Idee sein. Gerade wenn man schnell etwas sucht, will man sich evtl. gleich durch die Navigation hangeln, ohne auf den gesamten Seiteninhalt zu warten.

    Der zweite, wichtige Punkt ist: Liefere die Seiten komprimiert aus. Gerade Text ist extrem gut komprimierbar. Da kann man oft fast 90% einsparen.
    Damit sollten auch Deine 80kb Startseite ziemlich schnell heruntergeladen werden sein. Die Header-Grafik braucht dann zwar immer nocht etwas (jpeg, png etc. sind bereits komprimiert, da verbessert sich also praktisch nichts), aber die Ladezeit ist nicht so relevant. Evtl. ist es interessant, die Grafiken noch so zu speichern, dass sie Schrittweise gerendert werden können. Dann sieht der Benutzer schon ein (verschwommenes) Bild, so lange dieses noch geladen wird.

    Außerdem kann es auch noch sinnvoll sein, CSS und Javascript in separate Dateien auszulagern, wenn diese auf mehreren Seiten gleich sind. Seiten auch schon ohne CSS und JS sehen, komplett lesen, wenn man das Laden abbricht und die Dateien werden gecacht und müssen für weitere Seiten nicht mehr geladen werden. Man sollte seine Seiten dann natürlich auch so gebaut haben, dass man sehr viel durch zentrale Regeln erreichen kann.
    (Extrembeispiel: Kleine gut strukturierte Seite + CSS-Datei im vergleich zu komplexes Tabellenlayout mit inline-CSS (z.B. entstanden durch ein WYSIWYG-Werkzeug)).

    Grüße

    Daniel

    1. Hallo Daniel,

      danke für die Tips! Das mit dem verschwommenen Bild kenne ich, ist aber
      bei mir wieder in Vergessenheit geraten, werde ich dann sicher verwenden.
      css habe ich ausgelagert, mit guter Strukturierung tue ich mich allerdings
      immer noch schwer.
      Schau doch mal bitte auf mein html. (siehe die vorletze Antwort auf Suit.)
      Ist das gut strukturiert??? Ich hab keine Ahnung... :-)

      1. Hallo Stefanie,

        Das sieht gar nicht so schlecht aus. Man kann sicher noch einiges verbessern (da hast Du ja schon ein paar Tipps). Vielleicht kann man diese div-Struktur auch noch verweinfachen, das kommt aber auf das Layout an.
        Für die Dateigröße ist das aber vermutlich nicht mehr so entscheidend. Jede Mege inline-CSS, viele Tabellen für Layouteffekte o.ä. wären da kritisch. Das merkt man dann schon daran, dass man sehr viel Markup im vergleich zum eigentlichen Inhalt hat.
        Komprimierte Auslieferung, so Du das irgendwie einrichten kannst, dürfte jetzt noch den größten Effekt bringen. Im Vergleich zu einer typischen, großen Website sind Deine Seiten dann so schnell geladen, dass ein Modemnutzer wahrscheinlich gar nicht mehr weg will. Viele davon sind ja mit einem Modem praktisch unbenutzbar.

        Grüße

        Daniel

        1. Viele davon sind ja mit einem Modem praktisch unbenutzbar.

          die meisten webseiten sind mit einem modem praktisch unbenutzbar - ohne browser läuft da garnix
          SCNR