Defer Loading File CSS untuk Mengurangi Waktu Pemuatan Halaman CSS HTML menunda pemuatan tombol media sosial Taruh kode kode pilih salah satu diatas tag
programming
javascript
,
wordpress
,
blogger
,
blogging
,
html
Waktu buka halaman adalah salah satu hal penting bagi pengunjung Anda, dan sama pentingnya bagi mesin telusur. Saat menyertakan beberapa file JavaScript dan CSS , browser harus menunggu sampai semua file tersebut telah diunduh untuk merender halaman.
Bergantung pada kecepatan koneksi, diperlukan beberapa detik untuk memuat semua sumber dan pengunjung harus menganggur sampai saat itu.
Teknik yang kita bahas di sini akan memungkinkan browser untuk menampilkan halaman HTML awalnya tanpa gaya apapun, sehingga pengunjung setidaknya bisa mulai membaca isinya. Begitu halaman di-load, style sheet akan dimuat dan diterapkan tanpa memblokir thread utama. Ini mirip dengan menunda pemuatan tombol media sosial .
Anda mungkin berpikir mengapa seseorang harus mengekspos tampilan halaman yang jelek tanpa memuat gaya! Itu benar, meski itu akan membuat kesan buruk. Jadi, pendekatan terbaik bisa termasuk kode CSS kritis yang diperlukan untuk memberi gaya pada konten paruh atas di halaman HTML itu sendiri (di bawah bagian kepala halaman web), dan memuat file non-kritis atau besar dengan menggunakan metode di bawah ini.
Taruh kode kode (pilih salah satu) diatas </body> tag
Async CSS Loading
Kami dapat menggunakan fungsi JavaScript sederhana untuk menyelesaikan tujuan kami.Berikut adalah contoh untuk memuat satu lembar gaya setelah halaman dimuat.<script>
//define function to load css
var loadCss = function(){
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = 'myawesomestyle.css';
var head = document.getElementsByTagName('head')[0];
head.parentNode.insertBefore(cssLink, head);
};
//call function on window load
window.addEventListener('load', loadCss);
</script>
Memuat Beberapa Stylesheets
Untuk memudahkan, kita akan parameterize fungsi loadCss untuk menerima pathfile. Dan kemudian, kita akan menentukan fungsi induk kita yang akan
memanggil fungsi di atas secara berulang untuk setiap file tunggal.
<script>Sebelum dan sesudah menerapkan tweak ini, bandingkan skor kecepatan halaman Anda. Jika Anda menghadapi masalah dalam menerapkan ini, lakukan posting di komentar. Saya akan mencoba membalas
var loadMultipleCss = function(){
//load local stylesheet
loadCss('myawesomestyle.css');
//load Bootstrap from CDN
loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
//load Bootstrap theme from CDN
loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
}
var loadCss = function(cssPath){
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = cssPath;
var head = document.getElementsByTagName('head')[0];
head.parentNode.insertBefore(cssLink, head);
};
//call function on window load
window.addEventListener('load', loadMultipleCss);
</script>