Cara Mempercepat Loading Template Median UI

Cara Mempercepat Loading Template Median UI
Saifullah.id
- Meskipun template Median UI adalah template Premium (Berbayar), namun tidak menutup kemungkin masih terdapat kekurangan dan kelemahan yang harus kita perbaiki agar menjadi template yang sempurna. Namanya juga buatan manusia, maklumlah ya.

Beberapa waktu lalu saya sudah menjabarkan beberapa kekurangan atau bugs yang terdapat pada template Median UI (cek di sini). Salah satu masalah yang ada di Median UI terdapat pada lazyload yang tidak berfungsi maksimal. Hal ini berpengaruh pada kecepatan loading template.

Untuk itu, berikut saya hadirkan solusi untuk menaikkan skor kecepatan template Median UI. Tapi sebelum mengikuti tutorial ini, mohon cek kecepatan blog kalian dulu melalui situs Measure (web.dev)GTmetrix, dan PageSpeed Insights (google.com). Setelah itu Screenshot score dan peringatan kesalahan yang muncul.

Cara Mempercepat Template Median UI

A. Memperbaiki Lazyload Gambar

Saya agak heran dengan pembuat template Median UI, karena beliau menyisipkan script Lazyload atau Lazysize tapi hanya difungsikan untuk memuat halaman baru dan memuat gambar artikel terkait (relatedpost). Ibarat mau mempercepat loading, tapi cuma 50%, alias setengah hati. Oleh sebab itu mari kita modifikasi templatenya agar full speed sampai 100%.
  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Mempercepat Loading Template Median UI

  5. Tekan Ctrl + F
  6. Cari kata lazysizes
  7. Letakkan kode saifulLazyLoad di atas kode lazysizes
    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,{}));

     Hasilnya:

    Cara Mempercepat Loading Template Median UI


  8. Lalu cari kata "lazy" dan ubah menjadi "lazi". Ingat hanya ubah kata ini di bagian tertentu saja ya. 
    1. Cari kode /*! lazysizes lalu ubah seperti gambar
    Cara Mempercepat Loading Template Median UI

    2. Cari kode <!--[ Post authors ]--> lalu ubah seperti gambar
    Cara Mempercepat Loading Template Median UI

    3. Cari kode <b:includable id='postAuthorImage'> lalu ubah seperti gambar
    Cara Mempercepat Loading Template Median UI

    4.Cari kode <b:includable id='authorProfileImage'> lalu ubah seperti gambar
    Cara Mempercepat Loading Template Median UI

    5. Cari kode <b:if cond='data:cb.level.authorAvatarSrc'> lalu ubah seperti gambar
    Cara Mempercepat Loading Template Median UI

    6. Cari kode <!--[ Preview post ]--> lalu ubah seperti gambar
    Cara Mempercepat Loading Template Median UI

B. Memperbaiki javascript Google Analytic

Javascript Google Tag Manager yang berfungsi untuk memonitor trafik melalui Google Analytic pada template Median UI ternyata mempengaruhi kecepatan loading blog yang signifikan. Maka dari itu, kita harus menghapus sebagian kodenya, lalu memodifikasinya agar tetap berfungsi tapi tidak memperberat kinerja blog.

Cara Mempercepat Kode Google Analytic

  1. Cari kode <!--[ Google Analytics new global tag ]--> lalu hapus 1 baris kode yang ada di bawahnya
    Cara Mempercepat Loading Template Median UI

  2. Cari kode </body> lalu letakkan kode berikut ini tepat di atas </body>
    <script type='text/javascript'>//<![CDATA[
    var LLJSaifullahid=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&LLJSaifullahid===!1||0!=document.body.scrollTop&&LLJSaifullahid===!1)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=&quot; + data:blog.analyticsAccountNumber";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LLJSaifullahid=!0)},!0);
    //]]></script>

    Hasilnya:

    Cara Mempercepat Loading Template Median UI

C. Mengganti Font Bawaan Ke Font Google

Font bawaan di template Median UI terlalu berlebihan. Padahal bentuknya tidak jauh beda dengan font dari Google. Kebanyakan jenis font yang digunakan dalam sebuah blog bisa memperlambat kecepatan blog. Oleh sebab itu, lebih baik kita ganti font Median UI dengan font yang lebih simpel tapi umum digunakan Google.

Cara Mengganti Font Median UI

  1. Cari kode /* Font Body */ lalu hapus semua kode yang ditunjuk tanda panah
    Cara Mempercepat Loading Template Median UI

  2. Kemudian ganti dengan kode baru ini
    @font-face { font-family: &#39;Roboto&#39;; font-style: normal; font-weight: 400; src: local(&#39;Roboto Regular&#39;), local(&#39;Roboto-Regular&#39;), url(https://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) format(&#39;woff&#39;);} format(&#39;woff&#39;);}
    html,button,input,select,textarea{font-family:sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;display:block}html{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:&#39;&#39;content:none}table{border-collapse:collapse;border-spacing:0}
  3. Simpan Tema 


Setelah mengikuti tutorial di atas, coba cek ulang score kecepatan blog kalian di situs Measure (web.dev)GTmetrix, dan PageSpeed Insights (google.com), lalu bandingkan dengan score sebelumnya. Bagaimana? Kecepatan naik dan peringatan berkurang kan?