Ankündigung

Einklappen
Keine Ankündigung bisher.

Webseite optimieren, Grafiken zusammenfügen

Einklappen

Neue Werbung 2019

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

  • Webseite optimieren, Grafiken zusammenfügen

    Hallo,

    sobald mir bekannt ist kann ein Browser von einer Quelle nur 2-3 Grafiken auf einmal laden wodurch bei vielen Grafiken das Problem entsteht dass dadruch die Ladezeit der Webseite verschlechtert wird.

    Mir sind momentan zwei Lösungswege bekannt:

    1. Ich verteile die Grafiken auf mehrere Webserver / Quellen

    2. Das Google Web Toolkit bietet hier die Möglichkeit ein ImageBundle zu erstellen um aus den ganzen kleinen Grafiken eine große zu erstellen, so dass der Nutzer nur eine Grafik laden muss und keine 50. Diese Funktion spricht dann gezielt Grafik X an Position X in der großen grafik an und zeigt diese an.

    Jetzt meine Frage: Gibt es sowas auch für PHP?

  • #2
    wieso soll man nur 2-3 grafiken parallel laden können?
    Solang du nichts in der firewall verbietest hängt das doch vom user und seinem browser selber ab?
    Meinst du, dass je nach aufgerufener seite die bilder dynamisch zusammengefügt werden?
    Under Construktion

    Kommentar


    • #3
      Warum erstellst Du nicht Thumbnails von "großen Grafiken"? Oder lädst Sie vor im body? Warum erstellst Du nicht einfach prinzipiell "kleinere Grafiken z.B. mit Photoshop?? Verstehe ich die Frage falsch - du suchst einen allg. Ansatz, korrekt?

      Wolf29
      while (!asleep()) sheep++;

      Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

      Kommentar


      • #4
        HTTP 1.1 requires browser to limit outgoing HTTP requests to two per domain/port ....

        Folgendes beispiel: Ich habe 4 Grafiken:

        4x 200x200 Grafiken.

        dann soll daraus werden:

        1x 800x200 Grafik

        Und im Browser soll dann von der großen Grafik die Koordinaten x,x angezeigt werden. Da muss es doch was fertiges geben ...

        Soll wenn möglich mehr oder weniger automatisch laufen, per Hand kann ich sowas auch selber machen ist aber mit gewisser Arbeit verbunden da wäre es schön wenn man es mit PHP automatisieren könnte.

        Ich stelle mir etwas vor wo ich die Grafiken eintrage, PHP die Grafiken analysiert von der Größe etc. und das Script dann selbst kuckt bei welchen Grafiken das Zusammenfügen möglich ist.

        Alleine mein Header besteht aus 16 Grafiken, damit könnte ich die HTTP Request dann von 16 auf 2 drücken.

        Kommentar


        • #5
          N'Morgen ...

          zu 1.

          Korrekt. Das läuft bei Google (u. a. bei Firebug/PageSpeed) auch unter "Parallelize downloads across hostnames". Die HTTP 1.1 Spezifikation sieht tatsächlich vor, dass Browser "eigentlich" nur 2 Ressourcen per Host synchron downloaden. Sind aber -augenscheinlich- z. B. beim Firefox mindestens 4.

          zu 2.

          Du schreibst/sprichst da von sog. "CSS Image Sprites". Gibt da ein paar Tools (optimal ist der Fussweg, z.B. via Photoshop), aber eine fertige Lösung per PHP ist mir bis dato nicht untergekommen. Vielleicht meint Google da auch was anderes ...
          Ist in erster Linie eine Lösung für Icons und Buttons, nicht aber für "echte" Bilder, Photos.

          Beispiel: Spritemap von Yahoo http://d.yimg.com/a/i/ww/met/pa_icon...pr_apps_de.gif
          [URL="https://xlb-weblab.de/toolstool/"][B]ToolsTool[/B] - Online (SEO-)Tools im Browser gleichzeitig starten ...[/URL]

          Kommentar


          • #6
            Das mit PHP umzusetzen, halte ich für keine gute Idee

            1. Ist das mit einem ziemlichen Ressourcenhunger verbunden (Was man durch Caching noch kompensieren könnte)
            2. Sind die Grafik-Bibliotheken teilweise unberechenbar, was die Qualität angeht.
            3. Wird das ganze so komplex werden, dass Du vermutlich schneller bis, wenn Du es mit dafür geeigneten Tools oder per Hand machst.
            4. Mit echten Bildern wirst Du, wie schon erwähnt, Probleme bekommen, da diese dann _immer_ als Hintergrundbilder eingefügt werden müssen.

            Dass immer nur 3 Bilder auf einmal geladen werden, ist mir aber auch neu - Mir ist auch bisher nirgends aufgefallen, dass das einen Webseitenaufbau behindert hätte - Da würde ich schon eher am HTML-Code oder der Applikation selber feilen, oder, wenn es schneller gehen soll, die Bilder von einem eigens dafür eingerichteten Server laden.

            Kommentar


            • #7
              Bei langsamen Internetanschlüssen ist es besser weniger Daten gleichzeitig zu laden. So werden zumindest schon mal ein paar Bilder/CSS/JS Dateien verwendet und dann die nächsten geladen. Ich hab das Limit auf 10 Requests hoch geschraubt, aber der Standarduser wird das sehr wahrscheinlich nicht tun.

              Daher arbeite ich dann mit einer Kombination aus CSS Sprites und mehreren Domains. Zum einen bau ich die Designelemente alle in ein Sprite zusammen (per Hand). JS/CSS werden ebenfalls jeweils in eine Datei komprimiert. Zusätzlich zu dem ganzen habe ich Subdomains erstellt die direkt auf den Ordner mit den statischen Daten linken. Z.B. cdn1.example.com, cdn2.example.com und so weiter. Somit werden möglichst wenige Dateien von verschiedenen Domains geladen, die Dateien liegen physikalisch aber nur einmal vor.

              Für CSS Sprites gibt es ein paar Tools online: css sprite generator - Google-Suche

              Kommentar


              • #8
                Flor1ans Subdomain-Lösung wird von Gevatter Google auch empfohlen.
                Ein anderer Ansatz wäre die Bilder selbst zu optimieren. Weniger Volumen, kürzere Ladezeit.

                Nur mal so am Rande bemerkt ...
                Zitat von xm22 Beitrag anzeigen
                4. Mit echten Bildern ..., da diese dann _immer_ als Hintergrundbilder eingefügt werden müssen.
                Damit ginge dir auch einiges an SEO-Potential flöten. Kein ALT- oder Title-Attribut, keine Pfad- und Filenamen in denen man Keywords unterbringen könnte ...
                [URL="https://xlb-weblab.de/toolstool/"][B]ToolsTool[/B] - Online (SEO-)Tools im Browser gleichzeitig starten ...[/URL]

                Kommentar


                • #9
                  Das Bilder optimiert gespeichert werden sollen ist doch sowieso klar oder? Und so viele Designelemente bei denen ein "alt"-Tag Sinn macht gibt es doch auch nicht oder? Mir fällt da spontan nur das Logo ein.

                  Kommentar


                  • #10
                    Holla nochmal ...
                    Bilder optimiert gespeichert werden sollen ist doch sowieso klar
                    Uns schon ...
                    so viele Designelemente bei denen ein "alt"-Tag Sinn macht gibt es doch auch nicht
                    Ob es dem Fred-Starter um Designelemente, Buttons, Icons oder "große" Fotos geht, wissen wir ja (noch) nicht. Grundsätzlich "könnte" man schon jedes Img-Tag -unabhängig vom Verwendungszweck- mit einem Alt-Text versehen. Ist aber eher wahrscheinlich, dass Google dies bei sehr kleinen Bildern (Icons, Designelementen) eher als Keyword-Spam betrachtet (was es -de facto-auch wäre )
                    [URL="https://xlb-weblab.de/toolstool/"][B]ToolsTool[/B] - Online (SEO-)Tools im Browser gleichzeitig starten ...[/URL]

                    Kommentar


                    • #11
                      Ja ich sehe keinen Sinn darin Icons wie Pfeile oder sowas mit einem alt-Tag zu belegen (in SEO-Hinsicht, Barrierefreiheit, Validität etc. natürlich schon).

                      Und große Fotos (zumindest welche die nicht zum Design gehören) würde ich sowieso nicht in Sprites verpacken.

                      Kommentar


                      • #12
                        Erstmal danke für die Antworten.

                        Meine Grafiken sind schon bis zum Maximum optimiert, ist ja mehr oder weniger Standard dass man die nicht mit 100% speichert.

                        Was SEO angeht weiß ich gerade nicht ob es das Titel oder Alt Attribut war aber eines von beiden wird schon mal gar nicht gezählt, das andere meinen Informationen zufolge auch nur sehr schlecht - wenn überhaupt - von Google bewertet.

                        Der Gedanke mit den Sub-Domains ist mir auch schon gekommen, war mir nur nicht sicher ob es auch funktioniert > Aber gut, Danke, jetzt bin ich schon mal etwas schlauer.

                        Mein Gedanke bei der CSS/JS Variante war halt noch dass es zusätzlich den Apache etwas entlastet.

                        > Für CSS Sprites gibt es ein paar Tools online: css sprite generator - Google-Suche

                        Genau so was habe ich gesucht DANKE!

                        Kommentar


                        • #13
                          Bei den Subdomains ist nur zu beachten, dass du diese ohne Cookies auslieferst (spart wieder Daten). Außerdem solltest du irgend einen Mechanismus verwenden damit eine Datei nicht zufällig von einer Subdomain geladen wird sondern immer von der selben. (Damit die Datei aus dem Cache genutzt wird und nicht pro Subdomain einmal runtergeladen wird).

                          Kommentar


                          • #14
                            SEO ... das Titel oder Alt Attribut war aber eines von beiden wird schon mal gar nicht gezählt, das andere meinen Informationen zufolge auch nur sehr schlecht - wenn überhaupt - von Google bewertet.
                            Alt wird meiner Erfahrung nach ähnlich gewertet, wie "normaler" das Bild umgebender Content (wenn nicht zu lang und spammy). Obwohl der eigentliche Sinn ein anderer ist: alt = alternative Bildbeschreibung.
                            Alt und Title sind sinnvoll bei Bildern, die als Link fungieren. Obwohl z. B. CSS-Tooltips -also "echter" Content- wesentlich mehr bringen ...

                            Wie schrieb mal einer in einem anderen SEO-Forum: Alt für's Img ist Pflicht, Title die Kür.

                            Das beides ins Ranking einfließt, kann man z. B. (langfristig) bei der Bildersuche beobachten.
                            [URL="https://xlb-weblab.de/toolstool/"][B]ToolsTool[/B] - Online (SEO-)Tools im Browser gleichzeitig starten ...[/URL]

                            Kommentar


                            • #15
                              Sind aber -augenscheinlich- z. B. beim Firefox mindestens 4.
                              Falsch! Es können 4 sein. Da skommt auf die Konfiguration des Benutzers an und der 08/15-User wird sich sicher in diesen Gefilden nicht bewegen.

                              Genau deshalb empfehlen Yahoo-Experten auch die Bilder über Hosts zu verteilen (siehe Chriz' Antwort). Allerdings hat man auch über mehrere Browser und mehrere Domains Tests veranstaltet und ist bei einer optimalen Ladezeit gelandet die durch 3 Domains erzeugt wird: 1 HTML- und 2 Image-Domain(s).
                              Viele Grüße,
                              Dr.E.

                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                              1. Think about software design [B]before[/B] you start to write code!
                              2. Discuss and review it together with [B]experts[/B]!
                              3. Choose [B]good[/B] tools (-> [URL="http://adventure-php-framework.org/Seite/088-Why-APF"]Adventure PHP Framework (APF)[/URL][URL="http://adventure-php-framework.org"][/URL])!
                              4. Write [I][B]clean and reusable[/B][/I] software only!
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                              Kommentar

                              Lädt...
                              X