Hız, bir web sitesinin en sessiz özelliği. Kimse "bu site ne kadar hızlı açıldı, harika" demez. Ama herkes yavaş bir siteyi fark eder ve çoğu zaman tek kelime etmeden çıkıp gider. Siz de bunu asla öğrenmezsiniz. Analiz raporunda sadece bir "hemen çıkma" olarak görünür.
Bu yazıda site açılış hızı konusunu teknik terimlere boğmadan anlatmaya çalışacağız. Google'ın hız ölçütlerini, yani Core Web Vitals'ı, bir dükkân kapısı üzerinden açıklayacağız. Sonra kendi tasarladığımız sitelerde hızı nasıl elde ettiğimizi ve sizin kendi sitenizde neler yapabileceğinizi paylaşacağız.
Hız Neden Bu Kadar Önemli?
Hızın üç ayrı cepheden etkisi var: Ziyaretçi, Google ve reklam bütçesi.
Ziyaretçi açısından: İnsanlar beklemeyi sevmez, özellikle telefonda. Google'ın mobil sayfa hızı üzerine yayımladığı araştırmalar, sayfa yüklenme süresi uzadıkça ziyaretçinin sayfayı terk etme olasılığının belirgin şekilde arttığını gösteriyor. Bir saniyelik fark bile, binlerce ziyaretçide yüzlerce kayıp müşteri anlamına gelebiliyor.
Google açısından: Google, sayfa deneyimini değerlendirirken hız ölçütlerine de bakıyor. Hız tek başına sıralamayı belirlemiyor, içerik ve alaka her zaman önce geliyor. Ama benzer kalitedeki iki sayfa arasında, hızlı olanın bir adım önde olması mantıklı.
Reklam bütçesi açısından: Google Ads'te kalite puanının bir bileşeni açılış sayfası deneyimi. Yavaş bir sayfa, daha yüksek tıklama maliyetine yol açabiliyor. Üstelik reklamdan gelen ziyaretçi sayfa açılmadan geri dönerse, o tıklama için ödediğiniz para doğrudan çöpe gidiyor. Bu konuyu kalite puanı nasıl yükseltilir yazımızda anlattık.
Core Web Vitals: Dükkân Kapısının Üç Sorusu
Google, sayfa deneyimini ölçmek için üç ana ölçüt kullanıyor ve bunlara Core Web Vitals diyor. İsimleri teknik, ama mantıkları çok basit. Bir dükkâna girdiğinizi düşünün ve kendinize üç soru sorun.
LCP: Kapı Ne Zaman Açıldı?
LCP (Largest Contentful Paint), sayfadaki en büyük içeriğin, genelde ana başlığın ya da büyük bir görselin, ekranda görünme süresi. Dükkân benzetmesiyle: Kapının açılıp içeriyi görmeye başladığınız an. Google, bunun 2,5 saniye ya da daha kısa sürede gerçekleşmesini "iyi" kabul ediyor.
LCP'yi en çok bozan şey, devasa boyutlu açılış görselleri. Ekranın tepesine konan, telefonda küçük görünen ama arka planda megabaytlarca veri indiren bir fotoğraf, kapıyı ağırlaştırıyor. Yavaş sunucu ve sayfanın yüklenmesini bekleten dosyalar da LCP'nin bilinen düşmanları.
INP: Tezgâhtar Cevap Verdi mi?
INP (Interaction to Next Paint), bir butona tıkladığınızda ya da menüyü açtığınızda sayfanın ne kadar hızlı tepki verdiği. Dükkânda tezgâhtara bir şey sorduğunuzu düşünün. Hemen dönüp cevap veriyorsa her şey yolunda. Telefonla konuşmaya devam edip sizi bekletiyorsa, sabrınız tükeniyor. Google, bu tepki süresinin 200 milisaniye ya da daha kısa olmasını "iyi" kabul ediyor.
INP'yi bozan genelde arka planda çalışan ağır kodlar. Çok sayıda eklenti, takip kodu, sohbet balonu ve animasyon kütüphanesi aynı anda çalıştığında, tarayıcı ziyaretçinin tıklamasına cevap vermekte gecikiyor.
CLS: Raflar Yerinde mi?
CLS (Cumulative Layout Shift), sayfa yüklenirken içeriğin ne kadar yer değiştirdiği. Bir dükkâna girip bir ürüne uzandığınızda rafın birden kaydığını düşünün. Elinizi başka bir ürüne uzatmış oluyorsunuz. Sitede de durum aynı. Tam bir butona basacakken üstte bir görsel ya da reklam yükleniyor, içerik aşağı kayıyor ve yanlış yere basıyorsunuz. Google, bu kayma puanının 0,1 ya da daha düşük olmasını "iyi" kabul ediyor.
CLS'yi bozan şeyler: Boyutu belirtilmemiş görseller, sonradan yüklenen bannerlar, geç gelen yazı tipleri ve içeriğin üstüne itilen bildirim çubukları.
Hızınızı Nasıl Ölçersiniz?
Hızı ölçmek için uzman olmanıza gerek yok. Google'ın ücretsiz PageSpeed Insights aracına sitenizin adresini yazmanız yeterli. Araç size iki tür veri gösteriyor:
- Gerçek kullanıcı verisi: Sitenize yeterince ziyaretçi geliyorsa, Chrome kullanıcılarının gerçek deneyimlerinden derlenen veriler. Bu, Google'ın gerçekten baktığı veri. Yeni ya da az ziyaret alan sitelerde bu bölüm boş görünebilir, bu bir sorun değil.
- Laboratuvar verisi: Aracın sizin sayfanızı simüle edilmiş bir cihazda ve bağlantıda test etmesiyle elde edilen sonuç. Sorunları bulmak ve düzeltmeleri test etmek için çok faydalı.
Sitenizin Google Search Console'da kayıtlı olması halinde, "Core Web Vitals" raporu da sitenin genelinde hangi sayfaların sorunlu olduğunu gösteriyor. Bir öneri: Puanı bir sınav notu gibi değil, bir yol haritası gibi okuyun. Yüz puan almak zorunda değilsiniz. Önemli olan, gerçek kullanıcıların iyi bir deneyim yaşaması.
Sitelerimizi Nasıl Hızlı Yapıyoruz?
Hız bir sihir değil, bir dizi küçük kararın toplamı. Tasarladığımız her sitede uyguladığımız yöntemleri paylaşalım. Bu sitenin kendisi de bu yöntemlerle yapıldı.
1. Görselleri Diyete Sokuyoruz
Görseller, çoğu sitenin toplam ağırlığının en büyük kısmını oluşturuyor. Her görseli modern formatlarda sıkıştırıyor, gösterileceği boyuttan büyük yüklemiyor ve farklı ekranlar için farklı boyutlar hazırlıyoruz. Sayfanın aşağısındaki görselleri ise ziyaretçi o bölüme yaklaştığında yüklüyoruz. Böylece ilk açılışta sadece gereken yükleniyor.
2. Yazı Tiplerini Evde Tutuyoruz
Birçok site yazı tiplerini başka sunuculardan çekiyor. Bu, her ziyarette ek bir bağlantı ve bekleme demek. Biz yazı tiplerini sitenin kendi sunucusundan, sadece kullanılan ağırlıklar ve karakter setleriyle yüklüyoruz. En kritik yazı tiplerini önceden yüklenmeleri için tarayıcıya bildiriyoruz.
3. Kritik Stilleri Sayfaya Gömüyoruz
Bir sayfanın görünmesi için tarayıcının önce stil dosyasını indirmesi gerekiyor. Bu dosya ayrı bir istekle geliyorsa, sayfa onu bekliyor. Biz sayfanın ilk görünümü için gereken stilleri doğrudan sayfanın içine gömüyoruz. Böylece tarayıcı ekstra bir dosya beklemeden sayfayı çizmeye başlıyor.
4. Gereksiz Kodu Atıyoruz
Kullanılmayan eklentiler, bir kez denenip unutulmuş takip kodları, hiç açılmayan sohbet pencereleri. Her biri sayfaya yük bindiriyor. Bir sitenin gerçekten neye ihtiyacı varsa onu ekliyor, gerisini çıkarıyoruz. JavaScript dosyalarını, sayfanın görünmesini engellemeyecek şekilde yüklüyoruz.
5. Yer Ayırıyoruz
CLS'yi önlemenin yolu basit: Her görsel ve gömülü içerik için önceden yer ayırmak. Görsellerin genişlik ve yükseklik bilgisini kodda belirtiyoruz. Böylece tarayıcı görsel gelmeden önce onun yerini biliyor ve içerik kaymıyor.
6. Doğru Sunucuyu Seçiyoruz
En iyi optimize edilmiş site bile yavaş bir sunucuda yavaş açılır. Hızlı yanıt veren, ziyaretçilere yakın konumlardan içerik sunabilen barındırma çözümleri tercih ediyoruz. Gerekirse sitenin önüne bir içerik dağıtım ağı koyarak hem hızı hem güvenliği artırıyoruz.
Kendi Sitenizde Hemen Yapabileceğiniz 7 Şey
Bir ajansa ihtiyaç duymadan, bugün atabileceğiniz adımlar da var:
- Görsellerinizi küçültün: Siteye yüklemeden önce görselleri ücretsiz sıkıştırma araçlarından geçirin. Telefonla çekilmiş fotoğraflar genelde gereğinden çok büyük oluyor.
- Kullanmadığınız eklentileri kaldırın: Özellikle hazır altyapılarda, bir kez kurulup unutulmuş eklentiler sessizce siteyi yavaşlatıyor.
- Otomatik oynayan videoları kapatın: Anasayfada arka planda dönen videolar ağır bir yük.
- Kaydırıcıları sorgulayın: Beş görselli bir kaydırıcı, beş büyük görseli birden yüklüyor. Çoğu zaman tek güçlü bir görsel daha etkili.
- Takip kodlarını gözden geçirin: Kullanmadığınız analiz, ısı haritası ya da pazarlama kodları varsa kaldırın.
- Barındırma hizmetinizi değerlendirin: Çok ucuz paylaşımlı sunucular, kalabalık bir apartmanın tek asansörü gibi. Siteniz büyüdükçe daha iyi bir çözüme geçmeyi düşünün.
- Ölçün ve tekrar ölçün: Her değişiklikten sonra PageSpeed Insights ile tekrar test edin. Neyin işe yaradığını görmek, motivasyonu artırıyor.
Görünmeyen Misafirler: Üçüncü Parti Kodlar
Bir sitenin yavaşlığının en sinsi sebebi, sitenin kendisi değil, ona eklenen başkalarının kodları. Analiz araçları, reklam takip kodları, sohbet balonları, sosyal medya eklentileri, harita yerleştirmeleri, yorum kutuları. Her biri tek başına küçük görünüyor. Ama her biri kendi sunucusuna bağlanıyor, kendi dosyalarını indiriyor ve tarayıcının işlemcisini meşgul ediyor.
Bunları bir eve gelen misafirlere benzetiyoruz. Bir iki misafir evi şenlendirir. On beş misafir aynı anda gelirse, ev sahibi kapıyı açmaya yetişemez. Biz tasarladığımız sitelerde her üçüncü parti kodu tek tek sorguluyoruz: Bu kod ne işe yarıyor? Gerçekten kullanılıyor mu? Sayfanın açılışını beklemeden, daha sonra yüklenebilir mi? Örneğin bir harita yerleştirmesini, ziyaretçi o bölüme gelene kadar yüklemiyoruz. Sohbet balonunu sayfa tamamen açıldıktan sonra devreye alıyoruz.
Bu yaklaşım, analiz ve reklam ölçümünden vazgeçmek anlamına gelmiyor. Ölçüm bizim için çok önemli. Ama ölçüm kodlarının da sayfanın açılışını engellemeyecek şekilde yerleştirilmesi gerekiyor.
Bir Hız Çalışmasının Adımları
Mevcut bir siteyi hızlandırmak için geldiğinizde izlediğimiz yol genelde şöyle:
- Ölçüm: PageSpeed Insights, Search Console ve kendi testlerimizle sitenin mobil ve masaüstü durumunu çıkarıyoruz. En çok ziyaret alan beş sayfaya odaklanıyoruz.
- Darboğaz tespiti: Sayfanın açılışını en çok geciktiren üç kalemi buluyoruz. Çoğu zaman bunlar büyük görseller, ağır eklentiler ve yavaş sunucu yanıtı oluyor.
- Hızlı kazanımlar: Görsel sıkıştırma, gereksiz eklentilerin kaldırılması, yazı tiplerinin düzenlenmesi gibi az emekle büyük fark yaratan adımları önce yapıyoruz.
- Derin düzeltmeler: Gerekiyorsa şablon kodunu sadeleştiriyor, sunucu ayarlarını iyileştiriyor, önbellekleme kuruyoruz.
- Tekrar ölçüm: Her adımın etkisini ölçüyoruz. Gerçek kullanıcı verilerinin güncellenmesi birkaç hafta sürebildiği için sonuçları bir süre takip ediyoruz.
Bazen bu sürecin sonunda şu sonuca varıyoruz: Mevcut altyapıyı hızlandırmak, yeni ve hafif bir site kurmaktan daha pahalı. Bu durumda size dürüstçe söylüyoruz.
Hız ve Güzellik Düşman mı?
Sık duyduğumuz bir endişe: "Hızlı olsun diye sitemi sade ve sıkıcı mı yapacaksınız?" Hayır. Hız ile güzellik birbirinin düşmanı değil. Güzel bir site, ağır bir site olmak zorunda değil. Renkler, tipografi, boşluk kullanımı ve iyi seçilmiş birkaç güçlü görsel, hiçbir hız kaybı olmadan çok etkileyici bir görünüm yaratabilir.
Asıl yavaşlatan şeyler genelde "süs" diye eklenen ama ziyaretçiye bir şey katmayan öğeler: Dönen kaydırıcılar, uçuşan animasyonlar, parallax efektleri, beş farklı yazı tipi. Bunları çıkardığınızda site hem hızlanıyor hem de mesajı daha net hale geliyor. Bizim tasarım anlayışımızda sadelik bir kısıt değil, bir tercih.
Şöyle düşünün: En şık mağazalar genelde en kalabalık olanlar değildir. Az ama özenle seçilmiş ürün, ferah bir düzen ve iyi bir ışık, insanı içeri çeker. Web sitesinde de durum aynı. Az ama güçlü bir görsel, ferah boşluklar ve okunaklı bir tipografi, ziyaretçiye hem hız hem kalite hissi veriyor. Bu sayfanın kendisi de bu anlayışla tasarlandı.
Mobil Hız: Asıl Sınav
Ofiste, hızlı bir bilgisayarda, güçlü bir internetle sitenize baktığınızda her şey hızlı görünebilir. Ama müşterileriniz sitenize çoğunlukla telefondan, bazen zayıf bir mobil bağlantıyla geliyor. Asıl sınav orada veriliyor.
Bu yüzden hız testlerimizi her zaman mobil öncelikli yapıyoruz. PageSpeed Insights'ta da mobil sonuçlara öncelik veriyoruz. Mobil deneyimin diğer boyutlarını mobil uyumlu site neden şart yazımızda anlattık.
Yayından Sonra: Hız Bir Kere Kazanılıp Bitmiyor
Hızlı bir siteyle yayına çıkmak işin başlangıcı. Asıl zorluk, o hızı korumak. Zamanla siteye yeni sayfalar, yeni görseller, yeni kodlar ekleniyor. Bir kampanya için konulan banner, bir etkinlik için eklenen video, denemek için kurulan bir eklenti. Her biri küçük, ama birkaç ay sonra site fark ettirmeden ağırlaşmış oluyor.
Bu yüzden müşterilerimize basit bir alışkanlık öneriyoruz. Siteye her yeni görsel yüklemeden önce boyutunu küçültün. Her yeni kod eklemeden önce "buna gerçekten ihtiyacım var mı?" diye sorun. Ayda bir kez de PageSpeed Insights ile ana sayfanızı test edin. Puan belirgin şekilde düştüyse, son ay neler eklendiğine bakın. Sorunun kaynağı genelde orada.
Bizimle çalışan müşterilerimizde bu takibi biz yapıyoruz. Search Console'daki Core Web Vitals raporunu düzenli kontrol ediyor, bir sayfa "iyi" bölgeden çıkarsa sebebini araştırıyoruz.
Sıkça Sorulan Sorular
PageSpeed puanım düşük, Google'da hiç çıkmayacak mıyım?
Hayır, bu kadar keskin değil. Google için içerik ve alaka her zaman önce geliyor. Hız, benzer kalitedeki sayfalar arasında fark yaratan bir unsur. Yine de düşük puan, ziyaretçi kaybettiğinizin bir işareti olabilir. Bu yüzden iyileştirmeye değer.
Laboratuvar puanım iyi ama gerçek kullanıcı verisi kötü. Neden?
Laboratuvar testi tek bir simülasyon. Gerçek kullanıcılar ise farklı cihazlardan, farklı bağlantılardan geliyor. Ziyaretçilerinizin büyük kısmı eski telefonlardan ya da zayıf bağlantılardan geliyorsa, gerçek veriler laboratuvardan daha kötü çıkabilir. Google'ın asıl baktığı gerçek kullanıcı verisi.
Hazır altyapı kullanan siteler hızlı olabilir mi?
Olabilir, ama emek ister. Hazır altyapılar genelde çok sayıda özellikle geliyor ve bunların çoğu kullanılmıyor. Doğru tema seçimi, az eklenti ve iyi bir önbellekleme ile hazır altyapılar da iyi hızlara ulaşabilir.
Önbellekleme nedir, işe yarar mı?
Önbellekleme, sitenin sık kullanılan dosyalarının ziyaretçinin tarayıcısında ya da sunucuya yakın noktalarda saklanması demek. İkinci ziyarette dosyalar yeniden indirilmiyor, sayfa çok daha hızlı açılıyor. Doğru kurulduğunda kesinlikle işe yarıyor ve çoğu sitede ilk yaptığımız ayarlardan biri.
Görsel kalitesinden ödün vermek zorunda mıyım?
Genelde hayır. Modern sıkıştırma yöntemleri, gözle fark edilmeyecek bir kalite kaybıyla dosya boyutunu ciddi oranda düşürebiliyor. Asıl sorun genelde sıkıştırma değil, görselin gösterileceği alandan çok daha büyük boyutta yüklenmesi.
Hız için ne kadar uğraşmalıyım?
Ziyaretçileriniz iyi bir deneyim yaşayana kadar. Mükemmel puanın peşinden koşmak yerine, üç Core Web Vitals ölçütünde "iyi" bölgeye girmeyi hedefleyin. Oradan sonrası, işinizin önceliklerine göre değişir.
Son Söz
Siteniz, müşterinizin kapısını çaldığı dükkânınız. Kapı hızlı açılmalı, tezgâhtar hemen cevap vermeli, raflar yerinde durmalı. Bu üç soruya "evet" diyebildiğinizde, ziyaretçi içeri girip ne sattığınıza bakmaya başlıyor. Hız, satışın kendisi değil, ama satışın kapısı. Ve iyi haber şu ki bu kapıyı yağlamak çoğu zaman sanıldığı kadar zor ya da pahalı değil. Doğru yerden başlamak yeterli. O kapıyı birlikte yağlamak isterseniz, web tasarım hizmetimize göz atın ya da sitenizin hız raporunu birlikte inceleyelim.