Pengurangan CSS untuk pemuatan yang lebih cepat / lebih sedikit bandwidth

Apakah memadatkan CSS / Menghapus aturan yang tidak digunakan untuk halaman tertentu bermanfaat dalam hal bandwidth atau dapatkah kita mengandalkan caching (header / modifikasi terakhir) untuk menghapus overhead ini di hutan?

Bersulang

Juga, semoga sukses dengan beta semuanya!

Mengurangi ukuran file tentu akan mengurangi bandwidth dan mempersingkat waktu pemuatan halaman. Pertama kali pengguna mengklik situs Anda, mereka tidak akan menembolok apa pun, dan bagi sebagian besar situs, pengunjung pertama kali adalah sebagian besar lalu lintas.

Selain itu, pastikan Anda mengaktifkan kompresi gzip. Ini akan melakukan jumlah yang drastis untuk mengurangi bandwidth.

Saya tidak berpikir itu salah satu atau. Mengurangi ukuran file akan membantu pengguna saat pertama kali mengakses file. Caching akan membantu pada kunjungan kedua mereka.

Ada lebih banyak tempat potensial untuk pengoptimalan yang akan memiliki dampak lebih besar ...

Jika Anda benar-benar mencari kenaikan kinerja, pengoptimalan sumber CSS cukup rendah di rantai makanan.

Kelebihan cruft di sumber CSS akan mengambil hit kecil saat pertama kali stylesheet dimuat. Caching harus menangani masalah sejak saat itu.

Setiap kali Anda dapat menghapus barang, Anda akan meningkatkan kecepatan pemuatan, jika hanya diabaikan. Selain itu, praktik yang baik untuk menghapus hal-hal yang tidak Anda gunakan juga untuk kejelasan kode.

Saya menduga itu tergantung pada dinamika situs Anda. Jika Anda memiliki banyak pengunjung berulang dan tidak banyak pengunjung baru, caching mungkin cukup. Namun, jika Anda memiliki banyak pengunjung baru (dan terutama jika Anda ingin membuat kesan pertama yang baik), saya pikir Anda harus mengurangi ukuran CSS Anda sebanyak mungkin.

Menghapus beberapa CSS yang tidak digunakan jelas akan meningkatkan waktu pemuatan pada satu halaman, tetapi Anda juga harus menyeimbangkannya dengan efek pada beberapa halaman. Anda juga ingin menghindari terlalu banyak permintaan HTTP.

Ingat, gzipping CSS sejauh ini merupakan cara paling efektif untuk mempercepat pemuatan CSS. Perbedaan antara satu file dengan semua yang ada di dalam dan lainnya dengan beberapa blok yang tidak perlu dihapus dapat diabaikan setelah gzip.

Bahkan jika kinerja dikurangi dengan menghapus CSS yang tidak digunakan pada basis per halaman (dan saya cukup yakin bahwa caching akan melebihi ini kecuali Anda berbicara tentang halaman yang sangat berbeda), Anda perlu memperhitungkan waktu pemeliharaan yang diperlukan untuk melakukannya . Kecuali jika Anda Google, mungkin tidak layak menghabiskan beberapa hari selama umur situs untuk menyelamatkan setiap pengguna sepersepuluh detik.

Banyak dari ini berkaitan dengan profil penggunaan situs Anda. Jika Anda benar-benar lengket, maka caching menang dengan mudah. Namun, jika Anda memiliki rasio pentalan yang tinggi, Anda mungkin lebih baik dengan CSS yang dioptimalkan (atau menghabiskan waktu yang Anda buang untuk optimasi CSS membuat situs Anda lebih lengket!).

Salah satu pendekatan yang bisa Anda ambil jika Anda memiliki markup khusus-halaman adalah memiliki file CSS lebar-situs generik, dan menanamkan aturan per halaman di kepala dokumen HTML.

Anda bisa mendapatkan yang terbaik dari kedua dunia, mengecilkan file pada waktu eksekusi dan gzip output.
File sumber masih dapat dibaca saat Anda perlu mengeditnya, tetapi dikompres ketika Anda mengunduhnya

pertama: gunakan htaccess untuk memberitahu apache untuk memperlakukan semua file css sebagai skrip php dan untuk mengompresi output ketika mengetikkan teks / css

dalam .htaccess AddHandler php5-cgi .css AddType teks / css .css AddOutputFilterByType DEFLATE teks / css

kedua: gunakan buffering output dengan fungsi callback untuk memperkecil kode css sebelum pengunduhan dimulai, juga mengatur waktu kedaluwarsa sehingga file di-cache

dalam file css Anda

<?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

Ketiga: untung?