{"id":1526,"date":"2024-12-19T01:29:16","date_gmt":"2024-12-18T18:29:16","guid":{"rendered":"https:\/\/focusnic.com\/blog\/?p=1526"},"modified":"2024-12-19T15:59:15","modified_gmt":"2024-12-19T08:59:15","slug":"mengenal-apa-itu-core-web-vitals","status":"publish","type":"post","link":"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/","title":{"rendered":"Mengenal Apa itu Core Web Vitals"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#Pengenalan\" >Pengenalan<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#Komponen_Utama_Core_Web_Vitals\" >Komponen Utama Core Web Vitals<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#Largest_Contentful_Paint_LCP\" >Largest Contentful Paint (LCP)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#First_Input_Delay_FID\" >First Input Delay (FID)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#Cumulative_Layout_Shift_CLS\" >Cumulative Layout Shift (CLS)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#Tools_Pengukuran_Core_Web_Vitals\" >Tools Pengukuran Core Web Vitals<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#Optimalisasi_Core_Web_Vitals\" >Optimalisasi Core Web Vitals<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#LCP_Optimization\" >LCP Optimization<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#FID_Enhancement\" >FID Enhancement<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#CLS_Improvement\" >CLS Improvement<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#Mobile_Optimization\" >Mobile Optimization<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/focusnic.com\/blog\/mengenal-apa-itu-core-web-vitals\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pengenalan\"><\/span>Pengenalan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong><a href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520?hl=en\" target=\"_blank\" rel=\"noopener\">Core Web Vitals<\/a><\/strong> merupakan serangkaian metrik yang dikembangkan oleh Google untuk mengukur pengalaman pengguna pada sebuah website. Metrik ini menjadi faktor penting dalam penilaian kualitas sebuah halaman web, terutama dalam aspek kecepatan, responsivitas, dan stabilitas visual.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Komponen_Utama_Core_Web_Vitals\"><\/span><strong>Komponen Utama Core Web Vitals<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Largest_Contentful_Paint_LCP\"><\/span><strong>Largest Contentful Paint (LCP)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong><a href=\"https:\/\/web.dev\/articles\/lcp\" target=\"_blank\" rel=\"noopener\">LCP<\/a><\/strong> mengukur waktu yang dibutuhkan untuk memuat konten terbesar yang terlihat dalam viewport. Elemen-elemen yang dipertimbangkan dalam pengukuran LCP meliputi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gambar dan video<\/li>\n\n\n\n<li>Elemen background yang menggunakan CSS<\/li>\n\n\n\n<li>Teks atau paragraf<\/li>\n\n\n\n<li>Elemen block dengan teks di dalamnya<\/li>\n<\/ul>\n\n\n\n<p>Untuk performa optimal, nilai <strong>LCP<\/strong> sebaiknya di bawah 2.5 detik. Beberapa faktor yang mempengaruhi LCP:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Server response time<\/li>\n\n\n\n<li>Resource load time<\/li>\n\n\n\n<li>Client-side rendering<\/li>\n\n\n\n<li>Resource size optimization<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"First_Input_Delay_FID\"><\/span><strong>First Input Delay (FID)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong><a href=\"https:\/\/web.dev\/articles\/fid\" target=\"_blank\" rel=\"noopener\">FID<\/a><\/strong> mengukur waktu responsivitas website saat pengguna pertama kali berinteraksi dengan halaman. Interaksi yang diukur meliputi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klik tombol atau link<\/li>\n\n\n\n<li>Input pada form<\/li>\n\n\n\n<li>Pemilihan dropdown menu<\/li>\n\n\n\n<li>Penggunaan custom JavaScript controls<\/li>\n<\/ul>\n\n\n\n<p>Nilai <strong>FID<\/strong> yang baik adalah di bawah 100 millisecond. Optimalisasi FID dapat dilakukan melalui:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>JavaScript optimization<\/li>\n\n\n\n<li>Breaking up long tasks<\/li>\n\n\n\n<li>Reducing third-party code impact<\/li>\n\n\n\n<li>Browser main thread optimization<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cumulative_Layout_Shift_CLS\"><\/span><strong>Cumulative Layout Shift (CLS)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong><a href=\"https:\/\/web.dev\/articles\/cls\" target=\"_blank\" rel=\"noopener\">CLS<\/a><\/strong> mengukur stabilitas visual halaman web dengan menghitung pergeseran layout yang tidak diharapkan. Faktor-faktor yang mempengaruhi CLS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dynamic content insertion<\/li>\n\n\n\n<li>Images without dimensions<\/li>\n\n\n\n<li>Ads elements<\/li>\n\n\n\n<li>Embeds and iframes<\/li>\n\n\n\n<li>Web fonts causing FOUT\/FOIT<\/li>\n<\/ul>\n\n\n\n<p>Nilai <strong>CLS<\/strong> yang optimal adalah di bawah 0.1.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tools_Pengukuran_Core_Web_Vitals\"><\/span><strong>Tools Pengukuran Core Web Vitals<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Berbagai tools tersedia untuk mengukur Core Web Vitals:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Chrome User Experience Report<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Real-user measurement data<\/li>\n\n\n\n<li>Historical performance data<\/li>\n\n\n\n<li>Aggregate data analysis<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>PageSpeed Insights<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lab and field data<\/li>\n\n\n\n<li>Performance scoring<\/li>\n\n\n\n<li>Optimization suggestions<\/li>\n\n\n\n<li>Mobile and desktop analysis<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Search Console<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>URL performance grouping<\/li>\n\n\n\n<li>Issue reporting<\/li>\n\n\n\n<li>Trend analysis<\/li>\n\n\n\n<li>Performance monitoring<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Optimalisasi_Core_Web_Vitals\"><\/span><strong>Optimalisasi Core Web Vitals<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"LCP_Optimization\"><\/span><strong>LCP Optimization<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Server Optimization<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cache implementation<\/li>\n\n\n\n<li>CDN utilization<\/li>\n\n\n\n<li>Server-side rendering<\/li>\n\n\n\n<li>Database query optimization<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Resource Optimization<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Image compression<\/li>\n\n\n\n<li>Lazy loading<\/li>\n\n\n\n<li>Resource prioritization<\/li>\n\n\n\n<li>Critical CSS delivery<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FID_Enhancement\"><\/span><strong>FID Enhancement<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>JavaScript Optimization<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Code splitting<\/li>\n\n\n\n<li>Tree shaking<\/li>\n\n\n\n<li>Async\/defer loading<\/li>\n\n\n\n<li>Worker threads utilization<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Resource Loading<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Resource hints<\/li>\n\n\n\n<li>Preload critical assets<\/li>\n\n\n\n<li>Minimize main thread work<\/li>\n\n\n\n<li>Reduce JavaScript execution time<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CLS_Improvement\"><\/span><strong>CLS Improvement<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Layout Stability<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set explicit dimensions<\/li>\n\n\n\n<li>Reserve space for dynamic content<\/li>\n\n\n\n<li>Avoid pop-ins<\/li>\n\n\n\n<li>Stabilize font loading<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Content Structure<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Proper content flow<\/li>\n\n\n\n<li>Stable layout structure<\/li>\n\n\n\n<li>Avoid content shifting<\/li>\n\n\n\n<li>Responsive design principles<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mobile_Optimization\"><\/span><strong>Mobile Optimization<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Optimalisasi untuk perangkat mobile meliputi:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Responsive Design<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flexible layouts<\/li>\n\n\n\n<li>Viewport configuration<\/li>\n\n\n\n<li>Touch-friendly elements<\/li>\n\n\n\n<li>Mobile-first approach<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Performance Optimization<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mobile network consideration<\/li>\n\n\n\n<li>Image optimization<\/li>\n\n\n\n<li>Minimal resource usage<\/li>\n\n\n\n<li>Progressive enhancement<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span><strong>Kesimpulan<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p><strong>Core Web Vitals<\/strong> menjadi standar penting dalam pengembangan website modern yang mengutamakan pengalaman pengguna. Optimalisasi ketiga metrik utama &#8211; <strong>LCP<\/strong>, <strong>FID<\/strong>, dan <strong>CLS<\/strong> &#8211; membutuhkan pendekatan komprehensif dan infrastruktur yang handal.<\/p>\n\n\n\n<p>Untuk memastikan website Anda memenuhi standar <strong>Core Web Vitals<\/strong>, diperlukan platform hosting yang reliable dan performa tinggi. <a href=\"https:\/\/focusnic.com\">Focusnic<\/a> hadir sebagai solusi terpercaya untuk kebutuhan <strong>layanan server<\/strong> dan <a href=\"https:\/\/focusnic.com\/compute-ssd\">cloud VPS<\/a> Anda. Dengan dukungan tim technical expert yang berpengalaman, <strong>Focusnic<\/strong> menyediakan infrastruktur yang dioptimalkan untuk performa web terbaik. Jangan ragu untuk menghubungi <strong>Focusnic<\/strong> untuk mendapatkan solusi <strong>cloud hosting<\/strong> dan <strong>server management<\/strong> yang akan membantu website Anda mencapai standar Core Web Vitals dengan optimal.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pengenalan Core Web Vitals merupakan serangkaian metrik yang dikembangkan oleh Google untuk mengukur pengalaman pengguna pada sebuah website. Metrik ini menjadi faktor penting dalam penilaian kualitas sebuah halaman web, terutama dalam aspek kecepatan, responsivitas, dan stabilitas visual. Komponen Utama Core Web Vitals Largest Contentful Paint (LCP) LCP mengukur waktu yang dibutuhkan untuk memuat konten terbesar [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1527,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[72,78,23],"class_list":{"0":"post-1526","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-informasi","8":"tag-network","9":"tag-seo","10":"tag-server"},"_links":{"self":[{"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/posts\/1526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/comments?post=1526"}],"version-history":[{"count":1,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/posts\/1526\/revisions"}],"predecessor-version":[{"id":1528,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/posts\/1526\/revisions\/1528"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/media\/1527"}],"wp:attachment":[{"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/media?parent=1526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/categories?post=1526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/focusnic.com\/blog\/wp-json\/wp\/v2\/tags?post=1526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}