{"id":9540,"date":"2023-11-20T16:29:33","date_gmt":"2023-11-20T16:29:33","guid":{"rendered":"https:\/\/zaferinadigital.com\/optimaise\/?p=9540"},"modified":"2023-12-13T07:13:42","modified_gmt":"2023-12-13T07:13:42","slug":"apa-itu-large-contentful-paint","status":"publish","type":"post","link":"https:\/\/zaferinadigital.com\/optimaise\/apa-itu-large-contentful-paint\/","title":{"rendered":"Apa Itu Large Contentful Paint dan 6 Cara Mengoptimasinya"},"content":{"rendered":"\n<p>Saat mengoptimasi halaman <em>website<\/em>, mungkin kamu sering mendengar tentang <strong>large contentful paint<\/strong>, atau yang juga dikenal dengan sebutan LCP. Di dalam teknik SEO, LCP sering ditemukan berada di bawah kategori optimasi halaman <em>website<\/em>, yang mana hal tersebut berhubungan dengan peningkatan kinerja sebuah situs dengan tujuan meningkatkan pengalaman pengguna, atau <em>user experience<\/em>. Yuk, kenali lebih dalam mengenai apa itu LCP dan bagaimana cara terbaik untuk mengoptimalkannya berikut ini.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h4>Table of Contents<\/h4><nav><ol><li><a href=\"#apa-itu-large-contentful-paint\">Apa Itu Large Contentful Paint?<\/a><\/li><li><a href=\"#berapa-skor-lcp-yang-baik\">Berapa skor LCP yang Baik?<\/a><ol><li><a href=\"#data-lcp\">Data LCP<\/a><\/li><\/ol><\/li><li><a href=\"#bagaimana-cara-mengoptimalkan-skor-large-contentful-paint\">Bagaimana Cara Mengoptimalkan Skor Large Contentful Paint?<\/a><ol><li><a href=\"#temukan-elemen-lcp\">Temukan Elemen LCP<\/a><\/li><li><a href=\"#prioritaskan-pemuatan-sumber-daya\">Prioritaskan Pemuatan Sumber Daya<\/a><\/li><li><a href=\"#pemuatan-gambar-di-awal\">Pemuatan Gambar di Awal<\/a><\/li><li><a href=\"#pemuatan-gambar-di-akhir\">Pemuatan Gambar di Akhir<\/a><\/li><li><a href=\"#memuat-css-dengan-cepat\">Memuat CSS dengan Cepat<\/a><\/li><li><a href=\"#memuat-css-di-akhir\">Memuat CSS di Akhir<\/a><\/li><\/ol><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"apa-itu-large-contentful-paint\">Apa Itu Large Contentful Paint?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-Itu-Large-Contentful-Paint-1024x666.png\" alt=\"Apa Itu Large Contentful Paint\" class=\"wp-image-9552\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-Itu-Large-Contentful-Paint-1024x666.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-Itu-Large-Contentful-Paint-300x195.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-Itu-Large-Contentful-Paint-768x499.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-Itu-Large-Contentful-Paint-1536x998.png 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-Itu-Large-Contentful-Paint-2048x1331.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Apa Itu Large Contentful Paint<\/figcaption><\/figure>\n\n\n\n<p>Pertama-tama, kamu perlu tahu makna dari <strong>large contentful paint<\/strong>. Large Contentful Paint, atau LCP, adalah waktu yang diperlukan untuk memuat elemen terbesar dan terlihat secara langsung dalam <em>viewport<\/em>. Aspek ini mewakili situs web yang sudah dimuat secara visual dan merupakan salah satu dari tiga metrik Core Web Vitals (CWV) yang digunakan Google untuk mengukur <em>page experience<\/em><\/p>\n\n\n\n<p>Kesan pertama pengguna terhadap situsmu bergantung pada seberapa cepat situs terlihat dimuat. Elemen terbesar biasanya akan menjadi gambar unggulan atau mungkin tag &lt;h1&gt;. Tapi, hal tersebut bisa juga terdiri dari hal-hal berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elemen &lt;img&gt;<\/li>\n\n\n\n<li>Elemen &lt;image&gt; dalam elemen &lt;svg&gt;<\/li>\n\n\n\n<li>Gambar dalam elemen &lt;video&gt;<\/li>\n\n\n\n<li>Gambar latar belakang yang dimuat dengan fungsi url()<\/li>\n\n\n\n<li>Blok teks<\/li>\n\n\n\n<li>&lt;svg&gt; dan &lt;video&gt; mungkin ditambahkan di masa mendatang.<\/li>\n<\/ul>\n\n\n\n<p>Yang perlu kamu ketahui, semua yang berada di luar viewport atau overflow tidak dianggap ketika menghitung ukuran. Jika suatu gambar menempati seluruh viewport, itu tidak dihitung untuk <strong>large contentful paint<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"berapa-skor-lcp-yang-baik\">Berapa skor LCP yang Baik?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Berapa-skor-LCP-yang-Baik-1024x512.jpg\" alt=\"Berapa skor LCP yang Baik?\" class=\"wp-image-9551\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Berapa-skor-LCP-yang-Baik-1024x512.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Berapa-skor-LCP-yang-Baik-300x150.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Berapa-skor-LCP-yang-Baik-768x384.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Berapa-skor-LCP-yang-Baik.jpg 1460w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Berapa skor LCP yang Baik?<\/figcaption><\/figure>\n\n\n\n<p>Seperti yang dijelaskan di atas, <strong>large contentful paint<\/strong> adalah salah satu metrik penting dalam Core Web Vitals. Hasil pengukuran dari metrik ini ditampilkan dalam bentuk angka. Nilai LCP yang baik adalah kurang dari 2.5 detik dan sebaiknya didasarkan pada data Chrome User Experience Report (CrUX). Ini adalah data dari pengguna aktual Chrome yang berada di situsmu dan telah menyetujui untuk berbagi informasi ini. Kamu memerlukan 75% kunjungan halaman untuk dimuat dalam waktu 2.5 detik atau kurang.<\/p>\n\n\n\n<p>Halamanmu bisa diklasifikasikan ke dalam salah satu dari kategori berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Baik: &lt;=2.5 detik<\/li>\n\n\n\n<li>Perlu perbaikan: &gt;2.5 detik dan &lt;=4 detik<\/li>\n\n\n\n<li>Buruk: &gt;4 detik<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"938\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-1-e1700502827138-1024x938.png\" alt=\"Graph LCP 1\" class=\"wp-image-9556\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-1-e1700502827138-1024x938.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-1-e1700502827138-300x275.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-1-e1700502827138-768x703.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-1-e1700502827138.png 1504w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"data-lcp\">Data LCP<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Data-LCP-1024x538.jpg\" alt=\"Data LCP\" class=\"wp-image-9550\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Data-LCP-1024x538.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Data-LCP-300x158.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Data-LCP-768x403.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Data-LCP-1536x806.jpg 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Data-LCP-2048x1075.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Data LCP<\/figcaption><\/figure>\n\n\n\n<p>Data LCP menunjukkan bahwa 57.1% situs berada dalam kategori LCP yang baik per April 2023. Ini dihitung rata-rata di seluruh situs. Seperti yang disebutkan sebelumnya, kamu perlu 75% kunjungan halaman dimuat dalam waktu 2.5 detik atau kurang untuk tergolong &#8220;baik&#8221; di sini.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"887\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-2-e1700502882575-1024x887.png\" alt=\"Graph LCP 2\" class=\"wp-image-9557\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-2-e1700502882575-1024x887.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-2-e1700502882575-300x260.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-2-e1700502882575-768x666.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-2-e1700502882575.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Large contentful paint<\/strong> adalah metrik Core Web Vital yang paling sulit untuk ditingkatkan. Ketika kami melakukan studi tentang Core Web Vitals, kami melihat bahwa halaman lebih cenderung memiliki nilai LCP yang baik pada perangkat seluler dibandingkan dengan desktop.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"621\" height=\"1024\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-3-e1700502841834-621x1024.png\" alt=\"Graph LCP 3\" class=\"wp-image-9555\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-3-e1700502841834-621x1024.png 621w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-3-e1700502841834-182x300.png 182w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-3-e1700502841834-768x1266.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-3-e1700502841834-932x1536.png 932w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-3-e1700502841834-1242x2048.png 1242w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-3-e1700502841834.png 1554w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><figcaption class=\"wp-element-caption\">Graph LCP 3<\/figcaption><\/figure>\n\n\n\n<p>Pengaturan batas LCP tampaknya hampir tidak mungkin dilampaui pada koneksi yang lambat.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"787\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-4-e1700502862877-1024x787.png\" alt=\"Graph LCP 4\" class=\"wp-image-9554\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-4-e1700502862877-1024x787.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-4-e1700502862877-300x230.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-4-e1700502862877-768x590.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Graph-LCP-4-e1700502862877.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Baca juga: <\/strong><a href=\"https:\/\/zaferinadigital.com\/optimaise\/5-rekomendasi-website-untuk-web-portofolio-terbaik\/\">5 Rekomendasi Website untuk Web Portofolio Terbaik<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bagaimana-cara-mengoptimalkan-skor-large-contentful-paint\">Bagaimana Cara Mengoptimalkan Skor Large Contentful Paint?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengoptimalkan-Skor-Large-Contentful-Paint-1024x576.webp\" alt=\"Bagaimana Cara Mengoptimalkan Skor Large Contentful Paint?\" class=\"wp-image-9542\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengoptimalkan-Skor-Large-Contentful-Paint-1024x576.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengoptimalkan-Skor-Large-Contentful-Paint-300x169.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengoptimalkan-Skor-Large-Contentful-Paint-768x432.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengoptimalkan-Skor-Large-Contentful-Paint.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Bagaimana Cara Mengoptimalkan Skor Large Contentful Paint?<\/figcaption><\/figure>\n\n\n\n<p>Meningkatkan skor <strong>Largest Contentful Paint <\/strong>(LCP) seringkali menjadi tugas yang sulit karena ia memang merupakan jenis metrik CWV yang paling rumit. Teorinya terdengar cukup mudah. Dalam teori, kamu hanya perlu memberikan elemen terbesar dengan lebih cepat. Namun, dalam praktiknya, ini bisa menjadi cukup kompleks. Beberapa file mungkin memerlukan file lain untuk dimuat terlebih dahulu, atau mungkin ada prioritas yang bertentangan di browser. Kamu mungkin memperbaiki sejumlah masalah tanpa melihat perbaikan yang nyata, yang dapat mengecewakan.<\/p>\n\n\n\n<p>Jika kamu bukan orang yang tahu tentang hal-hal bersifat teknis dan nggak ingin menyewa seseorang, carilah plugin, modul, atau paket optimisasi performa atau kecepatan halaman untuk sistem yang kamu gunakan. Kamu bisa menggunakan informasi di bawah sebagai panduan untuk fitur apa yang mungkin kamu butuhkan:<\/p>\n\n\n\n<p>Berikut adalah beberapa cara yang dapat kamu gunakan untuk meningkatkan <strong>large contentful paint<\/strong> (LCP):<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"temukan-elemen-lcp\">Temukan Elemen LCP<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"700\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Temukan-Elemen-LCP-1024x700.png\" alt=\"Temukan Elemen LCP\" class=\"wp-image-9548\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Temukan-Elemen-LCP-1024x700.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Temukan-Elemen-LCP-300x205.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Temukan-Elemen-LCP-768x525.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Temukan-Elemen-LCP.png 1173w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Temukan Elemen LCP<\/figcaption><\/figure>\n\n\n\n<p>Cara pertama dalam meningkatkan performa <strong>large contentful paint <\/strong>adalah dengan menggunakan <em>tool<\/em> PageSpeed Insights. Cara untuk menggunakan <em>tool<\/em> ini tergolong sederhana dan pastinya gampang banget. Pertama-tama, kamu perlu mengunjungi situs <a href=\"https:\/\/pagespeed.web.dev\/\" rel=\"nofollow noopener\" target=\"_blank\">PageSpeed Insights<\/a> terlebih dulu. Setelah itu, klik \u201cLarge Contentful Paint element\u201d pada menu \u201cDiagnostics\u201d. Nantinya, di halaman tersebut akan langsung mencantumkan skor LCPmu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"prioritaskan-pemuatan-sumber-daya\">Prioritaskan Pemuatan Sumber Daya<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Prioritaskan-Pemuatan-Sumber-Daya-1024x682.jpg\" alt=\"Prioritaskan Pemuatan Sumber Daya\" class=\"wp-image-9547\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Prioritaskan-Pemuatan-Sumber-Daya-1024x682.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Prioritaskan-Pemuatan-Sumber-Daya-300x200.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Prioritaskan-Pemuatan-Sumber-Daya-768x512.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Prioritaskan-Pemuatan-Sumber-Daya.jpg 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Prioritaskan Pemuatan Sumber Daya<\/figcaption><\/figure>\n\n\n\n<p>Untuk lulus pemeriksaan <strong>large contentful paint<\/strong>, kamu harus memprioritaskan cara sumber daya dimuat dalam jalur penggambaran kritis. Artinya, kamu ingin menyusun ulang urutan di mana sumber daya diunduh dan diproses. Pertama-tama, kamu harus terlebih dahulu memuat sumber daya yang diperlukan untuk elemen LCP dan sumber daya lain yang diperlukan untuk konten di paro atas. Setelah elemen yang pertama kali terlihat dimuat untuk pengguna, barulah sisanya dimuat.<\/p>\n\n\n\n<p>Banyak situs yang bisa menghabiskan waktu untuk LCP hanya dengan menambahkan beberapa petunjuk awal atau pernyataan pramuat untuk hal-hal seperti gambar utama, serta <em>stylesheet<\/em> dan <em>font<\/em> yang diperlukan. Yuk, lihat cara mengoptimalkan berbagai jenis sumber daya berikut ini:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"pemuatan-gambar-di-awal\">Pemuatan Gambar di Awal<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Awal-1024x576.jpg\" alt=\"Pemuatan Gambar di Awal\" class=\"wp-image-9546\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Awal-1024x576.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Awal-300x169.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Awal-768x432.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Awal.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Pemuatan Gambar di Awal<\/figcaption><\/figure>\n\n\n\n<p>Jika kamu nggak membutuhkan gambar tersebut, maka satu-satunya solusi terbaik adalah menyingkirkannya. Kalau gambar tersebut penting banget buat kamu dan harus ada di dalam halaman tersebut, kami sarankan kamu untuk mengoptimasi ukuran dan kualitas gambar tersebut supaya waktu memuatnya jadi lebih singkat.<\/p>\n\n\n\n<p>Salah satu <em>tool<\/em> yang bisa kamu pakai adalah Early Hints. Kamu bisa mengaplikasikan tag Fetchpriority=\u201dhigh\u201d untuk jenis tag &lt;img&gt; atau &lt;link&gt;, Dengan menggunakan <em>tag<\/em> ini maka gambar yang ingin kamu muat akan muncul lebih awal. Sayangnya, fitur Early Hints ini hanya bisa beroperasi melalui <em>browser<\/em> yang terbatas. Solusi alternatifnya, kamu bisa memuat gambar tersebut terlebih dulu. Perintah itu akan memicu gambar terunduh lebih awal. Tapi, prosesnya nggak secepat dengan menggunakan perintah \u201cFetchpriority=\u201dhigh\u201d.<\/p>\n\n\n\n<p>Kode HTML yang bisa kamu gunakan untuk jenis perintah ini adalah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" as=\"image\" href=\u201ccat.jpg\"\nimagesrcset=\u201ccat_400px.jpg 400w,\ncat_800px.jpg 800w, cat_1600px.jpg 1600w\"\nimagesizes=\"50vw\"&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"pemuatan-gambar-di-akhir\">Pemuatan Gambar di Akhir<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Akhir-1024x563.webp\" alt=\"Pemuatan Gambar di Akhir\" class=\"wp-image-9543\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Akhir-1024x563.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Akhir-300x165.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Akhir-768x422.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Akhir-1536x845.webp 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Pemuatan-Gambar-di-Akhir.webp 1540w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Pemuatan Gambar di Akhir<\/figcaption><\/figure>\n\n\n\n<p>Kamu harus memuat gambar dengan lambat untuk gambar yang nggak urgent. Langkah ini memuat gambar lebih lanjut dalam proses atau ketika pengguna hampir melihatnya. Kamu dapat menggunakan loading=&#8221;lazy&#8221; dengan kode berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\u201ccat.jpg\" alt=\u201ccat\" loading=\"lazy\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"memuat-css-dengan-cepat\">Memuat CSS dengan Cepat<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-dengan-Cepat-1024x576.jpg\" alt=\"Memuat CSS dengan Cepat\" class=\"wp-image-9545\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-dengan-Cepat-1024x576.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-dengan-Cepat-300x169.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-dengan-Cepat-768x432.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-dengan-Cepat-1536x864.jpg 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-dengan-Cepat-2048x1152.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Memuat CSS dengan Cepat<\/figcaption><\/figure>\n\n\n\n<p>Kamu harus meminimalkan semua CSS yang kamu miliki. Jika memungkinkan, hapus CSS yang tidak digunakan. Hal utama lainnya yang harus kamu lakukan adalah memasukkan kode CSS yang paling penting. Apa yang dilakukan adalah mengambil bagian dari CSS yang diperlukan untuk memuat konten yang langsung dilihat pengguna dan kemudian menerapkannya langsung ke dalam HTML. Saat HTML diunduh, semua CSS yang diperlukan untuk memuat apa yang dilihat pengguna sudah tersedia.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"memuat-css-di-akhir\">Memuat CSS di Akhir<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-di-Akhir-1024x512.jpg\" alt=\"Memuat CSS di Akhir\" class=\"wp-image-9544\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-di-Akhir-1024x512.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-di-Akhir-300x150.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-di-Akhir-768x384.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Memuat-CSS-di-Akhir.jpg 1460w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Memuat CSS di Akhir<\/figcaption><\/figure>\n\n\n\n<p>Untuk CSS tambahan yang nggak penting, sebaiknya kamu menerapkannya belakangan dalam proses tersebut. Kamu dapat melanjutkan dan mulai mengunduh CSS dengan pernyataan pramuat tetapi nggak menerapkan CSS hingga nanti dengan acara onload. Cara ini menggunakan kode berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"stylesheet.css\" as=\"style\" onload=\"this.rel='stylesheet'\"&gt;<\/code><\/pre>\n\n\n\n<p>Penerapan <strong>large contentful paint<\/strong> dalam optimasi SEO memang memegang peranan yang penting banget. <a href=\"https:\/\/zaferinadigital.com\/optimaise\/panduan-belajar-seo\/\">Belajar tentang SEO<\/a> tentunya juga termasuk mempelajari bagaimana cara LCP bekerja. Tapi, jika kamu nggak punya cukup waktu untuk mempelajari itu semua, ada solusi yang lebih gampang! Yaitu, kamu bisa menggunakan <a href=\"https:\/\/zaferinadigital.com\/optimaise\/jasa-seo\/\">jasa SEO<\/a> dari <a href=\"https:\/\/zaferinadigital.com\/optimaise\/\">Optimaise<\/a>. Tim spesialis SEO kami sudah berpengalaman selama sekitar 10 tahun dalam bidang optimasi <em>website<\/em>. Jadi, soal kualitas, kamu nggak perlu meragukannya! Yuk, hubungi CP Optimaise sekarang juga untuk mendapatkan penawaran harga terbaik untuk paket SEO.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saat mengoptimasi halaman website, mungkin kamu sering mendengar tentang large contentful paint, atau yang juga<\/p>\n","protected":false},"author":7,"featured_media":9149,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"categories":[24,25],"tags":[21,72,73,11],"class_list":["post-9540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing","category-seo","tag-digital-marketing","tag-large-contentful-paint","tag-lcp","tag-seo","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"acf":[],"_links":{"self":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts\/9540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/comments?post=9540"}],"version-history":[{"count":0,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts\/9540\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/media\/9149"}],"wp:attachment":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/media?parent=9540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/categories?post=9540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/tags?post=9540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}