🔔 Aktifkan notifikasi disini Google News

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 kemungkinan 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 lazy load 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 Lazy load 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?
Jika kalian kebingungan dan mengalami masalah dalam menerapkan tutorial di atas, kalian bisa memesan jasa mempercepat loading Blog.

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
PT Saifullah Digital Advantec

31 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. mantap mas tambah lagi dong buat tutorial median ui
    1. Ok mas. Masih ada beberapa tutorial yang berhubungan dengan Median UI yang belum saya tulis. Silakan tunggu update berikutnya.

      O,ya kalau ada keluhan atau ingin tau cara mengubah beberapa widget di Median UI bisa langsung sampaikan juga mas. Nanti saya buatkan tutorialnya.
  2. Mas, saya baru beli theme Median UI, pas dipasang kok di atas header ada tanda panah --> ya?
    Udah otak-atik tapi masih gagal.
    Terus headernya ga ada garis kalo dibuka di mobile.
    Mohon tutornya mas.
    1. Tutorialnya ada di postingan ini mas https://www.saifullah.id/2020/08/blogger-update-lagi-muncul-tanda--diatas-blog.html
  3. Bang biar tampilan home median ui v1.5 mirip v1.4 gimana bang,soalnya v1.5 tampilan homenya kurang rapih.
    1. Mau buat tampilan kayak kartu gitu kan? Maksudnya mirip punya saya ada kotak dan bayangan gt kan? nanti saya buatkan tutorialnya.
    2. iya gan,kaya yang punya agan,sama css bug gambar gan mohon di share cara mengatasinya.
    3. Ok siap.
  4. Bang itu kata lazy yg diubah apa cuma 2saja seperti di gambar atau semua, soalnya saya cari ada 91hasil?
    1. Cuma 10 bagian aja yang diubah sesuai yang saya tunjuk di gambar pakai tanda panah
  5. Bang kenapa yah pas sudah saya lakukan semua tutorial nya ketika saya buka post tombol share versi mobile tidak bekerja?
    1. Kayaknya ada yang salah edit tu, soalnya kalau ikut tutorialnya dengan teliti, akan sama seperti punya saya.
  6. terimakasih lazyload nya mas
    1. Sama-sama mas.
  7. Saya baru sadar kalau lazyload adsense saya ga aktif padahal ada kode lazyload di dalam templatenya 🤔 ada tutorialnya kah min?
    1. Lazy load itu ada khusus untuk gambar, ada khusus untuk Adsense, tutorialnya Klik Disini
  8. Hanya sekedar saran. Kalo script font jangan di hapus. Jika tidak percaya lihat di beberapa browser, contohnya di Mi Browser. Semua text pada postingan anda akan menjadi Bold.
    1. Terima kasih atas sarannya. Tapi saya sudah cek di semua browser termasuk Mi Browser. Semuanya normal saja. Coba kirim screenshotnya kak. Soalnya tidak mungkin font Google tidak berfungsi di perangkat terbaru, terkecuali kk bukanya pakai Hp atau Browser yang udah lawas banget.
    2. Iya mas, ternyata hanya di mi browser versi lawas. Setelah di update, berjalan normal.
  9. Makasih mas tutornya
    1. Sama²
  10. bang buatin buat yang v1.6nya
    1. Ok, ditunggu updatenya aja ya
  11. cara install pwa di blogger gimana mas?
    1. Pakai manifest.json yang di hosting di Github dan Cloudflare
    2. oke gan thx btw cepet banget respon nya
    3. Sama-sama
  12. kenapa thumbnail artikel terkait jadi tidak muncul bang?
    1. Thumbnail artikel terkait gak muncul biasanya akibat kurang teliti dalam mengedit kode "lazy" dan "lazi"
  13. Ilmu Internet
    Komentar ini telah dihapus oleh pengarang.
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.