CSS-Reduzierung für schnelleres Laden / weniger Bandbreite

9

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!

Aiden Bell
quelle

Antworten:

8

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.

Matthew Shanley
quelle
1
Wenn Sie die Dateigröße auf einer Seite reduzieren, indem Sie sie in eindeutiges oder eingebettetes CSS auf anderen Seiten auslagern, haben Sie die Vorteile des Caching nur negiert. Nehmen Sie am besten einen Treffer vor, um Ihren Benutzern auf den Seiten 2 bis X ein großartiges Erlebnis zu bieten. Machen Sie Ihr CSS also so sauber wie möglich. Kombinieren Sie Vielfache zu einem. Machen Sie jedoch keinen redundanten, eindeutigen Code, um einen einmaligen Treffer (geringfügig) zu verringern.
bpeterson76
2

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.

Jessegavin
quelle
1

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.

Jason
quelle
Zum Beispiel eine wichtige Datei theme.css, in der jede Seite nur etwa 30% der Regeln verwendet ... aber die Mischung würde das Aufteilen des Fixes zu einem Albtraum machen.
Aiden Bell
0

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.

Travis Northcutt
quelle
0

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.

DisgruntledGoat
quelle
0

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.

JasonBirch
quelle
0

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?

Der Desintegrator
quelle