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

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 CSS @impor itu?

Ini adalah metode mengimpor satu file css dari dalam file css lain. Sepertinya ini ...

@import url ("style.css")

Mengapa tidak menggunakannya?

Metode @import mengambil file CSS yamg menciptakan beberapa masalah yang mempengaruhi kecepatan halaman Anda. Masalah terbesarnya adalah bahwa hal itu menyebabkan file untuk memuat berurutan (satu harus menunggu untuk yang lain) bukan secara paralel (pada waktu yang sama). Ini termasuk limbah dan perjalananya berputar-putar dan membuat beban halaman web Anda lebih lambat.

Bagaimana menghindari css @ impor?

Lihat di file HTML dan CSS Anda dan cari panggilan @ impor. Anda juga dapat menggunakan alat pengiriman CSS secara online yang akan mendeteksi mereka.
Sekali lagi, mereka terlihat seperti ini dan biasanya akan menjadi dekat bagian atas file.

@import url ("style.css")

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

<Link rel="style.css" href = "style.css" type =text/css">

Pastikan untuk mengganti "style.css" dengan lokasi dan nama file CSS Anda.

Periksa semua file CSS Anda

Tip: Gunakan alat CSS untuk mengetahui apakah Anda memiliki @imports pada halaman Anda

Banyak situs memiliki beberapa file CSS (Anda harus mencoba untuk menggabungkan file-file CSS). Jika Anda memiliki lebih dari satu file CSS, memeriksa setiap file untuk impor.

Jika file CSS panggilan melalui metode @ impor, sangat buruk untuk kecepatan halaman. Hal ini menambah langkah-langkah tambahan untuk browser dalam memuat halaman web Anda, menyebabkan browser untuk men-download, mengurai, dan kemudian pergi keluar dan mendapatkan file CSS berikutnya sebelum mulai menampilkan halaman Anda.
Hal ini dapat dihindari dengan menggunakan metode link di atas.

Cara terbaik adalah jika tidak ada @imports digunakan sama sekali.

Lihat: cara optimalkan css 

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 First View?

First View adalah metrik kinerja web yang mewakili apa yang pertama kali pengunjung yang akan alami di halaman web.
Untuk mewakxxpokili pengguna pi baru, kinerja alat menggunakan browser dengan cache dan membersihkan cookies.

Mengapa first view harus diukur?

Untuk menguji halaman dengan akurasi yang benar, tes harus meniru bagaimana pengguna nyata mengalami hal apa di halaman itu. Kesan pertama dari halaman web dari sudut pandang pengguna akan berbeda dari kunjungan mereka yang berulang. 


Bagaimana first view dari halaman web yang berbeda dari tampilan yang berulang?

Pertama kali browser merambati halaman, itu harus mengambil semua sumber referensi halaman web. Gambar, css, javascript dan sumber daya lainnya semua harus di-download.


Setelah halaman dibuka, browser mungkin telah caching sumber daya tersebut.

Ini berarti bahwa kedua kalinya pengguna melihat halaman web itu, sumber daya sudah akan didownload oleh browser. Bahkan pageviews halaman Web lain dari website yang sama sekarang akan memuat lebih cepat karena sumber daya seperti gambar logo, bersama css, dll akan berada dalam cache browser.


Pandangan kedua dari halaman web (repeat view) biasanya akan lebih cepat dari pandangan pertama.

Semua pandangan yang mengulang dari halaman web (atau halaman lain yang menggunakan sumber daya yang sama) akan lebih cepat karena sumber daya tidak akan perlu didownload.

Webmaster sering berpikir halaman web mereka jauh lebih cepat daripada yang sebenarnya karena pengalaman mereka dari halaman web mereka didasarkan pada pandangan ulang daripada pandangan pertama.

Mengukur halaman web menggunakan tampilan pertama adalah satu-satunya cara untuk benar-benar meniru apa yang nyata pertama kalinya pengguna mengalami apa ketika  ke halaman Web akan mengalami.

Pastikan Anda mengoptimalkan tampilan ulang.

Webmaster harus mengaktifkan cache browser untuk memastikan bahwa browser caching sumber daya mereka. Jika tidak, setiap tampilan halaman akan menjadi "pandangan pertama".

Apa yang dimaksud dengan Cache-Control?

• Cache-control adalah  header HTTP yang mendefinisikan sejumlah waktu dengan menambahkan cara cache file yang disimpan.

Artikel ini akan membahas bagaimana menggunakan cache-control value, dan bagaimana mendapatkannya supaya benar-benar bekerja di website.

Kebanyakan situs web modern loading cwpat dengan mengguna kan cache-control untuk memanfaatkan browser caching mereka. 

 Menggunakan Cache-Control

Isi dari panduan ini : 

• Cache-Control basic 
• Defining time (max-age) 
• Mendefinisikan cache (public, private,                  dll). 
• Memilih tipe berkas.
• Menambahkan head. 
• .htaccess
• Apache confiq
• Nginx
• Litepeed

Dasar-dasar Cache-Control

Header cache-control basic mendefinisikan jumlah waktu yang di cache bahwa cara caching harus dilakukan dengan. 

Cache-Control: max-age=2592000, public

Ketika sebuah file diakses oleh browser header HTTP juga diambil. Cache-Control disertakan browser dan akan menghormati nilai-nilai yang ditemukan disana. Jika browser melihat bahwa file harus di cache selama lima menit  itu akan tertinggal di cache browser selama 5 menit dan file yang tidak perlu diambil jika hal itu disebut lagi. 



Sebagai contoh mungkin gambar logo Anda. Jika pengunjung datang ke salah stu halaman web Anda, itu akan mendownload gambar logo. Kemudian jika pengguna pergi ke halaman web lain disitus Anda, maka gambar logo tidak akan didownload lagi. Sebaliknya versi cache akan digunakan disini. 

Apa itu max-age?

• "Max-age" mendefinisikan sejumlah file waktu yang harus ada di cache.
• "max-age" respon directive  menunjukan bahwa respon tersebut akan dianggap basi setelah umurnya melewati dari batas yang ditentukan (dengan detik). 

• Max age pengguna 

Bagian max-age header terlihat seperti ini: 

max-age=2592000

Max-age dinyatakan dalam detik. Umunya nilai max-age adalah:

* Satu menit: max-age=60
* Satu jam: max-age=3600
* Satu hari: 86400
* Satu bulan: max-age=2628000
* Satu tahun: max-age=31536000

Bila menggunakan max-age untuk menentukan cache sering kali orang harus mempertimbangkan jenis file dan bagaimana ia digunakan. Kami akan membahas ini secara lebih rinci nanti dalam artikel ini.

Caching secara langsung (direct caching)

Bagian direct disimpan di cache header diatas terlihat seperti:

public

Header cache-control atas menyatakan "publik". Ini berarti bahwa file cache ini dapat terbuka (berbeda dengan file yang private).  Secara default, banyak hal yang disimpan (di cache) tapi ada memang saat-saat ketika perilaku ini tidak akan dianjurkan untuk dokumentasi yang sensitif sifatnya, keamanan, pengguna konten tertentu, dll.

Posting disini kami akan mencakup tiga arahan utama yang ditawarkan oleh cache-control:
~public
~private
~no-store

Public

"Public" pada dasarnya secara langsung mengatakan bahwa siapapun bisa di cache disini dari tingkat manapun. 
Spesifikasi resmi mendefinisikan sebagai berikut:

"PubliC" respon direktif yang menunjukkan bahwa cache setiap kemungkinan menyimpan respon, bahkan jika respon biasanya akan non-saved di cache atau disimpan di cache hanya dalam cache pribadi.

Pada dasarnya, jika Anda ingin sesuatu cache untuk alasan kecepatan halaman, dan itu tidak pribadi atau sensitif maka anda harus menggunakan direktif waktu publik.

private

Direktif private itu berarti khusus untuk satu orang. Sebuah contoh akan menjadi halaman Twitter. Ketika Anda pergi ke Twitter Anda melihat satu hal dan orang lain pergi ke url yang sama melihat sesuatu yang lain. Meskipun informasi pada halaman yang umum dan tidak sensitif, itu adalah khusus untuk satu orang. (Catatan: Twitter hanyalah sebuah contoh konseptual, saya tidak tahu apa yang mereka gunakan atau bagaimana mereka menggunakannya)

Spesifikasi resmi mendefinisikan sebagai ...

"Private" respon direktif menunjukkan bahwa pesan respon dimaksudkan untuk satu pengguna dan TIDAK HARUS disimpan oleh shared cache. Cache pribadi MUNGKIN menyimpan respon dan menggunakannya kembali untuk permintaan di kemudian, bahkan jika biasanya akan merespon

Jadi jika saya masuk ke twitter.com dan kemudian refresh hit beberapa hal akan di cache untuk saya pribadi bukan Anda. Jika Anda pergi ke twitter.com dan klik refresh beberapa hal yang akan di-cache untuk Anda tetapi tidak bagi saya.

No-store

no-store directive adalah indikasi kuat bahwa sesuatu seharusnya tidak disimpan dalam mekanisme caching apapun.

Spesifikasi resmi mendefinisikan sebagai berikut: 

"No-store" respon direktif menunjukkan bahwa cache TIDAK HARUS menyimpan bagian apapun baik permintaan langsung atau respon. direktif ini berlaku untuk kedua cache pribadi dan bersama.

Sekali lagi harus saya catat bahwa ini tidak benar-benar mengamankan apapun.

File types 
Dua pertanyaan bagi webmaster yang harus ditanyakan adalah:

•Apa jenis file yang harus saya cache?
•Berapa lama saya harus mencache  untuk file itu?

Apa jenis file yang harus di-cache?

Sebagai panduan yang sangat luas dan umum, akan ditunjukan jenis file-file sebagai berikut:

~Gambar: (png, jpg, gift, dll)
   gambarbtidak benar-benar berubah 
   sehingga mereka dapar memiliki          jangka waktu cache yang lama (1        tahun).
~CSS:  file css cenderung berubah          lebih sering daripada file lainya,    
   jangka waktu yang lebih pendek,          mungkin diperlukan (1 minggu atau   1 bulan ).
~ico (favicon) - jarang berubah               (setahun)
~ js - sebagian besar javascript tidak       sering berubah sehingga waktu            cache lagi biasanya satu bulan              (mungkin).

Hal yang perlu diperhatikan

Hanya anda yang dapat menentukan apa yang terbaik untuk situs anda dan sumber daya situs anda. Satu hal yang saya akan sebutkan bahwa jika akan menyebutkan bahwa jika Anda mengubah sesuatu (seperti file CSS) dan file yang di-cache, Anda harus mempertimbangkan untuk mengubah nama file CSS yang diperbaarui itu dilihat oleh semua pengguna. 

Ini disebut URL fingerprintIng
     
Untuk mendapatkan (no cache) dari file sumber daya yang segar mungkin dengan memiliki nama yang unik. Sebuah contoh jika file  css akan kita  beri nama "main.css" kita beri nama sebagai gantinya. Kain kali kita mengubahnya dengan "main_2.css". Hal ini berguna untuk file yang terkadang berubah.


Bagaimana menambahkan Cache-Control untuk situs Anda.

Cara untuk menambahkan Cache-Control untuk file Anda adalah cara yang sama Anda menambahkan header apapun ke server Anda. Segala sesuatu yang telah kita bicarakan di halaman ini adalah tentang Cache control header. 
Jadi bagaimana cara menambahkannya? 
Hal itu tergantung pada server web Anda. Kami akan menjalankan skenario yang paling umum berikut ini:
File  .htaccess
Kebanyakan orang membaca file ini memungkinkan untuk menggunakan file  .htaccess dengan menambahkan  ke header.
Contoh kode untuk file .htaccess:
Kode yang paling mendasar untuk menetapkan header cache-control melalui file .htaccess yaitu:

Header set Cache-Control "max-age=2628000, public"

Namun kode diatas tidak memberikan kemampuan apapun untuk memberikan petunjuk caching yang berbeda untuk jenis file yang beda juga. 
Untuk menerapkan cache-control header untuk jenis file yang berbeda kita akan menggunakan... 

# One month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Kode diatas oada dasarnya mengatakan...

"Jika jenis file css, jpeg, jpg, png, gif, js atau ico kemudian menerapkan itu ke header" 

Sekarang katakanlah kita ingin membuat cache-gambar selama satu tahun, tapi tetap file css dan js di cache selama satu bulan.

Kemudian kami akan menempatkan berikut ini ke dalam file .htaccess :

# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Di atas kita memiliki dua blok kode, satu untuk gambar dan satu untuk file css dan js. Ini hanya untuk menggambarkan bahwa Anda dapat memiliki beberapa blok dalam file  .htaccess. 

Apache config http.conf

Jika Anda memiliki akses dan tahu apa yang Anda lakukan, pengaturan header Anda melului file konfigurasi yang cepat dan direkomendasikan.
Contoh kode diatas seperti bagaimana .htaccess itu bekerja.

Gunakan filesMatch dan mengatur header untuk menciptakan petunjuk khusus untuk jenis file Anda (sekali lagi, contoh kode  .htaccess diatas harus bekerja dengan baik).

NGINX

Menggunakan expires directive Anda dapat menambahkan instruksi cache server atau lokasi blok. 

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

Kode diatas adalah untuk setiap jenis file yang tercantum di baris pertama. Jenis berkas ini di tambahkan atau dihapus. Ada juga beberapa blog yang bisa untuk fine tuning jenis file yang berbeda.

Litespeed

Jika Anda memilki lisensi multi cpu,maka anda akan mempunyai akses ke cache directive lebih lanjut melalui konfigurasi online.
Jika Anda memiliki lisensi multi cpu maka Anda perlu menggunakan file  .htaccess untuk Cache-control. Petunjuk di atas untuk bekerja  .htaccess untuk server Litespeed.

Terkait:
3 Langkah cepat untuk membantu anda dalam pemasaran.