🔔 Aktifkan notifikasi disini Google News

Cara Meningkatkan Nilai Kecepatan Median UI 1.6 (Performance Score)

Cara Meningkatkan Nilai Kecepatan Median UI 1.6 (Performance Score)
Saifulah.id
 - Performance score atau nilai kecepatan loading sebuah website sangat penting untuk diperhatikan. Karena kecepatan pemuatan halaman merupakan salah satu faktor yang mempengaruhi ranking sebuah web di mesin pencarian Google.


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

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Meningkatkan Nilai Kecepatan Median UI 1.6 (Performance Score)

  5. Cari kode /* Font Body and Heading */
  6. 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')}
  7. Lanjut ke langkah berikutnya

2. Memperbaiki Kode Pelacak Google Analytics

  1. Cari kode ini <b:if cond='data:blog.analyticsAccountNumber'>
  2. 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(&#39;script&#39;);d.src=&#39;https://www.googletagmanager.com/gtag/js?id=<data:blog.analyticsAccountNumber/>&#39;,document.body.appendChild(d)}window.addEventListener?window.addEventListener(&#39;load&#39;,downloadJSAtOnload,!1):window.attachEvent?window.attachEvent(&#39;onload&#39;,downloadJSAtOnload):window.onload=downloadJSAtOnload; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(&#39;js&#39;, new Date()); gtag(&#39;config&#39;, &#39;<data:blog.analyticsAccountNumber/>&#39;);</script>
          </b:if>
  3. 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(&#39;js&#39;, new Date()); gtag(&#39;config&#39;, &#39;<data:blog.analyticsAccountNumber/>&#39;);
        </script>
      </b:if>
  4. Kemudian cari kode </body>
  5. Letakkan kode Javascript berikut tepat di atasnya
    <!--[ Lazy Load Google Analytics by Saifullah.id ]-->
    <script type='text/javascript'>//<![CDATA[
    // Lazy Load Saifullah
    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://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>
  6. Simpan Tema

3. Jangan Lupa Memasukkan Kode Pelacak

  1. Buka Blogger
  2. Pilih Setelan
  3. Cari ID Properti Google Analytics
  4. Masukkan kode pelacak di sini, contoh: UA-123456789-1
    Cara Meningkatkan Nilai Kecepatan Median UI 1.6 (Performance Score)

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.

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

17 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Malah berkurang mas
    1. dari 99 jadi 96
    2. 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

      Lakukan pengecekan sebanyak dua kali karena terkadang setelah perubahan kode pada template, pengecekan pertama robot masih mendeteksi cache pada template sebelumnya, sedangkan pengecekan kedua baru pada template yang sudah di ubah.
  2. Kak, kalau perbaiki praktik terbaik sama FCP gimana kak?
    1. Tinggal hapus logo header
  3. Kalau cara perbaiki browser errors were logged to the console gimana kak?

    Sourcenya: /?m=1:1:31.

    SyntaxError: unexpected token 'typeof' .

    Best practices di web dev kurang sekali gara" itu.

    Minta bantuannya kak 🙏
    1. Biasanya peringatan tersebut muncul karena memasukkan Javascript dari luar yang tidak sesuai dengan kaidah penulisan HTML yang baik.

      Solusinya script tersebut harus di hapus atau diubah/modifikasi.
  4. ,63% naik jadi 89% thanks kang,, namun saya masih dpt notif merah, keterangnnya seperti ini: Serve images in next-gen formats, Reduce initial server response time, Serve static assets with an efficient cache policy, Minimize main-thread work, dan, Avoid an excessive DOM size
    1. Serve images in next-gen formats bisa di atasi pakai Lazy load 👉 https://www.saifullah.id/2019/02/2-cara-paling-ampuh-mempercepat-loading.html
  5. Solusi pertama kyknya saya harus mengubah format gambar ke webp
    1. Gak ngaruh pakai gambar WEBP, solusinya tinggal pasang script lazy load yang sudah saya sediakan di postingan lain.
  6. kok punyaku malah turun drastis jadi 32
    1. Scan jangan cuma sekali, minimal 3x scan setelah melakukan perubahan.
  7. Tetep aja mas. Cuman nambah 1 persen
    1. Coba pasang Lazy Load Gambar dan Lazy Load Adsense
    2. https://www.saifullah.id/search?q=Lazy+load
  8. /* 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…
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.