zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit Google PageSpeed & inline CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.12.2015, 16:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2015
Beiträge: 11
derAngler kann nur auf Besserung hoffen
Standard Probleme mit Google PageSpeed & inline CSS

Hallo,

ich bin gerade dabei die Homepage unserer Firma neu aufzubauen.
Die alte Homepage habe ich ohne bootstrap gemacht, die neue soll auch mobil nutzbar sein, deshalb nutze ich hier bootstrap.

So, jetzt hatte ich meine Seite eigentlich fertig und wollte sehen wie gut diese von Google PageSpeed bewertet wird.

Aber Überraschung, ich habe weniger Punkte.

Für die (alte) Seite -> http://www.trennwand-rink.de bekomme ich 92 Punkte.
Aber für die neue Seite -> http://test.trennwand-rink.de bekomme ich nur 89 Punkte.

Das Problem scheint der Punkt "Sichtbare Inhalte priorisieren" zu sein.
Ich bin jetzt ungelogen seit 5-6 Stunden dabei herauszufinden was Google hier überhaupt von mir will.

Auf den meisten Internet-Seiten wird das Problem "Sichtbare Inhalte priorisieren" mit eingebundenen CSS-Dateien in Verbindung gebracht.
Dort steht dann, das ich alle Style die auf der Seite vorkommen und ohne scrollen sichtbar sind, per inline-Code einbinden soll???

Mal ganz ehrlich, das widerspricht allem was ich über CSS-Styles gelernt habe.
Laut Google und den diversen Seiten, müsste ich also in jeder Seite inline-CSS-Code verwenden.
Dazu zählt dann auch die Formatierung des Hintergrunds, etc...
Diese Formatierungen wären dann doppelt und dreifach vertreten, auf jeder Seite wären die fast gleichen inline-CSS-Styles.

Wenn ich dann den Hintergrund ändern wollen würde, dann müsste ich das auf jeder Seite einzeln machen.

Dabei ist doch gerade der Vorteil von CSS das ich keine doppelten Formatierungen habe.
Außerdem ist der eigentliche Code (html) ist sauber vom Design (css) getrennt und wenn ich etwas ändern will, dann muss ich es nur einmal machen und es wirkt sich global auf die ganze Seite aus.

Liege ich hier falsch?

Oder habe ich das mit dem inline-Code falsch verstanden?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.12.2015, 17:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Hier ein ausführlicher Artikel dazu, wie man die Google-Anforderung "richtig" umsetzen könnte.
https://www.filamentgroup.com/lab/performance-rwd.html

Zusammengefasst:
Der Teil des CSS und evtl. JS, der für den sichtbaren Bereich ("critical path") zuständig ist, wird inline eingebunden. Das vollständige CSS und JS wird asynchron nachgeladen.
Es wird dann ein Cookie gesetzt, das markiert, dass die Ressourcen geladen wurden. Beim nächsten Aufruf einer Seite wird auf das Cookie geprüft und davon ausgegangen, dass die Ressourcen im Cache sind. Daher wird nicht mehr inline eingebunden.
In dem Artikel sind etliche Tools aufgeführt, mit denen man sowohl die Auswahl der nötigen Styles/Scripte als auch das "Inlinen" automatisieren kann.
Ob man sich das in der Praxis wirklich antun will, sei mal dahingestellt.

Zu den Page-Speed-Ergebnissen:
Bootstrap hat einen gewissen Preis, was Performance angeht. Schau dir mal an, wieviel CSS im Vergleich auf der alten und neuen Seite geladen werden muss.
Auf der neuen Seite könntest du deine CSS-Files zumindest minifizieren und zu einer Datei zusammenfassen.

JavaScript: Es hagelt Fehler. Bist du sicher, dass du die Scripte asynchron einbinden kannst?

Bei meinem Test wird die Webfont-Einbindung auf der alten Seite nicht als blockierend gelistet, auf der neuen hingegen schon. Kommt mir merkwürdig vor.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.12.2015, 10:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2015
Beiträge: 11
derAngler kann nur auf Besserung hoffen
Standard

Erstmal vielen Dank für die Antwort.

Betreffend des PageSpeed Tests schreibst du das ich die css-Files zusammenfassen und minifizieren sollte.
Aber geht dabei nicht komplett die Übersicht verloren?
Wie oft ändere ich Kleinigkeiten in den css-Files ab und schaue mir dann erst das Ergebniss an - wenn ich alle css-Files zusammenfasse und minifiziere, dann verliere ich hier doch richtig an Komfort?

Javascript Einbindung klappt doch nicht asynchron. Du hast Recht,m es hagelt Fehler und die Skripts funktionieren nicht richtig.
War auch nur ein schneller Versuch um die Probleme beim PageSpeed Test zu umgehen - leider ohne Erfolg.

Die Webfont-Einbindung macht bei mir bei keinem Test Probleme, weder alt noch neu - sehr komisch.

Was ich mich aber immer noch frage, wo der Sinn mit dem inline-CSS liegen soll?
Ich hatte eigentlich gelernt das inline-CSS ein schlechter Programmierstil ist und das bei einer sauber programmierten Seite CSS extern ausgelagert wird.

Wie ich schon im ersten Beitrag geschrieben habe, sehe ich das Problem des doppelten Codes.
Wenn ich die Hintergrund-Farbe ändern wollte, dann müsste ich das auf jeder(!) Seite einzeln machen, oder sehe ich etwas ganz falsch.

Ich werde jetzt noch einmal in aller Ruhe deinen Link anschauen, aber irgendwie habe ich das Gefühl das je mehr ich nachlese, desto weniger verstehe ich ...
Mit Zitat antworten
  #4 (permalink)  
Alt 08.12.2015, 11:12
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Zum Zusammenfassen von CSS und JS:

Ja, die Übersichtlichkeit geht verloren. Aus diesem Grund sollte man immer eine unkomprimierte Arbeitsdatei und eine komprimierte Version haben. Wenn es Änderungen gibt, kommt es (leider) zu doppelter Arbeit, weil du zuerst die Arbeitsdatei anpasst und danach nochmal verkleinern musst. Die komprimierte Version ist dann die, die in der Website einbindest.

Dafür finde ich Präprozessoren nützlich, z.B. SASS und LESS.

Damit kannst du für sämtliche Bereiche deiner Website eine eigene CSS-Datei anlegen, also eine für den header, eine für den footer usw. und jedesmal beim Abspeichern wird auch automatisch alles in der komprimierten Datei angepasst. Die Übersichtlichkeit in den einzelnen CSS Dateien bleibt erhalten und du musst dich nicht manuell um das Komprimieren kümmern.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.12.2015, 11:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Ich werde jetzt noch einmal in aller Ruhe deinen Link anschauen, aber irgendwie habe ich das Gefühl das je mehr ich nachlese, desto weniger verstehe ich
Ganz einfach: Vergiß Page Speed.

Die Messungen sind rein theoretischer Natur und sagen für die Praxis nichts aus. Entscheidend ist allein ob die Seite in akzeptabler Zeit geladen wird oder nicht.

Von daher kannst du auch die Vorteile des externen unkomprimierten CSS nutzen. Die Empfehlung grundsätzlich Inline-CSS zu verwenden ist schlicht praixsfremd.

Erstelle Webseiten mit sauberem HTML / CSS, optimiere Grafiken und verzichte soweit wie möglich auf JavaScript.

Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 08.12.2015, 15:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von derAngler Beitrag anzeigen
Wie ich schon im ersten Beitrag geschrieben habe, sehe ich das Problem des doppelten Codes.
Wenn ich die Hintergrund-Farbe ändern wollte, dann müsste ich das auf jeder(!) Seite einzeln machen, oder sehe ich etwas ganz falsch.
Ja, die Änderung muss "auf jeder Seite" gemacht werden. Aber eben nicht von Hand, sondern automatisiert. In dem Artikel wird Grunt verwendet
Gleiches gilt für minifizieren und zusammenfassen von CSS und JS. Auch das kann automatisiert geschehen, wie dazzle89 schon geschrieben hat.

Man muss sich natürlich klar sein, dass man sich von solchen Tools dann auch abhängig macht. Wer weiß schon, was in fünf Jahren gerade hip ist in der Entwicklerwelt ...
Wenn du also nur dieses eine Projekt bearbeitest und wenn's mal fertig ist auch nur selten hinlangen wirst, wirst du sicher nicht glücklich werden, wenn du dir einen derart komplexen Prozess wie in dem Artikel beschrieben, auferlegst.

Page Speed ist ein maschinelles Tool, das wertvolle Hinweise gibt und einen mit der Nase darauf stößt, wenn man etwas übersehen hat. Aber wenn man Googles "Forderungen" alle erfüllen will, bedeutet das sehr viel Aufwand.
Das Smashing Magazine beschreibt den Weg zu "100%":
Improving Smashing Magazine's Performance: A Case Study
Für den Handwerker von nebenan muss man schon genau abwägen, was sich lohnt.

Geändert von fricca (08.12.2015 um 15:48 Uhr) Grund: hip nicht hipp ...
Mit Zitat antworten
  #7 (permalink)  
Alt 14.01.2016, 16:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2015
Beiträge: 11
derAngler kann nur auf Besserung hoffen
Standard

So, nach etwas längerer Zeit habe ich mich mal wieder mit dem Thema beschäftigt.

Derzeit bekomme ich Google Page Speed auf einen Wert von:
- Mobil 71/100
- Desktop 89/100

Und ich bekomme hier einfach nicht mehr Punkte hin.
Vor allem das rote Ausrufezeichen beim "Mobil"-Test stört mich doch gewaltig.

Allerdings ist es mit komplett unmöglich die 4 x javascript-Files asynchron zu laden, auch inline im html ist bei der Menge keine Lösung.
Also habe ich die ganzen js-Files in eine Datei gepackt, hat aber so gut wie nichts gebracht.

Das gleiche gilt für die CSS-Files.
Natürlich hatte ich in der alten Version der Seite viel weniger CSS-Code, da hatte ich auch kein bootstrap genutzt.
Ich habe also den ganzen CSS-Kram in eine Datei gepackt und würde die in der entgültigen Version noch minimieren.

Trotzdem bekomme ich diesen "Fehler" nicht weg.

Ansonsten bin ich schon recht zufrieden.
Die Versuche auf über > 90 Punkte zu kommen habe ich aufgegeben.

Ich bin der festen Meinung das meine Webseite unmöglich auf 100 Punkte gebracht werden kann, zum einen wegen js-Files die nicht asynchron geladen werden können, zum anderen wegen dem Nutzen von WebFonts.

Also es wäre nett wenn hier jemand nochmal kurz über meine Seite und die Testergebnisse schauen könnte und mir dann vielleicht noch 1-2 Tips geben kann.

Danke
Mit Zitat antworten
  #8 (permalink)  
Alt 14.01.2016, 16:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Den gleichen Tip wie Mr Murphy schon hatte, nur nicht ganz so extrem: Nimm das als guten Hinweis, aber häng dich nciht an irgendwelchen Zahlen auf. Ich weiß nicht ob ich es lustig oder beängstigend finden soll, dass sich manche Leute da so den Kopf ausbeißen.

Das ist auch ein guter Artikel dazu den ich auf die Schnelle mal gefunden habe. Gibt bestimmt mehr und bessere.

Verwende die Zeit, die du für das Zeugs verwendest lieber dafür, deine Seite benutzerfreundlich zu gestalten. Oder sinnvollen Inhalt einzupflege. Oder zum spazieren gehen

Das war es mit meinen Tipps. ^^
Mit Zitat antworten
  #9 (permalink)  
Alt 14.01.2016, 17:53
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Pagespeed sehe ich als sowas wie eine Checkliste.

Nicht unwichtig, aber auf jeden Fall überbewertet. Es sagt nämlich nicht aus, ob eine Seite schnell oder langsam ist. Eine Seite kann 98 Pagespeed haben, aber 5 MB groß sein und ist somit trotzdem langsam. Eine Seite kann aber auch 500kb groß sein und mit 50 Pagespeed schneller als die andere Homepage sein.

Einige Punkte vom Pagespeed Tool finde ich trotzdem wichtig und sollten optimiert werden, solang der Aufwand nicht zu riesig ist. Cashen und gzip beschleunigen deine Seite extrem und das lässt sich mit wenigen Zeilen in der .htaccess umsetzen, solange die Server-Einstellungen da mitspielen.

Oder ich finde den Punkt "Nutzererfahrung" ganz interessant, denn vielleicht bemerkt man selbst es gar nicht wenn ein Button oder Text zu klein ist.

Aber jedes Bild bis aufs letzte Byte zu optimieren finde ich z.B. übertrieben und da ist es mir auch egal, wenn das Tool meckert.

Also meine Meinung ist, dass man sich ruhig an dem Tool orierentieren kann, aber man sollte sich nicht beim Score verrückt machen. Er ist nicht direkt aussagekräftig und sollte dir kein schlechtes Gewissen bereiten.

Geändert von dazzle89 (14.01.2016 um 17:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.01.2016, 13:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2015
Beiträge: 11
derAngler kann nur auf Besserung hoffen
Standard

Hallo,

danke für die Antworten.

Konkret auf meine neue Homepage bezogen würdet Ihr also keine weiteren Optimierungen vornehmen, richtig?

Die Probleme mit css, google web fonts & javascript bezüglich dem "above fold"-Fehler bekomme ich also realistisch gesehen nicht gelöst, richtig?

Bzw. ich müsste extrem viel Zeit einsetzen, mich in diverse Tools arbeiten und würde den Source-Code damit "hässlicher" machen, richtig?

Ich frage mich einfach die ganze Zeit ob ich wegen dem Fehler bei Mobil von Google beim Ranking abgestraft werde.

Bei anderen Homepage-Tests habe ich immer zwischen 97% und 100% erreicht, eben nur bei Google nicht.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
paar Probleme mit dem CSS Layout SimonK. CSS 6 05.10.2008 15:57
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript chrisol_76 CSS 2 21.07.2008 18:37
CSS und IE - Link als Block macht Probleme Morjo CSS 4 25.06.2008 14:28
Probleme mit Google Maps im IE tmarx (X)HTML 0 29.08.2007 22:15
CSS Design Probleme Hawklan CSS 5 12.08.2004 12:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:02 Uhr.