Site Hızı ve Core Web Vitals: Tasarımdan Ödün Vermeden Hızlı Bir Site Kurmak

Performans tartışmalarında sık tekrarlanan bir yanlış varsayım var: hızlı bir site için tasarımdan ödün vermek gerektiği. Uygulamada durum böyle değil. İncelediğimiz yavaş sitelerin çoğunda sorun tasarımın iddialı olması değil, birkaç tekrar eden uygulama hatasıydı — ve bu hatalar görsel kaliteyi düşürmeden düzeltilebilir.

Bu yazıda önce ölçütlerin ne anlama geldiğine, sonra hangi kararların performansı bozduğuna ve son olarak tasarımı koruyarak nasıl hızlandırılacağına bakıyoruz.

Ölçütler ne söylüyor?

Core Web Vitals, laboratuvar testinden çok gerçek kullanıcıların yaşadığı deneyimi tanımlamak için kurgulanmış üç ölçütten oluşur.

En büyük içerik ögesinin yüklenmesi

Ekranda görünen en büyük ögenin — genellikle bir kapak görseli veya ana başlık — ne zaman göründüğünü ölçer. Kullanıcının "sayfa açıldı" hissine en yakın karşılıktır. Hedef, 2,5 saniyenin altıdır.

Bu ölçütü bozan başlıca nedenler: büyük boyutlu kapak görselleri, geç yüklenen yazı tipleri, yüklenmeyi bloke eden stil dosyaları ve yavaş sunucu yanıtı.

Kümülatif düzen kayması

Sayfa yüklenirken içeriğin ne kadar yerinden oynadığını ölçer. Okumaya başladığınız metnin aniden aşağı kayması veya tıklamak üzere olduğunuz düğmenin yer değiştirmesi bu ölçütün kötü olduğu anlamına gelir. Hedef, 0,1'in altıdır.

Neredeyse tüm düzen kaymaları dört kaynaktan doğar: boyutu tanımlanmamış görseller, sonradan yüklenen yazı tipleri, dinamik olarak eklenen reklam veya duyuru alanları, ve içeriğin üstüne sonradan giren bildirim çubukları.

Etkileşim sonrası yanıt gecikmesi

Kullanıcı tıkladıktan sonra ekranda görsel bir tepki oluşana kadar geçen süreyi ölçer. Hedef, 200 milisaniyenin altıdır. Ana iş parçacığını uzun süre meşgul eden JavaScript, bu ölçütün birincil düşmanıdır.

Performansı bozan yaygın tasarım kararları

Optimize edilmemiş görseller

En sık karşılaştığımız ve en kolay çözülen sorun. Kameradan çıktığı hâliyle yüklenmiş bir fotoğraf 4-6 MB olabilir; aynı görsel modern formata dönüştürülüp gösterileceği boyutta üretildiğinde 80-150 KB'a iner. Görsel kalitesinde gözle görülür bir kayıp olmaz.

Yapılması gerekenler:

• WebP veya AVIF formatına dönüştürün
• Farklı ekran genişlikleri için ayrı boyutlar üretin ve tarayıcının seçmesine izin verin
• Ekranın altında kalan görselleri geç yükleyin, ilk ekrandakini yüklemeyin
• Her görsele genişlik ve yükseklik değeri verin

Yazı tipi yükleme stratejisi

Özel yazı tipleri markanın görsel kimliğinin parçasıdır, vazgeçilmesi gerekmez. Ancak yükleme biçimi önemlidir. Yazı tipi indirilene kadar metnin görünmez kalması hem algılanan hızı düşürür hem de düzen kaymasına yol açar.

Çözüm, yedek yazı tipiyle metni hemen göstermek ve özel yazı tipi geldiğinde değiştirmektir. Yedek yazı tipinin ölçülerini asıl yazı tipine yaklaştırmak, bu geçişteki kaymayı neredeyse tamamen ortadan kaldırır. Ayrıca değişken yazı tipleri kullanmak, birden fazla ağırlık için ayrı dosya indirme ihtiyacını kaldırır.

Üçüncü parti betikler

Sohbet widget'ı, ısı haritası, analiz aracı, reklam etiketi, sosyal medya gömülü içeriği — her biri kendi başına küçük görünür ama toplamda sayfanın en ağır bölümünü oluşturabilir. Üstelik bu betiklerin performansı sizin kontrolünüzde değildir.

Uygulanabilir kural: her üçüncü parti betik için "bu olmasa ne kaybederim?" sorusunu sorun. Kalanları da sayfa yüklendikten sonra veya kullanıcı etkileşime geçtiğinde yükleyin. Sohbet widget'ını ilk saniyede değil, kullanıcı sayfayı kaydırmaya başladığında yüklemek algılanan hızı belirgin biçimde iyileştirir.

Animasyon ve hareket

Hareket, iyi kurgulandığında kullanıcıya yön gösterir ve arayüzü anlaşılır kılar. Sorun animasyonun varlığı değil, nasıl yapıldığıdır.

Yalnızca transform ve opacity üzerinden çalışan animasyonlar tarayıcının düzen hesaplamasını tetiklemez ve akıcı çalışır. Genişlik, yükseklik, üst-sol konum veya gölge gibi özellikleri canlandırmak ise her karede yeniden hesaplama gerektirir ve düşük donanımlı cihazlarda takılmaya yol açar.

Hareketi azaltma tercihi seçen kullanıcılar için animasyonlar devre dışı bırakılmalıdır. Bu bir performans değil, erişilebilirlik gereğidir — ama performansa da katkı sağlar.

Gereğinden ağır çerçeveler

Beş sayfalık bir tanıtım sitesi için tam kapsamlı bir uygulama çerçevesi kurmak, gerekli olmayan onlarca kilobayt JavaScript indirmek demektir. Teknoloji seçimi projenin gerçek ihtiyacına göre yapılmalıdır; içerik ağırlıklı kurumsal siteler çoğu zaman sunucu tarafında üretilen sayfalar ve hedefli küçük betiklerle çok daha hızlı çalışır.

Tasarımı koruyarak hızlandırmak

Aşağıdaki düzenlemeler görsel kaliteden ödün vermeden uygulanabilir:

1. Kritik stili satır içine alın: İlk ekranın görünmesi için gereken stiller sayfayla birlikte gelsin; kalanı sonradan yüklensin.
2. Kaynakları önceden bildirin: Kapak görseli ve ana yazı tipi için ön yükleme tanımlayın; tarayıcı bunları keşfetmek için beklemesin.
3. Sunucu önbelleği açın: Veritabanından üretilen sayfaların çıktısını önbelleğe almak, sunucu yanıt süresini belirgin biçimde kısaltır.
4. İçerik dağıtım ağı kullanın: Statik dosyaları kullanıcıya coğrafi olarak yakın sunuculardan sunun.
5. Kullanılmayan kodu temizleyin: Tema ve eklentilerden gelen, sitede hiç kullanılmayan stil ve betikleri kaldırın.
6. Görselleri ölçekli üretin: Her kırılma noktası için ayrı boyut hazırlayın.
7. Betikleri erteleyin: Sayfanın çizilmesi için gerekli olmayan tüm JavaScript'i geciktirin.

Ölçmeden iyileştirme yapmayın

Performans çalışmasında en sık yapılan hata, tahmine dayalı iyileştirmedir. Önce mevcut durumu ölçün, en büyük gecikmeyi yaratan ögeyi belirleyin ve oradan başlayın. Çoğu sitede toplam kazancın büyük bölümü ilk iki-üç düzenlemeden gelir.

Ölçüm yaparken laboratuvar testine ek olarak gerçek kullanıcı verisini de izleyin. Hızlı bir bilgisayarda ve iyi bağlantıda alınan sonuç, mobil veri üzerinden bağlanan ziyaretçinin deneyimini yansıtmaz.

Performans bir tasarım kararıdır

Hız, geliştirme aşamasının sonunda uygulanan bir düzeltme listesi değil, ilk taslaktan itibaren alınan kararların toplamıdır. Kaç farklı yazı tipi kullanılacağı, kapak alanında video mu görsel mi olacağı, kaç üçüncü parti araç bağlanacağı — bunların hepsi tasarım kararıdır ve hepsi performansı belirler.

Mevcut sitenizin performansını değerlendirmemizi isterseniz, ölçüm sonuçlarını çıkarıp hangi düzenlemenin ne kadar kazanç sağlayacağını önceliklendirilmiş biçimde paylaşabiliriz.

Sıkça sorulan sorular

Core Web Vitals tam olarak neyi ölçüyor?

Üç şeyi ölçer. En büyük içerik ögesinin görünür hâle gelme süresi sayfanın ne kadar hızlı "yüklenmiş gibi hissettirdiğini", kümülatif düzen kayması içeriğin yüklenirken ne kadar yerinden oynadığını, etkileşimden sonraki boyama gecikmesi ise tıklama veya dokunmaya ne kadar çabuk yanıt verildiğini gösterir. Üçü birlikte, gerçek kullanıcıların algıladığı deneyimi tanımlar.

Animasyonlu ve hareketli tasarımlar siteyi yavaşlatır mı?

Doğru uygulanırsa yavaşlatmaz. Sorun animasyonun kendisi değil, hangi özelliğin canlandırıldığıdır. Transform ve opacity üzerinden çalışan animasyonlar ekran kartında işlenir ve akıcıdır; genişlik, yükseklik veya konum gibi düzeni yeniden hesaplatan özellikler ise kare düşmesine yol açar. Ayrıca hareketi azaltma tercihini seçen kullanıcılar için animasyonların devre dışı bırakılması gerekir.

Görselleri nasıl optimize etmeliyim?

Üç adım yeterlidir: modern formata dönüştürün, gerçekte gösterilecek boyutta üretin ve ekran dışındakileri geç yükleyin. 3000 piksel genişliğinde bir fotoğrafı 600 piksellik alanda göstermek, tarayıcının gereksiz veri indirmesi ve işlemesi demektir. Ayrıca her görsele genişlik ve yükseklik değeri vermek, düzen kaymasını önler.

Performans iyileştirmesi ne zaman yapılmalı?

Tasarım aşamasında başlaması en verimlisidir. Yayına alındıktan sonra yapılan iyileştirmeler genellikle yüzeysel kalır; ağır bir tema veya çok sayıda üçüncü parti betik üzerine kurulmuş bir sitede elde edilebilecek kazanç sınırlıdır. Yine de mevcut sitelerde görsel optimizasyonu, önbellek ve betik yönetimi çoğu zaman gözle görülür fark yaratır.

site hızıCore Web Vitalsperformanskullanıcı deneyimiweb tasarımerişilebilirlik

Son güncelleme: 9 Nisan 2026