{"id":9135,"date":"2023-11-09T16:38:09","date_gmt":"2023-11-09T16:38:09","guid":{"rendered":"https:\/\/zaferinadigital.com\/optimaise\/?p=9135"},"modified":"2023-12-13T07:14:08","modified_gmt":"2023-12-13T07:14:08","slug":"3-unsur-core-web-vitals","status":"publish","type":"post","link":"https:\/\/zaferinadigital.com\/optimaise\/3-unsur-core-web-vitals\/","title":{"rendered":"3 Unsur Core Web Vitals, Cara Mengukur dan Trik Optimasinya"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>User experience<\/em>, atau pengalaman pengunjung saat mengakses situsmu adalah salah satu aspek penting dalam mengoptimasi sebuah situs. Salah satu <em>tool<\/em> yang bisa kamu gunakan untuk mendapatkan estimasi yang akurat adalah <strong>core web vitals<\/strong>. Web Vitals adalah kelompok metrik yang digunakan untuk mengukur <em>user experience<\/em> atau pengalaman pengguna dari segi performa, interaktivitas, kecepatan muatan, dan stabilitas visual dari sebuah laman <em>website<\/em>. <em>Tool<\/em> ini bakal berguna banget buat kamu. Makanya, simak ulasan lengkap mengenainya 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=\"#3-unsur-core-web-vitals\">3 Unsur Core Web Vitals<\/a><ol><li><a href=\"#largest-contentful-paint-lcp\">Largest Contentful Paint (LCP) <\/a><\/li><li><a href=\"#bagaimana-cara-mengecek-elemen-lcp\">Bagaimana Cara Mengecek Elemen LCP?<\/a><\/li><li><a href=\"#cara-mengatasi-masalah-pada-lcp\">Cara Mengatasi Masalah pada LCP<\/a><\/li><li><a href=\"#cumulative-layout-shift-cls\">Cumulative Layout Shift (CLS)<\/a><\/li><li><a href=\"#first-input-delay-fid\">First Input Delay (FID)<\/a><\/li><li><a href=\"#apa-yang-mengakibatkan-delay-pada-fid-dari-core-web-vitals\">Apa yang Mengakibatkan Delay pada FID dari Core Web Vitals?<\/a><\/li><\/ol><\/li><li><a href=\"#cara-meningkatkan-performa-core-web-vitals\">Cara Meningkatkan Performa Core Web Vitals<\/a><ol><li><a href=\"#cara-memperbaiki-skor-lcp\">Cara Memperbaiki Skor LCP<\/a><\/li><li><a href=\"#cara-meningkatkan-performa-cls\">Cara Meningkatkan Performa CLS<\/a><\/li><li><a href=\"#cara-meningkatkan-nilai-fid\">Cara Meningkatkan Nilai FID<\/a><\/li><\/ol><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-unsur-core-web-vitals\">3 Unsur Core Web Vitals<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/3-Unsur-Core-Web-Vitals-1024x588.webp\" alt=\"3 Unsur Core Web Vitals\" class=\"wp-image-9136\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/3-Unsur-Core-Web-Vitals-1024x588.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/3-Unsur-Core-Web-Vitals-300x172.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/3-Unsur-Core-Web-Vitals-768x441.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/3-Unsur-Core-Web-Vitals.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">3 Unsur Core Web Vitals<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dalam menjalankan tugasnya, <strong>core web vitals <\/strong>terdiri dari 3 unsur metrik. Unsur-unsur tersebut adalah Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), dan First Input Delay (FID). Di bulan Maret 2024 mendatang, kabarnya <em>tool<\/em> ini akan mendapatkan metrik baru dari Interaction Next Paint (INP) yang akan menjadi pengganti dari FID. Masing-masing metrik punya peranan penting yang membuat performa <em>tool<\/em> ini jadi semakin optimal. Yuk, kenali lebih dekat di sini.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"largest-contentful-paint-lcp\">Largest Contentful Paint (LCP) <\/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\/Largest-Contentful-Paint-LCP-1024x576.png\" alt=\"Largest Contentful Paint (LCP) \" class=\"wp-image-9149\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Largest-Contentful-Paint-LCP-1024x576.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Largest-Contentful-Paint-LCP-300x169.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Largest-Contentful-Paint-LCP-768x432.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Largest-Contentful-Paint-LCP.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Largest Contentful Paint (LCP) <\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Large Contentful Paint <\/em>(LCP) mengacu pada waktu yang diperlukan untuk memuat elemen terbesar yang terlihat di dalam viewport. Metrik ini merupakan representasi dari situs web yang telah dimuat secara visual. Elemen terbesar biasanya akan menjadi gambar unggulan atau mungkin tag &lt;h1>. Tapi, elemen tersebut juga bisa berupa:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Baca juga: <a href=\"https:\/\/zaferinadigital.com\/optimaise\/apa-itu-keyword-cannibalization-dan-5-cara-menemukannya\/\" data-type=\"post\" data-id=\"9169\">Apa Itu Keyword Cannibalization dan 5 Cara Menemukannya<\/a><\/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; di dalam elemen &lt;svg&gt;<\/li>\n\n\n\n<li>Gambar di 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 akan ditambahkan di masa depan.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bagaimana-cara-mengecek-elemen-lcp\">Bagaimana Cara Mengecek Elemen LCP?<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengecek-Elemen-LCP-1024x548.webp\" alt=\"Bagaimana Cara Mengecek Elemen LCP?\" class=\"wp-image-9138\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengecek-Elemen-LCP-1024x548.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengecek-Elemen-LCP-300x161.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengecek-Elemen-LCP-768x411.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengecek-Elemen-LCP-1536x822.webp 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Bagaimana-Cara-Mengecek-Elemen-LCP-2048x1096.webp 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Bagaimana Cara Mengecek Elemen LCP?<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk melakukan pengecekan LCP sebenarnya bisa kamu lakukan dengan cara mudah. Kamu bisa mengaksesnya dengan mengunduh <em>tool <\/em><a href=\"https:\/\/pagespeed.web.dev\/\" rel=\"nofollow noopener\" target=\"_blank\">PageSpeed Insights<\/a> terlebih dulu. Menu LCP akan disebutkan di bagian \u201cDiagnostik\u201d. Perhatikan juga bahwa ada tab untuk memilih LCP yang hanya akan menampilkan masalah yang terkait dengan LCP. Kamu juga bisa mengetahui masalah-masalah yang berkaitan dengan LCP pada <em>tab<\/em> khusus di menu tersebut.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cara-mengatasi-masalah-pada-lcp\">Cara Mengatasi Masalah pada LCP<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Mengatasi-Masalah-pada-LCP-1024x614.png\" alt=\"Cara Mengatasi Masalah pada LCP\" class=\"wp-image-9147\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Mengatasi-Masalah-pada-LCP-1024x614.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Mengatasi-Masalah-pada-LCP-300x180.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Mengatasi-Masalah-pada-LCP-768x461.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Mengatasi-Masalah-pada-LCP-1536x922.png 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Mengatasi-Masalah-pada-LCP-2048x1229.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Mengatasi Masalah pada LCP<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah menemukan masalah yang timbul pada LCP dari <strong>core web vitals<\/strong>, langkah selanjutnya adalah menemukan solusi untuk itu. Nah, kamu bisa memakai <em>tool<\/em> ChromeDevTools dengan mengikuti langkah-langkah berikut ini:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Pilih tab \u201cPerformance\u201d, dan cek bagian \u201cScreenshots\u201d<\/li>\n\n\n\n<li>Setelah itu, klik \u201c<em>Start profiling and reload page<\/em>\u201d<\/li>\n\n\n\n<li>Metrik LCP terdapat di bagian grafik \u201c<em>timing<\/em>\u201d<\/li>\n\n\n\n<li>Klik rincian; dan kamu akan menemukan elemen untuk LCP.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cumulative-layout-shift-cls\">Cumulative Layout Shift (CLS)<\/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\/Cumulative-Layout-Shift-CLS-1024x538.png\" alt=\"Cumulative Layout Shift (CLS)\" class=\"wp-image-9146\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cumulative-Layout-Shift-CLS-1024x538.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cumulative-Layout-Shift-CLS-300x158.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cumulative-Layout-Shift-CLS-768x404.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cumulative-Layout-Shift-CLS-1536x807.png 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cumulative-Layout-Shift-CLS-2048x1076.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cumulative Layout Shift (CLS)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">CLS atau <em>Cumulative Layout Shift<\/em> adalah metrik dalam <strong>core web vitals<\/strong> yang bertugas untuk mengukur stabilitas visual suatu halaman saat dimuat. Ini dilakukan dengan melihat seberapa besar elemen-elemen tersebut dan sejauh mana mereka bergerak. Melalui <em>update<\/em> terbaru, Google telah memperbarui bagaimana CLS diukur. Sebelumnya, pengukuran CLS akan terus berlanjut bahkan setelah halaman awal dimuat. Namun, sekarang CLS dibatasi dalam jangka waktu lima detik di mana pergeseran terbanyak terjadi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hal ini tentunya jadi kabar baik. Apalagi, nggak bisa dipungkiri bahwa CLS bisa menjadi hal yang menjengkelkan bagi pengunjung <em>website<\/em>. Terutama, ketika kamu mencoba mengklik sesuatu di halaman yang bergerak-gerak dan akhirnya kamu malah mengklik sesuatu yang tidak kamu tuju.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Penyebab dari terjadinya CLS pada <strong>core web vitals <\/strong>ini ternyata lumayan beragam. Beberapa di antaranya adalah:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gambar tanpa dimensi.<\/li>\n\n\n\n<li>Iklan, konten tertanam, dan elemen iframes tanpa dimensi.<\/li>\n\n\n\n<li>Penyisipan konten dengan JavaScript.<\/li>\n\n\n\n<li>Penerapan jenis huruf atau gaya yang terlambat dalam proses pemuatan.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"first-input-delay-fid\">First Input Delay (FID)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/First-Input-Delay-FID-1024x580.webp\" alt=\"First Input Delay (FID)\" class=\"wp-image-9137\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/First-Input-Delay-FID-1024x580.webp 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/First-Input-Delay-FID-300x170.webp 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/First-Input-Delay-FID-768x435.webp 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/First-Input-Delay-FID.webp 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">First Input Delay (FID)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>First Input Delay<\/em> (FID) merupakan metrik waktu yang diukur dari saat pengguna pertama kali berinteraksi dengan <em>website<\/em>mu hingga situs tersebut memberikan respons. Dengan kata lain, metrik ini menguji responsivitas dari sebuah <em>website<\/em>. <strong>Core web vitals <\/strong>merupakan pengganti FID oleh Interaction to Next Paint (INP) pada Maret 2024. Apa artinya?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ini artinya, pengukuran kecepatan <em>website<\/em> akan dinilai berdasarkan beberapa faktor interaksi berikut ini:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mengklik tautan atau tombol<\/li>\n\n\n\n<li>Memasukkan teks ke dalam bidang kosong<\/li>\n\n\n\n<li>Memilih menu drop-down<\/li>\n\n\n\n<li>Mengklik kotak centang<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Perlu kamu ketahui bahwa bentuk interaksi seperti <em>scrolling<\/em> atau memperbesar halaman (<em>zoom<\/em>) nggak akan terhitung di dalam metrik ini. Selain itu, nggak semua pengguna akan berinteraksi dengan halaman situsmu, sehingga situs tersebut mungkin nggak punya nilai FID.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Makanya, ini alasan mengapa kamu nggak bisa menggunakan alat tes laboratorium untuk mengecek nilai FID. karena mereka nggak berinteraksi dengan situs tersebut. Sebagai gantinya, kamu dapat melihat Total Blocking Time (TBT) untuk uji lab. Di PageSpeed Insights, kamu bisa menggunakan tab TBT untuk melihat isu terkait.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <\/strong><a href=\"https:\/\/zaferinadigital.com\/optimaise\/atasi-error-missed-schedule-dengan-2-cara-mudah-ini\/\">Atasi Error Missed Schedule dengan 2 Cara Mudah Ini<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"apa-yang-mengakibatkan-delay-pada-fid-dari-core-web-vitals\">Apa yang Mengakibatkan <em>Delay<\/em> pada FID dari Core Web Vitals?<\/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\/Apa-yang-Mengakibatkan-Delay-pada-FID-dari-Core-Web-Vitals-1024x576.png\" alt=\"Apa yang Mengakibatkan Delay pada FID dari Core Web Vitals?\" class=\"wp-image-9144\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-yang-Mengakibatkan-Delay-pada-FID-dari-Core-Web-Vitals-1024x576.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-yang-Mengakibatkan-Delay-pada-FID-dari-Core-Web-Vitals-300x169.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-yang-Mengakibatkan-Delay-pada-FID-dari-Core-Web-Vitals-768x432.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-yang-Mengakibatkan-Delay-pada-FID-dari-Core-Web-Vitals-1536x864.png 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Apa-yang-Mengakibatkan-Delay-pada-FID-dari-Core-Web-Vitals.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Apa yang Mengakibatkan Delay pada FID dari Core Web Vitals?<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Tentunya, kamu bertanya-tanya. Apa sih faktor yang membuat performa nilai FID pada <strong>core web vitals <\/strong>mengalami penundaan (<em>delay<\/em>)? Jawabannya terletak pada aktivitas dari JavaScript. Jenis <em>coding<\/em> ini bersaing untuk mendapatkan satu utas utama. Untuk mencapainya, sistem kode ini harus berlomba-lomba untuk menyelesaikan tugas-tugas yang diberikan. Kalau diibaratkan, seperti lomba estafet dan Javascript adalah pesertanya. Selama satu tugas berjalan, <em>website<\/em> nggak bisa merespons input pengguna. Alhasil, terjadilah <em>delay<\/em> atau penundaan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Semakin lama tugasnya, semakin lama penundaan yang dialami pengguna. Jeda antara tugas adalah peluang bagi situs untuk beralih untuk memproses input pengguna dan merespons apa yang mereka inginkan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cara-meningkatkan-performa-core-web-vitals\">Cara Meningkatkan Performa Core Web Vitals<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-Core-Web-Vitals-1024x616.png\" alt=\"Cara Meningkatkan Performa Core Web Vitals\" class=\"wp-image-9143\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-Core-Web-Vitals-1024x616.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-Core-Web-Vitals-300x180.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-Core-Web-Vitals-768x462.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-Core-Web-Vitals.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Meningkatkan Performa Core Web Vitals<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nah, sekarang kamu sudah tahu masing-masing peranan dari 3 metrik utama <strong>core web vitals<\/strong>. Untuk meningkatkan performanya, kamu harus menerapkan langkah-langkah spesifik terhadap masing-masing metrik. Tiap metrik ini memerlukan perlakuan optimasi yang berbeda. Jadi, pastikan kamu membaca bagian ini hingga tuntas, ya!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cara-memperbaiki-skor-lcp\">Cara Memperbaiki Skor LCP<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Memperbaiki-Skor-LCP-1024x574.jpg\" alt=\"Cara Memperbaiki Skor LCP\" class=\"wp-image-9142\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Memperbaiki-Skor-LCP-1024x574.jpg 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Memperbaiki-Skor-LCP-300x168.jpg 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Memperbaiki-Skor-LCP-768x431.jpg 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Memperbaiki-Skor-LCP.jpg 1484w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Memperbaiki Skor LCP<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Seperti yang kita lihat di PageSpeed Insights, ada banyak masalah terkait LCP. Ini membuat LCP menjadi metrik paling sulit untuk ditingkatkan. Beberapa cara untuk meningkatkan kecepatan LCP meliputi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utamakan pemuatan sumber daya<\/li>\n\n\n\n<li>Ubah ukuran <em>file<\/em> jadi lebih kecil<\/li>\n\n\n\n<li>Sajikan <em>file<\/em> lebih dekat pada pengguna<\/li>\n\n\n\n<li>Meng<em>hosting<\/em> sumber daya yang ada di <em>server<\/em> yang sama<\/li>\n\n\n\n<li>Gunakan fitur <em>caching<\/em><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cara-meningkatkan-performa-cls\">Cara Meningkatkan Performa CLS<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"746\" src=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-CLS-1024x746.png\" alt=\"Cara Meningkatkan Performa CLS\" class=\"wp-image-9140\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-CLS-1024x746.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-CLS-300x219.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-CLS-768x560.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Performa-CLS.png 1202w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Meningkatkan Performa CLS<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk mengoptimalkan CLS, kamu akan berkutat dengan masalah terkait gambar, font, atau mungkin konten yang dimasukkan. Beberapa cara yang bisa kamu lakukan untuk optimasi aspek <strong>core web vitals <\/strong>ini adalah:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sediakan ruang untuk memuat gambar, video, dan iframes<\/li>\n\n\n\n<li>Mengoptimalkan <em>font<\/em><\/li>\n\n\n\n<li>Kalau kamu ingin menambahkan grafik animasi di dalam situsmu, pastikan animasi tersebut nggak memicu perubahan <em>layout<\/em><\/li>\n\n\n\n<li>Pastikan halaman <em>website<\/em>mu layak untuk menjalankan Bfcache<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cara-meningkatkan-nilai-fid\">Cara Meningkatkan Nilai FID<\/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\/Cara-Meningkatkan-Nilai-FID-1024x576.png\" alt=\"Cara Meningkatkan Nilai FID\" class=\"wp-image-9139\" srcset=\"https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Nilai-FID-1024x576.png 1024w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Nilai-FID-300x169.png 300w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Nilai-FID-768x432.png 768w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Nilai-FID-1536x864.png 1536w, https:\/\/zaferinadigital.com\/optimaise\/wp-content\/uploads\/2023\/11\/Cara-Meningkatkan-Nilai-FID.png 1643w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Cara Meningkatkan Nilai FID<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sebenarnya, sebagian besar <em>website<\/em> berhasil melewati pemeriksaan FID. Namun, jika kamu perlu memperbaiki skor FID, kamu bisa mencoba beberapa langkah berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mengurangi jumlah penggunaan JavaScript<\/li>\n\n\n\n<li>Jika memungkinkan, muat JavaScript di urutan terakhir<\/li>\n\n\n\n<li>Bagi-bagi tugas berdurasi panjang menjadi beberapa tugas berjangka pendek<\/li>\n\n\n\n<li>Gunakan <em>Web Workers<\/em><\/li>\n\n\n\n<li>Gunakan SSR (<em>server-side rendering<\/em>) atau <em>prerendering<\/em>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Selain menggunakan <strong>core web vitals<\/strong>, kamu juga bisa menghubungi <a href=\"https:\/\/zaferinadigital.com\/optimaise\/\">Optimaise<\/a> dan menggunakan <a href=\"https:\/\/zaferinadigital.com\/optimaise\/jasa-seo\/\">jasa SEO<\/a> yang ditawarkan. Melalui layanan ini, kami akan membantumu mengoptimasi aspek-aspek di dalam <em>website<\/em>mu. Nggak hanya itu, tim spesialis SEO kami juga akan melakukan pemantauan rutin terhadap perkembangan <em>user experience<\/em> dan aspek SEO lainnya. Dapatkan harga spesial dengan menghubungi nomor CP Optimaise +62 83834 255 761 sekarang juga, yuk!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>User experience, atau pengalaman pengunjung saat mengakses situsmu adalah salah satu aspek penting dalam mengoptimasi<\/p>\n","protected":false},"author":11,"featured_media":9151,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"categories":[24,25],"tags":[21,11],"class_list":["post-9135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing","category-seo","tag-digital-marketing","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\/9135","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/comments?post=9135"}],"version-history":[{"count":0,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/posts\/9135\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/media\/9151"}],"wp:attachment":[{"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/media?parent=9135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/categories?post=9135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zaferinadigital.com\/optimaise\/wp-json\/wp\/v2\/tags?post=9135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}