Ladezeit beschleunigen, Tipps

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Ladezeit beschleunigen, Tipps

    hi

    also, jetzt mal von den simplen tricks wie "bilder gut komprimieren" oder "kein/wenig javascript" und "keine werbung" (nein danke) abgesehen, was gibt es so für kleine aber feine tipps, um die Ladezeit zu beschleunigen?

    es geht mir halt wirklich ums finetuning. die seite bereits jetzt sehr minim, alles per DIV gestaltet, kein javascript, eine CSS datei zur formatierung.
    zb hab ich so kleine "grafiksachen" (icon für bulletliste, pattern für trennlinie, weisse ecke zum abdecken) in eine einzige PNG datei genommen. und per CSS dann jeweils bei den background-position die bilder positioniert. also dass der browser anstatt 5 einzelne dateien à <1kb nur noch eine einzige datei ~1kb laden muss. weil ja gerade das laden von vielen einzelnen seperaten dateien kann den ladevorgang verzögern.

    was gibt es sonst noch so für tricks?

    wie gesagt, die seite ist schon so superleicht, ist nicht so eine komplexe seite wie deviantart oder ein phpbbforum, wo das rendern schon mal 3-5sekunden geht. die seite lädt bereits so in weniger als einer sekunde. ich will halt nur dass es evt sogar wirklich "instant" ist. gerade für mobile geräte (augenmarkt aufs iPhone) ist die renderzeit drum ja beinahe schon der längste anteil.

  • #2
    Minimales Finetuning geht evtl. noch beim Apachen - z.B. mit ExpiresByType für Bild-, Javascript- und Css-Dateien sofern sich diese nicht so kurzfristig ändern, dass es anderweitige Probleme dadurch geben könnte.

    Somit würde z.B. der Browser beim Aufruf der nächsten Seite nicht wieder versuchen die css-Dateien und Hintergrundbilder neu zu requesten worauf er vom Browser sowieso nur ein not Modified zurückbekommen würd. Da lässt sich einiges an Traffic und Prozessorzeit für Request-/Response-Header sparen.

    Übrigens ist in der httpd.conf für .jpg-Dateien häufig ein falscher Mime-Type für ExpiresByType eingegeben - da steht häufig ExpiresByType image/jpg A3600 statt ExpiresByType image/jpeg A3600 was dazu führt, dass eben die Browser, die sich dann an das CacheControlling halten die .jpg immer wieder neu laden möchten.
    Ihr habt ein Torturial durchgearbeitet, das auf den mysql_-Funktionen aufbaut?
    Schön - etwas Geschichte kann ja nicht schaden.
    Aber jetzt seht euch bitte php.net/pdo oder php.net/mysqli bevor ihr beginnt!

    Kommentar


    • #3
      Ich glaube, dass wirst du nicht weiter verbessern können. Denn am Ende entscheidet sowieso die Bandbreite des Besuchers.. Aber die von dir beschriebenen Ansätze sind schon mal gut..

      OffTopic:
      Link?


      Gruß, nOe
      "I am what I am and I do what I can..."
      Meine HP -- Mein GPG-Key
      Meine Projekte: WebStorage 2.0 -- easyAJAX-Chat 2.2.0 (beta)

      Kommentar


      • #4
        okey, das mit dem expirebytype schau ich mal an. die CSS sind statisch, keinen dynamischen inhalt, könnte also gehen. ich muss nur schauen ob ich da beim hoster was machen kann, da weder root noch vroot server.

        ich habe halt so die erfahrung gemacht, dass die seiten oftmals nicht durch den anschluss des users gebremst werden, sondern vielmehr durch die anzahl zu ladenen dateien.

        also der browser hat schneller eine datei mit 100kb geladen, als 100 mit je 1kb. liegt wohl daran, dass der server bei letzterem 100mal angepingt werden muss und 100mal ein request geben muss.
        deswegen versuchte ich eben die einzelnen dateien zusammenzufügen.

        ich kann die seite leider noch nicht zeigen, weil noch im aufbau, und ich will nicht dass google bots die unfertige homepage aufnehmen. kann man die irgendwie abhalten? dann könnte ich sie mal uploaden.

        Kommentar


        • #5
          Müsst jetzt nachgucken, aber IMHO kann man die Directiven auch in einer .htaccess setzen.

          Wegen Googlebot - der hält sich meines Wissens nach an die robots.txt - damit kannst du ihn vom Spidern abhalten.

          Früher kursierte tatsächlich das meiner Meinung nach falsche Gerücht ein großes Bild würde schneller geladen, wenn man es in viele kleine zerstückelt - IMHO war das Quatsch, weil tatsächlich noch mehr durch Request-/Response-Header draufgeht. Bei langsameren Verbindung war der Vorteil nur der, dass der Nutzer eher was am Bildschirm sieht - wenns auch nur kleine Stücke sind.
          Ihr habt ein Torturial durchgearbeitet, das auf den mysql_-Funktionen aufbaut?
          Schön - etwas Geschichte kann ja nicht schaden.
          Aber jetzt seht euch bitte php.net/pdo oder php.net/mysqli bevor ihr beginnt!

          Kommentar


          • #6
            Original geschrieben von fabio

            also der browser hat schneller eine datei mit 100kb geladen, als 100 mit je 1kb. liegt wohl daran, dass der server bei letzterem 100mal angepingt werden muss und 100mal ein request geben muss.
            deswegen versuchte ich eben die einzelnen dateien zusammenzufügen.
            Hier würde ich alles von PHP zusammenbauen (fopen und header, ist hier das Stichwort) und anschließend cachen, damit nicht bei jedem Aufruf alles neu gerendert/gerechnet werden muss.
            So bleibt dir auch weiterhin beim Entwickeln die Übersicht deiner einzelnen Skripte erhalten.

            Original geschrieben von fabio

            ich kann die seite leider noch nicht zeigen, weil noch im aufbau, und ich will nicht dass google bots die unfertige homepage aufnehmen. kann man die irgendwie abhalten? dann könnte ich sie mal uploaden.
            Du kannst den Google auch per .htaccess aussperren. Die IPs von google sind ja allgemein bekannt.
            Stell sich nur noch die Frage wie Google das wertet,wenn du dann später deine Inhalte spidern lassen willst.

            Kommentar


            • #7
              Keine ahnung, ob das iphone das unterstützt, aber du kannst deine seiten auch komprimiert senden.

              Ansonsten sollte es mittels robots.txt kein problem sein, spider am indizieren deiner seite zu hindern. Denn der html-quelltext ist auch noch mal so ein flaschenhals. Wenn ich lese, dass du 'alles mit divs' gemacht hast, wette ich, dass Da auch noch mal ordentlich was zu optimieren ist ...
              [FONT="Helvetica"]twitter.com/unset[/FONT]

              Shitstorm Podcast – Wöchentliches Auskotzen

              Kommentar


              • #8
                Keine ahnung, ob das iphone das unterstützt, aber du kannst deine seiten auch komprimiert senden.
                Das schickt dir der Browser ja mit
                Code:
                Accept-Encoding: gzip,deflate
                oder halt nix.

                Kommentar


                • #9
                  hi

                  also, zurück vom hörsaal.
                  also, hab die seite mal mit robots.txt auf ne subdomain gestellt.
                  http://interni.fplog.ch/

                  ist noch nicht fertig, das foto ist noch ein "dummyfoto" von der (seeehr alten und zum glück nicht von mir gestalteten) alten homepage. auch der text ist natürlich noch nicht vollständig. links gehen noch nicht, und das einzige bisschen PHP ist das menu (welches noch nichtmal fertig ist) ^^
                  schreibfehler sind gut möglich, mein dad hat den text geschrieben, und ja, hehe, der macht viele fehler. wie gesagt, noch lange nicht die finale fassung, weswegen ich googleindexing verhindern will.

                  sieht man auf den ersten blick grad was zu verbessern? (ja, mir ist die farbe auch etwas zu grell aber hey chef sagts ich tus )

                  Kommentar


                  • #10
                    sieht man auf den ersten blick grad was zu verbessern?
                    Statt nur auf div's zu setzen mehr die "normalen" Html Tags nutzen...
                    zb.
                    <div id='logo'><img src='/img/logo.png' alt='Logo interni raumgestaltung und innenarchitektur'></div>

                    wäre bei mir:
                    <h1>raumgestaltung und innenarchitektur</h1>

                    in CSS dann
                    PHP-Code:
                    h1 {
                          
                    width:225px;
                    height:80px;
                    text-indent:-5000px;
                    background-image:url(pfad/zum/logo.png);

                    oder bei
                    <div id="navi">
                    <ul>
                    kannste doch der ul direkt ne id geben und sparst dir das div....
                    "I don't want to belong to any club that would accept me as a member."

                    Groucho Marx

                    Kommentar


                    • #11
                      PHP-Code:
                      text-indent:-5000px
                      Finde ich persönlich jetzt nicht viel sauberer ^^

                      Kommentar


                      • #12
                        @php-desaster: ok, da kann man jetzt eine diskussion drüber führen...
                        ich finds besser weil
                        - kürzer als die div methode (Thread heißt ja ladezeit verkürzen)
                        - (für mich ) logischer - ist ja die Überschrift der Seite
                        - so kann der Begriff "raumgestaltung und innenarchitektur" auch von einer SUMA erfasst gehen
                        - der Begriff und nicht die Grafik in diesem Fall das entscheidende ist

                        weiter unten im Code:
                        <div id='fotoblock'><img src='/img/profil.jpg' alt='foto fuer unterseite profil'></div>

                        würde ich natürlich auch als Grafik einbinden, aber selbst da kannste ja das div rausnehmen und dafür
                        <img src='/img/profil.jpg' id='fotoblock' alt='foto fuer unterseite profil' /> schreiben
                        "I don't want to belong to any club that would accept me as a member."

                        Groucho Marx

                        Kommentar


                        • #13
                          ja, gerade beim logo werde ich noch einiges ändern, ua dass es das logo evt möglichst getreu als text anzeigt, und dann beim laden das image drübergeladen wird.
                          die sache warum noch ein <div> um das menu ist unter anderem auch, dsas wenn man die textgrösse viel grösser macht, dass dieser sich nicht mit der adresse überlappt, sondern das DIV sich dann wir ein "iframe" mit scrollleisten verhält. (selbiges passiert auch beim text).
                          zudem werde ich dann noch ein print-css file machen, so dass die seite für den druck besser angepasst wird.
                          und dort ist es teilweise noch gut wenn man mit divs arbeiten, weil man diese dann dort schön einfach ausblenden kann (für was bräuchte es zb ein "menu" auf einer gedruckten seite ).


                          edit:
                          das mit den fotos im fotoblock hat noch einen anderen grund, und zwar werden dort die fotos per scriptaculous/selfmadejs als diashow eingespielt (ähnlich wie auf einer anderen page von mir www.ursulahuerlimann.ch ), und ich dann eben mehr als nur ein <img> tag in diesem div container habe, und jeweils einfach die margin-left verändere (dass sich das bild wie verschiebt).
                          Zuletzt geändert von fabio; 25.09.2008, 16:20.

                          Kommentar


                          • #14
                            per scriptaculous/selfmadejs als diashow eingespielt
                            is nen Argument
                            "I don't want to belong to any club that would accept me as a member."

                            Groucho Marx

                            Kommentar


                            • #15
                              ja, wobei ich wahrscheinlich nicht scriptaculous nehmen werde, wäre etwas übertrieben, nur für ein "von 0px margin, nach -500px margin" befehl ne komplette vollumfangige bibliothek zu nehmen.

                              Kommentar

                              Lädt...
                              X