KontenWeb: CSS

Penulis
- Oktober 13, 2019
Pengertian Inline Css Dan Cara Mengatasinya - Ketika menguji situs di Google PageSpeed Insights mungkin kamu akan melihat peluang untuk menambah kecepatan pemuatan (loading) situs yaitu dengan mengurangi atau menghilangkan Inline Css dari dalam template situs. Sebenarnya apa sih yang dimaksud dengan inline css itu? Inline Css adalah style css yang ditanamkan pada line/baris HTML, Sederhananya Inline Css merupakan style css yang berada di area tag pembuka <body> dan tag penutup </body> "tidak berada ditempat yang seharusnya yaitu <head>". Untuk lebih jelasnya mari kita simak contoh gambar dibawah ini;
Pengertian Inline Css Dan Cara Mengatasinya
Penjelasan: CSS (Cascading Style Sheets) sepatutnya dikumpulkan "berada" diantara tag pembuka <head> dan </head>, jika style css berada di bagian body atau berada pada line html maka style css tersebut disebut sebagai inline css.

Cara Mengatasi Inline Css

Sebagian kecil inline css dapat dihapus begitu saja namun sebagian lagi tidak, harus ditambahkan property (id='...' atau class='...') pada elemen html yang di dalamnya terdapat inline css, kemudian memindahkan style css pada properti baru dan menempatkan nya di <head>. Contoh;
[code type="HTML"]<textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>[/code]
Pada baris html textarea tersebut, style='display:none;' dikatakan sebagai inline css, karena berada pada baris atau line html, jadi untuk menghilangkan inline css dari baris html tersebut kita tambahkan property baru sehingga menjadi seperti dibawah ini;
[code type="HTML"]<textarea class='hide-textarea' expr:id='&quot;postData-&quot; + data:post.id'><data:post.body/></textarea>[/code]
Kemudian css style='display:none;' diganti menjadi .hide-textarea{display:none} kemudian ditempatkan pada kumpulan css yang berada diantara tag <head> dan </head>, atau di atas kode ]]></b:skin> jika kamu pengguna blogger.

Contoh Inline Css lainnya

Pada template web (blogger) kamu mungkin sering melihat kode ini <div style='clear: both;'/>, kode tersebut juga merupakan inline css karena terdapat property style css di dalam kode html, untuk merubahnya agar tidak menjadi inline css ganti kode tersebut dengan <div class='clear'/> kemudian tambahkan style css ini; .clear{display:block;clear:both;height:0} ke bagian kumpulan css yang berada di tag head.

Contoh inline css lainnya adalah; kode <div style='text-align: center; margin:10px 0'>Element Lain</div> kode ini biasanya digunakan untuk memposisikan suatu elemen menjadi center (ditengah-tengah), sebaiknya tidak seperti itu, silahkan ganti <div style='text-align: center; margin:10px 0'> dengan kode <div id='middle-ad'> misalnya, kemudian css nya menjadi;
#middle-ad{clear:both;display:block;text-align:center;margin:10px 0;}
Dan ditempatkan pada kumpulan css yang seharusnya yaitu di area <head>.

Catatan: Sebelum menambahkan id atau property 'class' baru misalnya: middle-ad pastikan nama id atau class baru tersebut belum ada pada elemen yang lain, agar style CSS tidak bercampur antara satu dengan yang lain.

Masih banyak lagi bentuk-bentuk inline css yang bisa kamu temui pada html template web kamu khusus nya template blogger, seperti properti "width" dan "height" ,biasanya inline css terdapat pada widget-widget blogger seperti widget header, followbyemail, popular post dan sebagainya.

Lakukan perubahan secara perlahan dan jangan lupa backup template anda sebelum merubah atau mengedit sesuatu di dalamnya guna menghindari kesalahan.

Tips: Pada prinsipnya inline css merupakan hal yang wajar, namun jika halaman web memuat terlalu banyak inline css maka akan menyulitkan browser dalam menguraikan situs web. Menghilangkan inline css hingga 100% memang sangat sulit dilakukan.

Penulis
- Oktober 13, 2019
Internalisasi CSS Dan Javacript - Apa yang dimaksud dengan internalisasi css dan javascript? Yang dimaksud dengan internalisasi css maupun javascript adalah menjadikan file css atau javascript dari penyimpanan external ke internal, sebuah template umumnya tidak terlepas dari bundling css maupun bundling javascript dari penyimpanan external, bundling yang paling umum kita temui dalam sebuah template misalnya; bundling google fonts, bundling font awesome dan bundling-bundling lainnya seperti script share buttons, slider dan banyak lagi.

Diantara bundling-bundling tersebut sebagian mungkin ada yang mendukung asynchronously css atau javascript dan sebagian lagi tidak mendukung asynchronously file "css dan javascript" external.

Fungsi dan Tujuan

Internalisasi css dan javascript bertujuan untuk menghilangkan blokir/penundaan rendering halaman yang disebabkan oleh bundling css dan javascript external tersebut. Fungsinya adalah memisahkan file css dari sumber dayanya untuk mempercepat loading situs.

Jadi poin pertama yang harus kita ingat adalah internalisasi css dan javascript external hanya dilakukan pada bundling "css dan javasript" yang tidak mendukung asynchronously saja sedangkan bundling css dan javascript yang mendukung async='async' tidak perlu dilakukan internalisasi. Dan untuk mengetahui apakah bundling css atau javascript mendukung asynchronously kita perlu menambahkan async='async' kedalam bundling tersebut.

Contoh;
<script src='url-file-external' type='text/javascript'/>
Kemudian tambahkan async='async' sehingga menjadi seperti berikut
<script async='async' src='url-file-external' type='text/javascript'/>
Jika setelah ditambahkan async='async' kedalam bundling external tidak ada perubahan dalam artian tidak ada widget, fitur atau tampilan yang rusak, maka script tersebut mendukung asynchronously, tapi jika setelah ditambahkan async='async' ternyata ada fitur-fitur yang rusak maka script tersebut tidak mendukung async='async' dan solusinya adalah dilakukan internalisasi javascript agar tidak menghambat rendering halaman.

Khusus untuk bundling css saya telah menerbit 2 artikel untuk mengatasinya jika kamu belum mebacanya silahkan lihat [Asynchronously CSS dengan WebFontConfig] dan [Load Css External Dengan Javascript], tapi jika kamu memilih untuk melakukan internalisasi css external juga boleh-boleh saja, ikuti langkah-langkah-nya berikut ini.

Pertama Cek bundling css dan javascript dengan "Tool SEO Analyzer", kunjungi https://www.seocentro.com/tools/seo/seo-analyzer.html kemudian submit link situs anda pada kolom URL seperti contoh dibawah ini;
Cek Bundling CSS dan Javascript
Cek Bundling CSS dan Javascript
Pilih Tab [Speed] kemudian gulir kebawah, klik pada bagian folder Blocking Javascript untuk melihat daftar bundle css dan javascript yang memblokir rendering halaman, disana kamu mungkin akan melihat banyak bundling javascript. Jika tool atau situs tidak buka silahkan gunakan/kunjungi https://varvy.com/pagespeed/ untuk mengecek bundle css.

Perlu di ingat bahwa tidak semua bundling javascript yang ada pada pada daftar, dapat di internalisasi misalnya bundling widget blogger "https://www.blogger.com/static/v1/widgets/id/widgets.js", bundling ini hanya selesai dengan mengganti kode <head> dengan &lt;head&gt; dan kode penutup </head> dengan &lt;/head&gt;&lt;!--<head/>--&gt; kemudian mengganti kode penutup </body> dengan &lt;!--</body>--&gt;&lt;/body&gt; sedangkan bundling yang dapat di internalisasi adalah bundling "css dan javascript" seperti ajax, google fonts, font awesome, dll seperti contoh berikut;
  • <script src='https://cdn.jsdelivr.net/g/jquery.easing@1.3/jquery.easing.1.3.min.js' type='text/javascript'/>
  • <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
  • <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
  • <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
Untuk melakukan internalisasi (dijelaskan secara teori) buka url script/css external misalnya; https://fonts.googleapis.com/css?family=Oswald dan copy semua isi "css" yang ada pada url tersebut dan masukkan ke dalam template (html situs web) untuk menggantikan bundle tersebut. Jika diperlukan kamu juga bisa melakukan minify bundle css dan javascript dengan tool Css & Js Minifer sebelum melakukan internalisasi.

File atau isi dari bundle css fonts googleapis dan font awesome dibungkus dengan tag atau kode;
<style type='text/css'><!--
File css here...
--></style>
Dan file java script (isi dari bundle javascript) dibungkus dengan tag script seperti contoh dibawah ini;
<script type='text/javascript'>
//<![CDATA[
File js here...
//]]>
</script>
Penempatan css dan javascript internal

Css umumnya ditempatkan diantara kode <head> dan </head> sedangkan untuk javascript umumnya ditempatkan didalam tag body, setelah kode <body> atau diatas kode penutup </body>, jika membingungkan posisi css dan javascript bisa ditempatkan diposisi bundle (menggantikan bundle), hapus baris bundle example: <script src='url' type='text/javascript'/> dan ganti dengan file css/script "isi bundle" yang telah disiapkan untuk internalisasi.

Demikian "Internalisasi CSS Dan Javacript" semoga ini membantu anda dalam mengatasi masalah speed (Render-blocking JavaScript dan css) yang disebabkan oleh bundling no asynchronous.

Penulis
- Oktober 13, 2019
Cara Menghapus CSS Variable (Group Description Stylesheet) - Template blogger umumnya memiliki css group description variable atau (Group Description Stylesheet). Css variable dirancang untuk memudahkan pengguna template dalam melakukan pergantian warna template, fonts (jenis huruf) hingga mengatur lebar halaman post dan sidebar.

Namun sayangnya google PageSpeed Insights akan membaca css variable sebagai CSS Unused atau css yang tidak terpakai dan dianggap menggangu performa situs, meskipun sebenarnya masalah performa (pemuatan) situs yang disebabkan oleh CSS Unused bukan merupakan masalah yang berarti karena masih ada banyak masalah yang lebih besar seperti masalah pada; DOM (Document Object Model), waktu penguraian, mengompilasi, mengeksekusi JS dan sebagainya.

Namun dalam perlombaan kecepatan pemuatan situs, maslah kecil juga sangat berarti dan harus segera diatasi jika memungkinkan, itu sebebnya beberapa pengembang situs memilih untuk menghapus css variable dari telmpate blog mereka.

Langkah Yang Harus Dilakukan Sebelum Menghapus Css Variable
  1. Setting warna, jenis fonts dan lebar template hingga kamu benar-benar yakin tidak akan merubahnya lagi.
  2. Backup/Cadangkan Template untuk menghindari kesalahan.

Cara Menghapus CSS Variable Dari Template Blogger

  1. Buka halaman beranda situs blog melalui browser chrome
  2. Klik Ctrl + U untuk melihat "source" halaman situs atau buka url situs dengan awalan view-source: contoh: view-source:www.domain.com
  3. Copy semua css yang berada dalam tag <style id='page-skin-1' type='text/css'><!-- dan --></style> pada halaman view-source kecuali bagian css variable.
  4. Selanjutnya masuk ke blogger > Template > Edit HTML
  5. Kemudian hapus semua css yang berada dalam tag <b:skin><![CDATA[ dan ]]></b:skin> termasuk css variable juga dihapus.
  6. Pastekan css yang dicopy melalui source halaman untuk menggantikan css yang sebelumnya.
Lihat contoh gambar dibawah ini;
Halaman view-source url sejatinya kita gunakan untuk memparse css yang sebelumnya misalnya .btn:hover{background-color:$(keycolor)} diparse menjadi .btn:hover{background-color:#009678} sehingga kita tidak memerlukan lagi css variable di template situs.

Terakhir save template dan lihat situs anda, apakah ada material yang rusak atau tidak, saya sudah menguji trik ini (menghapus css variable dari template blog) dan berhasil tanpa merusak tampilan apa pun disitus saya, demo; borisinil.blogspot.com, kamu dapat melihat mulai dari tampilan hingga fungsi widget tidak ada yang rusak.

Setelah menghapus css variable, kamu tidak bisa lagi merubah tampilan situs, jenis fonts dan lebar template melalui fitur theme designer dari tata letak, semua pengeditan mendatang harus dilakukan melalui edit html. Tapi setidaknya template akan semakin ringan dengan mengurangi jumlah css unused seperti css variable (group description stylesheet).

Tips: Sebelum menghapus css variable tentukan jenis font situs dan pastikan font yang dipilih sudah di instal di dalam template, Misal; Jenis font heading situs anda adalah Oswald, maka silahkan menginstal google fonts oswald terlebih dahulu di dalam html template situs.

Contoh:
[code type="CSS"]<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet'/>[/code]
atau
[code type="CSS"]<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
</style>[/code]
Bisa juga menggunakan teknik loadcss untuk mengatasi render blocking css bundles, Perlu diingat bahwa terlalu banyak menggunakan variasi font maka situs akan semakin berat meskipun sudah menghapus css variable dan loadcss. Demikian saja semoga bermanfaat dan sampai jumpa kemabli.

Penulis
- Oktober 13, 2019
Cara Install Google Font Ke Template Blog - Font atau huruf yang digunakan pada sebuah laman web sangat mempengaruhi tingkat ke popularan situs web tersebut, penggunaan jenis font dan besar kecil ukuran font yang kurang tepat dapat membuat minat pembaca hilang secara tiba-tiba. ideal nya ukuran font yang membuat nyaman pembaca adalah 15px sampai 17 px, sedangkan jenis font yang ideal untuk situs web/blog adalah open sans, arial reguler, raleway dan masih banyak lagi, namun intinya pilihlah font yang umum rapi dan ringan, sehingga tidak mengejutkan mata pembaca dan memberatkan loading situs.

Bagaimana Cara Mengganti Jenis Huruf (font) Pada Template Blog?

Login ke blogger, klik template > klik tingkat lanjut, kamu bisa memilih font header, font laman atau content yang sudah tersedia disitu. Namun saya tidak membahas itu lebih jauh karena saya rasa semua paham kalau memilih font dari pengaturan template.

Tapi bagaimana jika ternyata kita tidak menemukan jenis font yang sesuai dengan yang kita inginkan di pengaturan template tersebut, maka solusinya kita bisa menggunakan google font dengan cara menginstalnya langsung ke template blog. Google memiliki banyak jenis-jenis font yang bagus di google font, mungkin ratusan atau 300 jenis font bahkan mungkin lebih dari itu, saya tidak pernah menghitung nya.

Memilih Jenis dan Mengambil Kode Font

  1. Kunjungi https://fonts.google.com untuk memilih font
  2. Setelah menemukan jenis font yang tepat, klick tanda +,
  3. Setting sedikit pada jendela yang muncul seperti gambar di bawah ini.
Cara Install Google Font Ke Template Blog
Memilih jenis dan ukuran font
Keterangan Gambar:
  • Pada tab costumize pilih regular 400 dan bold 700, itu merupakan merupakan ukuran ketebalan font {font-weight: nilai_font;} yang paling umum, perhatikan juga indikator hijau pada gambar, itu merupakan tanda aman atau nilai kecepatan loading (pemuatan font) tersebut. jika kita memilih 3 ukuran ketebalan font misal 400,700, dan 800 maka indikator hijau biasanya berubah jadi kuning atau merah, memberi tanda bahwa memilih 3 ukuran font akan membuat loading (pemuatan) font lebih berat.
  • Tab-Embed, Copy kedua kode yang di berikan google font, simpan di notepad atau catatan untuk sementara.

Cara Memasang Google Font ke HTML Template

  1. Login ke Dashboard Blogger > klick Template > Edit Html
  2. Cari kode penutup tag-heading yaitu </head> dan pastekan kode google font tepat di atas kode </head> kemudian save template.
Lihat contoh di bawah ini.
[code type="HTML"]<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>[/code]
Catatan: Proses pemasangan google font ke html template belum selesai, jika pada saat menyimpannya ternyata terjadi error (template kita tidak bisa menyimpan kode google font) tersebut, maka ubah kode google font tersebut menjadi seperti berikut ini.
[code type="HTML"]<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet'/>[/code]
Perhatikan perbedaannya ada dibagian ujung kode yaitu; penambahan string di sebelum penutup tag />.
Selanjutnya simpan kode google font tepat di atas tag </head> seperti yang telah dijelaskan diatas, Setelah kode google font tersimpan, maka langkah selanjut-nya tinggal menyeting css elemen yang di targetkan misalnya elemen p atau paragraf contoh: p{font-family: 'Raleway', sans-serif;}
Masukkan kode css google tepat di atas kode ]]></b:skin> dengan format seperti di bawah ini.
[code type="CSS"]p {
  font-family: 'Raleway', sans-serif;
}[/code]
Huruf "p" berarti paragraf, maka css di atas meminta "tampilkan semua paragaf text dengn font raleway". sedangkan fungsi sans-serif; adalah font cadangan, jika jaringan internet sedang tidak bagus maka font raleway akan di gantikan dengan sans-serif untuk pemuatan (loading) yang lebih singkat.

Selain dengan format seperti di atas, css google font juga bisa di pasang dengan format seperti contoh berikut ini;
[code type="CSS"].post-body {
  font-family: 'Raleway', sans-serif;
}[/code]
Kode .post-body adalah class name atau id target untuk laman artikel, jadi semua yang di dalam laman artikel akan dimuat dengan tampilan huruf (font) raleway. Supaya artikel ini lebih panjang lagi, maka saya kasi contoh lagi yaitu memasang css google font dengan format seperti berikut ini;
[code type="CSS"].post-body,.post-tittle,.popular-post {
  font-family: 'Raleway', sans-serif;
}[/code]
Css tersebut artinya meminta judul artikel, laman artikel, dan post popular di tampilkan dengan jenis huruf raleway.

Penting: kode .post-body, .post-tittle dan .popular-post merupakan "id" element yang umum pada template blogger, lakukan inspect element untuk mengetahui "id atau class name" setiap element template anda, awali dengan memberi tanda titik di belakang name class dan pisahkan masing-masing name class dengan tanda koma, seperti terlihat pada contoh css diatas, tambahkan font-size untuk mengatur ukuran font dan font-weight untuk berat atau bobot font seperti contoh berikut;
[code type="CSS"].post-body atau body{font:normal normal 17px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:1.42857143;color:#616161;font-weight:400;}[/code]
font-weight:400; merupakan bobot font normal dan font-weight:700; merupakan bobot font bold atau tebal, saya fikir cukup sekian penjelasan saya mengenai cara memasang google font ke template blogger semoga dapat membantu anda menyelelesaikan maslah font web.

Penulis
- Oktober 13, 2019
WebFontConfig: Mengatasi Render Blocking Bundle CSS Fonts - Pada artikel sebelumnya saya telah mengulas beberapa trik-trik blogging yang membahas tentang bundling css seperti Google Fonts API dan Font Awesome.

Mungkin kamu telah melewatkan-nya jadi silahkan baca disini dan pada artikel ini saya akan kembali menjelaskan hal yang hampir serupa yaitu mengatasi bundling css fonts dengan metode yang berbeda agar teman-teman blogger mendapatkan lebih banyak referensi mengenai cara menghilangkan bundling css tersebut.

Dalam istilah lain WebFontConfig mungkin lebih akrab dikenal dengan WebFont Loader yaitu teknik memuat file css tanpa menyertakan sumber-nya, Cara kerja script WebFontConfig ini juga tidak jauh berbeda dengan script loadcss namun di beberapa hal WebFontConfig mungkin sedikit lebih unggul untuk pengoptimalan speed (Web Performance).

Kelebihan WebFontConfig
  1. WebFontConfig atau WebFont Loader adalah bagian dari Google Hosted Libraries, yang merupakan jaringan distribusi konten untuk perpustakaan JavaScript open-source Google Developers.
  2. Menyajikan durasi cache yang lebih lama dan memangkas waktu pemuatan (loading) yang lebih pendek.
  3. Mudah di gunakan dan sangat membantu dalam pengoptimalan (Optimasi PageSpeed Insights)
  4. Support di banyak browser (hampir semua versi browser)

Script WebFont Configuration

<script type='text/javascript'>
//<![CDATA[
WebFontConfig={custom:{families:["FontAwesome"],urls:["https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"]},google:{families:["Roboto:400,700,300:latin","Oswald:400,700:latin"]}},function(){var t=document.createElement("script");t.src=("https:"==document.location.protocol?"https":"http")+"://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js",t.type="text/javascript",t.async="true";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
//]]>
</script>
Tempatkan script WebFontConfig diantara tag <head> dan </head> kemudian ganti sumber css "//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" dengan sumber librarie css yang telah ada disitus anda, jangan lupa sesuaikan juga jenis font "Roboto, Oswald" dengan font web anda.

Jika situs anda menggunakan banyak jenis font, kamu dapat menambahkan sedikit modifikasi script pada bagian "google:{families:["Roboto:400,700,300:latin","Oswald:400,700:latin"]}" menjadi;
[code type="CSS"]example:
google:{families:["Aclonica","Acme","Alegreya"]}[/code]
Artikel ini merupakan jawaban sekaligus solusi untuk cara asynchronously css external, analisa saya mengenai ini "asynchronously css external"  dengan script WebFontConfig, mendapatkan hasil "performa" yang lebih baik dibandingkan dengan internalisasi css. Semoga bermanfaat dan sampai jumpa kembali.
x