{"id":502,"date":"2026-01-18T20:09:36","date_gmt":"2026-01-18T20:09:36","guid":{"rendered":"https:\/\/narhost.com\/blog\/?p=502"},"modified":"2026-09-11T15:09:10","modified_gmt":"2026-09-11T15:09:10","slug":"google-gravity-nedir","status":"publish","type":"post","link":"https:\/\/narhost.com\/blog\/google-gravity-nedir\/","title":{"rendered":"Google Gravity Nedir, Nas\u0131l \u00c7al\u0131\u015fan Bir Taray\u0131c\u0131 Deneyi"},"content":{"rendered":"<div id=\"ai-ozet\" class=\"ai-box\">\n<p class=\"ai-box-title\">K\u0131saca \u00f6zet<\/p>\n<ul>\n<li>Google Gravity, Google&#8217;\u0131n resm\u00ee bir \u00fcr\u00fcn\u00fc ya da arama \u00f6zelli\u011fi de\u011fil; arama sayfas\u0131na benzeyen bir ekrandaki \u00f6\u011felerin yer\u00e7ekimiyle a\u015fa\u011f\u0131 d\u00fc\u015fmesini canland\u0131ran bir taray\u0131c\u0131 deneyidir.<\/li>\n<li>Deney, Chrome Experiments d\u00f6neminde ba\u011f\u0131ms\u0131z bir geli\u015ftirici taraf\u0131ndan yap\u0131ld\u0131; bug\u00fcn dola\u015fan s\u00fcr\u00fcmler \u00fc\u00e7\u00fcnc\u00fc taraf kopyalar\u0131d\u0131r ve Google altyap\u0131s\u0131nda \u00e7al\u0131\u015fmaz.<\/li>\n<li>Arkas\u0131nda gizli bir teknoloji yok: JavaScript ile yaz\u0131lm\u0131\u015f basit bir fizik d\u00f6ng\u00fcs\u00fc, sayfadaki her \u00f6\u011fenin konumunu saniyede onlarca kez yeniden hesaplar.<\/li>\n<li>&#8220;Do a barrel roll&#8221;, &#8220;askew&#8221; ve &#8220;zerg rush&#8221; gibi paskalya yumurtalar\u0131 arama aray\u00fcz\u00fc her yenilendi\u011finde k\u0131r\u0131l\u0131r; bir k\u0131sm\u0131 y\u0131llar i\u00e7inde tamamen kald\u0131r\u0131ld\u0131.<\/li>\n<li>Bu t\u00fcr efektlerin bedeli performanst\u0131r: her karede DOM konumu de\u011fi\u015ftiren betik ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 me\u015fgul eder, t\u0131klama gecikmesini ve d\u00fczen kaymas\u0131n\u0131 b\u00fcy\u00fct\u00fcr.<\/li>\n<li>Kendi sitenizde animasyon isterseniz <code>transform<\/code> ve <code>opacity<\/code> ile s\u0131n\u0131rl\u0131 kal\u0131n, alan\u0131 ba\u015ftan rezerve edin, hareketi azaltma tercihine sayg\u0131 g\u00f6sterin.<\/li>\n<\/ul>\n<\/div>\n<p>Birisi &#8220;\u015funu arama kutusuna yaz&#8221; der, ekrandaki her \u015fey a\u015fa\u011f\u0131 d\u00f6k\u00fcl\u00fcr, herkes g\u00fcler. Google Gravity \u00e7o\u011fu kullan\u0131c\u0131n\u0131n kar\u015f\u0131s\u0131na b\u00f6yle \u00e7\u0131kar ve arkada Google&#8217;\u0131n gizli bir d\u00fc\u011fmesi oldu\u011fu izlenimi b\u0131rak\u0131r. Olan biten tamamen taray\u0131c\u0131 taraf\u0131ndad\u0131r: birka\u00e7 y\u00fcz sat\u0131r betik, sayfadaki her kutuyu d\u00fc\u015fen bir cisim gibi hesaplar. \u0130lgin\u00e7 olan da deneyin kendisi de\u011fil, ayn\u0131 tekni\u011fi kendi sitenizde kulland\u0131\u011f\u0131n\u0131zda \u00f6dedi\u011finiz h\u0131z faturas\u0131d\u0131r.<\/p>\n<h2>Google Gravity nedir, Google&#8217;\u0131n bir servisi mi?<\/h2>\n<p>Google Gravity bir taray\u0131c\u0131 deneyidir. Chrome Experiments, taray\u0131c\u0131lar\u0131n yeni JavaScript ve grafik yeteneklerini g\u00f6stermek i\u00e7in ba\u011f\u0131ms\u0131z geli\u015ftiricilerin haz\u0131rlad\u0131\u011f\u0131 demolar\u0131 topluyordu; bu demo da o koleksiyonun en \u00e7ok dola\u015fan \u00f6rneklerinden biri oldu. Google&#8217;\u0131n bir arama \u00f6zelli\u011fi, gizli modu ya da resm\u00ee \u00fcr\u00fcn\u00fc de\u011fildir.<\/p>\n<p>Kar\u0131\u015f\u0131kl\u0131\u011f\u0131n sebebi g\u00f6rsel taklit. Deney sayfas\u0131 arama kutusunu, d\u00fc\u011fmeleri ve logoyu birebir and\u0131rd\u0131\u011f\u0131 i\u00e7in insanlar ger\u00e7ek arama sayfas\u0131nda bir \u015fey tetiklediklerini san\u0131r. Ger\u00e7ekte \u00fc\u00e7\u00fcnc\u00fc taraf bir adrese gidilir, orada arama sayfas\u0131n\u0131n kopyas\u0131 y\u00fcklenir ve fizik motoru devreye girer. Deneyin geli\u015ftiricisinin kendi sitesindeki <a href=\"https:\/\/mrdoob.com\/projects\/chromeexperiments\/google-gravity\/\" title=\"Google Gravity deneyinin geli\u015ftiricisinin sitesindeki \u00f6zg\u00fcn s\u00fcr\u00fcm\u00fc\" target=\"_blank\" rel=\"noopener\">\u00f6zg\u00fcn s\u00fcr\u00fcm\u00fc<\/a> h\u00e2l\u00e2 ayakta; adres \u00e7ubu\u011funa bakmak bile Google Gravity ile arama sayfas\u0131 aras\u0131ndaki fark\u0131 g\u00f6rmeye yeter.<\/p>\n<div class=\"highlight-box\">\n<p class=\"label\">Bilgi<\/p>\n<p>Taray\u0131c\u0131da yap\u0131lan hi\u00e7bir \u015fey arama sonu\u00e7lar\u0131n\u0131 de\u011fi\u015ftirmez. Deney sayfas\u0131 indirildikten sonra t\u00fcm hesap sizin cihaz\u0131n\u0131zda d\u00f6ner; sunucuya ek bir istek gitmez. Bu y\u00fczden deney kapal\u0131 bir bilgisayarda, internet ba\u011flant\u0131s\u0131 kesildikten sonra bile \u00e7al\u0131\u015fmaya devam eder.<\/p>\n<\/div>\n<h2>Google Gravity&#8217;nin arkas\u0131nda hangi teknoloji var?<\/h2>\n<p>Temel fikir basit. Betik \u00f6nce sayfadaki \u00f6\u011feleri toplar, her birine bir konum, bir h\u0131z ve bir k\u00fctle atar. Sonra taray\u0131c\u0131n\u0131n her ekran yenilemesinde \u00e7a\u011f\u0131rd\u0131\u011f\u0131 bir d\u00f6ng\u00fc i\u00e7inde h\u0131z\u0131 yer\u00e7ekimi ivmesiyle art\u0131r\u0131r, konumu h\u0131za g\u00f6re g\u00fcnceller, ekran\u0131n alt kenar\u0131na \u00e7arpan\u0131 sektirir. Bu d\u00f6ng\u00fc, her karede ayn\u0131 ad\u0131mlar\u0131 tekrarlayan bir <a href=\"https:\/\/narhost.com\/blog\/algoritma-nedir\/\" title=\"Algoritma nedir, ad\u0131m ad\u0131m nas\u0131l \u00e7al\u0131\u015f\u0131r\">algoritman\u0131n<\/a> ders kitab\u0131 \u00f6rne\u011fidir.<\/p>\n<p>\u0130\u015fin pahal\u0131 k\u0131sm\u0131 hesaplama de\u011fil, sonucu ekrana yans\u0131tma bi\u00e7imi. Google Gravity ku\u015fa\u011f\u0131ndaki demolar konumu do\u011frudan DOM \u00fczerinde g\u00fcnceller; yani her \u00f6\u011fenin <code>top<\/code> ve <code>left<\/code> de\u011ferini saniyede altm\u0131\u015f kez de\u011fi\u015ftirir. Taray\u0131c\u0131 bu de\u011fi\u015fikliklerin her birinde sayfa d\u00fczenini yeniden hesaplamak zorunda kal\u0131r. Modern kar\u015f\u0131l\u0131\u011f\u0131 ise farkl\u0131 \u00e7al\u0131\u015f\u0131r: konum <code>transform: translate3d()<\/code> ile ta\u015f\u0131n\u0131r, taray\u0131c\u0131 \u00f6\u011feyi ayr\u0131 bir katmana al\u0131r ve d\u00fczen hesab\u0131n\u0131 atlar.<\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc yol \u00e7izim y\u00fczeyi kullanmakt\u0131r. <code>&lt;canvas&gt;<\/code> \u00fczerinde her kare s\u0131f\u0131rdan \u00e7izilir; DOM hi\u00e7 yorulmaz ama bu kez beti\u011fin kendisi ve \u00e7izim y\u00fck\u00fc b\u00fcy\u00fcr. Taray\u0131c\u0131n\u0131n animasyonu zamanlama i\u00e7in sundu\u011fu aray\u00fczlerin nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131n\u0131 merak ediyorsan\u0131z <a href=\"https:\/\/narhost.com\/blog\/api-nedir-ve-nasil-kullanilir\/\" title=\"API nedir ve nas\u0131l kullan\u0131l\u0131r\">API kavram\u0131n\u0131 anlatt\u0131\u011f\u0131m\u0131z yaz\u0131<\/a> iyi bir ba\u015flang\u0131\u00e7 noktas\u0131.<\/p>\n<h2>Benzer Google \u015fakalar\u0131 ve neden bir k\u0131sm\u0131 art\u0131k \u00e7al\u0131\u015fm\u0131yor<\/h2>\n<p>Google Gravity ile kar\u0131\u015ft\u0131r\u0131lan as\u0131l paskalya yumurtalar\u0131 arama sonu\u00e7 sayfas\u0131n\u0131n i\u00e7ine g\u00f6m\u00fcl\u00fc olanlard\u0131r. &#8220;Do a barrel roll&#8221; sayfay\u0131 bir tur d\u00f6nd\u00fcr\u00fcr, &#8220;askew&#8221; ya da &#8220;tilt&#8221; sonu\u00e7lar\u0131 hafif\u00e7e e\u011fer, &#8220;zerg rush&#8221; ekrana sonu\u00e7lar\u0131 yiyen daireler salar, &#8220;recursion&#8221; yaz\u0131m \u00f6nerisini kendisine ba\u011flar. Bunlar\u0131n hepsi sonu\u00e7 sayfas\u0131na eklenen k\u00fc\u00e7\u00fck bir CSS kural\u0131 ya da betik par\u00e7as\u0131d\u0131r.<\/p>\n<p>K\u0131r\u0131lma sebepleri de buradan \u00e7\u0131kar. Arama aray\u00fcz\u00fc her yeniden yaz\u0131ld\u0131\u011f\u0131nda bu par\u00e7alar\u0131n ba\u011fland\u0131\u011f\u0131 s\u0131n\u0131f adlar\u0131 ve kapsay\u0131c\u0131lar de\u011fi\u015fir; bak\u0131ms\u0131z kalan \u015faka sessizce \u00f6l\u00fcr. Bir k\u0131sm\u0131 ise sonu\u00e7 sayfas\u0131 daha kat\u0131 bir i\u00e7erik g\u00fcvenli\u011fi politikas\u0131na ge\u00e7ti\u011fi i\u00e7in \u00e7al\u0131\u015fmaz h\u00e2le gelir. Bug\u00fcn bir sorgunun h\u00e2l\u00e2 efekt verip vermedi\u011fini anlaman\u0131n tek g\u00fcvenilir yolu denemektir; &#8220;\u015fu sorgular \u00e7al\u0131\u015f\u0131r&#8221; diyen listelerin \u00e7o\u011fu y\u0131llar \u00f6ncesinden kopyalanm\u0131\u015ft\u0131r.<\/p>\n<div class=\"senaryo-block\">\n<p class=\"label\">\u00d6rnek senaryo<\/p>\n<p>Bir ajans, m\u00fc\u015fterisinin a\u00e7\u0131l\u0131\u015f sayfas\u0131na Google Gravity&#8217;ye benzeyen bir giri\u015f efekti koydu: logo par\u00e7alar\u0131 yukar\u0131dan d\u00fc\u015f\u00fcp yerine oturuyordu. Efekt, otuz kadar \u00f6\u011fenin konumunu her karede JavaScript ile g\u00fcncelliyordu. Masa\u00fcst\u00fcnde sorunsuz g\u00f6r\u00fcnen sayfa, orta seviye bir telefonda a\u00e7\u0131l\u0131\u015fta iki saniye boyunca dokunmaya yan\u0131t vermedi. Efekt CSS anahtar karelerine ta\u015f\u0131n\u0131p \u00f6\u011fe say\u0131s\u0131 sekize indirilince ayn\u0131 his korundu, gecikme kayboldu.<\/p>\n<\/div>\n<h2>Efekt t\u00fcr\u00fcne g\u00f6re performans maliyeti<\/h2>\n<table>\n<thead>\n<tr>\n<th>Efekt t\u00fcr\u00fc<\/th>\n<th>Nas\u0131l yap\u0131l\u0131r<\/th>\n<th>Performans maliyeti<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Vurgu ve ge\u00e7i\u015f (hover, men\u00fc a\u00e7\u0131l\u0131\u015f\u0131)<\/td>\n<td>CSS <code>transition<\/code> ile <code>transform<\/code> ve <code>opacity<\/code><\/td>\n<td>\u00c7ok d\u00fc\u015f\u00fck, d\u00fczen hesab\u0131 tetiklenmez<\/td>\n<\/tr>\n<tr>\n<td>Zamanlanm\u0131\u015f giri\u015f animasyonu<\/td>\n<td>CSS <code>@keyframes<\/code> ya da Web Animations aray\u00fcz\u00fc<\/td>\n<td>D\u00fc\u015f\u00fck, \u00f6\u011fe say\u0131s\u0131 artt\u0131k\u00e7a y\u00fckselir<\/td>\n<\/tr>\n<tr>\n<td>Kayd\u0131rmaya ba\u011fl\u0131 hareket<\/td>\n<td><code>IntersectionObserver<\/code> ile s\u0131n\u0131f ekleme<\/td>\n<td>Orta, her karede \u00e7al\u0131\u015fan dinleyici pahal\u0131ya gelir<\/td>\n<\/tr>\n<tr>\n<td>DOM \u00f6\u011felerini d\u00fc\u015f\u00fcren fizik (Google Gravity tarz\u0131)<\/td>\n<td>JavaScript d\u00f6ng\u00fcs\u00fc, her karede konum g\u00fcncellemesi<\/td>\n<td>Y\u00fcksek, d\u00fczen ve boyama s\u00fcrekli yeniden hesaplan\u0131r<\/td>\n<\/tr>\n<tr>\n<td>Canvas ya da WebGL sahne<\/td>\n<td><code>requestAnimationFrame<\/code> ile \u00e7izim y\u00fczeyine \u00e7izim<\/td>\n<td>De\u011fi\u015fken, DOM&#8217;u yormaz ama betik boyutu ve i\u015flemci y\u00fck\u00fc b\u00fcy\u00fcr<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>A\u011f\u0131r JavaScript animasyonu Core Web Vitals&#8217;\u0131 nas\u0131l bozar<\/h2>\n<p>Taray\u0131c\u0131, sayfa mant\u0131\u011f\u0131n\u0131 tek bir ana i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131r. Fizik d\u00f6ng\u00fcs\u00fc orada d\u00f6nerken kullan\u0131c\u0131n\u0131n dokunu\u015funa yan\u0131t verecek kod s\u0131raya girer. \u00d6l\u00e7\u00fcm taraf\u0131nda bu, etkile\u015fimden sonraki boyaman\u0131n uzamas\u0131 demektir; kullan\u0131c\u0131 taraf\u0131nda ise dokunup bir \u015fey olmamas\u0131n\u0131 beklemek demektir.<\/p>\n<p>\u0130kinci zarar d\u00fczen kaymas\u0131d\u0131r. Animasyon sayfaya sonradan y\u00fcklenen bir \u00f6\u011feyi hareket ettiriyor ve o \u00f6\u011fenin yeri ba\u015ftan ayr\u0131lmam\u0131\u015fsa, alt\u0131ndaki metin a\u015fa\u011f\u0131 kayar. \u00dc\u00e7\u00fcnc\u00fcs\u00fc de en b\u00fcy\u00fck i\u00e7erik boyamas\u0131: a\u00e7\u0131l\u0131\u015fta indirilen a\u011f\u0131r bir animasyon k\u00fct\u00fcphanesi, as\u0131l g\u00f6rsel ya da ba\u015fl\u0131k gelmeden bant geni\u015fli\u011fini ve ayr\u0131\u015ft\u0131rma zaman\u0131n\u0131 yer. Google&#8217;\u0131n hangi e\u015fi\u011fi &#8220;iyi&#8221; sayd\u0131\u011f\u0131 <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/core-web-vitals\" title=\"Google Arama dok\u00fcmantasyonu \u2014 Core Web Vitals\" target=\"_blank\" rel=\"noopener\">Core Web Vitals belgesinde<\/a> yaz\u0131yor.<\/p>\n<div class=\"warn-box\">\n<p class=\"label\">Dikkat<\/p>\n<p>Bir efektin ak\u0131c\u0131 g\u00f6r\u00fcnmesi ucuz oldu\u011fu anlam\u0131na gelmez. Geli\u015ftirme makinesi, ziyaret\u00e7ilerin \u00e7o\u011fundan birka\u00e7 kat h\u0131zl\u0131d\u0131r. \u00d6l\u00e7\u00fcm\u00fc mutlaka orta seviye bir telefonda ve ger\u00e7ek a\u011f ko\u015fullar\u0131nda yap\u0131n; taray\u0131c\u0131n\u0131n performans panelinde uzun g\u00f6revleri ve yeniden d\u00fczen say\u0131s\u0131n\u0131 izleyin.<\/p>\n<\/div>\n<figure class=\"nh-sema\"><img loading=\"lazy\" src=\"https:\/\/narhost.com\/blog\/wp-content\/uploads\/2026\/09\/google-gravity-nedir-sema-narhost.webp\" alt=\"Google Gravity tarz\u0131 animasyonlar\u0131n performans maliyeti \u015femas\u0131 \u2014 efekt se\u00e7imi, CSS&#x27;e ta\u015f\u0131ma, s\u0131n\u0131rlama ve \u00f6l\u00e7\u00fcm\" width=\"1200\" height=\"500\" loading=\"lazy\" decoding=\"async\"><figcaption>Google Gravity tarz\u0131 bir efekti \u00fcretim sitesine ta\u015f\u0131rken izlenen d\u00f6rt ad\u0131m: se\u00e7, CSS&#x27;e ta\u015f\u0131, s\u0131n\u0131rla, \u00f6l\u00e7.<\/figcaption><\/figure>\n<h2>Kendi sitenize animasyon eklerken nelere dikkat etmeli<\/h2>\n<p>Kural basit: taray\u0131c\u0131y\u0131 d\u00fczeni yeniden hesaplamaya zorlamay\u0131n. Geni\u015flik, y\u00fckseklik, <code>top<\/code> ve <code>left<\/code> gibi \u00f6zellikleri canland\u0131rmak pahal\u0131d\u0131r; ayn\u0131 g\u00f6rsel sonucu <code>transform<\/code> ve <code>opacity<\/code> ile almak neredeyse bedavad\u0131r. Anahtar kare s\u00f6z diziminin ayr\u0131nt\u0131lar\u0131 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Animations\/Using\" title=\"MDN \u2014 CSS animasyonlar\u0131n\u0131n kullan\u0131m\u0131\" target=\"_blank\" rel=\"noopener\">MDN&#8217;in CSS animasyonlar\u0131 rehberinde<\/a> anlat\u0131l\u0131yor.<\/p>\n<p>\u0130kinci nokta eri\u015filebilirlik. \u0130\u015fletim sistemi d\u00fczeyinde hareketi azaltmay\u0131 se\u00e7en kullan\u0131c\u0131lar var; <code>prefers-reduced-motion<\/code> sorgusuyla bu tercihi g\u00f6r\u00fcp efekti kapatmak birka\u00e7 sat\u0131r i\u015f. \u00dc\u00e7\u00fcnc\u00fcs\u00fc \u00f6l\u00e7ek: ayn\u0131 anda hareket eden \u00f6\u011fe say\u0131s\u0131n\u0131 s\u0131n\u0131rlay\u0131n, ekran d\u0131\u015f\u0131ndaki animasyonlar\u0131 durdurun. Renk ge\u00e7i\u015fi yazarken tonlar\u0131 <a href=\"https:\/\/narhost.com\/blog\/hec-hex-kodu-nedir\/\" title=\"Hex renk kodu nedir, nas\u0131l okunur\">hex renk kodlar\u0131yla<\/a> tan\u0131mlamak, ara de\u011ferlerin tutarl\u0131 hesaplanmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<h2>Animasyonlu sayfa sunucudan ne ister<\/h2>\n<p>Animasyonun bir k\u0131sm\u0131 taray\u0131c\u0131da, bir k\u0131sm\u0131 sunucuda \u00e7\u00f6z\u00fcl\u00fcr. Betik ve yaz\u0131 tipi dosyalar\u0131n\u0131n s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f g\u00f6nderilmesi, taray\u0131c\u0131 \u00f6nbelle\u011fi ba\u015fl\u0131klar\u0131n\u0131n do\u011fru ayarlanmas\u0131 ve ilk bayt s\u00fcresinin k\u0131sa olmas\u0131, ayn\u0131 efektin iki farkl\u0131 sitede iki farkl\u0131 hissettirmesinin sebebidir. Bar\u0131nd\u0131rma taraf\u0131n\u0131n arama g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcne etkisini <a href=\"https:\/\/narhost.com\/blog\/hosting-secimi-seo-durumunu-etkiler-mi\/\" title=\"Hosting se\u00e7imi SEO durumunu etkiler mi\">ayr\u0131 bir yaz\u0131da<\/a> ele ald\u0131k.<\/p>\n<p>Pratikte en \u00e7ok i\u015fe yarayan \u00fc\u00e7 ayar \u015funlar: metin tabanl\u0131 dosyalarda s\u0131k\u0131\u015ft\u0131rmay\u0131 a\u00e7mak, de\u011fi\u015fmeyen varl\u0131klara uzun \u00f6nbellek s\u00fcresi vermek, a\u00e7\u0131l\u0131\u015fta gerekmeyen betikleri ertelemek. Bunlar panel \u00fczerinden yap\u0131labilen i\u015flerdir ve \u00e7o\u011fu zaman animasyonu k\u0131saltmaktan daha h\u0131zl\u0131 kazan\u00e7 verir.<\/p>\n<h2>Yay\u0131na almadan \u00f6nce kontrol listesi<\/h2>\n<ul class=\"kontrol-listesi\">\n<li>Animasyonu yaln\u0131zca <code>transform<\/code> ve <code>opacity<\/code> \u00fczerinden kurun.<\/li>\n<li>Sonradan y\u00fcklenen her \u00f6\u011fe i\u00e7in alan\u0131 ba\u015ftan rezerve edin, d\u00fczen kaymas\u0131 b\u0131rakmay\u0131n.<\/li>\n<li><code>prefers-reduced-motion<\/code> sorgusunu ekleyin ve efekti kapat\u0131n.<\/li>\n<li>Ekran d\u0131\u015f\u0131na \u00e7\u0131kan animasyonlar\u0131 durdurun, ayn\u0131 anda hareket eden \u00f6\u011fe say\u0131s\u0131n\u0131 s\u0131n\u0131rlay\u0131n.<\/li>\n<li>Animasyon k\u00fct\u00fcphanesinin boyutunu \u00f6l\u00e7\u00fcn; tek efekt i\u00e7in y\u00fcz kilobaytl\u0131k paket y\u00fcklemeyin.<\/li>\n<li>A\u00e7\u0131l\u0131\u015fta gerekmeyen betikleri <code>defer<\/code> ya da <code>async<\/code> ile erteleyin.<\/li>\n<li>Orta seviye bir telefonda \u00f6l\u00e7\u00fcn, uzun g\u00f6rev s\u00fcresine ve etkile\u015fim gecikmesine bak\u0131n.<\/li>\n<li>Sunucu taraf\u0131nda s\u0131k\u0131\u015ft\u0131rmay\u0131 ve \u00f6nbellek ba\u015fl\u0131klar\u0131n\u0131 do\u011frulay\u0131n.<\/li>\n<\/ul>\n<div class=\"success-box\">\n<p class=\"label\">Sonu\u00e7<\/p>\n<p>Google Gravity e\u011flenceli bir taray\u0131c\u0131 deneyi ve tam olarak bunu yapmak i\u00e7in tasarland\u0131; bir \u00fcretim sitesinin a\u00e7\u0131l\u0131\u015f sayfas\u0131 i\u00e7in \u00f6rnek al\u0131nacak bir teknik de\u011fil. Ayn\u0131 g\u00f6rsel etkiyi CSS taraf\u0131nda, daha az \u00f6\u011feyle ve hareket tercihine sayg\u0131 g\u00f6stererek kurarsan\u0131z hem efekti korur hem de h\u0131z \u00f6l\u00e7\u00fcmlerinizi bozmazs\u0131n\u0131z.<\/p>\n<\/div>\n<div class=\"kb-faq\">\n<h2>S\u0131k\u00e7a sorulan sorular<\/h2>\n<h3>Google Gravity ger\u00e7ekten Google taraf\u0131ndan m\u0131 yap\u0131ld\u0131?<\/h3>\n<p>Hay\u0131r. Chrome Experiments koleksiyonunda yay\u0131mlanan ba\u011f\u0131ms\u0131z bir taray\u0131c\u0131 deneyidir. Google bu deneyi bir arama \u00f6zelli\u011fi olarak sunmaz, sonu\u00e7 sayfas\u0131nda b\u00f6yle bir mod yoktur. Dola\u015fan ba\u011flant\u0131lar\u0131n tamam\u0131 \u00fc\u00e7\u00fcnc\u00fc taraf adreslere gider.<\/p>\n<h3>Arama kutusuna yaz\u0131nca neden bende \u00e7al\u0131\u015fm\u0131yor?<\/h3>\n<p>Efekt arama sayfas\u0131nda de\u011fil, ayr\u0131 bir demo sayfas\u0131nda \u00e7al\u0131\u015f\u0131yor. Sonu\u00e7 sayfas\u0131na g\u00f6m\u00fcl\u00fc olan paskalya yumurtalar\u0131 ise aray\u00fcz yenilendik\u00e7e k\u0131r\u0131l\u0131yor; bir k\u0131sm\u0131 y\u0131llar \u00f6nce kald\u0131r\u0131ld\u0131. Bug\u00fcn hangisinin ayakta oldu\u011funu denemeden bilmek m\u00fcmk\u00fcn de\u011fil.<\/p>\n<h3>Bu efekti kendi siteme koyabilir miyim?<\/h3>\n<p>Teknik olarak evet, ama DOM \u00f6\u011felerini her karede ta\u015f\u0131yan kurulum en pahal\u0131 y\u00f6ntemdir. Ayn\u0131 hissi CSS anahtar kareleriyle, daha az \u00f6\u011feyle ve \u00e7ok daha d\u00fc\u015f\u00fck i\u015flemci y\u00fck\u00fcyle vermek m\u00fcmk\u00fcn. Efekt a\u00e7\u0131l\u0131\u015f sayfas\u0131ndaysa maliyeti mutlaka \u00f6l\u00e7\u00fcn.<\/p>\n<h3>Animasyon SEO&#8217;yu do\u011frudan cezaland\u0131r\u0131r m\u0131?<\/h3>\n<p>Ceza diye bir mekanizma yok. Etki dolayl\u0131: yava\u015f a\u00e7\u0131lan ve dokunu\u015fa ge\u00e7 yan\u0131t veren sayfa, sayfa deneyimi sinyallerinde geri kal\u0131r ve ziyaret\u00e7iyi kaybeder. \u00d6l\u00e7\u00fcm e\u015fikleri Google&#8217;\u0131n kendi dok\u00fcmanlar\u0131nda yay\u0131mlan\u0131yor.<\/p>\n<h3>Canvas kullanmak DOM animasyonundan daha m\u0131 iyi?<\/h3>\n<p>\u00c7ok say\u0131da hareketli \u00f6\u011fe varsa genelde evet, \u00e7\u00fcnk\u00fc taray\u0131c\u0131 d\u00fczeni yeniden hesaplamaz. Buna kar\u015f\u0131l\u0131k \u00e7izim kodu sizin sorumlulu\u011funuzda olur, metin eri\u015filebilirli\u011fi kaybolur ve betik boyutu b\u00fcy\u00fcr. Birka\u00e7 \u00f6\u011fe i\u00e7in CSS yeterlidir.<\/p>\n<\/div>\n<div class=\"cta-box\">\n<p class=\"label\">Narhost&#8217;ta<\/p>\n<p>Web hosting paketleri NVMe SSD disk, \u00fccretsiz SSL ve T\u00fcrk\u00e7e cPanel ile geliyor; mevcut sitenizi \u00fccretsiz ta\u015f\u0131ma ile aktar\u0131yoruz.<\/p>\n<p><a class=\"cta-btn\" href=\"https:\/\/narhost.com\/web-hosting\" title=\"Narhost web hosting paketleri\">Web hosting paketlerini incele<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Google Gravity Google&#8217;\u0131n resm\u00ee bir \u00fcr\u00fcn\u00fc de\u011fil, bir taray\u0131c\u0131 deneyi. Deneyin arkas\u0131ndaki fizik d\u00f6ng\u00fcs\u00fc, benzer arama \u015fakalar\u0131n\u0131n neden k\u0131r\u0131ld\u0131\u011f\u0131 ve a\u011f\u0131r animasyonlar\u0131n Core Web Vitals \u00f6l\u00e7\u00fcmlerine etkisi.<\/p>\n","protected":false},"author":1,"featured_media":2340,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-502","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nedir"],"_links":{"self":[{"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/posts\/502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/comments?post=502"}],"version-history":[{"count":4,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/posts\/502\/revisions"}],"predecessor-version":[{"id":2336,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/posts\/502\/revisions\/2336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/media\/2340"}],"wp:attachment":[{"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/media?parent=502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/categories?post=502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/tags?post=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}