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

Apa itu inline CSS?

• Inline CSS mengacu pada CSS ditemukan dalam sebuah file HTML 
• Hal ini ditemukan di kepala(head) dokumen antara tag style 
• inline CSS berarti menempatkan CSS Anda ke dalam file HTML Anda, bukan file CSS eksternal CSS.

Mengapa Harus Inline CSS?

Inline akan mengurangi  jumlah file browser yang harus didownload sebelum  menampilkan halaman web. Jika anda  menggunakan file css eksternal, browser pertama harus memuat file. html, kemudian mendownload file css anda. Download pertama lebih cepat dari yang ke dua. Ketika dilakukan  dengan benar hal itu merupakan bagian penting pada solusi pengiriman css yang dioptimalkan.  

Cara inline css.

Anda hanya copy konten file css eksternal anda dan paste kan diantara style tag di dalam head pada halaman HTML. 
Tampak seperti:  

 <style>

</style>

Hal terpenting yang perlu diingat adalah untuk meletakan info ini seksi html anda. Anda harus juga menggunakan proper HTML style tag. Copy dan paste konten dari css eksternal anda di file style tag.

<style>
body{margin:0;padding:0;background:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#555;}
h1, h2, h3{margin:0;padding:0;font-weight:normal;color:#555;}
h1{font-size:3.5em;}
h2{font-size:2.4em;}
h3{font-size:1.6em;}
p, ul, ol{margin-top:0;line-height:180%;}
a{text-decoration:underline;color:#FF2929;}
</style>

Menempatkan css anda ke bagian kepala HTML akan menyimpan web browser round trip ke server  karena anda tidak lagi meminta file eksternal terpisah untuk browser muat, melihat css anda. Hal ini memungkinkan kurang membuat pemblokiran css  dan pageload kurang cepat.Dan CSS pro ke bagian kepala HTML Anda akan menyimpan web browser round trip ke server, karena Anda tidak lagi meminta file eksternal terpisah dengan browser untuk memuat dan melihat CSS Anda.

Hal ini memungkinkan kurang membuat pemblokiran CSS dan pageloads lebih cepat.  

Pros and cons

Sementara ini tidak menyimpan round trip ke servser (baik) itu juga berarti bahwa file css anda tidak akan cache(buruk)  Bila anda menggunakan file css eksternal seluruh file dicache (ingat) oleh browser sehingga tidak harus mengambil langkah yang sama berulang saat pengguna masuk ke halaman lain di situs web anda. Ketika anda inline css, ini tidak terjadi dan css dibaca serta ditindak lanjuti lagi letika pengunjung masuk ke halaman lain di situs web anda. Ini tidak masalah jika css anda kecil dan sederhana. Jika css anda besar dan kompleks  karena mereka cenderung ke situ, maka anda mungkin ingin mempertimbangkan bahwa caching css anda adalah satu pilihan yang lebih baik. 

Banyak orang inline css dari homepage atau arahan halaman mereka yang uharus memuat super cepat, efektif dan kemudian menggunakan css eksternal untuk sisa situsnya.

Google menyarankan 1 inlining memblokir css..

"Untuk performa terbaik,anda mungkin ingimempertimbangkan inlining css kritis ke dalam dokumen HTML. Ini menghilangkan roundtrip tambahan di jalur kritis dan jika dilakukan dengan benar maka dapat digunakan untuk memberi performa baik"  Satu jemputan panjan "panjang jalur kritis dimana hanya HTML adalah pemblokiran sumber daya".

Gunakanlah alat pengiriman css yang akan menjelaskan bagaimana css yang sigunakan oleh haman tertentu. 

Setiap file CSS yang digunakan untuk website akan menambah waktu untuk kecepatan loading halaman. Kadang-kadang ini tidak dapat dihindari, namun dalam kebanyakan kasus, Anda dapat menggabungkan dua atau lebih file CSS bersama-sama dengan menggunakan tidak lebih dari "copy dan paste".

Seringkali satu-satunya alasan Anda memiliki beberapa file call CSS  ini karena desainer website Anda merasa lebih mudah untuk bekerja dengan file terpisah. kode CSS tidak peduli di mana pun itu berada pada atau beberapa diantara banyak file. Satu file CSS yang berisi semua info dari file CSS yang terpisah dapat digabungkan supaya bekerja sama dengan baik dan meningkatkan kecepatan halaman.

Karena secara default semua file CSS render menghalangi memuat halaman, adalah penting untuk memiliki sedikit mungkin file css.

Menempatkan semua CSS Anda ke dalam satu file secara substansial mengurangi jumlah waktu yang dibutuhkan untuk memuat halaman web Anda karena mengurangi jumlah halaman web browser yang harus memuat sebelum menampilkan halaman Anda.

Tip :
Untuk menentukan berapa banyak File CSS pada halaman Web yang memuat gunakan alat deteksi css pengiriman yang akan mendata setiap file yang dipanggil.

Wordpress 

Anda harus memberikan perhatian khusus untuk pedoman ini jika Anda menggunakan Wordpress. Hampir setiap tema Wordpress memiliki beberapa file CSS yang dimuat. Jika Anda menemukan ini menjadi kasus dengan blog Anda, dan Anda merasa nyaman dengan mengedit file, Anda dapat mengambil isi dari masing-masing style sheet CSS call dan menempatkan mereka ke dalam file CSS utama (yang akan sering ditemukan ketika Anda membuka "Penampilan> Editor" dari dashboard Anda). Ingat untuk menghapus css panggilan yang Anda gabungkan.

Bagaimana menggabungkan CSS Anda

Anda hanya bisa meng copy dan paste setiap isi dari setiap file CSS bersama-sama untuk membuat satu file CSS utama.

Kadang-kadang Anda akan memiliki banyak file CSS yang tersebut dan Anda hanya dapat membuat satu file CSS baru yang memiliki semua isi dari css yang lainMetode ini akan menyimpan semua CSS lama Anda file aman dan bernama benar jika Anda perlu untuk kembali kepada mereka. Anda kemudian akan memperbarui HTML untuk memanggil file baru dan menghapus semua panggilan untuk file lama.

Sebanyaknya Anda hanya akan memiliki dua atau tiga file CSS dan Anda bisa menambahkan isi satu ke file yang ada ...

Sebagai contoh, katakanlah Anda memiliki tiga file css ...

•main.css
•other.css
•third.css

Dalam situasi ini Anda bisa membuka  "other.css", copy dan paste isi file tersebut ke "main.css".

Anda bisa melakukan hal yang sama untuk "third.css" juga.

Setelah Anda melakukan itu, Anda akan menghapus panggilan untuk "other.css" dan "third.css" dari HTML Anda. Anda sekarang memiliki hanya satu file CSS bukannya tiga yang web browser harus men-download sebelum menampilkan halaman web Anda. halaman web Anda sekarang akan memuat lebih cepat.


Lihat juga cara optimalkan css delivery.

 

Apa itu compression?

Kompresi memungkinkan web server Anda untuk memberikan ukuran file yang lebih kecil yang akan memuat lebih cepat bagi pengguna Anda. Kompresi fil HTML dan CSS anda dengan gzip biasanya menghemat sekitar 50% hingga 70% ukuran file itu. Ini berarti bahwa yang dibutuhkan sedikit waktu untuk memuat halaman Anda dan kurang bandwidth yang digunakan lebih sedikit dari sekali.    

Mengaktifkan kompresi cukup banyak standar sekarang dan jika Anda menggunakannya untuk beberapa alasan, halaman wwb Anda lebih lambat daripada pesaing Anda. 

Bagaimana Kompresi bekerja di web?

Ketika permintaan dibuat oleh browser untuk halaman dari situs Anda webserver Anda mengembalikan lebih kecil file yang dikompresi jika browser menunjukkan bahwa ia mengerti kompresi. Semua browser modern memahami dan menerima file terkompresi.

Bagaimana mengaktifkan kompresi Gzip ?

• Kompresi diaktifkan melalui konfigurasi web server server web yang berbeda telah instruksi yang berbeda (dijelaskan di bawah) 
• Web server yang berbeda akan memiliki perbedaan juga  dalam instruksi (keterangan dibawah).

Disini cara-cara yang umum untuk mengaktifkan kompresi termasuk: .htaccess, Nginx, dan Litespeed webmaster.

Mengaktifkan Compress via .htaccess

Bagi kebanyakanorang membaca ini, kompresindiaktifkan dengan menambahkan beberapa kode untuk sebuah file yang bernama .htaccess di web host/server mereka. Ini berarti pergi ke file manager ( atau di manapun Anda pergi untuk menambahkan atau meng-upload file) pada hosting Anda. File mhtaccess mengontril banyak hal penting untuknsitus. Jika anda tidak akarab dengan file ini.anda bisa baca " Apa yang dimaksud file-htaccess?". Kode di bawah bisa di tambahkan ke  .htaccess. 

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Simpan file .htaccess dan kemudian refresh homepage Anda. Untuk melihatbapakah kompresi Anda berhasil gunakan alat  Gzip compression tool.

Mengaktifkan kompresi pada Apache webserver.

Instruksi dan kode dibawah ini akan bekerja di Apache, jika mereka tidak bekerja, ada cara lain untuk membuatnya bekerja. Seandainya kode di bawah tampaknya tidak juag bekerja, hapus saja dari file .htaccess Anda dan  coba dengan yang ini...  

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Mengaktifkan kompresi pada NGINX webserver. Anda akan membutuhkan kodw di bawah denagn menambahkan ke file config Anda.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Cara ideal untuk mengaktifkan kompresi di Litespeed adalah melakukannya melalui konfigurasi di bawah "tala". Hanya pergi ke "mengaktifkan kompresi" dan memeriksa untuk melihat apakah itu ada, jika tidak klik "edit" kemudian memilih untuk menyalakannya. Sementara Anda berada di sana, melihat selama beberapa pilihan Gzip yang berada di dekatnya.

Testing kompresi

Untuk melihat kompres gzip bekerja atau tidak gunakan alat gzip compression tool.

Pertimbangkan juga untuk mengetes kecepatan fengan page speed tool yang akan menguji kompresi dan faktor-faktor lain.