PHP CSS - schneller/gute Praxis, externe Datei oder Echo in den Kopf zu laden?

Ich würde gerne wissen, ob es zuPHP CSS - schneller/gute Praxis, externe Datei oder Echo in den Kopf zu laden?

besser

A) umfasst externe CSS-Dateien <link> oder

B) mit Echo/Spül/print die CSS direkt in die <head>.

Ich persönlich mag Option B, da es

Entfernen Kommentare erlaubt/Verkleinerungs
CSS über dem Root-Verzeichnis platziert mit
mehr CSS-Dateien = Komprimieren weniger HTTP-Anforderungen

Bevor ich dies in die Praxis umsetze, gibt es einen großen Grund, warum ich (nicht) sollte?

Quelle

2011-01-14 Ben

(A) würde Stylesheet-Caching bevorzugen und die Größe der HTML-Seiten, die in kommen, reduzieren. Ganz zu schweigen davon, dass es Bedenken bezüglich der Markup-Validität beseitigt. – BoltClock

@Bolt - Könnten Sie Bedenken bezüglich der Gültigkeit von re: markup ausarbeiten? Ich dachte, dass Echo-minimiertes CSS schon gültig wäre? – Ben

Eigentlich kratze das, ich bin mir nicht sicher, ob es die Validierung bricht. – BoltClock

Option A gibt Ihnen eine zusätzliche HTTP-Anfrage, aber der Browser behält die CSS-Datei in einem Cache, so dass es keine große Sache ist.

Auf der anderen Seite, auch wenn Option B speichert Sie eine HTTP-Anfrage, wird Ihre HTML-Seite erheblich größer und der Browser wird nicht in der Lage, Ihre HTML-Seite zwischenspeichern, wenn es häufig Änderungen daran ist. Ihr Server muss also mehr Daten übertragen.

Für Seiten, auf denen der Inhalt sehr selten geändert, B. Verwendung Option wird Andernfalls verwenden Sie die Option A.

Quelle

2011-01-14 02:55:34

Option B wird Ihnen eine sehr große anfängliche Nutzlast geben, die meiner Meinung nach schlecht ist! Es ist auch schwierig, die Seite zu cachen, wenn Sie die Methode B verwenden. – Alfred

Das sage ich in meiner Antwort, nein? –

Und obendrein, wenn ein Nicht-Programmierer Änderungen in der CSS vornehmen müsste, ist die Option B ein No-Go, da die meisten von ihnen Angst haben, eine .php-Seite zu öffnen. Wenn Sie mehr Flexibilität (wie Variablen) wollen, können Sie lessCSS denken –

Wenn Sie planen, eine wirklich stark frequentierte Website, dann gehen Sie für B (wie unten kommentiert, ist es keine gute Idee, wenn Ihr HTML fast nie ändern, wie Google Titelseite). Ich persönlich mag A, weil es Ihnen erlaubt, den Stil von Ihrem HTML wegzuhalten, und Ihnen erlaubt, spezifische Stylesheets für verschiedene Medien zu verwenden oder sogar einfach von einem zum anderen zu wechseln. Auch ist es leicht zu pflegen (mit Versionen) und zu erweitern.

Wenn Sie sich Sorgen um die Anfragen machen, dann arbeiten Sie in Ihren Bildern. Sie können alle Ihre Bilder als base64 in Ihrem CSS hinzufügen und viele Anfragen damit verhindern oder die Bildschwenktechnik für mehrere Symbole verwenden.

Sie können auch Ihre CSS offline reduzieren und alle Ihre CSS-Stylesheets in eine Datei unter Verwendung eines Skripts oder einer serverseitigen Codierung einfügen.

meine 5cents.

Quelle

2011-01-14 02:55:14 lepe

@lepe - Wow liebe diese Bildidee - hast du einen empfohlenen Link zum Weiterlesen? – Ben

Wenn man eine große Website hat, dann ist das B eine sehr schlechte Idee, weil man die Seite nicht mehr richtig zwischenspeichern kann. – Alfred

Ich stimme Alfred zu. –

Es ist am besten mit der Option (A) für das Caching gehen, aber keine Angst, können Sie sich die Vorteile von Option B! Benennen Sie einfach Ihre CSS-Datei mit einer PHP-Erweiterung und fügen Sie sie dann mit dem Link-Tag ein. PHP wird dann diese Datei analysieren, bevor sie an den Browser gesendet wird, so dass Sie Kommentare entfernen/minimieren oder eine CSS-Datei einfügen können, die sich irgendwo auf Ihrem Server befindet. Wie für Ihren dritten Punkt, wenn der Browser es zwischenspeichert, dann sind es 2 Anfragen beim ersten Mal, aber dann nur 1 Anfrage beim zweiten Mal, also erhalten Sie insgesamt weniger Anfragen.

Quelle

2011-01-14 02:55:49

Sie werden auf lange Sicht viel besser dran sein, wenn Sie ein externes Stylesheet über ein Tag im Kopf des Dokuments laden. Dadurch kann der Browser das Stylesheet nach dem Laden zwischenspeichern, und Sie müssen es nicht bei jeder Seitenanforderung herunterladen.

Wenn Sie Bedenken haben, das Stylesheet zu verkleinern, können Sie das mit einer Reihe von Tools tun - siehe Any recommendations for a CSS minifier? für viele Empfehlungen.

Quelle

2011-01-14 03:00:05 JustJohn

Kurze Antwort ist, dass Sie Methode B nicht verwenden sollten.Sie können unten lesen, warum ich denke, dass Sie es nicht so machen sollten.

Sie sollten die Dateigröße der Haupt-HTML-Datei so klein wie möglich halten, da Sie diese Datei nicht zwischenspeichern können (meistens wegen der dynamischen Natur davon).

Sie sollten keine vorzeitige Optimierung durchführen, wenn Sie lokal testen. Aber wenn Sie Ihren Code bereitstellen, sollten Sie CSS reduzieren und alle Dateien in einer einzigen Datei zusammenführen. Vergessen Sie auch nicht, der CSS-Datei einen Header zu geben, der in der Zukunft abläuft (Caching ist sehr wichtig).

Yahoo! S gibt Ihnen auch eine Menge Informationen (viele meiner Antwort basiert auf dieser Lesung), wie Sie Ihre Website beschleunigen und ist eine sehr gute Lektüre.

Quelle

2011-01-14 03:02:57 Alfred

+1 "kann diese Datei nicht zwischenspeichern" - guter Punkt, jetzt verstehe ich, was @ Marc-Franc sagt. – Ben

Die richtige Antwort hängt vom Zweck der Seite und davon ab, wie das Styling strukturiert ist.

Auf der Seite, an der ich arbeite, haben wir ein paar Schlüsselseiten, bei denen die Seitengeschwindigkeit ein Schlüsselfaktor ist (die Landing-Page, auf der Leute unsere Software herunterladen können), aber wir wollen auch CSS für Besucher einbetten, die mehr sehen als eine Seite oder vielleicht in naher Zukunft zurückkommen.

Sie haben auch selten nur eine CSS-Datei, könnte eine gemeinsame Einrichtung sein: eine CSS-Reset-Datei eine template.css Datei mit dem Styling der von allen Seiten geteilt Website eine pro Seite CSS-Datei bestimmte Regeln definieren für die Seite, die keine Zwischenspeicherung benötigen eine IEfix CSS-Datei für Internet Explorer-Kompatibilität

die CSS-reset, template.css und IRfix-Dateien sind gute Kandidaten für die Verkleinerung als einzelne externe Datei, die zwischengespeichert werden. Die css-Datei pro Seite ist ein guter Kandidat für die Aufnahme in ein Tag, da sie nicht wiederverwendet werden soll und die Kosten einer http-Anfrage normalerweise höher sind als die Zeitkosten der übertragenen Bytes.

Wenn Sie Seiten mit einem bestimmten Stil haben, die nicht auf der gesamten Site freigegeben sind, können Sie alles inline einfügen.

Quelle

2011-01-14 03:27:00 Pascalc

PHP CSS - schneller/gute Praxis, externe Datei oder Echo in den Kopf zu laden?

Antwort

Verwandte Themen