Kali ini saya akan berbagi tips Cara Mengoptimalkan CSS Delivery Pada Blog khususnya Blogspot. Setiap browser yang di gunakan oleh pengunjung blog anda akan memblokir terlebih dahulu setiap Cascading Style Sheet atau umumnya disebut CSS eksternal yang berada dalam code template HTML anda, ini karena browser akan load terlebih dahulu setiap CSS internal untuk ditampilkan pada screen baik itu PC atau pun Mobile.
Apa pengaruhnya terhadap kecepatan loading blog anda ?. menurut saya, hal ini akan membutuhkan waktu tambahan buat browser untuk loading CSS eksternalnya dan inilah yang mengakibatkan loading blog lama atau berat walau di koneksi internet normal sekalipun, Apalagi koneksinya lambat… Bisa dibayangkan.
Hal ini jelas berpengaruh pada SEO karena pungunjung bisa jadi batal berkunjung ke BLOG kita cuma gara gara loading lama atau lemot bangetttt.
1.
Inline CSS eksternal berukuran kecil dalam HTML template.
2.
Jangan lakukan inline atribut CSS dalam elemen html.
3.
Optimalkan pengiriman CSS di blogger.
Inline CSS eksternal berukuran kecil dalam HTML template.
Anda
bisa inline CSS eksternal yang berukuran kecil dan menggabungkannya di dalam
skin atau style html template anda untuk mempercepat loading blog anda. Sebagai
contoh jika terdapat CSS eksternal dari situs lain dalam html template anda
dengan susunan (mungkin) seperti di bawah ini:
Sumber css-ukuran-kecil.css di atas
adalah seperti di bawah ini (anda bisa lihat setiap sumber dari CSS eksternal
dengan copy url css eksternal tersebut dan pastekan ke browser anda).
Maka anda bisa inline CSS eksternal berukuran kecil tersebut
(membuat CSS eksternal tersebut menjadi internal) seperti di bawah ini:
Anda bisa melihat di atas bahwa kode CSS eksternal berukuran
kecil (<link type='text/css' rel='stylesheet' href='http:// www. situs-lain
.com / css-ukuran-kecil.css'/>) bisa di ganti dengan hanya menampilkan
source yang hanya di perlukan oleh html template blog anda (dalam contoh ini
source nya adalah .nama-style { float : left ; width : 30% }).
Catatan penting:
1. Anda bisa inline CSS eksternal situs lain HANYA JIKA source CSS eksternal tersebut mempunyai ukuran
kecil. Jangan inline CSS eksternal berukuran besar kedalam skin blog anda
karena kemungkinan besar hal ini akan menambah permasalahan baru terkait rules
speed insights google (Prioritize visible content atau above the fold).
2. Pengguna platform blogger tidak bisa menggunakan cara ini untuk mengoptimalkan pengiriman CSS eksternal. Saya akan bagikan pengalaman bagaimana memaksimalkan pengiriman CSS buat anda yang memakai paltform blogger beserta dampaknya di bawah.
Jangan inline atribut CSS dalam elemen html.
Semaksimal mungkin jangan inline atribut CSS dalam elemen html template blog anda.
Optimalkan pengiriman CSS di blogger.
CSS (Cascading Style Sheet) eksternal di blogger biasanya terdapat di antara kode <head> dan </head> dalam html template. Sebagai contoh setiap user yang menggunakan platform blogger setidaknya terdapat 2 CSS eksternal dengan kode yang mirip seperti di bawah ini:
Bagaimana menempatkan CSS eksternal tersebut dalam HTML template
adalah seperti di bawah ini:
Usaha mengoptimalkan pengiriman CSS eksternal blogger
anda tidak cukup hanya menghapus:
Dan dari HTML template
blog Sobat. Karena menurut pengalaman nich browser akan tetap load 2 CSS
eksternal ini walaupun telah di hapus dari html template blog.
Jika anda ingin mengoptimalkan pengiriman CSS blogger lakukan 2 langkah mudah di bawah ini:
1. Ganti kode <head> menjadi <head>.
2. Ganti kode </head> menjadi <!--< head/ >-->
(hilangkan spasi antara <, > dan head/.
Klik Save Template.
Klik Save Template.
Catatan:
1. Mengoptimalkan pengiriman CSS blogger hanya bisa
dilakukan dengan template non default blogger.
2. Cara memaksimalkan pengiriman CSS blogger ini kemungkinan
akan mengubah tampilan dari blog anda. Hal ini mungkin terjadi karena skin yang
terdapat dalam html template blog anda tidak mewakili semua kode elemen (div
class yang terdapat dalam elemen html blog anda tersebut).
Semoga bermanfaat....
Semoga bermanfaat....
Related Posts
Cara Non Aktifkan AdBlockers Pengunjung Blog Anda dengan JavaScript Salam Blogging. Saya akan memberikan Tips "Cara Nonaktifkan AdBlockers pengunjung Blog Anda dengan Javascript ". Ya ! Namun saya akan menjelaska...Read More
Pengertian SEO Onpage dan Offpage SEO dan cara Penerapannya di BLOGSalam Bogging, Di sini Blogger Newbie ( Pemula : seperti saya ) akan mendapatkan cara paling efektif dalam penerapan SEO Onpage dan Off-page. ...Read More
Hal Yang Harus di Perhatikan Sebelum Mengajukan Permohonan ke GOOGLE ADSENSESalam Blogging, kali ini saya akan share mengenai 12 Hal yang Harus Dilakukan Sebelum Mengajukan Permohonan ke Google Adsense. Google Adsense...Read More
Pengertian CANONICAL URL dan Fungsinya Salam Blogging, Kali ini saya akan sedikit menjelaskan tentang Apa itu CANONICAL URL ?. URL Canonical didefinisikan sebagai URL pilihan untuk ...Read More
Cara Membuat Widget RECENT POST Keren dengan Thumbnail Salam Blogging, Kali ini saya akan memberikan tips atau “Cara Membuat WIDGET RECENT POST dengan Thumbnail di Blogspot/Blogger “ Widget ini fungs...Read More
EmoticonEmoticon