Cara Mengeliminasi CSS Pemblokir Render

Apa maksud render blocking css?

• Render Memblokir CSS: penundaan halaman web dari yang terlihat dalam manner.
• Setiap ketepatan waktu salah satu file css Anda menunda halaman Anda dari rendering.css besar Anda, semakin lama halaman yang diperlukan untuk load.
• file css yang Anda miliki, semakin lama halaman diperlukan untuk memuat.       

Mengapa render blokir cas itu buruk?  

Render css yang memblokir membuat website menjadi lambat.

Tidak peduli bagaimana cara menghasilkan uang dari website ?, Maka lebih cepat berarti lebih banyak uang.

•Adsense didukung situs yang membuat lebih banyak uang, 

•jika iklan yang terlihat   lebih cepat dan lebih lama.

•commerce membuat lebih banyak uang dengan kurang mencart akan ditinggalkan dan memberikan pengalaman pengguna yang lebih baik dan kurang frustasi

Cara menghilangkan Css membuat blokir?

1. Benar panggilan file css Anda Lessen jumlah file css di path
2. gunakan keseluruhan css kurangi kritis                                                             Artikel ini akan benar-benar secara mendalam ke masing-masing pilihan ini dan termasuk metode untuk melakukan hal ini sendiri, tips berguna untuk menginstruksikan desainer atau webmaster untuk melakukannya untuk Anda, dan menggambarkan masalah yang cukup di mana Anda memahami setiap solusi.                                               Kami akan mulai dengan bagian yang termudah dari solusi ... Benar memanggil file css Anda seperti yang direkomendasikan oleh Google.  

1. Bagaimana memanggil CSS dengan benar 

CSS bisa dipanggil dengan berbagai cara dari halaman web Anda, dan beberapa cara yang keluar datar salah dapat dilakukan di dunia modern kita, cepat dan mobile. Berikut adalah dua hal yang harus dicari dalam cara memanggil css Anda.

• Hindari penggunaan @import untuk call file css
• label CSS benar-benar memnuhi syarat.

Menggunakan @import dan benar berlabel css yang akan membuat masalah pemblokiran, dan mereka masing-masing dengan mudah dipecahkan, mari kita lihat mereka lebih dekat lagi.

Hindari menggunakan @import untuk call css

Masalah: Metode pada call css ini buruk karena itu menmbah waktu dalam memuat file-file css sebelum halaman termuat dengan baik.

Solusinya: Cari @ import calls dan ganti.

Deteksi: Gunakan pagespeed tool. 

Di kolom sebelah kiri salah satu item adalah "Hindari @ CSS impor". Jika Anda memiliki tanda centang hijau, tidak ada @imports ditemukan. Jika ditemukan, akan ada merah "x".

Rincian: impor CSS terlihat seperti ini dan biasanya akan terjadi dekat bagian atas file. 

@import url("style.css")

Daripada call file css menggunakan @import, metode yang lebih baik hanya menjaga css dengan tambahan dalam satu file (copy dan paste css dan diimpor ke dalam file css asli). Jika Anda tidak dapat melakukan itu untuk beberapa alasan, termasuk file-file css dari file html gunakan kode berikut ...

href="style.css">

Yakinkan untuk benar menempatkan  "style.css" di lokasinya dan nama filenya

Label CSS benar Bersyarat 

Masalah: Ketika csshen css dengan benar melabelnya(valid), browser default untuk memuat semua css sebelum render halaman web.

Solusi: File-file CSS call yang benar sehingga browser mengetahui bahwa tidak semua css bersyarat untuk mulai me-render. 

Deteksi: Uji html dan lihat bagaimana css yang berlabel itu ( penjelasan dibawah) 

Rincian:  Sebuah file css bertipe called cirinya seperti dibawah ini: 

<link href="style.css" rel="stylesheet">

Pada kode di atas, itu hanya mengatakan "di sini adalah link" dan "link tersebut untuk css saya".

Setiap css dipanggil dengan cara di atas akan selalu dimuat oleh browser sebelum render apa-apa pada halaman Web Anda.

Sekarang mari kita lihat contoh file css yang tidak harus dimuat sebelum menampilkan halaman, yaitu petunjuk css untuk print ...

<link href="print.css" rel="stylesheet" media="print">

Kode di atas mengatakan "di sini adalah link", "link adalah untuk css saya" dan juga mengatakan "css hanya untuk pencetakan".

Sejak css yang dicap sebagai media = "print", browser modern tahu bahwa file css tidak diperlukan untuk membuat halaman. Akibatnya, browser akan menempatkan prioritas yang lebih rendah ke file css. Ini masih akan men-download itu, tetapi akan melakukannya dengan cara yang tidak memblokir rendering. 

Mari kita lihat situasi kondisional lain, di sini kita memiliki file css yang digunakan saat halaman adalah lebar tertentu:

<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

Browser modern dapat memahami bahwa css ini digunakan dalam beberapa situasi dan tidak digunakan pada orang lain, sehingga browser dapat memilih untuk tidak memuat file css ini sebelum render jika tidak diperlukan.browsers .

2. Menggunakan sedikit file CSS di jalur kritis

Jalur render kritis adalah cara lain untuk mengatakan "hal-hal browser harus dilakukan sebelum menampilkan halaman web Anda".

Jika Anda telah diberi label css Anda seperti yang kita bahas di atas, Anda sudah mulai menghapus file css dari jalur kritis. Ada namun lebih banyak yang bisa kita lakukan.

Hanya untuk memperjelas, kita berbicara tentang file css di sini seperti dalam "main.css" dan "page.css", dll kami secara khusus berbicara tentang file sebenarnya dalam css, daripada kode css ditemukan di dalam file mereka.

Setiap file fisik Anda dapat menghapus akan membuka halaman Anda lebih cepat.

Pada dasarnya ada dua cara untuk menggunakan file css berkurang. 

• Menggabungkan CSS
• Inline CSS

Menggabungkan file css 

Masalah: 

Setiap file css halaman Anda menggunakan waktu tambahan untuk memuat halaman web Anda dengan meminta file tambahan untuk dipanggil.

Solusi: Menggabungkan file CSS ke dalam satu file (atau dua tergantung pada seberapa besar css Anda sebenarnya).

Rincian: 

Sebuah halaman web biasanya memiliki satu file CSS besar dan beberapa "mendukung" file CSS. Hal ini terjadi karena berbagai alasan contoh mungkin situs WordPress yang memiliki css desain web Anda dalam satu file CSS yang besar, tapi widget dan plugin yang di tambahkan mungkin memiliki file css kecil yang terkait dengan mereka yang dimuat secara terpisah dari css utama.

Hal ini juga terjadi di website statis karena banyak web designer berpikir bahwa itu adalah baik untuk memiliki file css terpisah untuk bekerja dengan kejelasan dan kemudahan kerja. Sayangnya ini telah menyebabkan masalah kinerja web besar 

Kabar baiknya adalah bahwa meskipun karena sangat umum untuk memiliki beberapa file css terpisah, mungkin untuk memiliki keunggulan kecepatan yang besar atas pesaing Anda dengan memperhatikan masalah ini. Perbedaan antara pemuatan atau dua file css bukan beberapa file css sering dapat mencukur detik atau lebih dari waktu buka halaman Anda.

Bahkan lebih penting daripada menyimpan kwdua, adalah kenyataan bahwa dengan mengurangi kompleksitas css Anda memungkinkan untuk hal-hal lain dalam memuat lebih cepat. Jika Anda membuat uang dari Adsense, iklan Anda akan muncul lebih cepat (karena mereka tidak harus bersaing dengan file css yang dimuat). Jika Anda menginginkan pengalaman terbaik dan tercepat untuk pengguna di toko e-commerce Anda, sekali lagi, kurangi file css akan memungkinkan lebih cepat, pengalaman rak untuk pengguna Anda.

Dengan kata lain, ketika Anda memikirkan membuat PageSpeed ​​Anda lebih cepat, setiap kompleksitas dihapus memungkinkan untuk tidak hanya "x" jumlah waktu yang disimpan, juga memungkinkan unsur-unsur lain dari halaman Anda untuk melakukan dengan sangat baik.

Bagaimana cara menggabungkan css

Lihat menggabungkan external css.

Dengan mengcopy satu file css dan pastekan ke file css lainya. Ketika Anda melakukan itu, anda harus menghapus file call css. 

Pada gambar di atas kita mengambil isi dari file "other.css"  dan file "third.css"  dan menempatkan mereka dalam file "main.css". Dengan melakukan ini, kami pergi dari halaman web yang diperlukan tiga file css untuk memuat ke halaman Web yang hanya membutuhkan satu file css untuk memuat. 

Inline file CSS 

Masalah: 

Masing-masing file css di halaman menggunakn waktu tambahan untuk memuat halaman web , menyertakan sebuah file tambahan untuk call.

.

Solusi: Hapus satu file css dengan menempatkany di html itu sendiri.

Rincian:

Menggunakan tag gaya html, petunjuk css dapat berada dalam file html bukan file css eksternal.

Bagaimana untuk inline CSS

 inline css, Untuk inline CSS, Anda harus menyalin css dari satu file css dan benar paste ke dalam file html Anda (ini hanya bisa dilakukan dengan file css kecil atau file html Anda akan menjadi terlalu besar). Setelah Anda melakukannya, Anda harus menghapus panggilan untuk file CSS.

Pada gambar di atas kita mengambil isi dari file"small.css"  dan menempatkan mereka di dalam file HTML. Dengan melakukan ini, kami akan pergi dari halaman web yang memerlukan dua file css untuk memuat ke halaman Web yang hanya membutuhkan satu file css untuk memuat.

Inline css ditempatkan di kepala dokumen html dengan menggunakan tag style 

<style>
.... your css instructions here .....
</style>

3. Menggunakan lebih sedikit css keseluruhan 

Hal ini sederhana untuk mengatakan "menggunakan lebih sedikit css" tetapi sangat sulit untuk dilakukan.

Ada beberapa alasan mengapa ada begitu banyak css yang tidak terpakai paling dimuat pada situs web.

Tema WordPress yang disesuaikan memiliki css tambahan besar yang tidak requiredFrameworks seperti yayasan atau bootstrap yang digunakan, tapi css tidak disesuaikan dengan Website umum yang dihasilkan, jumlah css tidak khawatir di masa lalu, sehingga desainer membuat pekerjaan mereka lebih mudah dengan menggunakan lebih dari css yang dibutuhkan

Apapun alasannya css Anda adalah besar, Anda masih perlu mencari cara untuk membuatnya lebih kecil dan lebih cerdas. 

Kenyataan

Jika Anda menulis css atau mengendalikan salah satu dari itu, Anda dapat meluangkan untuk menyertakan css yang diperlukan.

Hal ini lebih mungkin namun Anda telah membeli tema atau desain dari orang lain, dan dalam hal ini satu-satunya solusi nyata untuk berbicara dengan desainer yang menciptakan css dan meminta versi lebih ramping.

Jika Anda mempertimbangkan desain baru atau tema, Anda dapat menghemat waktu dan uang dengan mngoptimalkan css delivery. sebagai persyaratan proyek