CSS-Reduzierung für schnelleres Laden / weniger Bandbreite

Lohnt es sich, CSS zu komprimieren / nicht verwendete Regeln für eine bestimmte Seite in Bezug auf die Bandbreite zu entfernen, oder können wir uns auf das Caching (Header / zuletzt geändert) verlassen, um diesen Overhead in freier Wildbahn zu entfernen?

Prost

Auch viel Glück mit der Beta allerseits!

Durch Verringern der Dateigröße wird sicherlich die Bandbreite verringert und die Ladezeit der Seite verkürzt. Wenn ein Benutzer Ihre Website zum ersten Mal besucht, wird nichts zwischengespeichert, und bei den meisten Websites machen Erstbesucher den größten Teil des Datenverkehrs aus.

Stellen Sie außerdem sicher, dass die GZIP-Komprimierung aktiviert ist. Dies führt zu einer drastischen Reduzierung der Bandbreite.

Ich denke nicht, dass es ein entweder oder ist. Das Reduzieren der Dateigröße hilft dem Benutzer beim ersten Zugriff auf die Datei. Caching hilft bei ihrem zweiten Besuch.

Es gibt viel mehr potenzielle Optimierungsstellen, die größere Auswirkungen haben werden ...

Wenn Sie ausschließlich nach einem Leistungsgewinn suchen, ist die Optimierung der CSS-Quelle in der Nahrungskette ziemlich gering.

Überschüssiges Cruft in der CSS-Quelle wird beim ersten Laden der Stylesheets geringfügig beeinträchtigt. Das Caching sollte sich von nun an um das Problem kümmern.

Jedes Mal, wenn Sie Dinge entfernen können, verbessern Sie die Ladegeschwindigkeit, wenn auch nur vernachlässigbar. Es ist auch empfehlenswert, Dinge zu entfernen, die Sie aus Gründen der Codeklarheit nicht verwenden.

Ich würde vermuten, dass es von der Dynamik Ihrer Website abhängt. Wenn Sie viele wiederkehrende Besucher und nicht viele neue Besucher haben, reicht das Caching wahrscheinlich aus. Wenn Sie jedoch viele neue Besucher haben (und insbesondere, wenn Sie einen guten ersten Eindruck hinterlassen möchten), sollten Sie die Größe Ihres CSS so weit wie möglich reduzieren.

Das Entfernen von nicht verwendetem CSS verbessert natürlich die Ladezeiten auf einer Seite, aber Sie müssen dies auch mit dem Effekt über mehrere Seiten ausgleichen. Sie möchten auch zu viele HTTP-Anforderungen vermeiden.

Denken Sie daran, dass das Komprimieren von CSS bei weitem der effektivste Weg ist, um das Laden von CSS zu beschleunigen. Der Unterschied zwischen einer Datei mit allem in und einer anderen mit ein paar unnötigen Blöcken ist nach gzip vernachlässigbar.

Selbst wenn die Leistung durch das Entfernen von nicht verwendetem CSS pro Seite verringert wird (und ich bin ziemlich davon überzeugt, dass das Caching dies überwiegen würde, wenn Sie nicht über radikal andere Seiten sprechen), müssen Sie die dafür erforderliche Wartungszeit berücksichtigen . Wenn Sie nicht Google sind, lohnt es sich wahrscheinlich nicht, mehrere Tage über die gesamte Lebensdauer der Website zu verbringen, um jedem Nutzer eine Zehntelsekunde zu ersparen.

Vieles davon hat mit dem Nutzungsprofil Ihrer Website zu tun. Wenn Sie wirklich klebrig sind, gewinnt das Caching zweifellos. Wenn Sie jedoch eine hohe Absprungrate haben, sind Sie mit optimiertem CSS möglicherweise besser dran (oder Sie verbringen die Zeit, die Sie mit der CSS-Optimierung verschwenden, um Ihre Website klebriger zu machen!).

Ein Ansatz, den Sie bei einem seitenspezifischen Markup wählen können, besteht darin, eine generische, standortweite CSS-Datei zu erstellen und Regeln pro Seite in den Kopf des HTML-Dokuments einzubetten.

Sie können das Beste aus beiden Welten herausholen, die Datei zur Ausführungszeit minimieren und die Ausgabe gzipen.
Die Quelldatei ist weiterhin lesbar, wenn Sie sie bearbeiten müssen, sie wird jedoch beim Herunterladen komprimiert

Erstens: Verwenden Sie htaccess, um Apache anzuweisen, alle CSS-Dateien als PHP-Skripte zu behandeln und die Ausgabe vom Typ text / css zu komprimieren

in .htaccess AddHandler php5-cgi .css AddType text / css .css AddOutputFilterByType DEFLATE text / css

Zweitens: Verwenden Sie die Ausgabepufferung mit einer Rückruffunktion, um den CSS-Code zu minimieren, bevor der Download beginnt. Stellen Sie außerdem die Ablaufzeit so ein, dass die Datei zwischengespeichert wird

in Ihrer CSS-Datei

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
    $str = str_replace(array("\n", "\r", "\t", "\o", "\xOB"), '', $str); // remueve enter tabs y demas
    $str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $str); // remueve comentarioa
    $str = ereg_replace("[ ]+", " ", $str);                         //remueve espacios multiples
    $rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
    $str = strtr($str, $rep);
    return $str;
}
?>
css content here

Drittens: Gewinn?