| Autor |
Nachricht |
Kartöffelchen
Threadersteller
Dabei seit: 16.03.2012
Ort: Strawberry Fields
Alter: -
Geschlecht: 
|
Verfasst Mo 23.02.2015 21:34
Titel CSS laut Google nach </html> einbinden und mod_rewrite |
  |
|
Servus!
Gestern habe ich den halben Tag damit verbracht, meine Seite den Google PageSpeed Insights anzupassen.
Nach zwei drei Kleinigkeiten hier und da empfahl mir Google, dass ich meine CSS-Dateien doch bitte nach dem schließenden HTML-Tag einbinden solle. Sieht dann im Beispiel von Google etwa so aus:
| Code: | <html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css"> |
Gesagt, getan und schon stieg die Punktzahl bei Desktop von 90/100 auf 96/100 sowie in der mobilen Variante von 77/100 auf 95/100.
So erfreut wie ich vorerst darüber war, machte mir der W3C-Validator wieder einen Strich durch die Rechnung - 2 Fehler, eben wohl weil die CSS-Dateien nach </html> eingebunden worden sind:
u. a.
Error Line 420, Column 61: Stray start tag link.
<link rel="stylesheet" type="text/css" href="css/global.css"/>
Zudem sieht man jetzt auch immer beim Laden der Site erstmal für einen kleinen Moment die reine HTML-Struktur. Weil die CSS-Dateien eben erst nachkommen.
Was ist denn nun richtig? CSS wie ich es auch gewohnt war in den Head (dann gibt's wieder weniger Punkte) oder lt. Google nach dem schließenden Tag? 
Die andere Hälfte des Tages habe ich damit verbracht, meine .htaccess-Datei zu modifizieren. Naja, viel mehr ging es darum, dass ich eben in den URLs das .html entfernen wollte.
Bei der Startseite natürlich nicht nur .html, sondern /index.html.
Gefunden hatte ich dazu den Schnipsel:
| Code: | RewriteEngine on
RewriteCond %{THE_REQUEST} ^[A-Z]+\ /index\.html
RewriteRule ^index\.html/?(.*) /$1? [L,R=301] |
Das funktioniert bei der Startseite.  Aber nun wüsste ich halt gerne noch, wie ich bei blog.html und referenzen.html nur das .html entfernen kann?! Hat da jemand vielleicht mal einen Schnipsel für mich?
Es sieht ohne diese Endungen einfach professioneller aus.
Zuletzt bearbeitet von Kartöffelchen am Mo 23.02.2015 21:39, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Di 24.02.2015 12:22
Titel Re: CSS laut Google nach </html> einbinden und mod_rew |
|
|
| Kartöffelchen hat geschrieben: | | [...] eben wohl weil die CSS-Dateien nach </html> eingebunden worden sind: |
Sowas (Wollte erst "So einen Unsinn" schreiben) sehe ich zum ersten Mal ... wo soll dir das empfohlen worden sein?
Gute Orientierung für performanten Code ist auch Googles HTML/CSS Styleguide
Gruß
Karl
|
|
| |
|
|
|
Anzeige
|
|
|
Kartöffelchen
Threadersteller
Dabei seit: 16.03.2012
Ort: Strawberry Fields
Alter: -
Geschlecht:
|
Verfasst Di 24.02.2015 13:47
Titel Re: CSS laut Google nach </html> einbinden und mod_rew |
|
|
| Karlarsch hat geschrieben: | | ... wo soll dir das empfohlen worden sein? |
Google PageSpeed Insights
|
|
| |
|
|
Martys
Dabei seit: 07.04.2005
Ort: Bochum
Alter: 45
Geschlecht:
|
Verfasst Di 24.02.2015 13:56
Titel
|
|
|
|
Auch hier gilt, lesen (und zwar richtig), drüber nachdenken und dann seine Schlüsse ziehen und nicht blind Anleitungen abarbeiten.
|
|
| |
 |
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Di 24.02.2015 14:40
Titel Re: CSS laut Google nach </html> einbinden und mod_rew |
|
|
| Kartöffelchen hat geschrieben: | | Google PageSpeed Insights |
Nein, da ist dir was ganz anderes empfohlen worden. Das sieht nur ähnlich aus.
Wie Martys schon schreibt: lesen & verstehen
Gruß
Karl
|
|
| |
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Di 24.02.2015 15:58
Titel
|
|
|
Mal ganz davon abgesehen, ist die deutsche Übersetzung einfach fehlerhaft. Hier das original: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=en
Das, was da empfohlen wird, ist aber auch selten dämlich.
| Zitat: | | Die Anwendungsreihenfolge der CSS-Regeln wird gewährleistet, indem sämtliche <style>- und <link>-Elemente mittels JavaScript in das Dokument injiziert werden. |
Srsly? 
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Di 24.02.2015 17:03
Titel
|
|
|
Wow, da ist der Transfer von EN nach DE aber mal mächtig in die Hose gegangen Ò_o
| Morgo hat geschrieben: | | Das, was da empfohlen wird, ist aber auch selten dämlich. |
Nicht unbedingt.
Für wirklich performante* Webseiten ist das der richtige Weg (wenn ich es auch technisch anders lösen würde). Erst alles "above the fold" laden und das stylen und dann erst den Rest berücksichtigen.
*gefühlt performant
Facebook macht etwas ähnliches mittels seiner "Big Pipe" Technik. Die wichtigen Seitenelemente sind sofort verfügbar. Somit fühlt sich die Seite für den User sehr schnell an. Beachtet man jedoch den Ladestatus, sieht man, dass dieser noch eine halbe Ewigkeit weiterrödelt.
Gruß
Karl
|
|
| |
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Di 24.02.2015 19:24
Titel
|
|
|
| Karlarsch hat geschrieben: | Wow, da ist der Transfer von EN nach DE aber mal mächtig in die Hose gegangen Ò_o
... |
Nicht unbedingt:
en-Version:
| Zitat: | | Last updated August 28, 2014. |
de-Version:
| Zitat: | | Last updated April 11, 2014. |
Ich gehe davon aus, dass in der englischen Version ursprünglich der gleiche Kappes stand.
Mag ja sein, dass sich die Seite für den Benutzer schneller bedienen lässt. Dieses jedoch im Speed-Test als derart gewichtigen Faktor zu werten, empfinde ich als fatal.
Letztlich bekämpft man damit nur die Symptome die durch die zu großen Datenmengen entstehen. Seiten die solche Tricks nicht nötig haben, erhalten dadurch im Speed-Test eine schlechtere Wertung und man muss befürchten, dass sich das dann in schlechteren Platzierungen in der Suche bemerkbar machen könnte. 
Das ist für mich wie ein Vorschlag der Umwelt zu Liebe nur mit Biodiesel im Hummer zur Arbeit zu fahren. 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Rewrite Rules & PHP Anfrage: HTML Zeichen entfernen lassen?
google maps einbinden
Google-Maps: Mit Sonderwünschen einbinden
google maps einbinden - im IE nicht sichtbar
[Google+] Animated Gifs in Fotoleiste einbinden
Google Maps auf Seite vom Geschäft einbinden
|
|
Willkommen auf dem Portal für Mediengestalter
