-->
////Mempercepat loading template Median UI dengan memperbaiki script Lazyload Image

Mempercepat loading template Median UI dengan memperbaiki script Lazyload Image


Template median UI adalah merupakan template blogger premium alias berbayar, namun sayangnya template ini memiliki beberapa kelemahan salah satunya terdapat pada Lazyload Image nya yang kurang berfungsi dengan baik.

Oleh karena itu, di sini saya akan memberikan pembahasan tentang bagaimana cara mempercepat loading Template Median UI, dengan memperbaiki script Lazyload Image nya.

Apa itu Lazyload Image?

Buat yang belum tahu apa itu Lazyload Image, intinya Lazyload Image adalah sebuah script yang dapat menunda pemuatan image atau gambar, dan akan tampil ketika user melakukan aksi scroll.

Manfa'at menggunakan Lazyload Image

Tujuan utama tentunya adalah menaikkan skor page speed walaupun pada kenyataannya jika pengguna sudah melakukan aksi scrolling blog akan menjadi berat kembali, tetapi tools page speed tidak melakukan scroll ketika menilai, sehingga hal ini dapat membuat skor page speed menjadi lebih baik.

Cara memperbaiki script Lazyload Image template Median UI

Sebenarnya saya juga kurang paham apakah cara ini untuk memperbaiki atau mengganti script Lazyload yang telah ada, tetapi yang pasti cara ini saya jamin berhasil, contohnya seperti situs saya ini.

  1. Silahkan anda buka Dashboard blogger anda
  2. Klik menu Tema dan tekan tanda panah ke bawah pada sebelah tombol "Sesuaikan"
  3. Pilih Edit html
    Edit html
  4. Pada keyboard tekan Ctrl + F untuk memunculkan papan penelusuran

    Jika pada handphone tidak bisa, silahkan download terlebih dahulu keyboard yang terdapat tombol Ctrl + F atau bisa juga cari secara manual.
  5. Lalu carilah kata "lazysizes - v5.3.0 by github.com/aFarkas" jika tidak ada ketik saja "lazysizes"
  6. Silahkan Copy dan Paste code ini di atasnya
    function saifulLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|saifulLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
  7. Jika sudah silahkan cari dan ikuti panduan berikut :
    1. Pada bagian ini
    /*! lazysizes unveilhooks - v5.3.0 */
    Ubah dua kode berikut:

    var e;var t={lazyClass:"    lazy
    // Ubah menjadi
    var e;var t={lazyClass:"    lazi

    (t.loading=="    lazy")
    // Ubah menjadi
    (t.loading=="    lazi")

    2. Pada bagian ini
    <!--[ Post authors ]-->
    Ubah tiga kode berikut:

    <div class='authorImg     lazy
    // Ubah menjadi
    <div class='authorImg     lazi

    <a aria-label="'+w+'" href="'+v+'"><div class="    lazy
    // Ubah menjadi
    <a aria-label="'+w+'" href="'+v+'"><div class="    lazi

    <a aria-label="'+w+'" href="'+v+'"><div class="    lazy
    // Ubah menjadi
    <a aria-label="'+w+'" href="'+v+'"><div class="    lazi


    3. Pada bagian ini
    <b:includable id='postAuthorImage'>
    Ubah dua kode berikut:

    <div class='authorImage     lazy
    // Ubah menjadi
    <div class='authorImage lazi
    <div class='authorImage lazy
    // Ubah menjadi
    <div class='authorImage lazi


    4. Pada bagian ini
    <b:includable id='authorProfileImage'>
    Ubah satu kode berikut:

    <div class='profileImg lazy
    // Ubah menjadi
    <div class='profileImg lazi

    5. Pada bagian ini
    <b:if cond='data:cb.level.authorAvatarSrc'>
    Ubah satu kode berikut:

    <div class='lazy
    // Ubah menjadi
    <div class='lazi

    6. Pada bagian ini
    <!--[ Preview post ]-->
    Ubah satu kode berikut:

    <div class='previewImg lazy
    // Ubah menjadi
    <div class='previewImg lazi
  8. Setelah semua kode di pasang silahkan klik Icon Save yang ada pada kanan atas layar.

Untuk membuktikan apakah script Lazyload Image nya berjalan atau tidak, silahkan anda buka halaman homepage yang baru saja di pasang kan scriptnya, jika sudah berada dalam homepage jangan melakukan scroll dan jika gambar tidak tampil silahkan anda scroll, jika gambar tampil maka scriptnya berhasil bekerja.

Referensi:
www.saifullah.id

Admininistrator 9/12/2021 Tags: Median UI, Theme, Tutorial

LihatTutupKomentar