Niko

Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu...

Apa itu Minify CSS? Secara gamblang minify css adalah tindakan mengompres css dari size asli ke size yang lebih kecil. Tetapi dalam praktik minify css yang sebenarnya minify css tidak hanya sekedar mengkonversi size asli file css ke ukuran yang lebih kecil saja melainkan minify css juga merupakan tindakan merubah pengaturan optional css beberapa objek (elemen individu) di situs web ke pengaturan css secara global atau group. Untuk memahami minify css secara nyata lihat ilustrasi yang di contohkan dibawah ini: Style css pada objek atau elemen html individual #header-wrapper .container{ background-color:#000000; color:#fffff; position:relative; margin:0 auto; } #footer-wrapper{ background-color:#000000; color:#ffffff; } #main-menu{ background-color:#000000; color:#ffffff; } [ads id="ads1"] Coba perhatikan dan pahami dengan baik style css pada elemen individu yang di contohkan diatas, itu merupakan pemborosan karakter dan perintah kepada browser ( css not minified ). Sehar...

Salah satu penyebab loading situs web menjadi lambat adalah terlalu banyak duplikat css atau di sebut juga dengan unused css (stylesheet yang tidak digunakan), pada dasarnya situs web tidak lepas dari yang namanya duplicate css rules (adalah pengaturan stylesheet yang serupa dan yang saling berlawanan). Untuk lepas dari duplicate css (unused css duplicate) di butuhkan keahlian dan kerja keras yang sangat ekstra. Bahkan itu mungkin tidak cukup untuk menangani permaslahan unused css, tetapi jika mau bersabar duplicate css rules tentu bisa diminimalisir hingga tidak mempengaruhi pemuatan atau loading situs web. Untuk melakukan tugas itu ( mengurangi semaksimal mungkin unused css type duplicate css rules ) kita harus benar-benar paham seperti apa css duplikat yang ada di dalam website. Nah, untuk memahaminya (duplicate css rules), saya akan mengilustrasikan dengan contoh dan penjelasan seperti berikut ini: body{ background:#fff; font-family:'Roboto',sans-serif; font-size:16px; ...

Ketika mengaudit website menggunakan webtool lighthouse seperti PageSpeed Insights dan Web.dev Measure , mungkin kita akan melihat beberapa kesalahan pada hasil audit yang ditampilkan, salah satunya adalah " Ensure text remains visible during webfont load " yaitu rekomendasi untuk memastikan teks tetap terlihat selama pemuatan font web dengan menggunakan fitur CSS font-display optional untuk memastikan teks terlihat oleh pengguna saat font web dimuat. Sebenarnya ada cara yang lebih efektif untuk untuk mengatasi permasalahan pemuatan font (Ensure text remains visible during webfont load). Tapi sebelum saya jelaskan lebih detail mari kita simak penjelasan berikut: Font atau webfont  merupakan file besar pada website, umumnya webfont membutuhkan waktu pemuatan (load) yang lama. Oleh karena itu beberapa browser memanipulasi pemuatan font dengan menyembunyikan teks sampai font selesai dimuat sehingga menyebabkan FOIT (flash of unstyled text) pada halaman web atau dalam bahasa ...