Kecepatan sebuah situs web atau blog dipengaruhi oleh banyak hal. Tapi yang peling berpengaruh pastinya berasal dari kode di dalam template yang tidak ditulis dengan benar.
Contohnya saja pada template Median UI versi 1.6. Di dalamnya terdapat kode yang tidak begitu penting dimasukkan tapi cukup memperberat kinerja blog.
Selain itu, ada juga Javascript yang berasal dari luar blog yang memblokir perenderan halaman sehingga menunda konten penting tampil lebih awal.
Oleh sebab itu, berikut saya jabarkan tutorial bagaimana cara memperbaiki kecepatan Median UI v1.6 agar mendapat nilai 100 pada pengukuran web.dev dan PageSpeed Insight
Cara Meningkatkan Skor Performance Median UI 1.6
Untuk menaikkan kecepatan Blog, ada dua hal yang harus kita lakukan, yaitu:
1. Menghapus Kode Font Bawaan
- Buka Dashboard Blogger
- Klik Tema
- Tekan icon Segitiga Terbalik
- Pilih Edit HTML
- Cari kode /* Font Body and Heading */
- Lalu hapus semua kode CSS ini/* Font Body and Heading */ @font-face{font-family: 'Noto Sans';font-style: italic;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/notosans/v11/o-0OIpQlx3QUlC5A4PNr4ARMQ_m87A.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0OIpQlx3QUlC5A4PNr4DRG.woff) format('woff')} @font-face{font-family: 'Noto Sans';font-style: italic;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/notosans/v11/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0TIpQlx3QUlC5A4PNr4Az5ZtyH.woff) format('woff')} @font-face{font-family: 'Noto Sans';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/notosans/v11/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0IIpQlx3QUlC5A4PNb4Q.woff) format('woff')} @font-face{font-family: 'Noto Sans';font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFlYA.woff) format('woff')}/* Source Code Font */ @font-face {font-family: 'Fira Mono';font-style: normal;font-weight: 400;font-display: swap;src: local('Fira Mono Regular'), local('FiraMono-Regular'), url(https://fonts.gstatic.com/s/firamono/v9/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'), url(https://fonts.gstatic.com/s/firamono/v9/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2')}
- Lanjut ke langkah berikutnya
2. Memperbaiki Kode Pelacak Google Analytics
- Cari kode ini <b:if cond='data:blog.analyticsAccountNumber'>
- Maka kalian akan menemukan kode seperti ini<b:if cond='data:blog.analyticsAccountNumber'><!--[ Google Analytics new global tag ]--><script>function downloadJSAtOnload(){var d=document.createElement('script');d.src='https://www.googletagmanager.com/gtag/js?id=<data:blog.analyticsAccountNumber/>',document.body.appendChild(d)}window.addEventListener?window.addEventListener('load',downloadJSAtOnload,!1):window.attachEvent?window.attachEvent('onload',downloadJSAtOnload):window.onload=downloadJSAtOnload; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '<data:blog.analyticsAccountNumber/>');</script></b:if>
- Ganti kode di atas dengan kode berikut<b:if cond='data:blog.analyticsAccountNumber'><!--[ Google Analytics new global tag ]--><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '<data:blog.analyticsAccountNumber/>');</script></b:if>
- Kemudian cari kode </body>
- Letakkan kode Javascript berikut tepat di atasnya<!--[ Lazy Load Google Analytics by Saifullah.id ]--><script type='text/javascript'>//<![CDATA[// Lazy Load Saifullahvar LLJSaiful=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===LLJSaiful||0!=document.body.scrollTop&&!1===LLJSaiful)&&(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=<data:blog.analyticsAccountNumber/>";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LLJSaiful=!0)},!0);var LLJSaiful=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===LLJSaiful||0!=document.body.scrollTop&&!1===LLJSaiful)&&(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://connect.facebook.net/id_ID/all.js#xfbml=1";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LLJSaiful=!0)},!0);//]]></script>
- Simpan Tema
3. Jangan Lupa Memasukkan Kode Pelacak
- Buka Blogger
- Pilih Setelan
- Cari ID Properti Google Analytics
- Masukkan kode pelacak di sini, contoh: UA-123456789-1
4. Lalu Bagaimana Cara Memasukkan Kode Google Analytics versi GA4?
Jika kalian sudah mengupgrade akun Google Analytic ke versi terbaru, Analytics GA4, maka kode pelacaknya berbeda dengan Analytics Universal. Kode pelacaknya tidak bisa dimasukkan di dalam Setelan, Tapi kode tersebut harus langsung di masukkan ke dalam template. Untuk tutorialnya, mungkin akan saya bahas di postingan berikutnya.
Jika kalian kebingungan dan mengalami masalah dalam menerapkan tutorial di atas, kalian bisa memesan jasa kami di sini atau jika ingin melihat demo Median UI 1.6 cek di sini
Setelah mengikuti tutorial di atas, jangan lupa mengecek kecepatan Blog menggunakan web.dev. Ingat, pada saat memasukkan alamat URL ditambah kode /?m=1 diujungnya. Misalnya https://www.saifullah.id/?m=1
Kalau kalian tidak menambahkan kode tersebut, biasanya akan muncul peringatan redirect link. Peringatan ini muncul karena kita menggunakan platform Blogger dan hal ini terjadi setelah PageSpeed Insight melakukan update fiturnya dibulan kemarin.
Lakukan pengecekan sebanyak dua kali karena terkadang pengecekan pertama robot google masih mendeteksi cache pada template sebelum diubah, sedangkan pengecekkan kedua baru mendeteksi template yang yang sudah kita ubah. Semoga bermanfaat.