Beranda
Css

Percepat Loading Blog Dengan Memaksimalkan Penggunaan CSS

Percepat Loading Blog Dengan Memaksimalkan Penggunaan CSS


CSS merupakan salah satu bagian pengatur komponen penting yang harus ada dalam sebuah blog/website berbasis HTML atau XHTML, jika Html berfungsi sebagai pemanggil maka CSS adalah penyusun tampilan layoutnya. Semua elemen yang ada dalam blog/website ditentukan oleh CSS dari segi warna, background, posisi, ukuran, jenis font dan sebagainya. Bisa dikatakan keduanya (Html + CSS) memiliki keterkaitan satu sama lain. Jika hanya Html saja tidak akan cukup untuk menampilkan halaman web, dibutuhkan CSS untuk memperbaiki tampilan dari Html tersebut. Sebaliknya jika hanya menggunakan CSS tanpa (Html sebagai pemanggil) sebuah halaman tidak akan bisa ditampilkan.

Alasan Kenapa Harus Meninggalkan Jquery

Lain halnya dengan Jquery, adalah sebuah library javascript yang berisi kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan penulisan kode JavaScript.

Tentu sajsa Jquery sangat berguna tapi jika dibandingkan dengan User Experience (UX) dari sebuah web maka alangkah baiknya jika Anda harus meninggalkan Jquery karena berpengaruh buruk terhadap UX dan SEO, dari segi UX Jquery memperlambat loading blog/website dan dari segi SEO menghambat proses rendering oleh robot search enggine.

Walaupun ada cara untuk membuat Jquery tidak menghambat SEO namun terkadang hal ini membuat Jquery tidak bekerja sepenuhnya pada sebuah halaman web dan berimbas pada UX dari web tersebut. No more Jquery!

CSS Setara Jquery

Bagaimana cara membuat tampilan (fungsi/efek keren) tanpa Jquery?

Setelah dirilisnya CSS3 bisa kami katakan CSS hampir setara dengan Jquery untuk menampilkan efek Show Hide, Pop Up, Smooth Scroll dan sebagainya.

Banyak yang belum mengetahui bahwa CSS sudah melebihi ekspektas dari yang awalnya hanya mengatur layout, background dan sebagainya, sampai sekarang sudah menjadi sebuah komponen yang serbaguna.

Jika ditangan yang tepat dengan bantuan HTML sebagai pemanggil, CSS bisa membuat berbagai fungsi dan efek khusus untuk memaksimalkan tampilan blog/website. Percaya atau tidak, tampilan dan beberapa fungsi dari web blog ini hanya dibangun dengan CSS.

Memaksimalkan penggunaan CSS

1. Compress CSS

Pertama perkecil ukuran CSS pada blog/websie Anda dengan cara menyatukan semuanya dalam satu baris seperti contoh dibawah:
div {
  display: table;
  position: relative;
  padding: 20px 0;
}
h1 {
  display: block;
  margin-bottom: 20px;
  font-size: 25px;
}

Gabung semua artibut CSS kedalam satu baris menjadi:
div {display: table;position: relative;padding: 20px 0}
h1 {display: block;margin-bottom: 20px;font-size: 25px}
Jika Anda sudah expert atau mahir menggunakan CSS bisa menggabungkan semua kode dalam satu baris seperti dibawah ini:
div {display: table;position: relative;padding: 20px 0} h1 {display: block;margin-bottom: 20px;font-size: 25px}
2. Gunakan CSS Selector 

Bagian kedua inilah yang menjadi kunci untuk membuat fungsi khusus yang setara dengan Javascript hanya dengan menggunakan CSS. Pada artikel W3Schools.com terdapat sekitar 55 Selector CSS, namun yang akan dijelaskan disini hanya beberapa Selector penting yang jarang digunakan namun punya peran penting dalam CSS:

div + p

Digunakan untuk memilih elemen <p> yang ditempatkan tepat setelah kode <div>, tidak akan berfungsi jika diantara <div> dan <p> terdapat kode Html lain, contoh penempatan yang memenuhi syarat adalah sebagai berikut:
<div></div>
<p>Isi_teks_halaman</p>

Posting Komentar