PageSpeed Insights'ta Mobil Analiz

PageSpeed Insights, bir sayfanın mobil ağda bir saniyenin altında oluşturulmasına yönelik önerilerimizin uygulayıp uygulamadığını anlamak üzere ilgili sayfayı analiz eder. Yapılan araştırmalar, bir saniyeden daha uzun süren gecikmelerin, kullanıcının düşünce akışını bozarak kötü bir deneyim yaşamasına neden olduğunu göstermiştir. Amacımız, kullanıcıları cihaza veya ağ türüne bağlı olmaksızın sayfayla etkileşim içinde tutmak ve optimum deneyim sunmaktır.

Bir saniyelik süre sınırlamasına uymak kolay değildir. Neyse ki, bizim için sayfanın tamamının bu bütçeyle oluşturulması gerekmez. Bunun yerine, ekranın üst kısmındaki (ATF) içeriği bir saniyeden daha kısa sürede oluşturup oluşturmamız gerekir. Böylece, kullanıcı mümkün olan en kısa sürede sayfayla etkileşime geçmeye başlayabilir. Bundan sonra, kullanıcı içeriğin ilk sayfasını incelerken sayfanın geri kalanı arka planda sunulmaya devam eder.

Yüksek gecikmeli mobil ağlara uyarlama

Bir saniyelik ATF ölçütünün mobil cihazlarda uygulanması, diğer ağlarda olmayan kendine özgü zorluklar doğurur. Kullanıcılar, sitenize 2G, 3G ve 4G gibi çeşitli ağlardan erişiyor olabilirler. Ağ gecikmeleri, kablolu bir bağlantıdan önemli ölçüde daha yüksektir ve ATF içeriğini oluşturmak için 1.000 ms'lik bütçenizin önemli bir bölümünü kullanır.

4G, dünya genelinde en yaygın ağ türüdür. Kullanıcıların çoğunun, sayfanıza 4G ağı üzerinden erişecek olmasını beklemelisiniz. Bu nedenle, her bir ağ isteğinin ortalama 100 milisaniye süreceğini varsaymalıyız.

Bunları aklımızda tutarak geriye dönük bir çalışma yapalım. Bir tarayıcı ile sunucu arasındaki normal iletişim sırasına baktığımızda, bu sürenin 300 ms'si ağdaki ek yük tarafından zaten kullanılır: Ana makine adını (ör. google.com) bir IP adresi olarak çözüme ulaştırmak için bir DNS araması, TCP el sıkışmasını gerçekleştirmek için ağ bağlantısı ve isteğe bağlı TLS bağlantısı. Bu durumda 700 ms kalır.

Bir saniyenin altında oluşturma deneyimi sunma

Ağ gecikmesini çıkardıktan sonra, bütçemizde sadece 700 milisaniye kalır. Yine de yapmamız gereken çok iş vardır: sunucu yanıtı oluşturmalı, istemci taraflı uygulama kodu çalıştırmalı ve tarayıcı içeriği yapılandırıp oluşturmalıdır. Bütün bunları göz önüne aldığımızda, aşağıdaki ölçütler sınırlı süremiz içinde kalmamıza yardımcı olacaktır:

(1) Sunucu, yanıtı oluşturmalıdır (< 200 ms)
Sunucu yanıt süresi, ağ taşıma süresi dikkate alınarak sunucunun ilk HTML'yi döndürmesi için geçen süredir. Süremiz çok kısıtlı olduğu için bu sürenin ideal olarak 200 milisaniye ve tercihen daha az olmak üzere minimum seviyede tutulması gerekir.
(2) Yeniden yönlendirme sayısı en aza indirilmelidir
Ek HTTP yönlendirmeleri, fazladan bir veya iki ağ gidiş dönüş ekleyebilir (ek bir DNS araması gerekiyorsa iki kez). Dolayısıyla 4G ağlarda yüzlerce milisaniyelik ekstra gecikme yaşanabilir. Bu nedenle, web yöneticilerine, yönlendirme sayısını en aza indirmelerini ve ideal olarak da yönlendirmeleri tamamen ortadan kaldırmalarını kesinlikle öneriyoruz. Bu, özellikle HTML dokümanı için önemlidir (mümkünse “m nokta” yönlendirmelerinden kaçının).
(3) İlk oluşturma için gerçekleşen döngülerin sayısı en aza indirilmelidir

TCP'nin, bir bağlantının kapasitesini tahmin etme yöntemi (ör. TCP Yavaş Başlangıç) nedeniyle yeni TCP bağlantısı istemci ile sunucu arasında kullanılabilecek tüm bant genişliğini hemen kullanamaz. Bu nedenle sunucu, yeni bir bağlantıdaki ilk döngüde en fazla 10 TCP paketi (yaklaşık 14 KB) gönderebilir. Daha sonra sunucu, sıkışma aralığını büyütüp daha fazla veri yayınlamaya başlamadan önce istemcinin bu verileri onaylamasını beklemelidir.

Ayrıca, 10 paket (IW10) sınırının TCP standardında yakın zamanda yapılan bir güncelleme olduğunu da unutmamanız gerekir: Bu değişiklikten yararlanmak için sunucunuzun en son sürüme yükseltildiğinden emin olmanız gerekir. Aksi takdirde bu sınır, muhtemelen 3-4 paket olacaktır.

TCP'nin bu davranışı nedeniyle, sayfanın ilk oluşturulması için gerekli verileri sağlamak üzere gereken döngü sayısını en aza indirecek şekilde içeriğinizi optimize etmek önemlidir. İdeal olarak, ATF içeriği 98 KB'ın altında olmalıdır. Böylece tarayıcı, sunucudan sonraki 3 döngüden sonra sunucu yanıt gecikmesi ve istemci oluşturma için yeterli zamana sahip olur.

(4) Sayfanın üst kısmındaki içeriklerde harici JavaScript ve CSS engellemelerinden kaçınılmalıdır

Bir tarayıcının bir sayfayı kullanıcıya görüntülemek amacıyla oluşturabilmesi için öncelikle sayfayı ayrıştırması gerekir. Tarayıcı, ayrıştırma sırasında zaman uyumsuz olmayan veya engelleyici bir harici komut dosyası ile karşılaşırsa işlemi durdurup ilgili kaynağı indirmek zorunda kalır. Bunu her yaptığında bir ağ döngüsü ekler ve bu da sayfanın ilk oluşturulma zamanını geciktirir.

Sonuç olarak, sayfanın üst kısmının oluşturulması için gerekli olan JavaScript ve CSS satır içi olmalıdır. Sayfaya ek işlev eklemek için gerekli olan JavaScript veya CSS de ATF içerikleri sunulduktan sonra yüklenmelidir.

(5) Tarayıcının yerleşim düzenini hazırlaması ve sayfayı oluşturması için süre ayırın (200 ms)
HTML, CSS'yi ayrıştırma ve JavaScript'i çalıştırma işlemleri zaman alır ve istemci kaynakları kullanılır. Bu işlem, mobil cihazın hızına ve ilgili sayfanın karmaşıklığına bağlı olarak yüzlerce milisaniye sürebilir. Bu noktada tarayıcı ek yükü için 200 milisaniye ayrılmasını tavsiye ediyoruz.
(6) JavaScript çalıştırma ve oluşturma süresini optimize edin
Karmaşık komut dosyalarının ve etkili olmayan kodların çalıştırılması onlarca ve yüz milisaniye sürebilir. Kodunuzu profilleyip optimize etmek için tarayıcıda yerleşik geliştirici araçlarını kullanın. Harika bir giriş için Chrome Geliştirici Araçları etkileşimli kursumuza göz atın.

SSS

JQuery gibi bir JavaScript kitaplığı kullanıyorum, öneriniz var mı?
Daha fazla etkileşim, animasyon ve başka efektler eklemek üzere sayfayı iyileştirmek için JQuery gibi pek çok JavaScript kitaplığı kullanılır. Ancak bu davranışların pek çoğu ATF içeriği oluşturulduktan sonra güvenli bir şekilde eklenebilir. Bu tür JavaScript'lerin yürütme ve yüklenmesini sayfa yüklendikten sonrasına taşıma konusunu araştırın.
Web sitesi kurmak için JavaScript yapısı kullanıyorum, öneriniz var mı?
Sayfanın içeriği istemci tarafı JavaScript tarafından oluşturuluyorsa ilgili ağın ek gidiş bilgilerini önlemek için ilgili JavaScript modüllerini satır içine almanız gerekir. Benzer şekilde, sunucu tarafı oluşturma işleminden yararlanmak, ilk sayfa yükleme performansını önemli ölçüde iyileştirebilir: JS şablonlarını sunucuda oluşturun, sonuçları HTML'ye satır içi olarak ekleyin ve uygulama yüklendikten sonra istemci tarafı şablon oluşturmayı kullanın.
Sayfamdaki kritik CSS'yi nasıl belirleyebilirim?
Chrome Geliştirici Araçları'nda Denetimler panelini açıp Web Sayfası Performans raporunu çalıştırın. Oluşturulan raporda Kullanılmayan CSS kurallarını kaldırın. Alternatif olarak, her bir sayfada hangi CSS seçicilerinin uygulandığını belirlemek için başka üçüncü taraf aracını veya komut dosyasını da kullanabilirsiniz.
Bu en iyi uygulamalar otomatik hale getirilebilir mi?
Elbette. Yukarıdaki ölçütlerin bazılarını veya tümünü karşılamanıza yardımcı olabilecek pek çok ticari ve açık kaynaklı web performans optimizasyonu (WPO) ürünü vardır. Açık kaynaklı çözümler için PageSpeed optimizasyon araçlarına göz atın.
Sunucumu bu kriterleri karşılayacak şekilde nasıl ayarlayabilirim?
Öncelikle sunucunuzun, işletim sisteminin güncel bir sürümünü çalıştırdığından emin olun. Artan ilk TCP tıkanıklık aralığı boyutundan (IW10) yararlanmak için Linux 2.6.39+ sürümüne sahip olmanız gerekir. Diğer işletim sistemleri için dokümanlara bakın.
Sunucu yanıt süresini optimize etmek, kodunuzu kullanmak veya sorunlarınızı belirlemek için bir uygulama izleme çözümü (ör. komut dosyası çalıştırma zamanı, veritabanı çağrıları, UPÇ istekleri, oluşturma) oluşturmak. HTML yanıtını 200 milisaniye içinde oluşturmak amaçlanır.
İçerik Güvenlik Politikası ne olacak?
CSP kullanıyorsanız varsayılan politikanızı güncellemeniz gerekebilir.
Öncelikle HTML öğelerinde satır içi CSS özellikleri(ör. < p style=...>) mümkün olduğunca kaçınılmalıdır; çünkü genellikle kod gereksiz yere çoğaltılır ve CSP ile varsayılan olarak engellenirler ("style-src" üzerinde "güvenli olmayan satır içi" olarak devre dışı bırakılır). CSP etkinleştirilirse tüm satır içi komut dosyası etiketleri varsayılan olarak engellenir. Satır içi JavaScript'iniz varsa CSP politikasını komut dosyası karmalarını veya nonce'ları kullanacak şekilde güncellemeniz ya da tüm satır içi komut dosyalarını çalıştırmak üzere "güvenli olmayan satır içi"'ni kullanmanız gerekir. Satır içi stilleriniz varsa tüm satır içi stil engellemelerinin işlenmesi için CSP politikasını stil karmaları veya nonce ya da "unsafe-inline" kullanacak şekilde güncellemeniz gerekir.

Başka sorularınız mı var? Lütfen pagespeed-insights-Tartışma adresindeki tartışma grubumuza soru sormaktan ve geri bildirimde bulunmaktan çekinmeyin.

Geri bildirim

Bu sayfayı yararlı buldunuz mu?