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!