TV Yayın Akışı Sitesi Geliştirirken Öğrendiğim Teknik Dersler

The article details the technical challenges encountered while developing a TV broadcast schedule website, which initially seemed simple but required significant optimization for mobile traffic, performance, and SEO. Key solutions included separating data from the interface using JSON, implementing lazy loading for channel logos, and using structured data to improve search engine understanding. The author emphasizes that reducing DOM size, requests, and JavaScript often yields better results than adding more code, especially for mobile-heavy projects.

Televizyon yayın akışı sitesi geliştirmeye başladığımda bunun basit bir içerik projesi olacağını düşünmüştüm. İlk bakışta mantık oldukça düz görünüyordu: Kanal listesi Yayın saatleri Program başlıkları Kullanıcıya hızlı erişim Fakat iş geliştirme tarafına geçince durum farklılaştı. Özellikle mobil trafik, performans, SEO ve sürekli güncellenen veriler bir araya gelince küçük görünen bir proje zamanla ciddi optimizasyon gerektiren bir sisteme dönüştü. Bu yazıda TV yayın akışı projesi geliştirirken karşılaştığım teknik sorunları ve uyguladığım çözümleri paylaşacağım. Yayın akışları statik içerik değil. Her gün: yeni programlar ekleniyor saatler değişiyor özel yayınlar geliyor içerikler güncelleniyor Başta verileri doğrudan HTML içine yazmayı denedim. Fakat kısa sürede yönetilemez hale geldi. İlk yaklaşım: <div class="program" <span 20:00</span <span Ana Haber</span </div <div class="program" <span 22:00</span <span Film Kuşağı</span </div Bu yöntem küçük ölçek için çalışıyor ancak kanal sayısı arttığında bakım zorlaşıyor. Daha sürdürülebilir yapı JSON tabanlı veri modeli oldu: { "time":"20:00", "title":"Ana Haber" }, { "time":"22:00", "title":"Film Kuşağı" } Frontend tarafında: schedule.forEach item= { container.innerHTML += <div class="program" <span ${item.time}</span <span ${item.title}</span </div } ; Arayüzü veriden ayırmak bakım sürecini ciddi şekilde kolaylaştırdı. TV projelerinde genelde çok sayıda kanal logosu bulunuyor. İlk çözüm klasik yatay kaydırma alanıydı: .channels{ overflow-x:auto; white-space:nowrap; } Başlangıçta çalışıyordu fakat kanal sayısı büyüdükçe mobil cihazlarda bazı sorunlar ortaya çıktı: fazla DOM yükü kaydırma takılmaları düşük FPS gereksiz render işlemleri Sonrasında görünmeyen öğeleri yüklememeye başladım. Örnek: const visibleItems = channels.slice start,end ; Basit görünse de özellikle düşük donanımlı cihazlarda fark hissedildi. Kanal sitelerinde logo sayısı çok yüksek olabiliyor. İlk sürüm: <img src="kanal-logo.png" Yüzlerce logo yüklenmeye başladığında ağ yükü hızla arttı. Daha sonra: <img loading="lazy" src="kanal-logo.png" alt="kanal logosu" Tarayıcının yerleşik lazy loading desteği ciddi fayda sağladı. Ekstra JavaScript kullanmadan ilk yükleme süresi azaldı. İlk sürümlerde her kanal kartı manuel yazılıyordu: <div class="channel" <img src="kanald-logo.png" <h3 Kanal D</h3 </div Bir süre sonra yüzlerce tekrar oluştu. Daha sonra yapı fonksiyonlaştırıldı: function channelCard channel { return <div class="channel" <img src="kanald-logo.png" <h3 Kanal D</h3 </div ; } Bu yaklaşım: kod tekrarını azalttı bakım sürecini kolaylaştırdı ölçeklenebilirliği artırdı Ayrıca Dev.to editöründe bazı template literal örneklerinin sorun çıkarabildiğini fark ettim. Bu yüzden örnek kodlarda sade yapı kullanmak daha güvenli olabiliyor. Yayın akışı siteleri her gün değişiyor. Burada temel soru şuydu: Arama motorları sürekli güncellenen içeriği ne kadar sağlıklı algılıyor? Bazı çözümler: anlamlı URL yapıları yapılandırılmış veriler sitemap güncellemeleri hızlı sayfa yüklenmesi gereksiz JavaScript azaltılması Örnek: <script type="application/ld+json" { "@context":"https://schema.org", "@type":"TVSeries", "name":"Örnek Program" } </script Yapısal veriler küçük görünse de arama motorlarının içeriği anlamasında yardımcı olabiliyor. Bir noktada fark ettiğim önemli şeylerden biri: Sorunların çoğu daha fazla JavaScript eklenerek çözülmüyor. Bazen: daha az DOM daha az istek daha küçük CSS daha sade yapı çok daha iyi sonuç verebiliyor. Özellikle mobil ağırlıklı projelerde hafiflik önemli hale geliyor. Sonuç TV yayın akışı sitesi ilk bakışta basit görünüyor. Ancak kullanıcı sayısı ve veri miktarı arttığında: performans veri yönetimi SEO mobil optimizasyon ölçeklenebilirlik bir anda projenin merkezine yerleşiyor. Küçük görünen projeler bazen büyük sistemlerden daha fazla optimizasyon gerektirebiliyor. Kullanılan Kaynaklar: • Schema.org — BroadcastService: https://schema.org/BroadcastService • Schema.org — TelevisionChannel: https://schema.org/TelevisionChannel • Örnek Çalışma - TV Yayın Akışı • Google Search Central — Video Structured Data: https://developers.google.com/search/docs/appearance/structured-data/video