Inline CSS Kecil

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.