{"id":12253,"date":"2021-07-21T09:10:43","date_gmt":"2021-07-21T09:10:43","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=12253"},"modified":"2021-07-21T09:10:43","modified_gmt":"2021-07-21T09:10:43","slug":"pengertian-dan-cara-optimasi-cumulative-layout-shift","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift","title":{"rendered":"Pengertian Dan Cara Optimasi Cumulative Layout Shift"},"content":{"rendered":"

Pengertian Cumulative Layout Shift<\/span><\/strong><\/h2>\n

Cumulative Layout Shift\u00a0<\/span><\/strong>adalah ukuran urutan yang terjadi pada pergeseran tata letak terbesar pada setiap perubahan tata letak yang tidak terduga yang dimana terjadi selama seluruh waktu halaman sampai berhasil dimuat.<\/span><\/p>\n

Urutan pergeseran tata letak, yang disebut juga sebagai jendela sesi, adalah ketika satu atau beberapa pergeseran tata letak individual yang terjadi secara berurutan dengan cepat dengan waktu mencapai kurang dari 1 detik di antara setiap pergeseran dan juga berlangsung selama maksimum 5 detik.<\/span><\/p>\n

Alasan Cumulative Layout Shift Penting<\/span><\/strong><\/h2>\n

Cumulative Layout Shift ini penting untuk diperhatikan karena metrik ini menjadi salah satu dari 3 metrik penting yang masuk pada Core Web Vitals. Sedangkan Core Web Vitals dapat dipastikan menjadi salah satu ranking factor yang digunakan oleh Google di tahun 2021.<\/p>\n

Core Web Vitals<\/b><\/h3>\n

Web Vitals adalah inisiatif Google yang berupa sekumpulan metrik dalam mengukur beberapa hal yang dianggap penting untuk memberikan user experience atau pengalaman pengguna yang baik. Core Web Vitals merupakan metrik yang menjadi bagian dari Web Vitals yang dianggap paling penting dan paling mempengaruhi pada pengalaman pengguna.<\/p>\n

Dengan adanya core web vitals, maka pemilik website mempunyai tiga aspek yang lebih jelas yang dapat digunakan untuk mengukur efektivitas halaman-halaman websitenya, yaitu :<\/p>\n

    \n
  • Kecepatan loading.<\/li>\n
  • Baik atau tidaknya respons elemen halaman website.<\/li>\n
  • Stabilitas layout halaman.<\/li>\n<\/ul>\n

    Google menyebutkan bahwa ada kemungkinan pengunjung dapat meninggalkan website yang dapat menurun 24 persen jika bisa mengoptimalkan ketiga aspek di atas. Tidak hanya itu saja, core web vitals juga dapat berpengaruh terhadap SEO.<\/p>\n

    Kategori Cumulative Layout Shift<\/span><\/strong><\/h2>\n

    Sama halnya dengan metrik Core Web Vitals yang lain, CLS juga mempunyai tiga kategori dalam penilaiannya, yaitu :<\/p>\n

      \n
    • Good, kurang dari sama dengan 0.1.<\/li>\n
    • Needs Improvement, antara 0.1 sampai dengan 0.25.<\/li>\n
    • Poor, sama dengan 0.25 atau lebih dari itu.<\/li>\n<\/ul>\n

      \"\"<\/p>\n

      Cara Menghitung Cumulative Layout Shift (CLS)<\/span><\/strong><\/h2>\n

      Rumus menghitung Cumulative Layout Shift adalah dengan cara menjumlahkan semua skor Layout Shift. Sedangkan cara menghitung Layout Shift adalah sebagai berikut :<\/p>\n

      layout shift score = impact fraction * distance fraction<\/span><\/pre>\n
      Jika pada halaman website terjadi banyak perubahan tata letak, maka untuk agar mendapatkan nilai CLS, perlu menjumlahkan keseluruhan skor Layout Shiftnya.<\/p>\n
      Jadi rumus Cumulative Layout Shift ini bisa ditulis sebagai berikut :<\/p>\n
      \"\"<\/p>\n
      Dari rumus tersebut pasti menyadari bahwa untuk menghitung nilai Cumulative Layout Shift, maka harus memahami dua istilah berikut ini :<\/p>\n
      1. Impact Fraction<\/span><\/strong><\/h3>\n
      Impact Fraction adalah metrik yang mengukur bagaimana elemen yang tidak stabil mempengaruhi viewport di antara dua frame. Agar lebih mudah memahaminya dapat melihat contoh di bawah ini :<\/p>\n
      \"\"<\/p>\n
      Pada contoh di atas terlihat perubahan tata letak pada gambar kedua. Pada gambar tersebut diberikan garis putus-putus berwarna merah yang menandakan area yang terkena dampak dari perubahan tata letak.<\/p>\n
      Impact Fraction adalah perbandingan luas area terdampak dengan luas viewportnya.<\/p>\n
      Jika menganggap area terdampaknya adalah 75% dari total tampilan halaman yang\u00a0 dapat terlihat pada layar, maka itulah Impact Fraction. Jadi dapat menganggap Impact Fractionnya adalah sekitar 75% atau 0.75.<\/p>\n
      2. Distance Fraction<\/span><\/strong><\/h3>\n
      Distance Fraction merupakan pergeseran yang dihitung dari jarak terjauh pergerakan elemen yang tidak stabil dan relatif terhadap viewport. Sebagai contohnya dapat melihatnya pada gambar di bawah ini :<\/p>\n
      \"\"<\/p>\n
      Jika diperhatikan pada gambar yang kedua terdapat tanda panah biru yang memberitahukan bahwa jarak pergeseran elemen dari tempatnya semula. Kemudian jarak tersebut dapat dibagi dengan tinggi tampilan halaman yang tampak pada layar.<\/p>\n
      Misalnya panah biru tersebut menandakan antara jarak 25 milimeter, kemudian tinggi tampilan halaman yang terlihat pada layar dapat menganggap yaitu 100 milimeter. Jadi nilai Distance Fractionnya adalah 25 dibagi 100 yaitu 0.25.<\/p>\n
      Mencari Nilai CLS\u00a0<\/b><\/h3>\n
      Sekarang sebagai contohnya, jika menginginkan mencari nilai CLS dari kedua contoh di atas maka :<\/p>\n
      Impact Fraction = 0.75<\/p>\n
      Distance Fraction =0.25<\/p>\n
      Jadi CLS nya adalah = 0.75 * 0.25 = 0.1875<\/p>\n
      Cumulative Layout Shift = 0.1875<\/p>\n
      Jika menyesuaikan dengan kategorinya, maka skor tersebut telah termasuk pada kategori \u201cNeed Improvement\u201d atau butuh perbaikan pada tata letak website.<\/p>\n
      Cara Mengukur Cumulutive Layout Shift<\/span><\/strong><\/h2>\n
      PageSpeed Insights<\/span><\/strong><\/h3>\n
      Cara yang paling mudah adalah menggunakan Google PageSpeed Insights. Google PageSpeed Insights dapat diakses pada alamat berikut ini :<\/p>\n
      https:\/\/developers.google.com\/speed\/pagespeed\/insights\/<\/span><\/pre>\n
      Berikut ini tampilannya :<\/p>\n
      \"\"<\/p>\n
      Cukup memasukkan URL yang ingin di analisa, kemudian klik analize, dalam beberapa detik laporannya akan dapat diakses.<\/p>\n
      Penyebab Cumulutive Layout Shift<\/span><\/strong><\/h2>\n
      \"\"<\/p>\n
      Terdapat beberapa hal yang dapat menyebabkan CLS pada website yaitu :<\/p>\n
        \n
      • Gambar, foto dan video yang tidak memiliki dimensi.<\/li>\n
      • Iklan, iframe dan juga object lain yang di embed tidak beserta dimensinya.<\/li>\n
      • Web Font yang bisa menyebabkan Flash Of Invisible Text (FOIT) atau Flash Of Unstyled Text (FOUT). Maksudnya adalah waktu yang dibutuhkan website dalam memuat font yang berukuran besar. Jadi sebagian browser dapat menyembunyikan teks hingga font dimuat sepenuhnya.<\/li>\n
      • Konten yang dimasukkan ke dalam halaman website yang secara dinamis.<\/li>\n
      • Tindakan menunggu respons jaringan sebelum memperbarui DOM. Document Object Model atau DOM adalah dokumen (HTML) yang dimodelkan dalam sebuah bentuk objek.Objek dari dokumen ini menyuguhkan sekumpulan fungsi dan atribut\/data yang bisa digunakan dalam membuat program Javascript. Hal inilah yang disebut juga dengan API (Application Programming Interface).<\/li>\n<\/ul>\n
        Cara Optimasi Cumulutive Layout Shift<\/span><\/strong><\/h2>\n
        Masih bersumber pada referensi yang sama web.dev. Dikatakan bahwa terdapat beberapa cara untuk melakukan optimasi Cumulative Layout Shift, yaitu :<\/p>\n
          \n
        • Tambahkan dimensi.<\/li>\n
        • Gunakan atribut rel=\u201dpreload\u201d pada font.<\/li>\n
        • Jangan munculkan konten yang berpotensi menimbulkan CLS pada awal halaman.<\/li>\n<\/ul>\n\n\n
          \n            \n
          \n    \n
          \n            
          \n            \n\n
          <\/div>\n        <\/div>\n            
          \n            \n\n
          <\/div>\n        <\/div>\n            
          \n            \n\n
          <\/div>\n        <\/div>\n            
          \n            \n\n
          <\/div>\n        <\/div>\n            
          \n            \n\n
          <\/div>\n        <\/div>\n    <\/div>\n    \n
          \n            
          \n            \n\n
          <\/div>\n        <\/div>\n            
          \n            \n\n
          <\/div>\n        <\/div>\n            
          \n            \n\n
          <\/div>\n        <\/div>\n            
          \n            \n\n
          <\/div>\n        <\/div>\n            
          \n            \n\n
          <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
          \n            5\/5 - (2 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
          Pengertian Cumulative Layout Shift Cumulative Layout Shift\u00a0adalah ukuran urutan yang terjadi pada pergeseran tata letak terbesar pada setiap perubahan tata letak yang tidak terduga yang dimana terjadi selama seluruh waktu halaman sampai berhasil dimuat. Urutan pergeseran tata letak, yang disebut juga sebagai jendela sesi, adalah ketika satu atau beberapa pergeseran tata letak individual yang terjadi […]<\/p>\n","protected":false},"author":7,"featured_media":12266,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[4444,4445,4447,4443,4442,4446],"class_list":["post-12253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-cara-menghitung-cumulative-layout-shift","tag-cara-mengukur-cumulative-layout-shift","tag-cara-optimasi-cumulative-layout-shift","tag-kategori-cumulative-layout-shift","tag-pengertian-cumulative-layout-shift","tag-penyebab-cumulative-layout-shift"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift-1140x445.gif",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift-463x348.gif",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift-300x169.gif",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif",1440,810,false]},"yoast_head":"\nPengertian Dan Cara Optimasi Cumulative Layout Shift - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pengertian Dan Cara Optimasi Cumulative Layout Shift - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Pengertian Cumulative Layout Shift Cumulative Layout Shift\u00a0adalah ukuran urutan yang terjadi pada pergeseran tata letak terbesar pada setiap perubahan tata letak yang tidak terduga yang dimana terjadi selama seluruh waktu halaman sampai berhasil dimuat. Urutan pergeseran tata letak, yang disebut juga sebagai jendela sesi, adalah ketika satu atau beberapa pergeseran tata letak individual yang terjadi […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-21T09:10:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"810\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Risa Y\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Risa Y\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift\"},\"author\":{\"name\":\"Risa Y\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\"},\"headline\":\"Pengertian Dan Cara Optimasi Cumulative Layout Shift\",\"datePublished\":\"2021-07-21T09:10:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift\"},\"wordCount\":806,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif\",\"keywords\":[\"cara menghitung cumulative layout shift\",\"cara mengukur cumulative layout shift\",\"cara optimasi cumulative layout shift\",\"kategori cumulative layout shift\",\"pengertian cumulative layout shift\",\"penyebab cumulative layout shift\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift\",\"url\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift\",\"name\":\"Pengertian Dan Cara Optimasi Cumulative Layout Shift - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif\",\"datePublished\":\"2021-07-21T09:10:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif\",\"width\":1440,\"height\":810},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pengertian Dan Cara Optimasi Cumulative Layout Shift\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita & Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\",\"name\":\"Risa Y\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"caption\":\"Risa Y\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pengertian Dan Cara Optimasi Cumulative Layout Shift - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift","og_locale":"en_US","og_type":"article","og_title":"Pengertian Dan Cara Optimasi Cumulative Layout Shift - Hosteko Blog","og_description":"Pengertian Cumulative Layout Shift Cumulative Layout Shift\u00a0adalah ukuran urutan yang terjadi pada pergeseran tata letak terbesar pada setiap perubahan tata letak yang tidak terduga yang dimana terjadi selama seluruh waktu halaman sampai berhasil dimuat. Urutan pergeseran tata letak, yang disebut juga sebagai jendela sesi, adalah ketika satu atau beberapa pergeseran tata letak individual yang terjadi […]","og_url":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift","og_site_name":"Hosteko Blog","article_published_time":"2021-07-21T09:10:43+00:00","og_image":[{"width":1440,"height":810,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif","type":"image\/gif"}],"author":"Risa Y","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Risa Y","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift"},"author":{"name":"Risa Y","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b"},"headline":"Pengertian Dan Cara Optimasi Cumulative Layout Shift","datePublished":"2021-07-21T09:10:43+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift"},"wordCount":806,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif","keywords":["cara menghitung cumulative layout shift","cara mengukur cumulative layout shift","cara optimasi cumulative layout shift","kategori cumulative layout shift","pengertian cumulative layout shift","penyebab cumulative layout shift"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift","url":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift","name":"Pengertian Dan Cara Optimasi Cumulative Layout Shift - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif","datePublished":"2021-07-21T09:10:43+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif","width":1440,"height":810},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/pengertian-dan-cara-optimasi-cumulative-layout-shift#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Pengertian Dan Cara Optimasi Cumulative Layout Shift"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita & Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b","name":"Risa Y","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","caption":"Risa Y"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/07\/Pengertian-Dan-Cara-Optimasi-Cumulative-Layout-Shift.gif","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/12253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=12253"}],"version-history":[{"count":2,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/12253\/revisions"}],"predecessor-version":[{"id":12267,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/12253\/revisions\/12267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/12266"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=12253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=12253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=12253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}