Memahami CSS WordPress
Sebelum kita menyelami, mari kita fahami cara CSS biasa berfungsi dalam WordPress.
Setiap tema WordPress terdiri daripada style.css yang mengandungi semua kod yang diperlukan untuk menggayakan tapak anda. Pembangun tema harus menyokong semua ciri WordPress yang termasuk catatan blog, ulasan, halaman produk, halaman keahlian, borang, dll. Pemalam lain yang anda pasang juga boleh menambah helaian gaya css yang serupa.
Ini boleh membuat fail css kembung dan bersaiz besar 200kb atau lebih.
Apakah itu CSS Laluan Kritikal?
Apabila fail CSS anda berkembang, penyemak imbas anda perlu memuat turun fail besar tersebut, menghuraikannya dan memaparkannya. Juga dikenali sebagai menyekat render. Ia juga akan menambah render bermakna pertama dan render bermakna pertama.
CSS Laluan Kritikal ialah CSS yang diperlukan untuk memaparkan kandungan di atas pada setiap halaman web. Seperti namanya, CSS "kritikal", yang membantu penyemak imbas melukis dan memaparkannya dengan cepat sebelum memuatkan fail CSS penuh.
Biasanya css laluan kritikal dibenamkan dalam pengepala dan fail css sumber dimuatkan secara tidak segerak atau dalam pengaki untuk kemudahan penggunaan.
Mengapa CSS Laluan Kritikal sangat penting?
Anda mesti telah melihat amaran daripada alatan seperti Google PageSpeed Insights atau GTmetrix yang mengatakan "optimumkan penghantaran css" atau "menunggu css yang tidak digunakan".
CSS kritikal tiada kaitan dengan masa muat halaman. Ia tidak menambah/mengurangkan masa memuatkan. Tetapi memberikan pengalaman pengguna yang lebih baik. Ia membantu untuk "membuat" atau "mewarna" halaman web dengan cepat.
- Memperbaik Cabutan Kandungan Pertama (FCP)
- Memperbaik Bayaran Penting Pertama (FMP)
- Alih keluar CSS yang tidak digunakan (secara teknikalnya jangan keluarkannya, tetapi utamakan CSS "berguna")
Berikut ialah dua tangkapan skrin blog saya dengan dan tanpa CSS kritikal.
Seperti yang anda boleh lihat dalam bahagian "tiada laluan css kritikal", ia mengambil masa hampir 5 saat untuk menunjukkan kepada pengguna sesuatu yang berguna pada peranti mudah alih. Penyemak imbas perlu membuat permintaan HTTP tambahan kepada fail css, memuat turunnya, menghuraikannya untuk memulakan rendering. Tetapi apabila menggunakan css kritikal, semua css yang diperlukan mestilah sebaris dan penyemak imbas boleh mula membuat persembahan serta-merta selepas memuatkan fail HTML dalam satu saat atau kurang.
Bagaimana untuk membuat CSS kritikal dalam WordPress?
Terdapat beberapa cara untuk menjana CSS kritikal dalam WordPress.
Menggunakan pemalam caching
WP Rocket ialah pemalam caching premium yang berfungsi dengan baik.
Salah satu sebab saya menggunakan WP Rocket di setiap tapak adalah penjanaan CSS yang kritikal itu sendiri. Mereka menjana CSS Kritikal secara berasingan untuk halaman utama, halaman siaran, halaman kategori, halaman produk, dll. dan membenamkannya. Mereka akan memulihkan CSS kritikal jika terdapat perubahan pada tema atau tetapan.
Segala-galanya boleh dilakukan dengan satu sentuhan butang.
Pemalam caching lain yang boleh menjana CSS kritikal
Prestasi Swift dan LiteSpeed (memerlukan pelayan LiteSpeed/OpenLiteSpeed ) ialah pemalam yang serupa yang boleh menjana CSS Kritikal. Kedua-dua pemalam ini mempunyai awan dan cache penuh terbina dalam pelayan mereka.
Menggunakan Autoptimum + Penjana CSS Kritikal Percuma
Terdapat alat dalam talian pihak ketiga yang menyediakan css penting dengan memasukkan URL tapak anda. pegasaas ialah alat percuma yang hebat.
Begini cara melakukannya:
Langkah 1. Pergi ke https://pegasaas.com/critical-path-css-generator/ dan masukkan URL anda. Salin "CSS Laluan Kritikal" yang dihasilkan.
Langkah 2 Dalam tetapan autooptimumkan (dayakan tetapan lanjutan), di bawah "Pilihan CSS", tandai "Sebaris dan Tangguh CSS" dan tampal CSS yang disalin.
Kelebihan:
- Percuma
Kekurangan:
- Tiada CSS kritikal yang berasingan untuk jenis halaman yang berbeza (cth: halaman utama, halaman siaran, halaman kategori, halaman produk, dll.)
- Jangan bina semula secara automatik pada perubahan tema/tetapan
Mengapa WordPress sendiri tidak boleh menjana CSS kritikal?
Seperti yang mungkin anda perhatikan, mencipta laluan kritikal css membolehkan perkhidmatan luaran. Jadi mengapa WordPress tidak boleh menjananya sendiri?
Penciptaan CSS Kritikal dimungkinkan oleh projek sumber terbuka seperti Critical (oleh Google), CriticalCSS atau penthouse. Semua projek ini adalah berdasarkan NodeJS, bukan PHP. Jadi, anda perlu memasang NodeJS pada pelayan anda. Kebanyakan penyedia pengehosan kongsi/terurus tidak membenarkan ini atas beberapa sebab.
