Sitenizin Yükünü Ziyaretçinizin Gözünden Görün
Ziyaretçilerinizin web sitenizi ziyaret ettiklerinde gerçekte neler yaşadıkları hakkında iyi bir fikir edinin.
Yavaş yüklenen veya yerinde olmayan bir şey fark ettiniz mi? Bu, ziyaretçilerinizin yaşadığı önemli gecikmeleri ve dönüşüm sorunlarını belirlemenize yardımcı olabilir.
DebugBear web performans testinin sonucunu gösteren ekran görüntüsü, Ekim 2022 Zaman çizelgesi film şeridi, web sitesinin zaman içindeki işleme sürecini gösterir.
Örneğin, bu sayfa 0,7 saniye sonra görüntülenmeye başlar ve ana görüntü 1,3 saniye sonra oluşturulur.
Web sitesi, sohbet widget'ı 3,7 saniye sonra görüntülendiğinde, Görsel Olarak Tamamlandı olarak da bilinir.
DebugBear'ın bir web sitesinin zaman içinde oluşturma ilerlemesini gösteren ekran görüntüsü, Ekim 2022 Araç içinde, işleme sürecinin bir video kaydını da izleyebilirsiniz.
Bu, performans sorunlarının müşterilere veya ekibinizin diğer üyelerine etkisini göstermenin harika bir yoludur.
Ekim 2022'de DebugBear'da kısmen oluşturulmuş bir web sitesinin video kaydını gösteren ekran görüntüsü Gerçek Yükleme İstatistiklerinizi Görerek Site Hızı Değişikliklerini Test Edin
Diyelim ki web sitenizi optimize ediyorsunuz ve bu değişikliklerin bir etki yaratıp yaratmayacağını anlamak istiyorsunuz.
Bu araç, sitenizi doğru şekilde optimize edip etmediğinizi keşfetmek için en uygun ortamda bir "laboratuar testi" yürütür.
Sitenizi test ettiğinizde, Google'ın Lighthouse aracındaki Performans puanından alınan altı performans metriğinin bir özeti olan resmi bir "Lab Puanı" alırsınız:
- First Contentful Paint (genel puanın %10'u).
- Hız Endeksi (%10).
- En Büyük İçerikli Boya (%25).
- Etkileşim Zamanı (%10).
- Toplam Engelleme Süresi (%30).
- Kümülatif Düzen Kayması (%15).
Bu verileri kullanarak, son optimizasyon turunuzun ne kadar yararlı olduğunu ve neleri değiştirmeniz gerekebileceğini ortaya çıkaracaksınız.
Şimdiye kadar, muhtemelen neyi değiştirmeniz gerektiğini merak ediyorsunuzdur. Metriklere Genel Bakış'ın her bir temel metriğini kullanarak sitenizi nasıl optimize edeceğinizi öğrenelim.
Web Sitesi Hızı Nasıl Optimize Edilir
Hız testi yapmak, web sitesi optimizasyonu yolculuğunuzun ilk kısmıdır.
Metriklerinizi aldıktan sonra, onları nasıl yorumlayacağınızı ve düzeltmek için ne yapacağınızı bilmeniz gerekir.
Web sitesi hız raporunuzun Metriklere Genel Bakış alanında, sitenizi hızlandırmaya yardımcı olmak için odaklanacağımız temel metrikleri göreceksiniz:
- First Contentful Paint : Bu, sunucu iletişim hızı onarılarak hızlandırılabilir.
- En Büyük İçerikli Boyama : Bu, medya ve kaynakları optimize ederek hızlandırılabilir.
Ek olarak, isteklerin ne kadar sürdüğünü ve bunun bu ölçümleri nasıl etkilediğini görmek için istek şelalesini kullanabilirsiniz.
First Contentful Paint (FCP) Nasıl Hızlandırılır
Web sitenizin ziyaretçileriniz için daha erken görünmesini sağlayarak başlayalım; İlk olarak First Contentful Paint'i ele alacağız.
İlk İçerikli Boya Nedir?
First Contentful Paint, bir sayfanın içeriğinin, ziyaretçiniz o sayfaya gittikten sonra ne kadar sürede görünmeye başladığını ölçer.
Ziyaretçinizin web sitenizden ayrılmasını önlemek için önemli içeriğinizin hızlı bir şekilde görünmesi önemlidir. Bir kullanıcı web sitenizden ne kadar hızlı ayrılırsa, Google sayfa deneyiminin kötü olabileceğini o kadar hızlı öğrenir.
Ancak web sitenizin yavaş yüklenmesine neyin neden olduğunu tam olarak nasıl bilebilirsiniz?
Hangi sunucu sorunlarının web sitenizi yavaşlattığını nasıl ortaya çıkarırsınız? Hadi bulalım.
İlk İçerikli Boyam Neden Bu Kadar Uzun Sürüyor?
FCP'niz sunucu bağlantı hızından, sunucu isteklerinden, oluşturmayı engelleyen kaynaklardan ve daha fazlasından etkilenebilir.
Kulağa çok gibi geliyor, ancak FCP'nizi neyin yavaşlattığını tam olarak görmenin kolay bir yolu var - istek şelalesi.
Bu kullanışlı araç, web siteniz tarafından hangi isteklerin yapıldığını ve her bir isteğin ne zaman başlayıp ne zaman bittiğini gösterir.
Örneğin, bu ekran görüntüsünde önce HTML belgesi için bir istek, ardından belgede referans verilen stil sayfalarını yüklemek için iki istek görüyoruz.
Ekim 2022'de DebugBear'daki First Contentful Paint metriği için hata ayıklama verilerini gösteren ekran görüntüsü First Contentful Paint neden 0,6 saniye sonra oluyor? Bunu anlamak için sayfada neler olduğunu parçalayabiliriz.
İlk İçerikli Boyadan Önce Ne Olduğunu Anlamak
İlk içerik parçaları web sayfanıza yüklenmeden önce, kullanıcınızın tarayıcısının önce sunucunuza bağlanması ve içeriği alması gerekir.
Bu işlem uzun sürüyorsa, kullanıcınızın web sitenizi görmesi uzun zaman alır.
Amacınız, web siteniz yüklenmeye başlamadan önce neler olup bittiğini öğrenmektir, böylece sorunları tespit edebilir ve deneyimi hızlandırabilirsiniz.
Sayfa Yükleme Bölüm 1: Tarayıcı Bir Sunucu Bağlantısı Oluşturur
Bir sunucudan bir web sitesi istemeden önce, ziyaretçinizin tarayıcısının o sunucuya bir ağ bağlantısı kurması gerekir.
Bu genellikle üç adımdan oluşur:
- Etki alanı adına göre sunucunun IP adresini aramak için DNS kayıtlarını kontrol etme.
- Güvenilir bir sunucu bağlantısı kurma (TCP bağlantısı olarak bilinir).
- Güvenli bir sunucu bağlantısı kurma (SSL bağlantısı olarak bilinir).
Bu üç adım, tarayıcı tarafından birbiri ardına gerçekleştirilir. Her adım, ziyaretçinizin tarayıcısından web sitenizin sunucusuna bir gidiş-dönüş gerektirir.
Bu durumda sunucu bağlantısının kurulması yaklaşık 251 milisaniye sürer.
Sunucu bağlantısı kurmak için kullanılan ağ gidiş dönüşlerini gösteren DebugBear ekran görüntüsü, Ekim 2022 Sayfa Yükleme Bölüm 2: Tarayıcı HTML Belgesini İstiyor (İlk Bayt Zamanı Burada Gerçekleşir)
Sunucu bağlantısı kurulduğunda, ziyaretçinizin tarayıcısı web sitenizin içeriğini içeren HTML kodunu isteyebilir. Buna HTTP isteği denir.
Bu durumda, HTTP isteği 102 milisaniye sürer. Bu süre, hem ağ gidiş-dönüş yolculuğunda harcanan zamanı hem de sunucunun yanıt oluşturmasını beklemek için harcanan zamanı içerir.
Bağlantıyı oluşturmak için 251 milisaniye ve HTTP isteğini yapmak için 102 milisaniye sonra, ziyaretçinizin tarayıcısı nihayet HTML yanıtını indirmeye başlayabilir.
Bu dönüm noktasına İlk Bayt Süresi (TTFB) denir. Bu durumda, bu toplam 353 milisaniye sonra olur.
Sunucu yanıtı hazır olduktan sonra, ziyaretçinizin tarayıcısı HTML kodunu indirmek için biraz daha zaman harcar. Bu durumda, yanıt oldukça küçüktür ve indirme işlemi yalnızca 10 milisaniye daha sürer.
Bir HTTP isteğinin farklı bileşenlerini gösteren DebugBear ekran görüntüsü, Ekim 2022 Sayfa Yükleme Bölüm 3: Web Siteniz Ek Oluşturmayı Engelleyen Kaynaklar Yükler
Tarayıcılar, belgeyi yükledikten hemen sonra sayfaları oluşturmaz veya göstermez. Bunun yerine, genellikle ek oluşturmayı engelleyen kaynaklar vardır.
Çoğu sayfa herhangi bir görsel stil olmadan kötü görünür, bu nedenle CSS stil sayfaları, sayfa oluşturulmaya başlamadan önce yüklenir.
Bu web sitesi hız testi örneğinde 2 ek stil sayfasının yüklenmesi 137 milisaniye sürer.
Bu isteklerin yeni bir sunucu bağlantısı gerektirmediğini unutmayın. CSS dosyaları, öncekiyle aynı etki alanından yüklenir ve mevcut bağlantıyı yeniden kullanabilir.
HTML belgesinden sonra ek oluşturmayı engelleyen kaynakların yüklenmesini gösteren DebugBear ekran görüntüsü, Ekim 2022 Sayfa Yükleme Bölüm 4: Tarayıcı Sayfayı İşliyor
Son olarak, gerekli tüm kaynaklar yüklendikten sonra, ziyaretçinizin tarayıcısı sayfayı oluşturmaya başlayabilir. Ancak, bu işi yapmak da bir miktar işlem süresi gerektirir - bu durumda 66 milisaniye. Bu, şelale görünümünde turuncu CPU görev işaretçisi ile gösterilir.
HTML belgesinin yüklenmesinden web sayfasının oluşturulmasına giden adımları gösteren DebugBear ekran görüntüsü, Ekim 2022 Şimdi FCP'nin neden 632 milisaniye sonra gerçekleştiğini anlıyoruz:
- HTML Belgesi isteği için 364 milisaniye.
- Stil sayfalarını yüklemek için 137 milisaniye.
- Sayfayı oluşturmak için 66 milisaniye.
- Diğer işleme çalışmaları için 65 milisaniye.
Diğer işleme işi, satır içi komut dosyalarını çalıştırmak veya indirildikten sonra HTML ve CSS kodunu ayrıştırmak gibi küçük işleri içerir. Bu aktiviteyi, render film şeridinin hemen altında küçük gri çizgiler olarak görebilirsiniz.
İlk Contentful Paint (FCP) Nasıl Optimize Edilir
Artık web sitenizin oluşturulmasına neyin yol açtığını anladığınıza göre, onu nasıl optimize edeceğinizi düşünebilirsiniz.
- Sunucu, HTML isteğine daha hızlı yanıt verebilir mi?
- Kaynaklar, yeni bir bağlantı oluşturmak yerine aynı bağlantı üzerinden yüklenebilir mi?
- Kaldırılabilecek veya artık oluşturmayı engellemeyecek şekilde değiştirilebilecek istekler var mı?
Artık web sitenizin başlangıç parçaları daha erken yüklendiğine göre, sitenin tamamının daha hızlı yüklenmesine odaklanmanın zamanı geldi.
DebugBear'ın Önerileriyle En Büyük İçerikli Boyamayı (LCP) Nasıl Hızlandırın
LCP'nizi hızlandırmanın birçok yolu vardır.
Bunu kolaylaştırmak için DebugBear, Öneriler bölümünde bize sonraki harika adımları veriyor.
Önerilerin bazı örneklerine bir göz atalım ve bu web sitesinin LCP'sini nasıl hızlandıracağınızı öğrenelim.
Öneri 1: HTML Belgesinden LCP Görüntü İsteklerini Başlatın
Sayfanızdaki en büyük içerik öğesi bir resimse, en iyi uygulama URL'nin doğrudan ilk HTML belgesinde yer almasını sağlamaktır. Bu, mümkün olan en kısa sürede yüklemeye başlamasına yardımcı olacaktır.
Ancak, bu en iyi uygulama her zaman kullanılmaz ve bazen tarayıcının ana görüntüyü indirmesi gerektiğini keşfetmesi uzun zaman alır.
Aşağıdaki örnekte, bir resim olan en büyük içerik JavaScript kullanılarak sayfaya eklenir. Sonuç olarak, tarayıcının görüntüyü keşfetmeden ve indirmeye başlamadan önce 200 kilobaytlık bir komut dosyasını indirmesi ve çalıştırması gerekir.
Bir resim isteğine yol açan sıralı bir istek zincirini gösteren DebugBear ekran görüntüsü, Ekim 2022 Nasıl Düzeltilir: Web sitesine bağlı olarak iki olası çözüm vardır.
1. Çözüm: Büyük bir resmi tembelce yüklemek için JavaScript kullanıyorsanız, resim boyutunu optimize edin ve tembel yükleme komut dosyasını kaldırın veya JavaScript gerektirmeyen modern loading=”lazy” özniteliğiyle değiştirin.
2. Çözüm: Diğer durumlarda, sunucu tarafı oluşturma, sayfanın oluşturulabilmesi için JavaScript uygulamasını indirme zorunluluğunu ortadan kaldırır. Ancak, bunun uygulanması bazen karmaşık olabilir.
Öneri 2: LCP Görüntülerinin Yüksek Öncelikli Olarak Yüklendiğinden Emin Olun
Bir sayfanın HTML kodunu yükledikten sonra, ziyaretçilerinizin tarayıcıları, ana resminize ek olarak, stil sayfaları gibi çok sayıda ek kaynağın yüklenmesi gerekebileceğini keşfedebilir.
Buradaki amaç, daha büyük, ana resminizin Google'ın En Büyük İçerikli Boyama gereksinimini karşılayacak şekilde yüklenmesini sağlamaktır.
Üçüncü taraf analiz komut dosyaları gibi diğer kaynaklar, ana resminiz kadar önemli değildir.
Ayrıca, sitenizin HTML'sinde atıfta bulunulan resimlerin çoğu, sayfa oluşturulduktan sonra ekranın altında olacaktır. Bazıları iç içe bir başlık gezintisinde tamamen gizlenmiş olabilir.
Bu nedenle, tarayıcılar başlangıçta tüm görüntü isteklerinin önceliğini Düşük olarak ayarlar. Sayfa oluşturulduktan sonra, tarayıcı hangi resimlerin önemli olduğunu bulur ve önceliği değiştirir. Bunun bir örneğini, öncelik sütununda yıldızla gösterildiği gibi aşağıdaki ekran görüntüsünde görebilirsiniz.
Düşük başlangıç önceliği ile yüklenen bir LCP görüntüsünü gösteren DebugBear ekran görüntüsü, Ekim 2022 Şelale, tarayıcının görüntüyü önceden bilmesine rağmen, gri çubukta belirtildiği gibi indirmeye başlamadığını gösteriyor.
Nasıl Onarılır: Bunu çözmek için öncelikli ipuçları adı verilen yeni bir tarayıcı özelliği kullanabilirsiniz. Bir img öğesine fetchpriority=”high” özniteliğini eklerseniz, tarayıcı görüntüyü en baştan yüklemeye başlar.
3. Öneri: CSS Kullanarak Sayfa İçeriğini Gizlemeyin
Bazen bir istek şelalesine bakabilirsiniz ve tüm oluşturmayı engelleyen kaynaklar yüklenmiştir, ancak yine de hiçbir sayfa içeriği görünmez. Neler oluyor?
A/B test araçları, sayfadaki içerik öğelerine test varyasyonları uygulanana kadar genellikle sayfa içeriğini gizler. Bu durumlarda, tarayıcı sayfayı oluşturmuştur ancak tüm içerik şeffaftır.
A/B test aracını kaldıramazsanız ne yapabilirsiniz?
Nasıl Düzeltilir: Aracı yalnızca A/B testlerinden etkilenen içeriği gizleyecek şekilde yapılandırıp yapılandıramadığınızı kontrol edin. Alternatif olarak, A/B test aracının daha hızlı yüklenmesini sağlamanın bir yolu olup olmadığını kontrol edebilirsiniz.
İçeriğin bir A/B test aracı tarafından gizlendiği görüntü oluşturma film şeridini gösteren DebugBear ekran görüntüsü, Ekim 2022 DebugBear ile Sitenizin Hızını İzleyin
Web sitenizi sürekli test etmek ister misiniz? 14 günlük ücretsiz deneme süresiyle ücretli izleme aracımızı deneyin.
Bu şekilde, performans optimizasyonlarınızın çalışıp çalışmadığını kontrol edebilir ve sitenizdeki herhangi bir performans gerilemesinden haberdar olabilirsiniz.
DebugBear, Ekim 2022'de bir web sitesi için site hızı eğilimlerini gösteren ekran görüntüsü 
DebugBear'da Önemli Web Verileri verilerini gösteren ekran görüntüsü, Ekim 2022