PageSpeed Sayfa Hızı Sorunları

Nisanur Tüzen
7 May
3 dakikada okunur

Sayfa hızı, web sitesinde bir sayfaya tıklandığında açılmasına kadar geçen süreyi ifade eder. Sayfa hızınız düşük olduğunda, genelde kullanıcılar sayfanızdan çıkar ve başka bir siteye yönelir. Bu da kullanıcı deneyimini olumsuz etkiler ve sitenizin güvenirliğini düşürür.

Sayfa hızını düzenli olarak kontrol etmek ve hataları gidermek SEO çalışmalarının önemli bir parçasıdır. Hızınızı kontrol etmek için pek çok araç var, PageSpeed'de onlardan biri. Peki PageSpeed nasıl kullaınılır ve hız sorunları nasıl giderilir?

Sayfa hızını ölçmek için PageSpeed sayfasına gidin ve hızını ölçmek istediğiniz web sitesinin adresini girin. Mobil ve masaüstü şeklinde ayrı ayrı göreceksiniz.

Bu hataları isterseniz Google Search Console'da "Önemli Web Verileri" kısmından da görebilirsiniz.

PageSpeed Hataları Ne Anlama Geliyor?

Largest Contentful Paint (LCP) Sorunu Nedir?

LCP, diğer bir adıyla "En Büyük İçerikli Boya" sorunu web sayfanızdaki en büyük içeriğin geç yüklenmesidir. Kullanıcı deneyimi için LPC'nin 2,5 veya daha kısa olması gerekir.

LCP Sorunu Nasıl Çözülür?

Görselleri küçültebilir veya istenen formata getirebilirsiniz. Bu sayfanızın daha hızlı açılmasını sağlar. Büyük formatta görseller sayfanızın açılma süresini uzatır, bu yüzden mümkün olduğunca daha az yer kaplayan görseller kullanılmalıdır.

Tarayıcı, CSS dosyalarını her zaman belirli bir sırayla yüklemeyebilir.. Bunun için tarayıcıya öncelikli kaynakları belirtmek amacıyla preload ipucu kullanılmalıdır. HTML dosyasının <head> bölümüne rel="preload" etiketi eklenerek, tarayıcıya hangi kaynakların önce yüklenmesi gerektiği bildirilir; önemli dosyalar daha hızlı işlenir ve sayfa daha hızlı açılır.

Sunucu kaynaklı LCP sorunlarındaysa, web sitesi yanıt süresi yavaş olur ve içerikler düzgün bir şekilde sayfanızda yüklenmez. Bunun için hızlı ve güvenilir bir hosting tercih edilmelidir. Aynı zamanda CDN kullanmak sunucu yükünü azaltır ve kullanıcı deneyimni iyileştirir.

Interaction to Next Paint (INP) Sorunu Nedir?

INP yani "Sonraki Boyama Etkileşim" kullanıcının web sayfasıyla etkileşimde bulunduğu andan, sayfanın buna görsel bir yanıt verdiği ana kadar geçen süreyi ölçer.

Kullanıcı deneyiminin iyi olması için INP değeri;

200 ms altında olmalıdır.
200-500 ms geliştirilmesi gerek
500 ms ve üzeri kötü performans olarak değerlendirilir.

INP Sorunu Nasıl Çözülür?

Sayfada yoğun işlemler olduğunda kullanıcı geç yanıt alır ve bu durum kullanıcı deneyimini olumsuz etkiler. INP sorununu çözmek için öncelikle JS kodlarını sadeleştirebilirsiniz. Kodları küçük parçalara ayırmak ve sadeleştirmek site hızınızı artıracaktır.

Sayfanızdaki dış kaynaktan gelen reklamları ve analiz araçları gibi üçüncü parti kodları azaltabilir, gereksizse kaldırabilirsiniz. Aynı zamanda sayfanızdaki önemli içerikleri de önceliklendirirseniz sayfa hızınız artıracaktır.

Cumulative Layout Shift (CLS) Sorunu Nedir?

CLS yani "Kümülatif Düzen Kayması" web sayfası yüklenirken video, resim, yazı gibi sayfa ögelerinin kayması/yer değiştirmesidir. Bu sorun kullanıcı deneyimini olumsuz etkiler ve yanlış tıklama yapmalarına sebep olabilir.

CLS Sorunu Nasıl Çözülür?

CLS sorunu sayfa estetiğini etkilediği gibi kullanıcı deneyimini de olumsuz etkiler. CLS sorununu çözmek için sayfamızdaki görsellerin - medyaların boyutlarını belirlemeliyiz. Görselleri lazy load ile yükleyebiliriz böylece sadece ekranda görüntülenen ögelerin yüklenmesini sağlar ve sayfa yüklenirken bu medya ögelerinin sabit kalmasını sağlamış oluruz.

Animasyonlar ve geçişler gibi pozisyon değiştiren CSS'lerde, yer değiştirmesini engellemek için dikkatli olunmalıdır. Bu öğelerde transform* gibi özellikler kullanmak, öğelerin sayfa düzenini bozmadan hareket etmelerini sağlar.

*transform: CSS’te bir öğenin hareket ederken çevresindeki diğer öğelerin onun hareketinden etkilenmemesini sağlayan koddur.

First Contentful Paint (FCP) Sorunu Nedir?

FCP yani "İlk İçerikli Boyama" sayfanın ilk öğesinin (başlık, banner, logo..) kullanıcı ekranında olması gerekenden daha uzun süre sonra belirmesidir. Bu hata kullanıcı deneyimini olumsuz etkiler ve kullanıcın sayfayı terk etmesine sebep olur.

FCP nedenlerinden bazıları; büyük boyutta görseller, yavaş sunucu kullanımı, büyük boyutta CSS ve JavaScript dosyalarıdır.

FCP Sorunu Nasıl Çözülür?

FCP sorununu çözmek için yapacağımız adımlardan biri CSS ve JavaScript dosyasını kontrol edip gereksiz kodları temizlemek, büyük CSS ve JS dosyalarını parçalara ayırmak ve dosyaları sıkıştırmaktır. Bunları yaparken kullanım önceliğine göre dosyalarınızı yükleyin ve içeriği etkilemeyen CSS/JS dosyalarının yüklenmesini geciktirin.

FCP sorununa bir diğer çözümse görselleri doğru formatta yüklemek, boyutlarını sıkıştırmak ve görünmeyen görsellerin geç yüklenmesini (lazy loading) sağlamaktır.

Time to First Byte (TTFB) Sorunu Nedir? TTFB diğer adıyla "İlk Bayta Kadar Geçen Süre", tarayıcıya gönderilen isteğin, sunucu tarafından yanıtlanıp kullanıcı ekranına ulaşması arasındaki geçen süreye denir. TTFB, kullanıcı deneyiminin iyi olması için 0,8 saniye veya daha az olmalıdır.

TTFB sorunun başlıca sebeplerinden biri sunucu hataları, yavaş veritabanı sorguları, optimizasyon eksikliği yer almaktadır.

TTFB Sorunu Nasıl Çözülür?

TTFB sorununu çözmek için öncelikle sorunlarımızı iyi bir şekilde analiz etmeliyiz. Eğer sunucu kaynaklı bir problem varsa hosting kalitesini gözden geçirebilir, veritabanını optimize edebilir veya cache sistemi kurabilirsiniz.

Kod kaynaklı problemlerde kodlarınızı sadeleştirebilir, DNS için hızlı ve güvenilir DNS sağlayıcılarından kullanabilirsiniz. Aynı zamanda CDN kullanımı da gecikmeleri azaltacaktır.