Kısaca özet
- Google Gravity, Google’ın resmî bir ürünü ya da arama özelliği değil; arama sayfasına benzeyen bir ekrandaki öğelerin yerçekimiyle aşağı düşmesini canlandıran bir tarayıcı deneyidir.
- Deney, Chrome Experiments döneminde bağımsız bir geliştirici tarafından yapıldı; bugün dolaşan sürümler üçüncü taraf kopyalarıdır ve Google altyapısında çalışmaz.
- Arkasında gizli bir teknoloji yok: JavaScript ile yazılmış basit bir fizik döngüsü, sayfadaki her öğenin konumunu saniyede onlarca kez yeniden hesaplar.
- “Do a barrel roll”, “askew” ve “zerg rush” gibi paskalya yumurtaları arama arayüzü her yenilendiğinde kırılır; bir kısmı yıllar içinde tamamen kaldırıldı.
- Bu tür efektlerin bedeli performanstır: her karede DOM konumu değiştiren betik ana iş parçacığını meşgul eder, tıklama gecikmesini ve düzen kaymasını büyütür.
- Kendi sitenizde animasyon isterseniz
transformveopacityile sınırlı kalın, alanı baştan rezerve edin, hareketi azaltma tercihine saygı gösterin.
Birisi “şunu arama kutusuna yaz” der, ekrandaki her şey aşağı dökülür, herkes güler. Google Gravity çoğu kullanıcının karşısına böyle çıkar ve arkada Google’ın gizli bir düğmesi olduğu izlenimi bırakır. Olan biten tamamen tarayıcı tarafındadır: birkaç yüz satır betik, sayfadaki her kutuyu düşen bir cisim gibi hesaplar. İlginç olan da deneyin kendisi değil, aynı tekniği kendi sitenizde kullandığınızda ödediğiniz hız faturasıdır.
Google Gravity nedir, Google’ın bir servisi mi?
Google Gravity bir tarayıcı deneyidir. Chrome Experiments, tarayıcıların yeni JavaScript ve grafik yeteneklerini göstermek için bağımsız geliştiricilerin hazırladığı demoları topluyordu; bu demo da o koleksiyonun en çok dolaşan örneklerinden biri oldu. Google’ın bir arama özelliği, gizli modu ya da resmî ürünü değildir.
Karışıklığın sebebi görsel taklit. Deney sayfası arama kutusunu, düğmeleri ve logoyu birebir andırdığı için insanlar gerçek arama sayfasında bir şey tetiklediklerini sanır. Gerçekte üçüncü taraf bir adrese gidilir, orada arama sayfasının kopyası yüklenir ve fizik motoru devreye girer. Deneyin geliştiricisinin kendi sitesindeki özgün sürümü hâlâ ayakta; adres çubuğuna bakmak bile Google Gravity ile arama sayfası arasındaki farkı görmeye yeter.
Bilgi
Tarayıcıda yapılan hiçbir şey arama sonuçlarını değiştirmez. Deney sayfası indirildikten sonra tüm hesap sizin cihazınızda döner; sunucuya ek bir istek gitmez. Bu yüzden deney kapalı bir bilgisayarda, internet bağlantısı kesildikten sonra bile çalışmaya devam eder.
Google Gravity’nin arkasında hangi teknoloji var?
Temel fikir basit. Betik önce sayfadaki öğeleri toplar, her birine bir konum, bir hız ve bir kütle atar. Sonra tarayıcının her ekran yenilemesinde çağırdığı bir döngü içinde hızı yerçekimi ivmesiyle artırır, konumu hıza göre günceller, ekranın alt kenarına çarpanı sektirir. Bu döngü, her karede aynı adımları tekrarlayan bir algoritmanın ders kitabı örneğidir.
İşin pahalı kısmı hesaplama değil, sonucu ekrana yansıtma biçimi. Google Gravity kuşağındaki demolar konumu doğrudan DOM üzerinde günceller; yani her öğenin top ve left değerini saniyede altmış kez değiştirir. Tarayıcı bu değişikliklerin her birinde sayfa düzenini yeniden hesaplamak zorunda kalır. Modern karşılığı ise farklı çalışır: konum transform: translate3d() ile taşınır, tarayıcı öğeyi ayrı bir katmana alır ve düzen hesabını atlar.
Üçüncü yol çizim yüzeyi kullanmaktır. <canvas> üzerinde her kare sıfırdan çizilir; DOM hiç yorulmaz ama bu kez betiğin kendisi ve çizim yükü büyür. Tarayıcının animasyonu zamanlama için sunduğu arayüzlerin nasıl çağrıldığını merak ediyorsanız API kavramını anlattığımız yazı iyi bir başlangıç noktası.
Benzer Google şakaları ve neden bir kısmı artık çalışmıyor
Google Gravity ile karıştırılan asıl paskalya yumurtaları arama sonuç sayfasının içine gömülü olanlardır. “Do a barrel roll” sayfayı bir tur döndürür, “askew” ya da “tilt” sonuçları hafifçe eğer, “zerg rush” ekrana sonuçları yiyen daireler salar, “recursion” yazım önerisini kendisine bağlar. Bunların hepsi sonuç sayfasına eklenen küçük bir CSS kuralı ya da betik parçasıdır.
Kırılma sebepleri de buradan çıkar. Arama arayüzü her yeniden yazıldığında bu parçaların bağlandığı sınıf adları ve kapsayıcılar değişir; bakımsız kalan şaka sessizce ölür. Bir kısmı ise sonuç sayfası daha katı bir içerik güvenliği politikasına geçtiği için çalışmaz hâle gelir. Bugün bir sorgunun hâlâ efekt verip vermediğini anlamanın tek güvenilir yolu denemektir; “şu sorgular çalışır” diyen listelerin çoğu yıllar öncesinden kopyalanmıştır.
Örnek senaryo
Bir ajans, müşterisinin açılış sayfasına Google Gravity’ye benzeyen bir giriş efekti koydu: logo parçaları yukarıdan düşüp yerine oturuyordu. Efekt, otuz kadar öğenin konumunu her karede JavaScript ile güncelliyordu. Masaüstünde sorunsuz görünen sayfa, orta seviye bir telefonda açılışta iki saniye boyunca dokunmaya yanıt vermedi. Efekt CSS anahtar karelerine taşınıp öğe sayısı sekize indirilince aynı his korundu, gecikme kayboldu.
Efekt türüne göre performans maliyeti
| Efekt türü | Nasıl yapılır | Performans maliyeti |
|---|---|---|
| Vurgu ve geçiş (hover, menü açılışı) | CSS transition ile transform ve opacity |
Çok düşük, düzen hesabı tetiklenmez |
| Zamanlanmış giriş animasyonu | CSS @keyframes ya da Web Animations arayüzü |
Düşük, öğe sayısı arttıkça yükselir |
| Kaydırmaya bağlı hareket | IntersectionObserver ile sınıf ekleme |
Orta, her karede çalışan dinleyici pahalıya gelir |
| DOM öğelerini düşüren fizik (Google Gravity tarzı) | JavaScript döngüsü, her karede konum güncellemesi | Yüksek, düzen ve boyama sürekli yeniden hesaplanır |
| Canvas ya da WebGL sahne | requestAnimationFrame ile çizim yüzeyine çizim |
Değişken, DOM’u yormaz ama betik boyutu ve işlemci yükü büyür |
Ağır JavaScript animasyonu Core Web Vitals’ı nasıl bozar
Tarayıcı, sayfa mantığını tek bir ana iş parçacığında çalıştırır. Fizik döngüsü orada dönerken kullanıcının dokunuşuna yanıt verecek kod sıraya girer. Ölçüm tarafında bu, etkileşimden sonraki boyamanın uzaması demektir; kullanıcı tarafında ise dokunup bir şey olmamasını beklemek demektir.
İkinci zarar düzen kaymasıdır. Animasyon sayfaya sonradan yüklenen bir öğeyi hareket ettiriyor ve o öğenin yeri baştan ayrılmamışsa, altındaki metin aşağı kayar. Üçüncüsü de en büyük içerik boyaması: açılışta indirilen ağır bir animasyon kütüphanesi, asıl görsel ya da başlık gelmeden bant genişliğini ve ayrıştırma zamanını yer. Google’ın hangi eşiği “iyi” saydığı Core Web Vitals belgesinde yazıyor.
Dikkat
Bir efektin akıcı görünmesi ucuz olduğu anlamına gelmez. Geliştirme makinesi, ziyaretçilerin çoğundan birkaç kat hızlıdır. Ölçümü mutlaka orta seviye bir telefonda ve gerçek ağ koşullarında yapın; tarayıcının performans panelinde uzun görevleri ve yeniden düzen sayısını izleyin.
Kendi sitenize animasyon eklerken nelere dikkat etmeli
Kural basit: tarayıcıyı düzeni yeniden hesaplamaya zorlamayın. Genişlik, yükseklik, top ve left gibi özellikleri canlandırmak pahalıdır; aynı görsel sonucu transform ve opacity ile almak neredeyse bedavadır. Anahtar kare söz diziminin ayrıntıları MDN’in CSS animasyonları rehberinde anlatılıyor.
İkinci nokta erişilebilirlik. İşletim sistemi düzeyinde hareketi azaltmayı seçen kullanıcılar var; prefers-reduced-motion sorgusuyla bu tercihi görüp efekti kapatmak birkaç satır iş. Üçüncüsü ölçek: aynı anda hareket eden öğe sayısını sınırlayın, ekran dışındaki animasyonları durdurun. Renk geçişi yazarken tonları hex renk kodlarıyla tanımlamak, ara değerlerin tutarlı hesaplanmasını kolaylaştırır.
Animasyonlu sayfa sunucudan ne ister
Animasyonun bir kısmı tarayıcıda, bir kısmı sunucuda çözülür. Betik ve yazı tipi dosyalarının sıkıştırılmış gönderilmesi, tarayıcı önbelleği başlıklarının doğru ayarlanması ve ilk bayt süresinin kısa olması, aynı efektin iki farklı sitede iki farklı hissettirmesinin sebebidir. Barındırma tarafının arama görünürlüğüne etkisini ayrı bir yazıda ele aldık.
Pratikte en çok işe yarayan üç ayar şunlar: metin tabanlı dosyalarda sıkıştırmayı açmak, değişmeyen varlıklara uzun önbellek süresi vermek, açılışta gerekmeyen betikleri ertelemek. Bunlar panel üzerinden yapılabilen işlerdir ve çoğu zaman animasyonu kısaltmaktan daha hızlı kazanç verir.
Yayına almadan önce kontrol listesi
- Animasyonu yalnızca
transformveopacityüzerinden kurun. - Sonradan yüklenen her öğe için alanı baştan rezerve edin, düzen kayması bırakmayın.
prefers-reduced-motionsorgusunu ekleyin ve efekti kapatın.- Ekran dışına çıkan animasyonları durdurun, aynı anda hareket eden öğe sayısını sınırlayın.
- Animasyon kütüphanesinin boyutunu ölçün; tek efekt için yüz kilobaytlık paket yüklemeyin.
- Açılışta gerekmeyen betikleri
deferya daasyncile erteleyin. - Orta seviye bir telefonda ölçün, uzun görev süresine ve etkileşim gecikmesine bakın.
- Sunucu tarafında sıkıştırmayı ve önbellek başlıklarını doğrulayın.
Sonuç
Google Gravity eğlenceli bir tarayıcı deneyi ve tam olarak bunu yapmak için tasarlandı; bir üretim sitesinin açılış sayfası için örnek alınacak bir teknik değil. Aynı görsel etkiyi CSS tarafında, daha az öğeyle ve hareket tercihine saygı göstererek kurarsanız hem efekti korur hem de hız ölçümlerinizi bozmazsınız.
Sıkça sorulan sorular
Google Gravity gerçekten Google tarafından mı yapıldı?
Hayır. Chrome Experiments koleksiyonunda yayımlanan bağımsız bir tarayıcı deneyidir. Google bu deneyi bir arama özelliği olarak sunmaz, sonuç sayfasında böyle bir mod yoktur. Dolaşan bağlantıların tamamı üçüncü taraf adreslere gider.
Arama kutusuna yazınca neden bende çalışmıyor?
Efekt arama sayfasında değil, ayrı bir demo sayfasında çalışıyor. Sonuç sayfasına gömülü olan paskalya yumurtaları ise arayüz yenilendikçe kırılıyor; bir kısmı yıllar önce kaldırıldı. Bugün hangisinin ayakta olduğunu denemeden bilmek mümkün değil.
Bu efekti kendi siteme koyabilir miyim?
Teknik olarak evet, ama DOM öğelerini her karede taşıyan kurulum en pahalı yöntemdir. Aynı hissi CSS anahtar kareleriyle, daha az öğeyle ve çok daha düşük işlemci yüküyle vermek mümkün. Efekt açılış sayfasındaysa maliyeti mutlaka ölçün.
Animasyon SEO’yu doğrudan cezalandırır mı?
Ceza diye bir mekanizma yok. Etki dolaylı: yavaş açılan ve dokunuşa geç yanıt veren sayfa, sayfa deneyimi sinyallerinde geri kalır ve ziyaretçiyi kaybeder. Ölçüm eşikleri Google’ın kendi dokümanlarında yayımlanıyor.
Canvas kullanmak DOM animasyonundan daha mı iyi?
Çok sayıda hareketli öğe varsa genelde evet, çünkü tarayıcı düzeni yeniden hesaplamaz. Buna karşılık çizim kodu sizin sorumluluğunuzda olur, metin erişilebilirliği kaybolur ve betik boyutu büyür. Birkaç öğe için CSS yeterlidir.
Narhost’ta
Web hosting paketleri NVMe SSD disk, ücretsiz SSL ve Türkçe cPanel ile geliyor; mevcut sitenizi ücretsiz taşıma ile aktarıyoruz.