{"id":7773,"date":"2021-09-29T01:48:00","date_gmt":"2021-09-28T18:48:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=7773"},"modified":"2022-06-02T14:02:35","modified_gmt":"2022-06-02T07:02:35","slug":"cara-menggunakan-google-pagespeed-insight-untuk-optimasi-website","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/cara-menggunakan-google-pagespeed-insight-untuk-optimasi-website\/","title":{"rendered":"Cara Menggunakan Google PageSpeed Insight Untuk Optimasi Website"},"content":{"rendered":"\n<p>Pernah gak sih kalian kesal lalu segera menutup website yang kalian kunjungi ketika loading websitenya sangat lama? Nah, ternyata selain internet, kecepatan website juga dibutuhkan untuk memaksimalkan pengalaman pengguna saat mengunjungi website. Google sendiri telah menyediakan sebuah <em>tool <\/em>yang bisa digunakan untuk cek kecepatan sebuah website, yaitu Google PageSpeed Insight. Okay, yuk baca <strong>Cara Menggunakan Google PageSpeed Insight Untuk Optimasi Website<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Menggunakan Google PageSpeed Insight <\/strong><\/h2>\n\n\n\n<p>Berikut ini adalah langkah demi langkah terkait cara menggunakan Google PageSpeed Insight:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Buka Google Pagespeed Insight <\/strong><\/h3>\n\n\n\n<p>Silakan akses Google Pagespeed Insight dengan mengklik halaman utama <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=id\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PageSpeed Insights<\/a> hingga muncul tampilan sebagai berikut:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/09\/Cara-Menggunakan-Google-PageSpeed-Insight-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"696\" height=\"367\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/09\/Cara-Menggunakan-Google-PageSpeed-Insight-1.png\" alt=\"google-pagespeed-insight-1\" class=\"wp-image-7775\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/09\/Cara-Menggunakan-Google-PageSpeed-Insight-1.png 696w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2021\/09\/Cara-Menggunakan-Google-PageSpeed-Insight-1-300x158.png 300w\" sizes=\"auto, (max-width: 696px) 100vw, 696px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ketik Alamat Website Kalian <\/strong><\/h3>\n\n\n\n<p>Silakan masukkan URL website yang akan dicek kecepatannya dan klik tombol \u201cANALISIS\u201d<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"196\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-1160x196.png\" alt=\"google-pagespeed-insight-2\" class=\"wp-image-10429\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-1160x196.png 1160w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-800x135.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image.png 1195w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dapatkan Analisis <\/strong><\/h3>\n\n\n\n<p>Google akan menilai kecepatan loading website kalian menggunakan skala persen. Nilai 0 sampai 49 persen menunjukkan bahwa website kalian lambat. Nilai 50 sampai 89 persen menunjukkan bahwa kecepatan website kalian sudah mencapai rata-rata. Terakhir, nilai 90 sampai 100 persen menandakan bahwa website kalian cepat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Membaca Analisis Pagespeed Google <\/strong><\/h2>\n\n\n\n<p>Ketika kalian sedikit scroll ke bawah, kalian akan menemukan berbagai penjelasan untuk nilai yang kalian dapatkan. Hasil analisis ini dibagi menjadi empat. Silakan simak penjelasan singkat berikut agar kalian memahami apa saja arti nilai tersebut.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Data Kolom dan Origin Summary <\/strong><\/h3>\n\n\n\n<p>Bagian teratas ini dibagi menjadi dua, yaitu <em>First Contentful Paint<\/em> (FCP) dan <em>First Input Delay<\/em> (FID). FCP melihat waktu gambar dan tulisan muncul saat dibuka sedangkan FID melihat jarak waktu ketika interaksi, seperti mengklik tautan dengan respon dari browser terkait interaksi tersebut.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Data Lab <\/strong><\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"958\" height=\"262\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-1.png\" alt=\"google-pagespeed-insight-3\" class=\"wp-image-10431\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-1.png 958w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-1-800x219.png 800w\" sizes=\"auto, (max-width: 958px) 100vw, 958px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Ada enam penilaian di dalam bagian data lab, yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>First Contentful Paint<\/strong>: seberapa lama gambar dan tulisan pertama muncul.<\/li><li><strong>Speed Index<\/strong>: waktu saat keseluruhan website terlihat jelas. Semakin rendah berarti semakin bagus.<\/li><li><strong>Largest Contentful Paint<\/strong>: menandai waktu saat teks atau gambar terbesar dimunculkan.<\/li><li><strong>Time to Interactive<\/strong>: waktu pertama sebuah laman dianggap interaktif alias dapat merespon perintah lain.<\/li><li><strong>Total Blocking Time<\/strong>: jumlah semua jangka waktu antara FCP dan Time to Interactive, ketika durasi tugas melebihi 50 md (milidetik).<\/li><li><strong>Cumulative Layout Shift<\/strong>: pergeseran icon atau tombol di website yang terlihat di keseluruhan layar pengunjung website.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Peluang <\/strong><\/h3>\n\n\n\n<p>Bagian ini melihat bagaimana peluang untuk memperbaiki website kalian dan perkiraan penghematan waktu <em>loading <\/em>di URL website yang kalian masukkan agar bisa mendapatkan nilai yang lebih baik.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"959\" height=\"239\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-2.png\" alt=\"google-pagespeed-insight-4\" class=\"wp-image-10432\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-2.png 959w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-2-800x199.png 800w\" sizes=\"auto, (max-width: 959px) 100vw, 959px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Diagnostik <\/strong><\/h3>\n\n\n\n<p>Bagian ini adalah penilaian performa yang dilakukan oleh Lighthouse saat menganalisis website kalian. Google Lighthouse adalah <em>tool <\/em>otomatis yang digunakan untuk menganalisis website di Google PageSpeed Insight. Silakan klik penjelasan mengenai <a href=\"https:\/\/web.dev\/performance-scoring\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Penilaian Performa Lighthouse<\/a> dengan mengklik tautan yang tertera.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"865\" height=\"504\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-3.png\" alt=\"google-pagespeed-insight-5\" class=\"wp-image-10433\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-3.png 865w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/06\/image-3-800x466.png 800w\" sizes=\"auto, (max-width: 865px) 100vw, 865px\" \/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Lulus Audit <\/strong><\/h3>\n\n\n\n<p>Bagian ini merupakan hal-hal yang sudah cukup terimprovisasi di website kalian menurut Google PageSpeed Insight. Semakin banyak warna hijau maka semakin bagus pula kualitas website kalian.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tips Dapatkan Skor Tinggi di Google PageSpeed Insight <\/strong><\/h2>\n\n\n\n<p>Di bawah ini akan disampaikan cara mengatasi empat permasalahan paling umum untuk mendapatkan skor tinggi Google PageSpeed Insight:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Optimasi Gambar<\/strong><\/h3>\n\n\n\n<p>Tahu kah kalian bahwa gambar juga bisa menjadi penyebab lambatnya website kalian? Gambar yang berukuran terlalu besar akan menurunkan kecepatan website secara drastis. Oleh karena itu, kalian perlu melakukan <em>compressing <\/em>pada gambar-gambar yang akan diunggah di website.<\/p>\n\n\n\n<p>Kalian bisa melakukan compressing sebelum mengunggahnya di WordPress menggunakan layanan image compressing, seperti <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">TinyPNG<\/a>, <a href=\"https:\/\/www.iloveimg.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ILoveIMG<\/a>, <a href=\"https:\/\/trimage.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Trimage<\/a>, <a href=\"https:\/\/kraken.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Kraken<\/a>, dan <a href=\"http:\/\/optipng.sourceforge.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">OptiPNG<\/a>.<\/p>\n\n\n\n<p>Selain itu, kalian juga bisa melakukan <em>compressing <\/em>di WordPress dengan menggunakan plugin, seperti <a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Imagify Image Optimizer<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ShortPixel Image Optimizer<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WP Smush<\/a>, dan <a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Optimus Image Optimizer<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gunakan Browser Caching <\/strong><\/h3>\n\n\n\n<p>Ketika pengunjung membuka website kalian untuk pertama kali, sistem browser <em>caching <\/em>akan menyimpan data-data halaman yang dibuka pengunjung, dari logo, gambar, hingga konten.<\/p>\n\n\n\n<p>Dengan begitu, saat pengunjung membuka website kalian untuk kedua kali dan seterusnya browser pengunjung tidak perlu melakukan <em>request <\/em>ke server untuk menampilkan data-data yang sama. Hal ini karena browser <em>caching <\/em>sudah menyimpan data-data tersebut di komputer pengunjung sehingga bisa menampilkan halaman website lebih cepat.<\/p>\n\n\n\n<p>Untuk mengaktifkan browser caching pun cukup mudah karena bisa melakukannya menggunakan bantuan plugin di WordPress yang bisa dipilih.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Minify HTML, CSS, dan JavaScript <\/strong><\/h3>\n\n\n\n<p>Kode HTML, CSS, dan JavaScript pun perlu dikompres untuk mengoptimasi kecepatan website melalui proses minify, lho.<\/p>\n\n\n\n<p>Minify adalah proses pengurangan data yang berulang atau tidak penting di HTML, CSS, dan JavaScript tanpa mengurangi kualitas yang ditampilkan di browser sehingga browser akan lebih cepat membaca data-data di halaman website kalian.<\/p>\n\n\n\n<p>Tidak perlu jauh-jauh mencari plugin minify karena kalian bisa menemukan fitur tersebut di LiteSpeed Cache. LiteSpeed Cache menyediakan fitur minify lengkap, dari HTML, CSS, hingga JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Optimasi Website Versi Mobile <\/strong><\/h3>\n\n\n\n<p>Perlu kalian ingat bahwa smartphone telah menjadi perangkat utama untuk mengakses internet.&nbsp;<\/p>\n\n\n\n<p>Sebagai pemilik website, kalian dituntut untuk menyediakan website yang cepat dan responsif, baik di perangkat desktop dan mobile.<\/p>\n\n\n\n<p>Membuat website cepat dan responsif di perangkat desktop mungkin adalah hal yang sudah biasa bagi kebanyakan orang.<\/p>\n\n\n\n<p>Membuat website cepat dan responsif di perangkat desktop adalah hal yang sudah biasa bagi kebanyakan orang. Namun, ketertarikan membuat website cepat dan responsif di perangkat mobile masih cenderung rendah.&nbsp;<\/p>\n\n\n\n<p>Nah, cara optimasi website di perangkat mobile pun cukup mudah, kok. Kalian bisa menggunakan plugin mobile WordPress untuk membuat website versi mobile yang cepat dan responsif.<\/p>\n\n\n\n<p>Guys, jadi itulah cara menggunakan Google PageSpeed Insight yang bisa kalian praktikkan. Mudah, kan? Nah, untuk memaksimalkan penggunaan Google PageSpeed Insight, website kalian perlu dipercepat, nih. Okay, silakan intip tipis-tipis yuk mulai dari<a href=\"https:\/\/www.jetorbit.com\/domain\/\"> domain<\/a>,<a href=\"https:\/\/www.jetorbit.com\/web-hosting\/\"> hosting<\/a>, dan layanan pendukung lainnya ke<a href=\"https:\/\/www.jetorbit.com\/\"> Jetorbit<\/a>. Selain itu, kami juga menyediakan VPS dan bisa kalian cek<a href=\"https:\/\/www.jetvm.com\/\" target=\"_blank\" rel=\"noopener\"> di sini<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pernah gak sih kalian kesal lalu segera menutup website yang kalian kunjungi ketika loading websitenya sangat lama? Nah, ternyata selain internet, kecepatan website juga dibutuhkan untuk memaksimalkan pengalaman pengguna saat mengunjungi website. Google sendiri telah menyediakan sebuah tool yang bisa digunakan untuk cek kecepatan sebuah website, yaitu Google PageSpeed Insight. Okay, yuk baca Cara Menggunakan &#8230; <a title=\"Cara Menggunakan Google PageSpeed Insight Untuk Optimasi Website\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/cara-menggunakan-google-pagespeed-insight-untuk-optimasi-website\/\" aria-label=\"Read more about Cara Menggunakan Google PageSpeed Insight Untuk Optimasi Website\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":7774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[283,2183,7,2184,2185],"class_list":["post-7773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-domain-murah","tag-google-pagespeed-insight","tag-hosting-murah","tag-optimasi-website","tag-skor-tinggi","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/7773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=7773"}],"version-history":[{"count":2,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/7773\/revisions"}],"predecessor-version":[{"id":10434,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/7773\/revisions\/10434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/7774"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=7773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=7773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=7773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}