Cara Mengatasi Prioritize Visible Content di PageSpeed Insights
Cara Mengatasi Prioritize Visible Content di PageSpeed Insights

Prioritize Visible Content, atau dalam bahasa Indonesianya Prioritaskan Konten yang Terlihat...

...adalah suatu masalah yang terdapat di Google PageSpeed Insights dikarenakan blog memerlukan perjalanan jaringan tambahan untuk merender bagian atau paro atas suatu laman.

Dengan kata lain, artikel di dalam suatu blog membutuhkan waktu load yang lama dikarenakan ada sesuatu yang harus di load sebelumnya.

Masalah ini sangat penting, karena seperti yang kita tahu, bahwa yang pengunjung inginkan dari blog anda adalah artikelnya. Bila ada sesuatu yang di load dahulu sebelum artikelnya, sudah pasti waktu load artikel menjadi lambat dan bisa saja pengunjung kabur dari blog anda.

Sangat berbahaya! Hal ini dapat menambah bounce rate di blog anda.

Jadi, sebenarnya sampai sini kita sudah mengetahui apa arti dari masalah "Prioritaskan Konten yang Terlihat" ini...

...yaitu kita harus mengatur agar blog kita meload bagian konten terlebih dahulu, baru bagian-bagian lainnya.

Nah, yang jadi pertanyaannya adalah bagaimana caranya? Sebelum ke caranya, masalah ini saya bagi menjadi 2, yaitu:
  1. Jika sidebar diload terlebih dahulu
  2. Jika widget pihak ketiga diload terlebih dahulu

Langsung saja, berikut ketiga solusi dari masalah diatas.

1. Sidebar yang diload terlebih dahulu


Seperti yang kita ketahui, bahwa sidebar pasti letaknya disamping isi konten alias artikel. Selain itu, kegunaan sidebar ini hanyalah sebagai pendukung, berbeda dengan artikel yang memang menjadi suatu kewajiban dari sebuah blog.

Biasanya, sidebar ini waktu loadnya cukup lama, bisa mencapai 2x lipat lebih lama dibandingkan dengan waktu load artikel.

Mengapa?

Karena sidebarnya memiliki banyak widget, seperti widget berlangganan via E-Mail, widget sosial media, sticky widget, dan masih banyak lagi. Sedangkan seperti yang kita ketahui bahwa widget-widget ini memerlukan banyak sumber daya (seperti HTML, CSS, bahkan Javascript).

Apa jadinya bila kita meload sidebar lebih dahulu ketimbang isi artikel?

Sudah pasti pengunjung dengan koneksi internet yang lambat akan kabur dari blog anda...

Jadi, solusi yang tepat untuk masalah ini adalah dengan cara menempatkan script HTML sidebar di blog anda dibawah script HTML untuk postingan. Untuk lebih jelasnya silahkan anda simak contoh susunan HTML blog dibawah ini.

<html>

  <head> ... </head>

  <body>

     <header> ... </header>   <!-- Ini script HTML untuk header dan menu navigasi -->

       <div class='sidebar'> ... </div>   <!-- Bisa kita lihat, ini script sidebar -->
       <div class='main'> ... </div>      <!-- dan ini script postingan... -->

  </body>

</html>

Seperti itulah contoh HTML blog dengan sidebar yang di load terlebih dahulu. Bila ternyata susunan HTML di blog anda seperti itu juga, ada baiknya anda mengubah susunan HTML tersebut menjadi seperti ini:

<html>

  <head> ... </head>

  <body>

     <header> ... </header>   <!-- Ini script HTML untuk header dan menu navigasi -->

       <div class='main'> ... </div>   <!-- Sekarang postingan di-load terlebih dahulu -->
       <div class='sidebar'> ... </div>      <!-- lalu sidebar yang di load... -->

  </body>

</html>

Selesai, sekarang coba anda cek blog anda di Google PageSpeed Insights. Bila masalah masih tetap muncul, silahkan anda lanjutkan ke poin nomor 2 berikut ini.

2. Widget lain yang diload terlebih dahulu (sebelum postingan)


Nah, kasus kedua ini berbeda dengan kasus yang pertama. Jika biasanya widget diload dan dipasang bersamaan dengan sidebar, widget yang kali ini dipasang secara manual didalam HTML. Contohnya seperti ini:

<html>

  <head> ... </head>

  <body>

     <header> ... </header>

       <div class='ini widgetnya'> ... </div>   <!-- Ini widgetnya -->

       <div class='main'> ... </div>
       <div class='sidebar'> ... </div>

  </body>

</html>

Widget seperti diatas tidak bisa anda pindahkan, karena bila anda pindahkan, widget tersebut nantinya juga akan berpindah tempat pada saat anda lihat di blog anda.

Jadi, solusi untuk masalah ini hanyalah meminimalisir penggunaan widget yang menurut anda tidak terlalu penting.

Bagaimana? Apakah masalah sudah terselesaikan? Semoga cara diatas dapat menyelesaikan masalah ini dan blog anda sudah lebih ringan. Juga, jangan segan-segan untuk berkomentar bila masalah belum terselesaikan!
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 5 April 2018 20.35

Insyaallah minggu depan saya update ya... Ada beberapa tambahan tutor yang lebih ringan.

Balas
MOHAMMAD EDY YUNUS Kode Jarwo
MOHAMMAD EDY YUNUS
# 5 April 2018 15.14

kurang paham aku om,, gagal paham bingit, tolong buatin lagi dong yang lebih ringan tutornya...

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 14 Maret 2018 15.04

Hapus widget Recent Post, sampai ke JavaScript nya

Balas
Handy rusandi berbagi73 Kode Jarwo
Handy rusandi berbagi73
# 14 Maret 2018 09.56

bagaimana mengatasi remove rendering nama blog/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts
saat dilakukan test melalui page insight ?
terima kasih

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 25 Desember 2017 12.47

Sama sama

Balas
Topik Ramdani Kode Jarwo
Topik Ramdani
# 25 Desember 2017 09.32

tengkyu bang, kebetulan blog ane lelet banget nih, pas di cek di PageSpeed Tools-nya Google salah satu penyebabnya karena Prioritize Visible Content ini :(

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 25 November 2017 12.24

Sama sama

Balas
Khairul Kode Jarwo
Khairul
# 25 November 2017 07.52

Thanks min

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 27 Oktober 2017 11.35

Sama sama

Balas
Raja khayal Kode Jarwo
Raja khayal
# 27 Oktober 2017 01.27

Oke, makasih infonya.

Balas