Bagaimana Anda menyingkirkan kode CSS yang tidak digunakan? Bagian 1

Penulis artikel, bagian pertama dari terjemahan yang kami terbitkan hari ini, ingin agar pembaca mengetahui sebelumnya bahwa menyingkirkan CSS yang tidak perlu adalah tugas yang sulit. Jika Anda membaca ini dengan harapan menemukan alat, menjalankannya, Anda dapat mengetahui dengan pasti kode CSS mana yang dapat dihapus dengan aman dari proyek Anda, lalu ... Ada alat yang serupa, tetapi mereka harus digunakan dengan sangat hati-hati, karena tidak satupun dari mereka tidak dapat memberikan jawaban yang layak untuk pertanyaan tentang CSS yang tidak digunakan.



Sangat mudah untuk memahami bahwa pengembang web mana pun ingin mengambil semacam utilitas, menjalankannya, dan menghapus CSS yang tidak perlu yang dilaporkannya. Beberapa menit - dan situs dipercepat. Tapi tidak sesederhana itu. Penulis materi ini percaya bahwa alat seperti itu harus diperlakukan dengan skeptisisme yang sehat. Tak satu pun dari mereka berbohong kepada pengembang. Alat-alat ini biasanya tidak memiliki informasi yang cukup untuk memungkinkan mereka menghasilkan hasil yang dapat dipercaya tanpa syarat. Tetapi ini tidak berarti bahwa alat tersebut tidak dapat digunakan. Ini tidak berarti bahwa Anda tidak dapat menyingkirkan CSS yang tidak digunakan dengan cara apa pun. Kami membahas ini.

→ Baca bagian kedua

Mengapa menyingkirkan CSS yang tidak digunakan?

Saya percaya bahwa alasan utama seseorang mungkin perlu menyingkirkan CSS yang tidak digunakan dapat dijelaskan dengan menggunakan contoh berikut. Misalkan Anda menggunakan kerangka kerja CSS (seperti Bootstrap), dan semua kode CSS untuk kerangka itu masuk ke proyek Anda. Namun pada kenyataannya, hanya sebagian kecil dari kode tersebut yang digunakan dalam proyek. Bagaimana menyingkirkan semua yang tidak perlu?

Saya bisa merasakan perasaan seseorang yang berada dalam situasi yang sama. Kerangka kerja CSS seringkali tidak memberi pengembang cara mudah untuk memilih dengan tepat fitur yang berlaku untuk proyek tertentu. Pada saat yang sama, membawa kode sumber kerangka kerja ke kondisi ideal sesuai dengan proyek tertentu mungkin memerlukan tim tingkat pengalaman yang mungkin tidak dimiliki. Situasi serupa itu sendiri dapat menjadi alasan untuk mencari kerangka kerja.

Misalkan Anda mengunduh 100 KB CSS. Saya akan mengatakan itu banyak. (Saat ini ketika saya menulis ini, css-tricks.com menggunakan sekitar 23 Kb CSS. Ada cukup banyak halaman dan templat. Saya tidak melakukan sesuatu yang khusus untuk mengurangi ukuran CSS.) Ada kecurigaan bahwa Anda tidak menggunakan sebagian dari jumlah kode ini. Dan mungkin Anda menemukan beberapa bukti tentang ini. Saya melihat alasan untuk membunyikan alarm. Jika Anda memiliki file jpg 100 Kb yang dapat dikompresi hingga 20 Kb dengan mengolahnya dengan beberapa jenis alat, maka ini sangat bagus dan layak dilakukan. Tetapi jika sesuatu seperti ini dilakukan dengan CSS, maka ini jauh lebih penting. Intinya adalah bahwa CSS memuat di awal pemuatan halaman dan merupakan sumber daya yang memblokir rendering. File JPG bukan sumber daya seperti itu.

Analisis situasi dengan Alat Pengembang Chrome

Jendela Alat Pengembang Chrome memiliki tab Coverage . Dengan bantuannya, Anda dapat mengetahui berapa banyak CSS dan JavaScript yang dimuat sebenarnya digunakan pada halaman yang dianalisis. Sebagai contoh, sekarang saya pergi ke css-tricks.com. Di bawah ini adalah apa yang saya lihat pada tab Coverage .


Alat Pengembang Chrome, Tab Cakupan

Di sini saya melihat bahwa 70,7% dari file style.css saya tidak digunakan. Saya pikir tidak ada yang salah dengan itu. Bagian CSS yang tidak digunakan yang tersisa digunakan pada beberapa halaman situs lainnya. Di situs ini saya tidak menggunakan beberapa perpustakaan gaya besar. Saya sendiri menulis setiap baris CSS, jadi saya ragu bahwa 2/3 dari CSS tidak pada tempatnya secara global.

Saya berasumsi bahwa ketika bekerja dengan tab Coverage , Anda dapat mulai "merekam" dan berkeliaran di sekitar situs, menyaksikan bagaimana persentase sumber daya yang tidak digunakan turun saat halaman yang berbeda ditampilkan di browser. Tetapi, sayangnya, ketika halaman di-refresh, isi dari tab Coverage juga diperbarui. Akibatnya, alat ini tidak terlalu berguna dalam menentukan persentase penggunaan sumber daya di beberapa halaman. Mungkin ini bukan hanya jika Anda menganalisis aplikasi satu halaman.

Sangat tidak menyenangkan bagi saya untuk mengatakan ini, tetapi menganalisis situs menggunakan tab Coverage ternyata hampir tidak ada gunanya. Apa yang saya lihat, 70,7% ini, adalah gambaran mengerikan yang diputar pada keraguan saya, tetapi analisis ini tidak memberi saya apa pun yang konkret, akibatnya saya hanya dapat khawatir tentang sesuatu yang salah di situs saya.

Mungkin analisis situs ini akan menjadi mekanisme yang akan membawa Anda pada gagasan bahwa Anda perlu menemukan dan menghapus kode CSS yang memuat, tetapi tidak digunakan dalam proyek Anda.

Masalah utama saya

Dalam menemukan dan menghapus CSS yang tidak digunakan, hal-hal berikut ini paling mengkhawatirkan saya. Misalkan seseorang melihat hasil analisis dan melihat fragmen CSS yang tidak digunakan.


Cuplikan CSS yang tidak digunakan

Dia berpikir: "Baik, hapus semua yang tidak perlu!". Superfluous dihapus, dan kemudian ternyata sama sekali tidak berlebihan, dan penghapusannya menyebabkan masalah besar dengan penataan gaya di seluruh situs. Begini masalahnya: Anda dapat sepenuhnya yakin bahwa beberapa pemilih CSS tidak digunakan, hanya jika Anda melakukan penelitian pada rencana berikut:

1. Anda perlu memeriksa setiap halaman situs dengan alat seperti tab Coverage .
2. Dalam hal ini, Anda harus menjalankan semua kode JavaScript.
3. Ini harus dilakukan dengan semua opsi yang memungkinkan untuk keadaan aplikasi.
4. Dan, di samping itu, Anda perlu memeriksa semua ini dengan semua opsi yang memungkinkan untuk kueri media yang digunakan.

Jika hanya beranda situs web yang diperiksa, ini tidak diperhitungkan. Mempelajari semua halaman tingkat atas juga tidak dianggap sebagai ujian nyata. Anda perlu memeriksa semua halaman, memeriksa situs dalam situasi yang pengembangnya mungkin tidak segera ingat, periksa semua kasus batas. Jika tidak, semuanya dapat diakhiri dengan penghapusan penataan daftar drop-down kartu kredit di jendela modal pop-up untuk pengguna dengan akun yang dinonaktifkan yang masuk ke sistem selama masa tenggang untuk membayar langganan baru dan pada saat yang sama memiliki kartu hadiah yang valid.

Sesuatu seperti ini terlalu rumit untuk parser CSS otomatis. Mereka tidak dapat melakukan pemeriksaan tersebut dengan sempurna, terutama mengingat analisis situs dalam situasi ketidakpastian. Kita berbicara, misalnya, tentang penelitian proyek dalam konteks browser yang berbeda (ukuran layar berbeda, kemampuan browser berbeda, browser berbeda), dan dengan mempertimbangkan dampak perpustakaan pihak ketiga di situs.

Dan sekarang saya ingin menunjukkan contoh bagaimana semua masalah yang baru saja saya bicarakan terlihat dalam praktek.

PurifyCSS Online

Saya memutuskan untuk mencoba mengoptimalkan css-tricks.com menggunakan sumber daya PurifyCSS Online . Anda dapat mengirimkan tautan ke sana, dan segera menghasilkan CSS yang siap digunakan. Saya “memberi makan” css-tricks.com ke situs ini dan saya memiliki kode CSS baru yang saya inginkan. Inilah yang terjadi setelah saya menggunakan kode ini.


Di sebelah kiri adalah tampilan css-tricks.com yang biasa. Di sebelah kanan adalah hasil menerapkan CSS baru, "disempurnakan". Kode baru ini tidak memiliki banyak hal yang diperlukan untuk berbagai halaman situs

PurifyCSS memungkinkan Anda untuk menganalisis berdasarkan banyak tautan (yang bagus), tetapi di css-tricks.com ada puluhan ribu tautan. Banyak dari mereka mengarah ke halaman yang sama, dalam hal CSS, tetapi pada setiap halaman ini mungkin ada sesuatu yang tidak digunakan di tempat lain. Selain itu, saya merasa PurifyCSS tidak menjalankan JS-code, karena setelah "membersihkan" CSS saya, semua yang ditampilkan pada halaman menggunakan JavaScript ternyata tidak ditata. Bahkan gaya untuk pseudo-class :hover .

Mungkin, saya sudah mengatakan cukup untuk membuat Anda mengerti bahwa bukan karena kebetulan saya begitu sedikit mempercayai alat tersebut.

Memurnikan CSS dengan PurifyCSS sebagai bagian dari proses pembangunan proyek

PurifyCSS mungkin lebih sering digunakan sebagai alat yang digunakan untuk membangun proyek daripada sebagai pembersih CSS online. Dokumentasi proyek berisi instruksi untuk penggunaannya saat menggunakan Grunt, Gulp dan webpack. Misalnya, memproses file berdasarkan templat:

 var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css']; var options = {  //  CSS    .  output: './dist/purified.css' }; purify(content, css, options); 

Pendekatan ini memungkinkan akurasi yang jauh lebih besar. Materi situs yang diserahkan untuk analisis dapat berupa daftar yang menyertakan setiap templat, setiap fragmen yang digunakan untuk membangun halaman, dan setiap file JavaScript. Mungkin ternyata daftar sumber daya seperti itu tidak mudah dipelihara, tetapi memungkinkan Anda untuk mempertimbangkan segala sesuatu yang dapat diperhitungkan. Namun, ini tidak berlaku untuk konten halaman yang terletak di repositori tertentu (seperti posting blog yang disimpan dalam database), dan kode JavaScript pihak ketiga, tetapi mungkin dalam beberapa kasus ini tidak penting, atau mungkin pengembang akan dapat mempertimbangkan kebutuhan CSS dari sumber daya tersebut.

Dokumentasi saingan PurifyCSS PurgeCSS memiliki peringatan mengenai metode penanganan sumber daya yang digunakan oleh PurifyCSS. Yaitu, kita berbicara tentang fakta bahwa PurifyCSS dapat bekerja dengan sumber daya jenis apa pun, dan tidak hanya dengan HTML dan JavaScript. PurifyCSS saat bekerja menganalisis semua kata dalam file dan membandingkannya dengan penyeleksi dalam kode-CSS. Setiap kata dianggap sebagai pemilih. Yaitu - banyak pemilih yang secara keliru dikenali sebagai yang digunakan di situs. Misalnya, dalam konten teks file, dalam kalimat reguler, mungkin ada kata yang sesuai dengan pemilih CSS tertentu.

PurifyCSS patut diingat tentang hal ini. Alat ini mencari penyeleksi CSS dalam materi situs menggunakan algoritma yang sangat sederhana. Ini, di satu sisi, adalah ide yang masuk akal, dan di sisi lain, itu sangat berbahaya.

Layanan UnusedCSS

Penyetelan manual alat, dilakukan sehingga alat ini akan menganalisis setiap halaman, sehingga ia memeriksanya dari semua sudut pandang yang memungkinkan, tentu saja, merupakan rutinitas yang membosankan. Selain itu, pekerjaan seperti itu harus dilakukan setiap hari, karena informasi yang dianalisis tentang situs harus diperbarui dengan data baru ketika proyek berkembang. Ada satu layanan online yang disebut UnusedCSS . Dia secara independen memotong halaman situs, menyelamatkan pengembang dari banyak pekerjaan yang monoton. Layanan ini cukup untuk mentransfer satu tautan ke situs.

Saya mendaftar untuk berlangganan berbayar ke layanan ini dan menganalisis css-tricks.com dengannya. Saya harus mengakui bahwa setelah saya melihat hasilnya, saya merasa bahwa mereka terlihat jauh lebih akurat daripada apa yang saya lihat sebelumnya.


Analisis css-tricks.com menggunakan UnusedCSS. Laporan itu mengatakan bahwa situs tersebut menggunakan 93% dari kode CSS yang dimuat. Sepertinya dekat dengan kebenaran bagi saya, karena saya secara manual menulis semua kode CSS untuk situs ini

Layanan ini, di samping itu, memungkinkan Anda untuk mengunduh file dengan kode CSS yang jelas dan menawarkan kemampuan untuk mengelola konten file ini. Misalnya, ini mengaktifkan dan menonaktifkan pemilih yang ingin atau tidak ingin ditambahkan oleh pengembang ke kode CSS. Misalkan pengembang melihat nama kelas, yang, menurut UnusedCSS, tidak diperlukan di situs, tetapi pengembang tahu pasti bahwa ia tidak dapat melakukannya tanpa nama kelas ini. Akibatnya, kode yang secara keliru dikenali sebagai tidak perlu dapat ditandai sebagai perlu. Fitur lain dari UnusedCSS termasuk bekerja dengan awalan dan menghapus pemilih ganda.

Saya sangat menyukai kenyataan bahwa UnusedCSS memberi saya hasil yang jauh lebih akurat daripada alat lain. Namun, ada terlalu banyak "noise" dalam data yang dihasilkan oleh layanan ini, dan saya juga belum tahu bagaimana cara memasukkan UnusedCSS dalam proses pembangunan proyek yang berulang-ulang dan menempatkan versi-versi barunya ke dalam produksi.

→ Baca bagian kedua

Pembaca yang budiman! Pernahkah Anda menemui masalah memiliki kode CSS yang tidak digunakan dalam proyek Anda?