{"id":5478,"date":"2020-12-14T09:55:28","date_gmt":"2020-12-14T02:55:28","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=5478"},"modified":"2020-12-14T09:55:30","modified_gmt":"2020-12-14T02:55:30","slug":"apa-itu-lazy-loading-memahami-lazy-loading-untuk-seo","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/apa-itu-lazy-loading-memahami-lazy-loading-untuk-seo\/","title":{"rendered":"Apa Itu Lazy Loading? Memahami Lazy Loading untuk SEO"},"content":{"rendered":"\n<p>Tahukah Anda bahwa 47% pengguna berharap kalau halaman dimuat dalam 2 detik atau kurang? Kecepatan halaman sangat penting dalam dunia <em>marketing <\/em>digital saat ini karena sejumlah alasan. Yuk ketahui lebih detail tentang <strong>Apa Itu Lazy Loading? Memahami Lazy Loading untuk SEO<\/strong><\/p>\n\n\n\n<p>Pengguna yang tidak dapat membuka situs Anda atau yang merasa frustasi dengan prosesnya, memiliki kemungkinan besar untuk meninggalkan <em>brand <\/em>Anda atau postingan blog Anda dan mencari di situs lain.<\/p>\n\n\n\n<p>Bagi kebanyakan orang, jumlah waktu yang dibutuhkan untuk sampai ke situs Anda adalah pengalaman pertama mereka dengan <em>brand <\/em>Anda. Membebani mereka dengan kecepatan halaman yang lambat merupakan cara yang pasti untuk memulai hubungan dengan langkah yang salah. Anda bahkan berisiko menonaktifkan pengguna berulang (<em>repeat users<\/em>) dan pelanggan agar tidak berkonversi lagi.<\/p>\n\n\n\n<p>Di situlah <em>lazy loading<\/em> berperan. <em>Lazy loading<\/em> adalah salah satu dari sejumlah pengoptimalan kecepatan halaman penting yang dapat Anda lakukan untuk meningkatkan kinerja dan memberi diri Anda peluang terbaik untuk mengkonversi pengguna baru.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apa Itu Lazy Loading?<\/strong><\/h2>\n\n\n\n<p><em>Lazy loading<\/em>, singkatnya adalah memungkinkan Anda untuk menunda pemuatan elemen halaman yang lambat hingga halaman Anda selesai dirender. Ini adalah cara untuk memastikan pengguna masuk ke situs Anda (dan tidak terpental atau <em>bounce<\/em>) sebelum melakukan suatu aktivitas berat untuk memuat beberapa yang lebih besar, <em>non-critical<\/em>, <em>below-the-fold elements <\/em>di <em>webpage <\/em>Anda.<\/p>\n\n\n\n<p>Idenya di sini adalah untuk mempersingkat panjang dari jalur rendering penting (<em>critical rendering path<\/em>) atau lamanya waktu yang dibutuhkan pengguna untuk mencapai laman <a href=\"https:\/\/web.dev\/lcp\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong><em>Largest Contentful Paint<\/em><\/strong><\/a> (LCP). Largest Contentful Paint adalah cara yang bagus untuk menyampaikan <em>load speed<\/em>. Ini juga cara yang penting untuk mengatakan karena mewakili pemahaman Google tentang<em> load speed<\/em>.<\/p>\n\n\n\n<p>Largest Contentful Pain menandai titik di timeline pemuatan halaman saat konten utama halaman kemungkinan besar telah dimuat. LCP selalu menjadi elemen penting dalam <em>page speed<\/em> dan pengalaman pengguna.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"232\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-1.png\" alt=\"apa-itu-lazy-loading-1\" class=\"wp-image-5480\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-1.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-1-300x87.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-1-768x223.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>Anda dapat menganggap Core Web Vitals yang diperkenalkan Google pada Mei 2020 sebagai persyaratan dasar untuk <em>site\u2019s technical health<\/em>, suatu indikator yang digunakan Google untuk mengevaluasi UX (<em>user experience<\/em>) suatu halaman.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"490\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-2.png\" alt=\"apa-itu-lazy-loading-2\" class=\"wp-image-5481\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-2.png 728w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-2-300x202.png 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/figure><\/div>\n\n\n\n<p>Kecepatan, untuk beberapa waktu telah menjadi faktor peringkat Google yang penting tetapi perilisan dari Core Web Vitals dan <em>pre-announcement <\/em><strong>Page Experience Update <\/strong>menunjukkan pergeseran penting dalam <em>roll page speed<\/em> akan berperan dalam mendapatkan <em>traffic <\/em>organik di masa mendatang.<\/p>\n\n\n\n<p>Dua komponen terakhir dari Core Web Vitals, yakni <strong>First Input Delay<\/strong> (FID) dan <strong>Cumulative Layout Shift<\/strong> (CLS), berkaitan dengan cara pengguna berinteraksi dengan halaman setelah mereka membukanya. Untuk tujuan kita di sini, ini adalah komponen pertama, <strong>Largest Contentful Paint<\/strong>, yang mana <em>lazy loading<\/em> benar-benar berdampak.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Bagaimana Cara Mengetahui Apakah Situs Anda Membutuhkan <em>Lazy Loading<\/em><\/strong><\/h2>\n\n\n\n<p>Situs Anda lambat bukan berarti Anda harus menerapkan <em>lazy loading<\/em>. Pendekatan yang lebih baik untuk pengoptimalan kecepatan halaman adalah dengan menjalankan situs Anda melalui alat performa kecepatan halaman, seperti PageSpeed \u200b\u200bInsights atau GTmetrix.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"899\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-3-1024x899.png\" alt=\"apa-itu-lazy-loading-3\" class=\"wp-image-5482\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-3-1024x899.png 1024w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-3-300x263.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-3-768x674.png 768w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-3-1536x1349.png 1536w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-3.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Di sana Anda akan mendapatkan sejumlah rekomendasi yang mungkin atau mungkin tidak membutuhkan penerapan <em>lazy loading<\/em> untuk gambar tetapi pasti akan menyertakan elemen lain dari pengoptimalan kecepatan halaman seperti:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Mengaktifkan kompresi Gzip<\/li><li>Meminimalkan JavaScript, CSS, dan HTML<\/li><li>Mengurangi pengalihan (<em>redirects<\/em>)<\/li><li>Menghapus JavaScript yang memblokir render<\/li><li>Memanfaatkan cache browser<\/li><li>Meningkatkan waktu respons server<\/li><li>Menggunakan <em>content distribution network<\/em> (CDN)<\/li><li>Mengoptimalkan gambar dan video<\/li><\/ul>\n\n\n\n<p>Idenya di sini adalah untuk memprioritaskan item yang memberi situs Anda peluang terbaik untuk meningkatkan kecepatan halaman atau keuntungan terbesar secara keseluruhan. Jika Anda kebetulan melihat rekomendasi &#8220;<strong><em>defer offscreen images<\/em><\/strong>&#8220;, di situlah <em>lazy loading<\/em> untuk gambar ikut berperan.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"458\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-4.png\" alt=\"apa-itu-lazy-loading-4\" class=\"wp-image-5483\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-4.png 880w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-4-300x156.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-4-768x400.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n\n<p>Anda juga dapat menggunakan laporan Core Web Vitals baru di Search Console untuk mendapatkan gambaran menyeluruh tentang halaman mana di situs Anda yang memiliki masalah LCP.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"494\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-5.png\" alt=\"apa-itu-lazy-loading-5\" class=\"wp-image-5484\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-5.png 262w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-5-159x300.png 159w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><\/div>\n\n\n\n<p>Google mendefinisikan LCP yang &#8220;baik&#8221; dalam waktu empat detik atau lebih pendek:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"251\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-6.png\" alt=\"apa-itu-lazy-loading-6\" class=\"wp-image-5485\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-6.png 800w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-6-300x94.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-6-768x241.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n\n<p>Sekali lagi, hanya karena LCP halaman tertentu lebih lama dari 4 detik, bukan berarti Anda perlu menerapkan <em>lazy loading<\/em>. Namun laporan ini dapat mengarahkan Anda ke tempat-tempat di situs Anda yang kinerjanya sangat lambat. Dari sana, dengan menggunakan beberapa alat kecepatan yang baru saja kita diskusikan, Anda dapat menjalankan diagnostik pada individual page dan melihat apakah \u201cmenunda gambar di luar layar&#8221; (<em>deferring offscreen images<\/em>) menandakan perlunya <em>lazy loading<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Menerapkan <em>Lazy Loading<\/em><\/strong><\/h2>\n\n\n\n<p>Jika Anda mencoba menerapkan lazy loading sendiri, berikut tips pertama kami: jangan lakukan! Pengecualian di sini adalah jika Anda adalah pengembang yang berpengalaman. Atau, jika Anda seorang pengembang amatir yang memiliki kemampuan untuk menerapkan <em>lazy loading<\/em> di <em>staging site<\/em> dan uji terpisah atas skor kecepatan baru Anda terhadap <em>live site<\/em> Anda.&nbsp;<\/p>\n\n\n\n<p>Untuk pengguna WordPress, ada sejumlah plugin praktis yang membantu implementasi <em>lazy loading<\/em>, yang paling menonjol di antaranya adalah<a href=\"https:\/\/wordpress.org\/plugins\/rocket-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> Lazy Load<\/a> dan <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Smush<\/a>. Smush secara khusus adalah solusi pengoptimalan gambar all-in-one yang memberi Anda kompresi gambar,<em> lazy loading<\/em>, dan konversi gambar berikutnya, yang semuanya penting untuk image SEO.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"617\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-7-1024x617.png\" alt=\"apa-itu-lazy-loading-7\" class=\"wp-image-5486\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-7-1024x617.png 1024w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-7-300x181.png 300w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-7-768x463.png 768w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2020\/12\/Apa-Itu-Lazy-Loading-7.png 1431w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Bergantung pada <em>content management system<\/em> (CMS) Anda (WordPress, Shopify, Bigcommerce, Webflow), <em>lazy loading<\/em> mungkin tidak semudah menerapkan plugin. Shopify misalnya, merekomendasikan implementasi <em>lazy loadingnya<\/em> sendiri,\u00a0 sedangkan Bigcommerce memiliki plugin pihak ketiga sendiri yang mendukung <em>lazy loading<\/em> pada tema umum, seperti Stencil dan Blueprint.<\/p>\n\n\n\n<p>Setelah membaca terkait apa itu lazy loading, apakah kalian mendapatkan insight? Komen yuk di kolom komentar \ud83d\ude42<\/p>\n\n\n\n<p>Bagi Anda yang masih bingung bagaimana cara membuat website, tenang saja. Kami punya solusinya. Anda bisa langsung cek ke <a href=\"https:\/\/www.jetorbit.com\/\">Jetorbit<\/a> guna memenuhi kebutuhan pembuatan website Anda. Selain itu, kami juga menyediakan VPS dan bisa Anda cek <a href=\"https:\/\/www.jetvm.com\/\" target=\"_blank\" rel=\"noopener\">di sini<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tahukah Anda bahwa 47% pengguna berharap kalau halaman dimuat dalam 2 detik atau kurang? Kecepatan halaman sangat penting dalam dunia marketing digital saat ini karena sejumlah alasan. Yuk ketahui lebih detail tentang Apa Itu Lazy Loading? Memahami Lazy Loading untuk SEO Pengguna yang tidak dapat membuka situs Anda atau yang merasa frustasi dengan prosesnya, memiliki &#8230; <a title=\"Apa Itu Lazy Loading? Memahami Lazy Loading untuk SEO\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/apa-itu-lazy-loading-memahami-lazy-loading-untuk-seo\/\" aria-label=\"Read more about Apa Itu Lazy Loading? Memahami Lazy Loading untuk SEO\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":5479,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[1173,1175,969,283,7,968,1174],"class_list":["post-5478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-apa-itu-lazy-loading","tag-cara-menerapkan-lazy-loading","tag-cara-menggunakan-gtmetrix","tag-domain-murah","tag-hosting-murah","tag-menggunakan-gtmetrix","tag-pagespeed-insights","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\/5478","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=5478"}],"version-history":[{"count":1,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/5478\/revisions"}],"predecessor-version":[{"id":5487,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/5478\/revisions\/5487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/5479"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=5478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=5478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=5478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}