Bu siteyi nasıl yaptık? Lighthouse 100/100 ve GPU animasyonlar bir arada

Kısa cevap: içerik her zaman önce gelir, efektler sonra ve yalnızca kaldırabilecek cihazlarda. Bu yazıda ekursoft.com'un arkasındaki kararları anlatıyoruz — hem kendi müşterilerimize ne vaat ettiğimizi göstermek hem de benzer bir site düşünenlere yol göstermek için.

Neden Astro?

Kurumsal bir sitenin büyük kısmı metin, görsel ve formdan oluşur; her sayfaya koca bir JavaScript uygulaması göndermek gereksizdir. Astro sayfaları derleme sırasında saf HTML'e çevirir ve JavaScript'i yalnızca gerçekten etkileşim gereken parçalara ("ada" mimarisi) yükler. Sonuç: ziyaretçi metni anında görür, animasyonlar arkadan gelir.

Animasyonlar hızı neden bozmuyor?

Ekran kartı çalışıyor, işlemci değil: Parçacıkların hareketi, dalgalar ve şekil dönüşümleri shader adı verilen küçük programlarla doğrudan GPU'da hesaplanıyor. İşlemci her karede on binlerce noktayı tek tek taşımıyor.
Önce içerik: 3D sahneler sayfa yüklendikten sonra başlıyor; başlık ve metin hiçbir zaman animasyonu beklemiyor.
Cihaza göre karar: Masaüstünde Three.js ile tam sahne, telefonda ise kütüphanesiz, birkaç kilobaytlık ham WebGL ile hafif bir sürüm çalışıyor. "Hareketi azalt" tercihi açık olan kullanıcılara hiç animasyon gösterilmiyor.
Görünmüyorsa durur: Sekme arka plandayken çizim duruyor, pil boşa harcanmıyor.

100/100 için yaptığımız küçük ama kritik işler

Yazı tiplerini Google sunucularından değil kendi sunucumuzdan yüklüyoruz (hem hız hem KVKK açısından). CSS'i sayfanın içine gömüyoruz; ekstra bir istek beklenmiyor. Görsellerin boyutlarını önceden bildiriyoruz ki sayfa yüklenirken kaymasın. İlk ekrandaki animasyonların sayfa kaymasına (CLS) yol açmadığını tek tek ölçtük — başlıktaki harf efektinde kullandığımız karakterleri bile satır kırılmasını değiştirmeyecek şekilde seçtik.

Arama motorları ve yapay zekâ için

Her sayfa için yapılandırılmış veri (Organization, Service, FAQ, Breadcrumb), Türkçe-İngilizce eşleşmesi (hreflang), içerikten otomatik üretilen sitemap ve yapay zekâ motorları için sitenin kısa bir özetini veren llms.txt dosyası var. Yeni bir yazı yayınlandığında IndexNow ile Bing ve Yandex'e saniyeler içinde haber veriliyor.

Bunun bir işletmeye faydası ne?

Hız doğrudan para demek: yavaş açılan sayfa ziyaretçi kaybettirir, Google'da geri düşürür. Aynı özen bir e-ticaret sitesinde daha çok satış, bir klinik sitesinde daha çok randevu olarak geri döner. Kendi sitenizin durumunu merak ediyorsanız ücretsiz hız testimizle ölçebilirsiniz.

Ekursoft olarak web, mobil ve özel yazılım projelerinde aynı yaklaşımı uyguluyoruz. Benzer bir site mi düşünüyorsunuz? Konuşalım →