Cara Memasang Lazy Load CSS

Assalamualaikum, Dalam kesempatan ini saya akan kongsikan tutorial untuk cara memasang lazy load CSS untuk mempercepatkan loading website anda, Tutorial ini bukan hanya untuk blogger, ia juga berfungsi di mana mana website yang menggunakan html,java,php etc.

Apa itu lazy load?
Lazyload adalah istilah yang diberikan oleh pemaju untuk skrip / kod yang dilaksanakan pada akhir selepas halaman dimuatkan. Perkataan "Lazy" sendiri bermaksud malas, menggambarkan kerja yang dilakukan lazily dan biasanya dilakukan pada akhir. Dalam pengaturcaraan, terutamanya reka bentuk web, memasang kod Lazyload mempunyai banyak faedah, ia lebih disyorkan kerana sangat berguna untuk kelajuan memuatkan halaman. Jadi laman web ini tidak terlalu berat ketika memuatkan pada mulanya. Lazyload boleh menambah pengalaman pengguna (UX), mempercepat laman web dan skor Gt-metrix hijau atau wawasan halamanpeed, dan menambah nilai pada halaman SEO.

Namun hari ini saya cuma akan kongsikan code untuk lazy load CSS, Code yang lainya seperti lazyload image, Lazyload Adsense tlah saya kongsikan sebelum ini, Anda bole cari dengan menggunakan search box yang tersedia.

Baikla kita teruskan sahaja ke pemasangan lazyload CSS ini.

Lazyload CSS

Lazyload CSS ini biasanya digunakan untuk kode css yang dibuat dalam satu file yang dihost dan di tambahkan dengan tag <link> sebagai eksternal CSS. Untuk kode lazyloadnya menggunakan kode Javascript

berikut ini:

function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),S=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",S.parentNode.insertBefore(o,S),setTimeout(function(){o.media=n||"all"})}loadCSS("URL_CSS_1"),loadCSS("URL_CSS_2"),loadCSS("URL_CSS_3");

Gantikan URL_CSS_1,URL_CSS_2 dan URL_CSS_3 sesuai link css anda.

Lazyload CSS biasanya digunakan untuk CSS eksternal dengan ukuran file CSS tidak lebih 100Kb seperti Font Awesome dan Font dari Google Font. Karena jika kita memasang lazyload pada file CSS berukuran besar seperti Librari CSS Bootstrap, Zurb Foundation, dan lainnya biasanya akan menemui eror pada styling ataupun kode yang terintegrasi.