{"id":14314,"date":"2022-10-19T16:30:43","date_gmt":"2022-10-19T14:30:43","guid":{"rendered":"https:\/\/www.ihs.com.tr\/blog\/?p=14314"},"modified":"2022-10-20T09:40:40","modified_gmt":"2022-10-20T07:40:40","slug":"cumulative-layout-shift-cls-nedir","status":"publish","type":"post","link":"https:\/\/www.ihs.com.tr\/blog\/cumulative-layout-shift-cls-nedir\/","title":{"rendered":"Cumulative Layout Shift (CLS) Nedir? Nas\u0131l Optimize Edilir?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Cumulative Layout Shift (CLS), Google&#8217;\u0131n Core Web Vitals i\u00e7in kulland\u0131\u011f\u0131 \u00f6l\u00e7\u00fcmlerden biridir. CLS tam olarak; web sayfas\u0131n\u0131n y\u00fcklenme an\u0131nda sayfan\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131n \u00f6l\u00e7\u00fcmlemesinde kullan\u0131l\u0131r.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Google, web sayfalar\u0131n\u0131 s\u0131ralayabilmek i\u00e7in baz\u0131 kriterlere bakar. Bunu ise web sitesinin kullan\u0131c\u0131 deneyimi, SEO uyumu, performans\u0131 gibi \u015feyleri \u00f6l\u00e7\u00fcmleyerek yapar. B\u00f6ylece web sitesini geli\u015ftirmeye y\u00f6nelik yap\u0131lmas\u0131 gerekenleri listeler. Bu\u00a0 \u00f6l\u00e7\u00fcmlemeler ve bunlara verilen puanlar Core Web Vitals olarak adland\u0131r\u0131l\u0131r. Cumulative Layout Shift (CLS) de ayn\u0131 \u015fekilde core web vitals i\u00e7in \u00f6l\u00e7\u00fcmlenen de\u011ferlerden bir tanesidir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">K\u0131sacas\u0131 CLS (yani k\u00fcm\u00fclatif d\u00fczen kaymas\u0131), bir web sitesinin y\u00fcklenmeye ba\u015flamas\u0131 ve y\u00fcklenmesinin bitti\u011fi o andaki site par\u00e7alar\u0131n\u0131n d\u00fczen kaymalar\u0131n\u0131 \u00f6l\u00e7\u00fcmler.<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_77 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0130\u00e7erik Tablosu<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a06dd315d6f1\" class=\"ez-toc-cssicon-toggle-label\"><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><\/label><input type=\"checkbox\" id=\"ez-toc-cssicon-toggle-item-6a06dd315d6f1\" aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ihs.com.tr\/blog\/cumulative-layout-shift-cls-nedir\/#Cumulative-Layout-Shift-CLS-Nedir\" >Cumulative Layout Shift (CLS) Nedir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ihs.com.tr\/blog\/cumulative-layout-shift-cls-nedir\/#Cumulative-Layout-Shifte-Sebep-Olan-Seyler-Nelerdir\" >Cumulative Layout Shift&#8217;e Sebep Olan \u015eeyler Nelerdir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ihs.com.tr\/blog\/cumulative-layout-shift-cls-nedir\/#Web-Siteleri-Icin-CLS-Neden-Onemlidir\" >Web Siteleri \u0130\u00e7in CLS Neden \u00d6nemlidir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ihs.com.tr\/blog\/cumulative-layout-shift-cls-nedir\/#Cumulative-Layout-Shift-Puani-Nasil-Olculur\" >Cumulative Layout Shift Puan\u0131 Nas\u0131l \u00d6l\u00e7\u00fcl\u00fcr?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.ihs.com.tr\/blog\/cumulative-layout-shift-cls-nedir\/#Cumulative-Layout-Shift-Puani-Nasil-Iyilestirilir\" >Cumulative Layout Shift Puan\u0131 Nas\u0131l \u0130yile\u015ftirilir?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Cumulative-Layout-Shift-CLS-Nedir\"><\/span><b>Cumulative Layout Shift (CLS) Nedir?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure><video autoplay=\"\" controls=\"\" height=\"510\" loop=\"\" muted=\"\" poster=\"https:\/\/storage.googleapis.com\/web-dev-assets\/layout-instability-api\/layout-instability-poster.png\" width=\"658\"><source type=\"video\/webm; codecs=vp8\" src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/layout-instability-api\/layout-instability2.webm\"><source type=\"video\/mp4; codecs=h264\" src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/layout-instability-api\/layout-instability2.mp4\"><\/video><\/figure>\n<p><span style=\"font-weight: 400;\">Cumulative Layout Shift (CLS), web sayfas\u0131 i\u00e7erisindeki yer alan alanlardaki kaymalar\u0131n \u00f6l\u00e7\u00fcm\u00fcd\u00fcr. CLS &#8216;nin amac\u0131; negatif bir deneyime neden olan sayfay\u0131 incelemek ve burada olu\u015fan sorunun nedenini belirlemektir. Cumulative Layout Shift, kullan\u0131c\u0131lar\u0131n web sitesinde gezerlerken ge\u00e7 y\u00fcklenen alanlar veya g\u00f6rsellerin olu\u015fturdu\u011fu kaymalar sebebiyle, kullan\u0131c\u0131 etkile\u015fimini olumsuz etkileyen durumlar\u0131n tespiti ve bunlarla ilgili geribildirim vermesini ama\u00e7lar. \u0130yi bir kullan\u0131c\u0131 deneyimi sunabilmeniz i\u00e7in d\u00fczeltmeniz gereken alanlar hakk\u0131nda bilgi verir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00d6rne\u011fin, bir web sayfas\u0131n\u0131 a\u015fa\u011f\u0131 kayd\u0131rarak incelerken, i\u00e7eri\u011finizde bulunan g\u00f6rseller veya videolar ge\u00e7 y\u00fcklendi\u011fi i\u00e7in g\u00f6r\u00fcnt\u00fclenmez ise; ziyaret\u00e7iler sitenizi gezerken bunlar\u0131n ge\u00e7 y\u00fcklenmesinden kaynakl\u0131 olarak sayfa atlamalar veya kaymalar g\u00f6rebilir.<\/span><\/p>\n<figure><video autoplay=\"\" controls=\"\" height=\"452\" loop=\"\" muted=\"\" width=\"658\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/better-layout-shift-metric\/session-window.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/better-layout-shift-metric\/session-window.mp4\" type=\"video\/mp4\"><\/video><\/figure>\n<p><span style=\"font-weight: 400;\"> Ayr\u0131ca sayfa a\u00e7\u0131l\u0131\u015f\u0131 ve incelenmesi s\u0131ras\u0131nda aniden \u00e7\u0131kan reklam alanlar\u0131, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan olumsuz etki yaratabilecek durumlara sebep olacakt\u0131r. \u00d6rne\u011fin; bir sayfay\u0131 a\u00e7t\u0131n\u0131z ve o anda bir form doldurmak i\u00e7in buton t\u0131klamak istediniz. Butonu t\u0131klarken yukar\u0131da daha \u00f6nce y\u00fcklenmemi\u015f bir g\u00f6rsel ya da aniden ortaya \u00e7\u0131kan bir pop-up nedeni ile t\u0131klayaca\u011f\u0131n\u0131z alan haricinde farkl\u0131 bir yere t\u0131klayabilirsiniz.\u00a0 \u0130\u015fte bu t\u00fcr durumlar kullan\u0131c\u0131n\u0131n siteden istedi\u011fi verimi alamamas\u0131 ve k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimi yaratt\u0131\u011f\u0131 i\u00e7in siteyi terk etmesine neden olabilece\u011finden en \u00e7ok dikkat edilmesi gereken UX tabanl\u0131 d\u00fczenlemelerdendir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Kaliteli ve iyi diyebilece\u011fimiz bir CLS puan\u0131 0.1&#8217;den azd\u0131r. 0.1 ile 0.25 puan aras\u0131nda kalan skorlar geli\u015ftirilmesi gerekir. 0.25 \u00fczerinde kalan skorlar ise zay\u0131f kabul edilir ve bunun \u00fczerinde durup ciddi bir \u00e7al\u0131\u015fma sunman\u0131z gerekir. Genel anlamda 0.1 alt\u0131nda kalabilmek ama\u00e7lanmal\u0131d\u0131r.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cumulative-Layout-Shifte-Sebep-Olan-Seyler-Nelerdir\"><\/span><b>Cumulative Layout Shift&#8217;e<\/b><b> Sebep Olan \u015eeyler Nelerdir?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Web sitesinde kullan\u0131lan g\u00f6rseller veya reklamlar i\u00e7in ayr\u0131lan alan\u0131n, &#8220;width&#8221; ve &#8220;height&#8221; de\u011ferlerinin tan\u0131mlanmamas\u0131<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kullan\u0131c\u0131 bilgisayar\u0131nda y\u00fckl\u00fc olmayan fakat sonradan y\u00fcklenen baz\u0131 \u00f6zel fontlar\u0131n harici bir siteden import edilmesi<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kullan\u0131lan sunucu kaynaklar\u0131n\u0131n yetersiz olmas\u0131 nedeniyle ya\u015fanan performans kay\u0131plar\u0131na ba\u011fl\u0131 y\u00fcklenme s\u00fcrelerinin etkilenmesi<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Animasyon vb kullan\u0131mlarda \u00e7ok\u00e7a javascript kullan\u0131m\u0131<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hatal\u0131 geli\u015ftirmeler sonucu olu\u015fan CLS problemleri<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mevcut olan bir i\u00e7eri\u011fin \u00fczerine otomatik yeni bir i\u00e7erik eklenmesi<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">DOM y\u00fcklemeden \u00f6nce bir a\u011f onay\u0131n\u0131 beklemek<\/span><\/li>\n<\/ul>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Web-Siteleri-Icin-CLS-Neden-Onemlidir\"><\/span><b>Web Siteleri \u0130\u00e7in CLS Neden \u00d6nemlidir?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14316\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/10\/Cumulative-Layout-Shift-2.jpg\" alt=\"Cumulative-Layout-Shift-2\" width=\"1200\" height=\"689\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/10\/Cumulative-Layout-Shift-2.jpg 1200w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/10\/Cumulative-Layout-Shift-2-300x172.jpg 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/10\/Cumulative-Layout-Shift-2-1024x588.jpg 1024w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/10\/Cumulative-Layout-Shift-2-1170x672.jpg 1170w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/10\/Cumulative-Layout-Shift-2-585x336.jpg 585w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Olaya, daha iyi bir kullan\u0131c\u0131 deneyimi sunarak web sitenizi g\u00f6r\u00fcn\u00fcr k\u0131lmak amac\u0131yla bakt\u0131\u011f\u0131m\u0131zda Cumulative Layout Shift &#8216;in \u00f6nemi az\u0131msanamayacak kadar fazlala\u015f\u0131r. \u00d6zellikle de internet \u00fczerindeki rekabet oran\u0131n\u0131n artmas\u0131, teknolojinin de geli\u015ferek insanlar\u0131n dijital alana y\u00f6nlenmesinden dolay\u0131 dijital ortamda tutunma ihtiyac\u0131 do\u011fdu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Kullan\u0131c\u0131lar\u0131n internet h\u0131z\u0131 konusunda tahamm\u00fcllerini \u00f6l\u00e7\u00fcmleyen Google verilerine g\u00f6re, \u00f6zellikle mobil cihazlardaki 1 saniyelik y\u00fcklenme h\u0131z\u0131 gecikmesinde %20 oran\u0131nda d\u00f6n\u00fc\u015f\u00fcm kayb\u0131 ya\u015fand\u0131\u011f\u0131n\u0131 g\u00f6zlemlemi\u015ftir. Buradan da anla\u015f\u0131ld\u0131\u011f\u0131 \u00fczere h\u0131zl\u0131 bir web sitesine sahip olmak rakipleriniz ile rekabet g\u00fcc\u00fcn\u00fcz\u00fc artt\u0131racakt\u0131r. Ziyaret\u00e7i oranlar\u0131n\u0131z\u0131n artmas\u0131 ve Google taraf\u0131ndan pozitif d\u00f6n\u00fc\u015f al\u0131nmas\u0131 ile de Google s\u0131ralamalar\u0131nda iyile\u015ftirme alarak ba\u015f sayfalarda \u00e7\u0131kman\u0131z sa\u011flan\u0131r. Tabi ki burada \u00f6nemli olan tek \u015feyin h\u0131z olmad\u0131\u011f\u0131 da unutulmamal\u0131d\u0131r. Fakat CLS de\u011ferleri i\u00e7erisinde verilen direktiflerin d\u00fczenlenmesi ile sitenizden verim alma oran\u0131n\u0131z da artacakt\u0131r.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cumulative-Layout-Shift-Puani-Nasil-Olculur\"><\/span><b>Cumulative Layout Shift<\/b><b> Puan\u0131 Nas\u0131l \u00d6l\u00e7\u00fcl\u00fcr?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>layout shift score = impact fraction * distance fraction<\/p>\n<p><span style=\"font-weight: 400;\">D\u00fczen Kaymas\u0131 Puan\u0131 = Etki Kesri * Uzakl\u0131k Kesri<\/span><\/p>\n<p>Cumulative Layout Shift puan\u0131 hesaplanmas\u0131nda taray\u0131c\u0131, sayfada g\u00f6r\u00fcnen alan\u0131n boyutuna ve g\u00f6r\u00fcnen alanda olu\u015fturulan iki \u00e7er\u00e7eve aras\u0131ndaki karars\u0131z \u00f6\u011felerin (kaymalara sebep olan i\u00e7erik alanlar\u0131n\u0131n hareketi) hareketini inceler. CLS Puan\u0131 etki oran\u0131 ve mesafe oran\u0131 \u00f6l\u00e7\u00fcmlerini baz alan iki harekete ba\u011fl\u0131 \u00f6l\u00e7\u00fcmlemelerin puanlamas\u0131d\u0131r.<\/p>\n<p><span style=\"font-weight: 400;\">\u0130lk olarak taray\u0131c\u0131 ba\u015flang\u0131\u00e7 konumunu de\u011fi\u015ftiren \u00f6\u011feleri arar. Ard\u0131ndan, buradaki kayma etkisini belirler. Bunu bulmak i\u00e7in de karars\u0131z \u00f6\u011felerden etkilenen b\u00f6l\u00fcm\u00fcn y\u00fcksekli\u011fini, t\u00fcm g\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n y\u00fcksekli\u011fine b\u00f6lerek kayma etkisini hesaplar. Sonras\u0131nda da karars\u0131z \u00f6\u011fenin g\u00f6r\u00fcn\u00fcm alan\u0131yla ilgili olarak ne kadar hareket etti\u011fini hesaplayarak kayma mesafesini \u00f6l\u00e7\u00fcmler.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Cumulative Layout Shift skoru, Google&#8217;\u0131n ger\u00e7ek kullan\u0131c\u0131 verilerini toplamas\u0131 ve bu verilerin h\u0131z testi ara\u00e7lar\u0131 ile \u00f6l\u00e7\u00fcmlemesiyle olu\u015fur. Bu de\u011ferleri g\u00f6r\u00fcnt\u00fcleyebilmek i\u00e7in PageSpeed Insights arac\u0131n\u0131 ya da Google Chrome &#8216;un Geli\u015ftirici Ara\u00e7lar\u0131n\u0131 kullanabilirsiniz. Bu ara\u00e7lar\u0131 kullanarak CLS de\u011ferinin 0.1 &#8216;in alt\u0131nda kald\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcnt\u00fcl\u00fcyorsan\u0131z bu harika bir sonu\u00e7tur. \u00c7\u00fcnk\u00fc CLS skoru s\u0131f\u0131ra ne kadar yak\u0131nsa SEO performans\u0131n\u0131z da o kadar iyi sonu\u00e7 verecektir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CLS skorlar\u0131n\u0131 g\u00f6r\u00fcnt\u00fcleyebilmek i\u00e7in a\u015fa\u011f\u0131daki ara\u00e7lardan birini kullanabilirsiniz.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lighthouse<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">WebPageTest<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">SpeedCurve<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dareboost<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">GTMetrix<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Chrome Kullan\u0131c\u0131 Deneyimi Raporu<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">PageSpeed Insights<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Search Console<\/span><\/li>\n<\/ul>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Cumulative-Layout-Shift-Puani-Nasil-Iyilestirilir\"><\/span><b>Cumulative Layout Shift<\/b><b> Puan\u0131 Nas\u0131l \u0130yile\u015ftirilir?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Temel web g\u00f6stergeleri (Core Web Vitals), Google&#8217;\u0131n bir web sayfas\u0131nda kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan ne kadar iyi ya da k\u00f6t\u00fc oldu\u011funu g\u00f6steren metriklerdir. Kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in odaklanman\u0131z gereken \u00f6ncelikli metriklerdir. \u00c7\u00fcnk\u00fc bu metrikler Google&#8217;\u0131n s\u0131ralama i\u00e7in yapt\u0131\u011f\u0131 de\u011ferlendirmeye etki eder.\u00a0 Bu temel metrikler aras\u0131nda <a href=\"https:\/\/www.ihs.com.tr\/blog\/largest-contentful-paint-lcp-nedir\/\" target=\"_blank\" rel=\"noopener\">LCP<\/a>, CLS, ve <a href=\"https:\/\/www.ihs.com.tr\/blog\/first-input-delay-fid-nedir\/\" target=\"_blank\" rel=\"noopener\">FID<\/a> metriklerinin iyile\u015ftirilmesi gerekmektedir.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>LCP:<\/b><span style=\"font-weight: 400;\"> metin veya g\u00f6rseller \u2192 sayfan\u0131n y\u00fcklenmesini \u00f6l\u00e7en bir h\u0131z metri\u011fidir.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">LPC etkileyen fakt\u00f6rler: Sunucu yan\u0131t s\u00fcresindeki yava\u015fl\u0131k, JS veya CSS&#8217;in olu\u015fmas\u0131n\u0131 etkileyen fakt\u00f6rler, kaynaklar\u0131n y\u00fcklenme s\u00fcrelerindeki yava\u015fl\u0131k.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>CLS:<\/b><span style=\"font-weight: 400;\"> G\u00f6rsel kararl\u0131l\u0131k<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>FID:<\/b><span style=\"font-weight: 400;\"> \u0130lk giri\u015f gecikmesi (etkile\u015fimle alakal\u0131)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">LCP ve FID iyile\u015ftirmeleri otomatik olarak CLS &#8216;yi de etkileyece\u011fi i\u00e7in bu konuyu t\u00fcm\u00fcyle incelemek gerekmektedir. CLS iyile\u015ftirmede en \u00f6nemli etkenlerden biri CSS &#8216;lerin iyi kullan\u0131l\u0131yor olmas\u0131d\u0131r. Bu alanda tam anlam\u0131yla bir CSS optimizasyonu yap\u0131l\u0131yor da diyebiliriz. \u00d6ncelikle g\u00f6rsellerin boyutlar\u0131 CSS dosyalar\u0131nda belirtilmelidir. B\u00f6ylece taray\u0131c\u0131 sayfay\u0131 olu\u015ftururken g\u00f6rselin hangi alanda ne kadar yer kaplayaca\u011f\u0131n\u0131 da bilerek bu i\u015flemi ger\u00e7ekle\u015ftirir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CLS de\u011ferini \u00f6l\u00e7\u00fcmleyebildi\u011fimiz i\u00e7in Cumulative Layout Shift i\u00e7eri\u011findeki &#8220;B\u00fcy\u00fck d\u00fczen kaymalar\u0131ndan ka\u00e7\u0131n\u0131n&#8221; sekmesini t\u0131klayarak burada yer alan konularda hangi elemanlarda sorun varsa iyile\u015ftirmeleri de o y\u00f6nde yapabilirsiniz.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cumulative Layout Shift (CLS), Google&#8217;\u0131n Core Web Vitals i\u00e7in kulland\u0131\u011f\u0131 \u00f6l\u00e7\u00fcmlerden biridir. CLS tam olarak; web sayfas\u0131n\u0131n y\u00fcklenme an\u0131nda sayfan\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131n \u00f6l\u00e7\u00fcmlemesinde&hellip;<\/p>\n","protected":false},"author":3,"featured_media":14317,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[412],"tags":[],"class_list":["post-14314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/comments?post=14314"}],"version-history":[{"count":6,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14314\/revisions"}],"predecessor-version":[{"id":14323,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14314\/revisions\/14323"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media\/14317"}],"wp:attachment":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media?parent=14314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/categories?post=14314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/tags?post=14314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}