Cara Optimalkan CSS Delivery

Apa Maksud CSS delivery?

• Cara di mana CSS digunakan untuk membuat sebuah halaman web
• Menggunakan file external css, internal css itu memblokir atau sebuah kombinasi dari keduanya. 

CSS bisa digunakan beberapa cara untuk halaman web dan masih bekerja. Karena ada banyak cara untuk menggunakannya terdapat banyak setup CSS yang berbeda. Tidak peduli bagaimana mengatur pada halaman web. CSS Anda harus membantu halaman web Anda membuat lebih cepat bukan memperlambat mereka. 

Satu contoh dari sebuah "optimized CSS delivery"

Menyetel Css yang ideal akan tampak seperti berikut: 

• Tidak lebih dari satu external CSS stylesheet dengan ukuran sehat (kurang dari 75k atau setara)
• Inline CSS kecil kedalam HTML menggunakan tag style untuk halaman paruh atas.
• Jangan menggunakan @import call  CSS
• Jangan ada CSS dalam HTML hal-hal seperti div atau h1 ada dalam elemen css.

Alasan dari setup CSS ini akan menjadi ideal dengan meminimize render(loading) css yang pemblokir  cara mengeliminasi css pemblokir render css. dan halaman akan loading sangat cepat. Jika Anda familiar dengan perbedaan style dari css delivery, kemudian anda dapat menggunakan alat 

css delivery tool untuk mendapatkan sebuah penjelasan bagaimana halaman web atau blogspit menggunakan css.Jiika anda kurang famuliar, jangan panik,ikuti saja postingan blog ini If you are not familiar, don't panic, dan dibawah sebagian penjelasan untuk meringankan kepanikan...

File-file External CSS 

Adalah jalan utama bagi file-file css merupakan jalan yang digunakan oleh halaman web dan sangat mungkin  cara css sedang digunakan. Di bagian head html  ada suatu yang sedang muat terlihat,  seperti ini...  

<link rel="stylesheet" type="text/css" href="http://yoursite.com/main.css" media="screen" title="style (screen)" />

panggilan file CSS Anda disebut eksternal karena petunjuk CSS dalam sebuah file 55arate sep6tree dari HTML Anda. Memiliki file CSS eksternal adalah cara de facto untuk menangani CSS dan memiliki keuntungan dari CSS Anda yang sedang di-cache (ingat) oleh web browser. Di mana masalah yang datang adalah jika Anda memiliki beberapa file-file ini. Sayangnya, hal ini sering terjadi di Wordpress dan jenis-jenis tema. 

Jika Anda mempunyai lebih dari satu file css harus di gabungkan menjadi satu file.

Bila Anda memiliki beberapa file CSS eksternal browser harus men-download masing-masing sebelum dapat menampilkan halaman Anda. Hal ini menyebabkan banyak roundtrips untuk mendapatkan setiap file CSS yang menghasilkan halaman web Anda menjadi lambat untuk memuat. Hal ini dapat dengan mudah diubah dengan menggabungkan semua file CSS ke dalam satu file. 

• mengajukan. Untuk melihat berapa banyak eksternal CSS file halaman web Anda menggunakan kunjungi di sini
• untuk mendapatkan petunjuk tentang cara untuk menggabungkan file CSS eksternal kunjungi di sini 

Inline CSS

Inline css adalah  petunjuk css yang disertakan dalam dokumen HTML sendiri. Keuntungan dengan metode ini adalah bahwa tidak ada tambahan file (eksternal) yang harus mengambil sebelum website ini ditampilkan. Keuntungan ini hanya satu kenyataan bagi petunjuk css kecil. Jika file css anda besar itu bukanlah metode yang baik untuk anda. Style inline yang dicapai dengan menempatkan petunjuk dalam  tag style seperti yang ditujukan di bawah ini:  

<style>
CSS goes here
</style>

Inlined CSS kecil benar-benar cara yang dapat mempercepat loading halaman website Anda.

JanganMenggunakan @import dalam file call CSS anda..

Metode @import yaitu dimana file-file css eksternal di panggil menggunakan command @import, lebih baik membuat link langsung sebagaimana yang sudah di bicarakan diatas. Metode ini menyebabkan file css atau file called lebih lambat untuk memuat satu waktu dalam penggunaan metode ini. Dalam kode tampak seperti ini:

@import url("style.css")

Call-call ini benar membuat sakit dalam kecepatan halaman web dan banyak desainer masih menggunakan cara ini untuk.mengeceknya

• Lihat halaman web anda menggunakan @import call css apa tidak.di sini
• Untuk mempelajari tentang metode @import di sini

Jangan Inline elemen-elemen atribut dalam HTML.

Hal ini sangat umum untuk menempatkan gaya dalam elemen HTML, pada kenyataannya, saya cenderung untuk melakukan hal ini sepanjang waktu. Google PageSpeed ​​pedoman "Optimalkan pengiriman CSS" mengatakan bahwa kita tidak harus melakukan ini lagi. Dikatakan bahwa ini akan menyebabkan browser untuk merespon lebih lambat dan bahwa itu tidak akan menjadi bijaksana untuk memiliki gaya seperti dalam kode kami karena untuk melakukannya adalah melawan Kebijakan Content. Keamanan W3 yang merupakan protokol keamanan yang akan memblokir setiap tingkat elemen gaya secara default. Gaya ini terlihat seperti ini ...

Kebijakan Pengaman Konten  

<p style="float:left;"> or <div style="color:#fff;">

Saya memiliki banyak kode saya, dan saya harus melakukan banyak pekerjaan untuk menyingkirkan mereka semua. Untuk melihat apakah halaman web Anda memiliki jenis CSS pergi si sini                                                                                       Para Desainer web

Cara menggunakan css pada halaman web sangat ditentukan oleh desainer, bukan pemilik situs web. Jadi seorang desainer membuat indah, baik command pada kode css dan yang telah menempatkanya dalam beberapa file yang berbeda untuk penjelasan. Mereka berpikir, dengan prestasinya, "saya telah melakukan pekerjaan yang indah dan menakjubkan". Ini adalah apa yang mereka  ajarkan.  Sayangnya praktek ini dan lainya berakhir membunuh performa halaman web. Jika css dalam beberapa file, ada beberapa permintaan dibuat sebelum halaman dapat ditampilkan pada browser, memperlambat pageload dan sangat memberatka beban halaman mobile. Semua css harus hanya dalam satu file untuk kinerja terbaik web. Sebagai realisasi untuk mendapatkan ini diluar sana, Anda akan melihat bahwa web desainer akan mulai membuat kode yang membantu pengguna mereka  dapat bekerja secepat mungkin,  namun untuk saat ini..Anda mungkin memiliki css yang menyakitkan dari website Anda. mobile page loads. 

Penutup

Seperti yang Anda lihat ada banyak cara menggunakan css pada halaman web, tapi  intinya adalah  bahawa kita perlu untuk membersihlan kode dan menggunakan pengiriman css yang direkomendasikan untuk memastikan halaman kami memuat secepatn yang mereka bisa.  Rekomendasi tersebut:         Menggabungkan eksternal stylesheet inline css kecil css dalam style tag No @import called untuk css yang mana  appropriateNo css dalam soal HTML seperti  div atau h1s ( dalam  elemen css).  

Rekomendasi:

• Gabungkan css external stylesheet 
• Inline css kecil pada tag style.
• Jangan ada @import panggilan untuk css mana yang tepat
• Tidak ada css dalam HTML hal-hal seperti div   atau h1 dalam CSS  HTML

• Semua Ini dapat di cek dengan alat CSS delivery tool