Yeni kişisel web sitem sonunda yayında: turkeruzun.com.tr 🚀
İlk bakışta temiz ve 3D akıcı bir portfolyo alanı gibi görünen bu dijital alanın arkasında, popüler hazır kütüphaneleri üst üste yığmak yerine her detayı ince elenip sık dokunmuş bir optimizasyon felsefesi yatıyor. Her satırı optimize etmenin ve hazır şablonların dışına çıkmanın ödülünü ise net metriklerle aldım: İlk yükleme JS boyutu ~%75–85 hafifledi, ana sayfa LCP hızı ~%60–75 arttı ve deploy ağırlığını ciddi miktarda düşürdüm.
Peki, arka planda hangi teknolojileri, nasıl bir felsefeyle kullandım?
1. Ağır Motorlar Olmadan 3D İllüzyonu: %90 Paket Tasarrufu
Sitenin ana sayfa açılışında beni görüyorsunuz; aşağı kaydırdıkça görüntüm dinamik bir şekilde değişerek derinlikli bir 3D illüzyonu oluşturuyor. Projeler sayfasına geçtiğinizde ise sizi bu kez hareketli bir robot karşılıyor. Yine fotoğraf galerisinde hudlar var.
Normalde bu tarz gelişmiş görsel etkileşimler için akla ilk gelen React Three Fiber (Three.js) kütüphanelerini projeye dahil etmektir. Ancak bu yaklaşımın getireceği gzip JS yükünü tahmin edemezsiniz ben denedim ve tamamen eledim. Alternatif yollar denedim.
Teknolojik Dönüşüm: Ağır 3D motorları yerine HTML5 Video ve çok ince bir WebGL (Fragment Shader) mimarisi kurdum.
Akıllı Mantık: Hem ana sayfadaki scroll etkisinde hem de projelerdeki robot etkileşiminde, girdilere göre videonun ilgili karelerini tetikleyen özel frame-seek mekanizması kurguladım. Arka plan şeffaflığı için ise pikselleri gerçek zamanlı işleyen bir Chroma-Key Shader devrede.
Performans Çıktısı: Bu dönüşüm sayesinde bundle JS boyutunda %90 tasarruf sağlarken, sürekli render alan bir 3D model döngüsünü hafifleterek GPU/CPU yükünü %70 den fazla azalttım.
2. Görsel ve Medya Ölçümlemesi:
Sitede yer alan her görselin tarayıcıya iniş anını milisaniyeler seviyesinde optimize ettim:
Statik Varlık Temizliği: Proje dizinindeki kullanılmayan eski statik varlıkları temizleyerek dosya ağırlığını %95 net düşürdüm.
Hero Alanı ve LCP: Hero bölümündeki 3D deneyimi yaşatan o interaktif yapıda tarayıcının 24 MB kare dizisini bekleme zorunluluğunu ortadan kaldırdım. İlk kare geldiği anda sayfa hazır hale geliyor; bu teknik dokunuş LCP (En Büyük İçeriksel Boyama) süresini %70–80 oranında kısalttı.
fetchPriority & next/image: (Altın Değerinde Bilgi) Kritik ögelere
fetchPriority=highatayarak tarayıcının bu ögeleri erkenden keşfetmesini sağladım (LCP'ye %15–25 ek katkı). Tüm görselleri next/image üzerinden AVIF/WebP formatlarında responsive (srcset) sunarak görsel ağırlığını %60'dan fazla düşürdüm.
3. Mimari ve Kod Bölme (Code-Splitting): %55 Daha Hafif İlk Yükleme
İçerik yönetimini kurarken dışarıdan ayrı bir backend servisi beslemek yerine her şeyi tek bir çatı altında topladım. Site; modern bir Next.js vb. teknolojileri üzerinde yükseliyor:
Ağır Kütüphaneleri Lazy Loading ile Yönetmek:
TipTap,RechartsveyaFramer Motiongibi güçlü ama ağır kütüphaneleri ilk yükleme anına dahil etmedim. Dynamic import kullanarak bu yapıları sadece ihtiyaç anında tembel bir şekilde yüklenecek şekilde kurguladım ve ilk yükleme yükünü (First Load) %55 oranında hafiflettim.Sunucu Tarafında Güç: Ziyaretçi tarafı ile kendi özel yönetim panelimi farklı mekanizmalarla tamamen izole ettim. SQL tarafında yapılan sorgu optimizasyonları sayesinde veri tabanı tepki sürelerini %70 oranında aşağı çektim. Ayrıca şema değişikliklerinin deployda üretimi çökertmesini engellemek için migration tabanlı şema yönetimi kurdum.
4. Katmanlı Savunma Hattı ve Dijital Tuzaklar
Güvenlik, bir sisteme proje bittikten sonra eklenen bir yama olamaz; doğrudan mimarinin bir katmanı olmalıdır. Sitede, ek bir performans gecikmesi yaratmadan çalışan, üst üste binmiş katmanlı bir savunma mekanizması var. Detayları paylaşmıyorum :)
5. Arka Planda Çalışan Yapay Zeka Ajan Hattı
Sitenin içerisine, konu verildiğinde blog taslağı üreten özel bir yapay zeka asistan katmanı entegre ettim. Aslında şu an okuduğunuz bu platform, kendi içinde bu otomasyon gücünü barındırıyor. Sistem, ortak bir soyutlama arayüzü arkasında seçilen yapay zeka modellerini esnekçe tetikleyebiliyor. Bu süreç görev kuyruğu mantığıyla arka planda işlediği için, ön yüzde gezinti yapan ziyaretçinin deneyimine etkisi tam olarak %0. Ajan taslağı hazırlıyor, heyete sunuyor, editör inceliyor, kapak tasarımı planlanıyor ve son dokunuş bende.
Ez Cümle:
Herkes tek prompt ile kocaman site yaptım, şunu yazınca hepsi kendiliğinden oluyor gibi reklamlarla click ala dursun; bu işin arkasında yine domain bilgisi şart tecrübe her zaman bir adım öne çıkarıyor. Büyük kütüphaneleri projelere dahil etmek ve karmaşık sistem mimarileri kurmak işin kolay yolu. Ancak asıl zanaat; doğru kararlarla, doğru teknolojileri akıllıca birleştirip koca bir bağımlılık yükünden kurtulabilmektir. Daha hafif bir kod tabanı, daha yüksek güvenlik ve maksimum hız.
Sitemi ziyaret edip ana sayfadaki scroll etkisini ve projelerdeki robotu canlı canlı deneyimlemek için: turkeruzun.com.tr
Yazının hemen altındaki tatlı emojileri kullanarak bu teknik optimizasyonların sizde nasıl bir iz bıraktığını işaretlerseniz çok sevinirim! 👇
#WebDevelopment #NextJS #PayloadCMS #WebGL #UIUX #CyberSecurity #ArtificialIntelligence #WebPerformance