Ankündigung

Einklappen
Keine Ankündigung bisher.

Google PageSpeed Insights Sammelthread

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

    Google PageSpeed Insights Sammelthread

    Hallo zusammen,

    wollte mal den Thread hier aufmachen, denn das Tools ist an sich schon sehr leistungsfähig, aber vieles ist halt auch so beschrieben, dass man gar nicht weiß, was das Tool überhaupt von einem will.

    Mal zwei Beispiele:

    Seit einer Woche bekomme ich auf einer Domain immer wieder diese Warnung:

    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: preload-1.jpg
Ansichten: 24
Größe: 54,2 KB
ID: 120937

    Ich für meinen Fall nutze Preload, aber für meine eigenen CSS und JS, nicht für Google-Adsense. Das kommt von Google selbst. Nur wie soll ich das beheben. Es scheint so, dass auch viele andere seit einer Woche diese Meldung bekommen.

    Dann bemängelt das Tool z.B. ständig folgendes:

    "Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt"

    Da kann ich aber machen was ich will und für "font-display" alle möglichen Werte vergeben, die Meldung bleibt.

    Genauso die Punkte "Aufwand für Hauptthread minimieren" und "Tiefe kritischer Anforderungen minimieren" sind mir unverständlich.

    Bei letzterem wird unter anderem das Favicon-Manifest und das CSS-File bemängelt.

    #2
    Die Tiefe der kritischen Anforderungen ist praktisch der Dateibaum, der für ein erstes Zeichnen benötigt wird, also das HTML selbst, dann - sofern noch ohne defer oder async im head verlinkt, das CSS und dann zB im CSS hinterlegte Hintergrundgrafiken, Fonts, etc. D.h. alles, bei dem es noch heißt: a darfst Du erst ausführen, wenn du auch b (und c und d ...) dafür hast, wobei a eben das HTML wäre, b, c, d, etc. blockierende css, js, Grafiken, fonts, etc.

    Aufwand für Hauptthread sind HTML/CSS/das meiste JS, Request Animation Frames, etc, alles was nicht asynchron laufen kann/definiert ist.

    Bzgl. Adsense: Googles Services sind in meinen Augen immer der größte Verbreche für Pagespeed, daher nutze ich nirgendwo irgendwas von Google, weder Maps, noch Adsense, noch Fonts, noch Analytics noch irgendwas anderes aus dem Hause Google und allgemein auch nichts aus externen Quellen, die ich nicht selbst kontrolliere/kontrollieren kann.

    Kommentar


      #3
      PS: Kannst Du Adsense nicht komplett lazy loaden? Also das ganze Script?

      Kommentar


        #4
        Also wegen der Kette. Die schaut hier so aus, hoffe das kommt rüber:

        Anfangsnavigation
        |---- html
        |...|--------- css 80 ms, 4,17 KB
        |---- webmanifest 70 ms, 1,04 KB

        Wüsste nicht, was ich da ändern sollte.

        Adsense ist da ganz komisch. Das Main-Script von Adsense ist "async", aber dieses Async-Script lädt per Preload das andere Script nach und noch gefühlt 100 weitere. Das aber nur per Mobile, per Desktop kommt die Meldung nicht. Also an das Script wo da bemängelt wird komme ich gar nicht ran, dessen Namen ändert sich auch alle paar Wochen.

        Kommentar


          #5
          Hmm, weiss auch nicht. Also bei den betroffenen Webseiten habe ich mobil auch weniger als Desktop bei Pagespeed Insights.
          44 mobil und 99 desktop

          Liegt aber zum grossen Teil an Adsense

          wenn etwas möglich erscheint mach ich das, wenn das nicht klappt gehts ans unmögliche und ansonsten das undenkbare.
          Ich denke, also BING ich :)


          Support 24h Bereitschaft 0163 2161604 - NUR Für Kunden von SEO NW! Faires Hosting - Alternative Suchmaschinen

          Kommentar


            #6
            Syno, warum brauchst Du denn externes CSS, statt für alles above the fold direkt im head?

            Könntest Du wenigstens alternativ http/2 unterstützen?

            Kommentar


              #7
              H2 läuft auf dem Server. Ich habe das extra extern und alles in einem, weil ich mir eigentlich sage, das muss nur einmal geladen werden. Hat ein Expires von einem Jahr. Inline muss das ja immer mitgeladen werden und klein ist das nicht unbedingt.

              Kommentar


                #8
                h2 hat er doch, oder?

                wenn etwas möglich erscheint mach ich das, wenn das nicht klappt gehts ans unmögliche und ansonsten das undenkbare.
                Ich denke, also BING ich :)


                Support 24h Bereitschaft 0163 2161604 - NUR Für Kunden von SEO NW! Faires Hosting - Alternative Suchmaschinen

                Kommentar


                  #9
                  Ja Alex, in dem Fall ja. Nur noch ein Server hat das nicht, der braucht aber noch ein wenig. Alle andere nutzen es.

                  Kommentar


                    #10
                    Mit einmal geladen und langen expires ist schön und gut, gilt aber nicht für den Erstbesucher und der ist die Messlatte.

                    Für den würde ich das alles css für above the fold in eine style node in de head packen und nen preload für die open-sans. Also jetzt auf f-n bezogen. Und sowas wie leaflet.css und ähnlichen Krams per js nachladen, wenn Du nen Ready hast und die Map gezeichnet werden soll.

                    Und inline muss das css ja nur geladen, wenn er keinen cookie von dir hat und der letzte Besuch über ein Jahr her ist. Das wäre doch einfach zu regeln ;)

                    Kommentar


                      #11
                      Ja, wollte ich gerade was zu schreiben. F-N ist da noch altmodischer. Ich teste an verschiedenen Seiten mit Preload etc.

                      Z.B. bemängelt Google bei einer:

                      "css/lightbox-20170825-min.css", dass ich das per Preload laden soll. Das File brauche ich aber nicht überall und es wird async geladen, das noch noch nicht mal direkt. Ich mache meinen Preload auch nicht per <link>, sondern direkt auf dem Server per Header, weil das noch mal schneller ist.

                      die "lightbox.js" wird async geladen (nicht bemängelt) und das JS lädt das zugehörige CSS per async nach. Das wird aber nun bemängelt.

                      Cookie, das ist immer so eine Sache, gerade bei DSGVO. Ich nutzte so wenige wie es geht. Aber ja, hast recht, man könnte das per Cookie regeln. Die aktuelle Datei dort speichern und vergleichen, ob das die aktuelle Version ist (kann sich ja früher was dran ändern, dann anderer Dateiname). Nur, jetzt nee doofe Frage. Was ist, wenn der Preload nicht funktionierte? Das können ja nicht alle Browser und eine Rückmeldung gibt es nicht dazu.

                      Kommentar


                        #12
                        Ich würde erstmal mit CSS für above the fold in eine head style node anfangen, da dort ja die font drin ist, reduziert sich die Tiefe des kritischen Pfades gleich mal um eins. Auf preload Anforderungen würde ich nicht immer achten, weil sie manchmal Stuss sind. Aber preload setzen kannst Du ja immer (wo es sinnvoll ist), wenn der Browser preload nicht versteht, wird er ja später noch die Anforderung finden. Durch preload alleine ist es ja nicht vorhanden, es muss ja auch irgendwie referenziert sein.

                        Kommentar


                          #13
                          Moment, wie passt das dann zusammen? Preload von CSS und gleichzeitig CSS inline im Head? Der Preload wird doch immer gesendet und macht dann doch gar keinen Sinn, wenn das auch im Head direkt steht. Oder verstehe ich da was nicht? Ich dachte das macht nur Sinn in Kombination mit "Externem CSS", also wenn er den Preload nicht konnte, dann muss er extern laden.

                          https://www.geranien-pflanzen.de/ nutzt z.B. Preload für CSS. Dort bemängelt Google das CSS nicht, obwohl es dort auch per extern hinterlegt ist. DIe Woff2 habe ich nicht vorladen lassen, weil ich vorher nicht weiß, was benötigt wird.

                          Oder meinst Du mit "Ich würde erstmal mit CSS für above the fold in eine head style node anfangen" das CSS aufdröseln in "sofort wichtig" und "reicht auch noch später"? Dazu habe ich schon viel gelesen und irgendwie nie hinbekommen, das aufzutrennen ;)

                          Kommentar


                            #14
                            Aber wegen dem Font bei der Geranien. Da kommt ja auch das "font-display" dazu. Ich dachte das ist genau dafür gedacht, dass es eben nicht kritisch ist und später geladen wird. So steht es zumindest bei Google. Dennoch wird es als "kritischer Pfad" angesehen.

                            Kommentar


                              #15
                              So, mit nem Push der Font mal versucht, mit

                              $pushString .= ",</fonts/open_sans/regular.woff2>; rel=preload; as=font/woff2";
                              $pushString .= ",</fonts/open_sans/regular.woff2>; rel=preload; as=woff2";
                              $pushString .= ",</fonts/open_sans/regular.woff2>; rel=preload; as=font";

                              weil keine Ahnung was davon geht. Fakt ist, der Push erfolgt, aber dennoch wird das Font nochmals manuell runtergeladen.

                              Kommentar

                              Lädt...
                              X

                              Das Rechtliche
                              Impressum | Widerruf | Datenschutz | Disclaimer | Links