Bagaimana cara mengatasi masalah CSS yang tidak digunakan

10

Saya menjalankan beberapa tes cepat di blog, dan saya selalu mendapat keluhan tentang CSS yang tidak digunakan. Tapi ini bukan CSS yang tidak pernah saya gunakan, hanya saja tidak digunakan pada halaman tersebut.

Sekarang saya bekerja dengan cara terstruktur, tetapi masih harus ada beberapa CSS di file yang tidak akan digunakan, karena Anda membutuhkannya di halaman lain.

Saya tidak berpikir bahwa menggunakan file CSS yang berbeda pada halaman yang berbeda adalah cara untuk pergi, saya pikir Anda jauh lebih baik hanya membuat satu file besar yang bisa di-cache.

Sekarang apakah ada cara yang elegan untuk menangani ini, atau apakah Anda hanya bertahan dengan itu.

Saif Bechan
sumber

Jawaban:

7

Pernyataan Anda bahwa Anda lebih baik dengan satu, file CSS yang lebih besar benar. Kemungkinan akan hanya beberapa KB saat di-zip, dan harus di-cache, jadi bukan overhead yang besar. Ada beberapa hal yang perlu diperiksa.

Jika beberapa CSS hanya pernah digunakan pada satu halaman, mungkin lebih baik jika menempatkan CSS pada halaman, dalam beberapa tag gaya. (Catatan: ini dapat membuat hal-hal sulit dipertahankan, terutama ketika Anda kemudian memutuskan untuk menggunakan gaya yang sama di tempat lain.)

Jika Anda mengambil halaman paling populer (misalnya, halaman yang merupakan 50% + dari tampilan halaman Anda) dan menemukan bahwa hanya sebagian kecil dari CSS Anda yang digunakan pada halaman tersebut, mungkin lebih cepat bagi pengguna untuk membaginya menjadi dua file CSS. Sekarang, pengguna baru yang mengunjungi halaman terpopuler Anda memiliki lebih sedikit untuk diunduh. Di halaman lain ada satu permintaan HTTP tambahan tapi itu bukan masalah besar.

Pastikan CSS Anda dioptimalkan dengan baik. Hindari penyeleksi keturunan jika memungkinkan. Jika sisi kanan pemilih terlalu umum maka dapat memperlambat waktu render. Misalnya .class div {}akan sedikit lambat karena browser harus memeriksa setiap <div>elemen pada halaman, lalu mencari pohon DOM ke bagian paling atas untuk menemukan (atau tidak) elemen dengan kelas.

DisgruntledGoat
sumber
2
Untuk mengoptimalkan saya sarankan menggunakan sesuatu seperti csslint.net
Toby
5

Saya pikir ini adalah kelemahan dari alat speedtest yang Anda gunakan, bahwa itu tidak melihat seluruh situs dan melihat CSS mana yang tidak pernah digunakan sama sekali. Jika Anda dapat menemukan alat yang berfungsi, beri tahu kami!

Saya pikir Anda jauh lebih baik hanya dengan membuat satu file besar yang bisa di-cache.

Ya, itu masuk akal, kecuali ada satu set halaman yang membutuhkan sedikit tambahan CSS dalam hal ini Anda dapat memasukkannya pada mereka.

paulmorriss
sumber
Alat yang saya gunakan adalah gtmetrix.com . Ini adalah tes online yang melakukan Yslow dan Page Speed. Saya tidak tahu apakah mereka menguji situs lengkap. Yslow tidak mengeluh tentang CSS yang tidak digunakan, itu adalah Page Speed ​​yang melakukan komplain. Mengeluh tentang H3 tidak digunakan misalnya, saya tidak menggunakan ini di halaman depan, tetapi saya lakukan di halaman lain. + Hal lain adalah bagian untuk mencetak di CSS saya, yang tidak digunakan di situs web normal mana pun, apakah Anda punya rekomendasi untuk itu.
Saif Bechan
CSS untuk pencetakan dapat digunakan oleh halaman mana saja, jadi Anda perlu berjaga-jaga.
paulmorriss
@SaifBechan jika Anda memiliki gaya cetak di css terpisah, Anda dapat menargetkan seluruh file di media="print"- beberapa browser tidak akan mengeluarkan permintaan untuk itu sampai Anda benar-benar mencoba untuk mencetak / mempratinjau halaman.
Zhaph - Ben Duguid
1

Ada plug-in Firefox kecil yang berguna yang disebut Dust-Me Selectors , yang memeriksa melalui CSS Anda dan melaporkan aturan yang tidak digunakan. Namun, itu tidak bekerja dengan versi terbaru dari Firefox (v8.0), yang agak memalukan.

PS: Kalau saya jadi Anda, saya akan mengambil CSS Lint dengan sejumput garam - ada aliran pemikiran yang mengatakan bahwa "rekomendasinya" sangat bagus, dan benar-benar berlebihan. (Untuk lebih jelasnya, lihat artikel persuasif Matt Wilcox, " CSS Lint berbahaya " ). Paling-paling, ini benar-benar tidak resmi ... dan, mari kita hadapi itu, apakah kita benar - benar membutuhkan alat lain / pseudo-standar untuk memuaskan?

Jordan Clark
sumber
+1 Terima kasih, saya akan membahas ini. Saya telah memeriksa CSS Lint juga, dan apa yang Anda katakan mungkin benar. Banyak rekomendasinya yang lengkap.
Saif Bechan
1

Cara paling optimal dan terukur yang bisa saya bayangkan untuk menangani ini terdiri dari:

  1. Membuat file CSS utama untuk segala sesuatu yang berhubungan dengan "ruang lingkup global" (seperti desain situs, kelas global, perpustakaan, plugin, dll ...).

  2. Membuat sistem yang melibatkan folder yang berisi satu file CSS unik per halaman (hanya jika diperlukan). File-file ini dapat memiliki nama file yang sama dengan halaman yang ditautkan sehingga Anda dapat menjalankan skrip sisi server pada setiap halaman yang mencari file CSS di folder itu dan menambahkannya halaman jika ada.

  3. Mungkin, membuat file CSS berbeda untuk hal-hal spesifik peramban yang Anda muat hanya ketika pengunjung memiliki peramban relatif.

Dengan melakukan itu, Anda akan berakhir dengan cara yang solid dan dioptimalkan untuk memisahkan CSS Anda. Yap masih akan ada aturan yang tidak digunakan dalam file utama tetapi mereka akan berada di tempat yang seharusnya dalam sudut pandang logis.

Juga perlu diingat bahwa 3 "lapisan" file CSS itu akan di-cache seperti halnya file CSS tunggal.

WiMantis
sumber