AllesMeins: HTML Code klein bekommen

Hiho,

ich stehe im Moment vor dem Problem das der Traffic meiner Seite zu gross wird. Nun habe ich einige Seiten die recht alt (und dementsprechend ziemlich schlecht) geschrieben sind. Diese würde ich nun gerne neu bauen und dabei auch darauf achten sie möglichst klein (sprich wenige KB) zu schreiben. Könnt ihr mir ein paar Tripps geben wie man HTML Code klein bekommt? Speziell geht es mir um Tabellen, die im Moment noch mit dem ganz klassichen <table><td> usw. geschrieben sind. Kann man das irgendwie noch verkleinern?

Marc

  1. Hallo,

    ich stehe im Moment vor dem Problem das der Traffic meiner Seite zu gross wird. Nun habe ich einige Seiten die recht alt (und dementsprechend ziemlich schlecht) geschrieben sind. Diese würde ich nun gerne neu bauen und dabei auch darauf achten sie möglichst klein (sprich wenige KB) zu schreiben. Könnt ihr mir ein paar Tripps geben wie man HTML Code klein bekommt? Speziell geht es mir um Tabellen, die im Moment noch mit dem ganz klassichen <table><td> usw. geschrieben sind. Kann man das irgendwie noch verkleinern?

    Zunächst könntest du deine Seiten gzip-komprimiert ausliefern.
    Mit PHP geht das so:
    ob_start("ob_gzhandler");

    Zweitens könntest du einen Link auf eine Beispielseite posten,
    und drittens _alles_ was mit der Gestaltung zu tun hat mit CSS regeln.

    Gruß
    Alexander Brock

    --
    SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
    http://againsttcpa.com
    1. Wenn es hart auf hart kommt, kannst du hiermit noch ein wenig Traffic rausholen:

      http://www.wt-rate.com/freeware/bytered.zip

      Aber Vorsicht, der Quelltext ist danach stark komprimiert, also am Besten zum Bearbeiten ein Backup anlegen.

      1. Hallo Ashura,

        http://www.wt-rate.com/freeware/bytered.zip

        Das Programm ist keine Konkurrenz zu serverseitiger Komprimierung,
        es entfernt nur Kommentare, "überflüssige" Leerzeichen und Tabulatoren
        und Anführungszeichen der Attribute (das macht die Seite u.U. invalide),
        die Methode, die ich vorgeschlagen habe ist ~9fach so effizient.

        Gruß
        Alexander Brock

        --
        SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
        http://againsttcpa.com
        1. Schon klar, aber wenn GZip nicht zur Verfügung steht, ist das Programm durchaus eine in Betracht zu ziehende Alternative.

      2. Hiho,

        ich würde mir ungerne meinen Quelltext verhauen, aber ich könnte etwas vergleichbares beim ausgeben mit PHP versuchen, da meine Seiten so oder so durch ein PHP Script gejagt werden. Gibt es etwas in der Art als PHP Funktion oder muss ich mir das selber schreiben?

        Marc

        1. Hallo,

          ich würde mir ungerne meinen Quelltext verhauen, aber ich könnte etwas vergleichbares beim ausgeben mit PHP versuchen, da meine Seiten so oder so durch ein PHP Script gejagt werden. Gibt es etwas in der Art als PHP Funktion oder muss ich mir das selber schreiben?

          Schreibe den ganzen Quelltext, der ausgegeben werden soll in eine
          Variable ($ausgabe)

          Dann entfernst du alle Tabulatoren, Zeilenumbrüche und ersetzt mehrere
          Leerzeichen hintereinander durch ein einziges:

          str_replace("\n","",$ausgabe);
          str_replace("\t","",$ausgabe);
          $suchmuster = "/\s\s+/";
          preg_replace($suchmuster," ",$ausgabe);

          Ich bin mir allerdings nicht sicher, ob der Reguläre Audruck richtig ist
          -> Ausprobieren vor dem Einsatz!

          Gruß
          Alexander Brock

          --
          SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
          http://againsttcpa.com
    2. Hiho,

      ist es möglich den gzip-effekt irgendwie nachzuvollziehen. Ich hab jetzt mal versucht das einzubauen und es gibt auch keine fehlermeldung, aber ich würde gerne mal nen vorher, nacher Vergleich machen. Kann ich irgendwie die ware Grösse für das ausliefern einer Seite ermitteln (dann würde ich einmal die kompression weglassen und einmal mit kompression arbeiten).

      Zweitens könntest du einen Link auf eine Beispielseite posten,

      Hmm, wenn du dir das wirklich ansehen willst :-/ Aber nicht beschweren wenn du irgend ein Trauma oder so davon trägst.
      Die Seite die wohl im Moment am kritischsten ist, ist diese (und vergleichbare) http://www.startrek-bilder.de/sta/index.sta?pid=17000&show=Morn

      und drittens _alles_ was mit der Gestaltung zu tun hat mit CSS regeln.

      Hmm, meine css Kentnisse beschränken sich im Moment leider auf Schriftgestaltung (und das habe ich auch verwendet). Aber ich bin gerne bereit mich auf weiteres Wissen einzulassen...

      Marc

      1. Hallo,

        aber ich würde gerne mal nen vorher, nacher Vergleich machen. Kann ich irgendwie die ware Grösse für das ausliefern einer Seite ermitteln (dann würde ich einmal die kompression weglassen und einmal mit kompression arbeiten).

        Die genannte Seite ist ohne Komprimierung 200 und mit Komprimierung
        10KB groß. Die Größe der Seite steht im Firefox unter
        "Extras - Seiteninformationen".

        http://www.startrek-bilder.de/sta/index.sta?pid=17000&show=Morn

        Hier ein paar Tipps:
        Verzichte auf Inline-styles (style=""), verwende Klassen und
        Nachfahrenselektoren in der externen CSS-Datei.

        Verzichte auf Attribute wie bgcolor, text, background, width, height,
        align cellpadding, cellspacing, border, valign, bgcolor.
        Verwende stattdessen die CSS-Entsprechungen.

        Verwende semantisches Markup. Das Menü ist keine Tabelle, sondern
        mehrere Listen in einem div-Element.
        z.B.:
        <div id="menue">
         <ul>
          <li><a href="">Menüpunkt</a></li>
          <li><a href="">Menüpunkt</a></li>
          <li><a href="">Menüpunkt</a></li>
         </ul>
        </div>

        Den :hover Effekt bekommst du dann so:

        #menue li:hover {
         list-style-image: url(foo.jpg);
        }
        für Browser[tm]

        oder:
        #menue a {
         padding-left: $breite_des_hoverBildes
        }
        #menue a:hover {
         background-image: url(foo.jpg)
         background-repeat: no-repeat;
        }

        Das ist wesentlich einfacher und traffic-sparender als das font-Konstrukt.

        Versuche, valides HTML zu schreiben.

        und drittens _alles_ was mit der Gestaltung zu tun hat mit CSS regeln.

        Hmm, meine css Kentnisse beschränken sich im Moment leider auf Schriftgestaltung (und das habe ich auch verwendet). Aber ich bin gerne bereit mich auf weiteres Wissen einzulassen...

        Du kennst ja SelfHTML...

        Gruß
        Alexander Brock

        --
        SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
        http://againsttcpa.com
        1. Hiho,

          erst mal danke für die vielen Vorschläge. Ich werde mich bei Gelegenheit mal damit beschäftigen (aber nicht mehr heute, jetzt ist Sylvesterfeiern angesagt). Nur eine kleine Frage noch. Mir ist gerade aufgefallen das sich PHP über das ob_start("ob_gzhandler") beschwert. Und zwar gibt es folgende nette Meldung aus:

          Warning: ob_start(): output handler 'ob_gzhandler' cannot be used after 'URL-Rewriter'

          Bezieht sich das auf die URL Rewrite per htaccess (apache Rewrite engine)? Wenn ja wie bekomme ich es "davor"? Auf den URL Rewrite bin ich leider angewiesen...

          Grüsse un einen guten Rutsch

          Marc

          1. Hallo,

            Bezieht sich das auf die URL Rewrite per htaccess (apache Rewrite engine)? Wenn ja wie bekomme ich es "davor"? Auf den URL Rewrite bin ich leider angewiesen...

            Hast du Zugriff auf die php.ini?
            Änder mal
            zlib.output_compression = Off
            zu On

            Alternativ dazu im Script:
            ini_set("zlib.output_compression", "1");

            Gruß
            Alexander Brock

            --
            SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
            http://againsttcpa.com
            1. Hiho,

              verdammt ich kann das basteln nicht mal an Sylvester lassen :)

              ini_set("zlib.output_compression", "1");

              Das funktioniert ohne Fehlermeldungen, allerdings kann ich den Kompressionseffekt nicht wirklich beobachten. Laut Firefox ist die Seite 219.32 KB gross, wenn ich sie speichere ist sie 244 KB gross und wenn ich die gespeicherte mal testweise in ein zip packe ist sie noch 10 KB gross. Kann ich denn nirgendwo sehen ob die Seite wirklich komprimiert ausgeliefert wird? Ich traue dem Frieden nämlich nicht so ganz...

              Marc

              1. Hallo,

                verdammt ich kann das basteln nicht mal an Sylvester lassen :)

                Ich auch nicht.

                ini_set("zlib.output_compression", "1");

                Laut Firefox ist die Seite 219.32 KB gross

                Dann ist sie nicht komprimiert. Sie ist komprimiert,
                wenn Firefox sagt, sie sei _wesentlich_ kleiner als
                die selbe Seite auf der Festplatte gespeichert.

                Versuch nochmal ob_start("ob_gzhandler");
                als _ersten_ Befehl in der Seite (auch vor jedem HTML Code)

                Gruß
                Alexander Brock

                --
                SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
                http://againsttcpa.com
                1. Hiho,

                  Versuch nochmal ob_start("ob_gzhandler");
                  als _ersten_ Befehl in der Seite (auch vor jedem HTML Code)

                  jetzt scheint er es zu fressen (jedenfalls zeigt der Firefox nun eine Grösse von ~13 KB an)

                  Marc

                  1. Hi AllesMeins,

                    jetzt scheint er es zu fressen (jedenfalls zeigt der Firefox nun eine Grösse von ~13 KB an)

                    ja.

                    | Content (encoded: 10.63 KiB / decoded: 219.38 KiB) (siehe https://forum.selfhtml.org/?t=97724&m=595132)

                    Glückwunsch. :-)

                    Grüße,
                     Roland

                  2. Hallo,

                    jetzt scheint er es zu fressen (jedenfalls zeigt der Firefox nun eine Grösse von ~13 KB an)

                    Prima, du hast es geschaft.
                    Wenn du jetzt noch alle anderen Tipps berücksichtigst
                    (und die Seite am besten neu schreibst) kommst
                    du sicherlich auf < 5KB ;-)

                    Gruß
                    Alexander Brock

                    --
                    SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
                    http://againsttcpa.com
                    1. Hallo Alexander

                      Prima, du hast es geschaft.
                      Wenn du jetzt noch alle anderen Tipps berücksichtigst
                      (und die Seite am besten neu schreibst) kommst
                      du sicherlich auf < 5KB ;-)

                      Das glaube ich weniger.
                      Die Kompression ist bei häufig wiederkehrenden identischen Bytefolgen
                      besonders effektiv. Davon hat die Seite zur Zeit reichlich. Ein neuer
                      Seitenaufbau, der dies vermeidet könnte die Größe drastisch reduzieren und
                      wohl auch das Rendern der Seite beschleunigen. Die komprimierte Größe wird
                      sich dadurch auch verringern, aber bestimmt nicht mehr so drastisch.

                      Ganz anders sieht es mit den Grafiken aus.
                      Diese lassen sich nachträglich kaum nennenswert komprimieren.
                      Dort kann ein viel eingespart werden, wenn diese im jeweils optimalen
                      Grafikformat mit der maximalen Kompression gespeichert werden, die eine noch
                      ausreichende Qualität bietet.

                      Auf Wiederlesen
                      Detlef

                      --
                      - Wissen ist gut
                      - Können ist besser
                      - aber das Beste und Interessanteste ist der Weg dahin!
                      1. Die Kompression ist bei häufig wiederkehrenden identischen Bytefolgen
                        besonders effektiv. Davon hat die Seite zur Zeit reichlich. Ein neuer
                        Seitenaufbau,

                        Sprich wenn ich die Seite neu baue und dabei effektiver arbeite kann es mir im schlechtesten Fall passieren das die komprimierte Seite am Ende grösser ist als die jetzige (wegen weniger gleichen Zeichenfolgen). Na das sind ja schöne Aussichten :)

                        Marc

                        1. Hallo Marc

                          Sprich wenn ich die Seite neu baue und dabei effektiver arbeite kann es mir im schlechtesten Fall passieren das die komprimierte Seite am Ende grösser ist als die jetzige (wegen weniger gleichen Zeichenfolgen). Na das sind ja schöne Aussichten :)

                          Dass komprimierte Seite dann größer wird, ist meiner Meinung nach nicht zu
                          erwarten.
                          Lies nocheinmal genau, was ich schrieb:

                          ... Die komprimierte Größe wird sich dadurch auch verringern, aber
                          bestimmt nicht mehr so drastisch.

                          Auch die komprimierte Größe dürfte kleiner werden, ich glaube aber nicht,
                          dass du diese damit mehr als halbieren wirst wirst.

                          Wichtiger finde ich den zweiten Absatz meines Postings.

                          Das HTML hast du durch die komprimierte Auslieferung erstmal auf eine
                          akzeptable Größe gebracht.

                          Der nächste Schritt sollte jetzt die Optimierung der Grafiken sein!

                          Ein Beispiel

                          Auf Wiederlesen
                          Detlef

                          --
                          - Wissen ist gut
                          - Können ist besser
                          - aber das Beste und Interessanteste ist der Weg dahin!
                          1. Hiho,

                            das ganze war auch nicht ganz ernst gemeint sondern eher eine theoretische Feststellung, das dies eintreten könnte. Das Problem bei den Bildern ist das ich gerne die Transparenz behalten würde, da ich die Seite sicherlich bald mal wieder umgestalten würde und da ist jede Grafik die neu eingefärbt werden müsste wieder Arbeit. :)
                            Aber wahrscheinlich werde ich das bei Gelegenheit mal angehen...
                            Aber so wie es scheint, war wirklich HTML für einen Grossteil des Traffics verantwortlich. Gestern lag mein Traffic bei etwa einem drittel des ursprünglichen Wertes (bei ähnlichen Besucherzahlen).

                            Marc

                            1. Hallo Marc

                              ... Das Problem bei den Bildern ist das ich gerne die Transparenz behalten würde, ...

                              Im IE haben die PNGs sowieso keine Transparenz!
                              Nur durch den momentanen Hintergrundfarbton fällt es kaum auf.

                              Auf Wiederlesen
                              Detlef

                              --
                              - Wissen ist gut
                              - Können ist besser
                              - aber das Beste und Interessanteste ist der Weg dahin!
              2. Hi AllesMeins,

                ini_set("zlib.output_compression", "1");

                Das funktioniert ohne Fehlermeldungen, allerdings kann ich den Kompressionseffekt nicht wirklich beobachten.

                er ist nicht vorhanden. Vergleiche

                http://web-sniffer.net/?url=http%3A%2F%2Fwww.startrek-bilder.de%2Fsta%2Findex.sta%3Fpid%3D17000%26show%3DMorn&submit=Submit&gzip=yes&type=GET
                 -> Content (219.38 KiB)

                mit

                http://web-sniffer.net/?url=http%3A%2F%2Fde.selfhtml.org&submit=Submit&gzip=yes&type=GET
                 -> Content (encoded: 2.61 KiB / decoded: 11.58 KiB)

                SELFHTML wird komprimiert ausgeliefert, deine Seite (noch) nicht.

                Grüße,
                 Roland

      2. Hallo Marc

        http://www.startrek-bilder.de/sta/index.sta?pid=17000&show=Morn

        Ich denke, dass nicht nur das HTML sondern auch die Bilder unnötig viel
        Traffik verursachen.
        Du solltest versuchen, diese bei angemessener Qualität kleiner zu bekommen.
        So dürfte z.B. "/mini/garak.gif" als *.jpg ohne nennenswerten Qualitätsverlust
        auf etwa die halbe Dateigröße zu bringen sein und "/garak.png" als *.jpg auf
        etwa 1/10 Dateigröße.

        Zum HTML und zur Komprimierung hat dir ja Alexander bereits geschrieben.

        Noch eine paar kleine Anmerkungen:

        <td width="117" bgcolor="#BDC1B8"><img src="layouts/sta41/images/Abstandhalter.gif" width="1" height="1" alt="."></td>
        Das oder so ähnlich ist sehr häufig.
        Ist ein Abstandshalter von 1 x 1 Pixel nötig?
        Damit die Zellen nicht leer sind könnte oft ein &nbsp; helfen, das ist
        wesentlich kürzer.

        Statt diverser ...trenner.gif würden eventuell auch im Stylesheet angegebene
        Border reichen.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
  2. .... Kann man das irgendwie noch verkleinern?

    Mal abgesehen von dem recht grossen HTML Code (mein etwas altersschwacher Rechner und Browser haben grosse Probleme die Seite zu laden und darzustellen, deshalb hab ich mir's nicht angeschaut) sind deine Bilder riesig:
    Der Webpage size checker http://www.searchengineworld.com/cgi-bin/page_size.cgi?url=http%3A%2F%2Fwww.startrek-bilder.de%2Fsta%2Findex.sta%3Fpid%3D17000%26show%3DMorn (braucht ewig), zeigt 1.7 MB an.

    D.h. du hast jetzt durch die Komprimierung ds Quellcodes 200KB gespart dafür wird der Server gehörig beansprucht und schiockstz aber gleichzeitig immer noch fast 1,5 MB Bilder durchs Netz.

    Da ich wie gesagt die Bilder nicht sehe kann ich nicht ob und wie man die verbessern kann, aber es scheint es wäre einfacher hier etwas zu ändern.

    Struppi.