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çe dahilinde oluşturulması gerekmez. Bunun yerine, ekranın üst kısmındaki (ATF) içeriği bir saniyeden daha kısa sürede sunmamız ve oluşturmamız gerekir. Böylece, kullanıcının mümkün olan en kısa sürede sayfayla etkileşimde bulunmaya başlanması sağlanır. 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ıya göre önemli ölçüde daha yüksektir ve ATF içeriğini oluşturmak için 1000 ms'lik bütçemizin önemli bir kısmını tüketir.

4G, dünyadaki en yaygın ağ türüdür. Kullanıcıların çoğunun sayfanıza 4G ağı üzerinden erişmesini 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 iletişimin tipik bir dizisine baktığımızda bu sürenin 300 ms'lik kısmı zaten ağ ek yükü tarafından harcanmıştır: Ana makine adını IP adresine çözümlemek için bir DNS araması (ör. google.com), TCP el sıkışmasını gerçekleştirmek için ağ döngüsü ve isteğe bağlı bir TLS bağlantısı. Bu işlem bize 700 ms.

Bir saniyenin altında oluşturma deneyimi sunma

Ağ gecikmesini çıkardıktan sonra bütçemizde yalnızca 700 milisaniye kalır ve hâlâ yapılacak çok iş var: Sunucunun yanıtı oluşturması, istemci taraflı uygulama kodunun çalışması ve tarayıcının içeriği düzenleyip oluşturması gerekir. 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 hesaba katılmadan sunucunun ilk HTML'yi döndürmesi için gereken 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ğ döngüsü (ekstra DNS araması gerekiyorsa iki) ekleyerek 4G ağlarda yüzlerce milisaniye ek gecikmeye yol açabilir. 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 yapılan yakın tarihli bir güncelleme olduğu da unutulmamalıdır. 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ğinin 98 KB'nin altında olması gerekir. Bu, tarayıcının yalnızca üç döngüden sonra sayfayı boyamasına ve sunucu yanıt gecikmesi ve istemci oluşturma için bolca bir zaman bütçesine sahip olmasına olanak tanır.

(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 ile CSS'nin ayrıştırılması ve JavaScript'in çalıştırılması için zaman ve istemci kaynakları gerekir. 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 verimsiz kodların yürütülmesi onlarca, yüzlerce milisaniye sürebilir. Kodunuzun profilini çıkarmak ve optimize etmek için tarayıcıda yerleşik geliştirici araçlarını kullanın. Harika bir başlangıç 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ı?
İlave etkileşim, animasyonlar ve başka efektler eklemek amacıyla sayfayı geliştirmek için JQuery gibi birç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 taraflı JavaScript ile oluşturuluyorsa, fazladan ağ döngüsünü önlemek için ilgili JavaScript modüllerini satır içine alma konusunu araştırmalısınız. 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çın, Web Sayfası Performansı raporunu çalıştırın ve oluşturulan raporda Kullanılmayan CSS kurallarını kaldır'ı bulun. 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?
Tabii ki. 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, sunucunuzda işletim sisteminin güncel bir sürümünün çalıştırıldığından emin olun. Başlangıçtaki TCP sıkışıklık aralığı boyutundan (IW10) artış elde etmek için Linux 2.6.39 veya sonraki bir çekirdek sürümünü kullanmanı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ı (ör.komut dosyası çalıştırma süresi, veritabanı çağrıları, RPC istekleri, oluşturma vb.) belirlemek için uygulama izleme çözümü kullanmak. Burada amaç, HTML yanıtını 200 milisaniye içinde oluşturmaktır.
İçerik Güvenlik Politikası ne olacak?
CSP kullanıyorsanız varsayılan politikanızı güncellemeniz gerekebilir.
İlk olarak, HTML öğelerinde(ör. < p style=...>) genellikle gereksiz kod yinelenmesine neden olur. Bu nedenle varsayılan olarak CSP ile engellenirler ("style-src" üzerindeki "güvenli olmayan satır içi" nedeniyle 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 komut dosyası karmalarını veya nonce'ları kullanması ya da tüm satır içi komut dosyalarını çalıştırmak üzere “güvenli olmayan satır içi” öğesini kullanması için CSP politikasını güncellemeniz gerekir. Satır içi stilleriniz varsa tüm satır içi stil engellemelerinin işlenmesini etkinleştirmek için CSP politikasını stil karmaları veya nonce'lar kullanacak şekilde güncellemeniz ya da "güvenli olmayan satır içi" değerini kullanmanız gerekir.

Başka sorularınız mı var? Lütfen pagespeed-insights-discuss tartışma grubumuza soru sormaktan ve geri bildirim sağlamaktan çekinmeyin.

Geri bildirim

Bu sayfayı yararlı buldunuz mu?