🔔 Aktifkan notifikasi disini Google News

Tutorial Cara Mempercepat Loading Pada Template Median UI

Bagas Arie
Meskipun template Median UI merupakan template Berbayar, tetapi tidak menutup kemungkinan masih terdapat kekurangan dan kelemahan yang harus kita

Selamat Malam sahabat rizky blog, berjumpa lagi di blog yang sama dalam kesempatan kali ini admin akan membagikan Tutorial Cara Mempercepat Loading Pada Template Median UI.

Meskipun template Median UI merupakan template Berbayar, tetapi tidak menutup kemungkinan masih terdapat kekurangan dan kelemahan yang harus kita perbaiki agar menjadi template yang sempurna . Namanya juga buatan manusia, ya maklumlah ya.

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

Tutorial Cara Mempercepat Loading Pada Template Median UI

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

A. Memperbaiki Lazyload Pada Gambar

Admin agak heran dengan pembuat template Median UI ini, karena beliau menyisipkan script Lazy load atau Lazysize tapi hanya difungsikan untuk memuat halaman baru saja dan memuat gambar artikel terkait relatedpost saja. Ibarat mau mempercepat loading, tapi cuma 40%, alias setengah hati. Oleh sebab itu mari kita memodifikasi templatenya agar full speed sampai Scorenya 100%.

  • Buka Dashboard Blogger
  • Klik Tema
  • Tekan icon Segitiga Terbalik
  • Pilih Edit HTML
  • Tekan Ctrl + F
  • Cari kata lazysizes
  • Letakkan kode rizkyLazyLoad di atas kode lazysizes

function rizkyLazyLoad(){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:

Lalu cari kata “lazy” dan ubah menjadi “lazi”. Ingat hanya ubah kata ini di bagian tertentu saja ya sobat.

  • Cari kode /*! lazysizes lalu ubah seperti gambar

  • Cari kode lalu ubah seperti gambar
  • Cari kode lalu ubah seperti gambar
  • Cari kode lalu ubah seperti gambar
  • Cari kode lalu ubah seperti gambar
  • Cari kode lalu ubah seperti gambar

B. Memperbaiki javascript Google Analytic

Javascript Google Tag Manager adalah berfungsi untuk memonitor trafik melalui Google Analytic pada template Median UI ternyata mempengaruhi kecepatan loading blog yang signifikan. Maka dari itu, sahabat harus menghapus sebagian kodenya, lalu memodifikasinya agar tetap berfungsi tapi tidak memperberat kinerja pada blognya.
  • Cara Mempercepat Kode Google Analytic
  • Cari kode lalu hapus 1 baris kode yang ada di bawahnya

Cari kode lalu letakkan kode berikut ini tepat di atas
<script type='text/javascript'>//<![CDATA[
var LLJRizkyblog=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&LLJSaifullahid===!1||0!=document.body.scrollTop&&LLJRizkyblog===!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)}(),LLJRizkyblog=!0)},!0);
//]]></script>
C. Mengganti Font Bawaan Ke Font Google secara defalut
Font bawaan di template Median UI ini ternyata 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 saja font Median UI dengan font yang lebih simpel tapi umum digunakan Google.

Cara Mengganti Font Median UI

Cari kode /* Font Body */ lalu hapus semua kode yang ditunjuk tanda panah
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}

Simpan Tema

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

Jika sahabat masih kebingungan dan mengalami masalah dalam menerapkan tutorial di atas, kalian bisa memesan jasa mempercepat loading Blognya ya.

Demikian Tutorial Cara Mempercepat Loading Pada Template Median UI yang dapat kami sampaikan, semoga bermanfaat ya sahabat.

Terima kasih sudah berkunjung, apabila artikel “Tutorial Cara Mempercepat Loading Pada Template Median UI” ini bermanfaat, Dibantu SHARE kepada teman-teman yang lain.

Mau donasi lewat mana?

BCA - Rizky Kharisma Negari (0097107746)

Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.

Post a Comment

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😥😪😭😱🤭😇🤲🙏👈👉👆👇👌👍❤🤦‍♂️❌✅⭐
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode


  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.
AdBlock Detected!
Kakak pakai plugin pemblokir iklan ya? Tolong kecualikan website ini dalam pemblokiran ya. Karena kami butuh penghasilan dari iklan untuk terus mengelola website ini agar bisa update artikel bermanfaat. Makasih ya 😊
Site is Blocked
Sorry! This site is not available in your country.