PageSpeed Insights, bir sayfanın mobil ağda bir saniyenin altında oluşturulmasına yönelik önerilerimizi 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 sınırlamanın içinde oluşturulması gerekmez. Bunun yerine, ekranın üst kısmındaki (ATF) içeriklerin bir saniyenin altında sunulup oluşturulmasını sağlamamız gerekir. Böylece, kullanıcının mümkün olan en kısa sürede sayfayla etkileşime geçmeye 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 ağa göre önemli ölçüde daha fazladır ve ATF içeriklerini oluşturmak için 1000 ms'lik sınırlamamızın büyük bir bölümünü tüketir:
- 3G ağlar için 200-300 ms'lik döngü süresi
- 4G ağlar için 50-100 ms'lik döngü süresi
3G, dünyadaki en yaygın ağ türüdür. 4G dağıtımları dünya genelinde yaygınlaşmaya devam ediyor olsa da, kullanıcıların büyük çoğunluğunun sayfanıza bir 3G ağ üzerinden erişeceklerini beklemelisiniz. Bu nedenle, her bir ağ isteğinin ortalama 200 milisaniye süre alacağını varsaymalıyız.
Bunları aklımızda tutarak geriye dönük bir çalışma yapalım. Tarayıcı ile sunucu arasındaki iletişimin tipik sırasına baktığımızda bu sürenin 600 ms'lik bölümü zaten ağın ek yükü nedeniyle harcanmış olur: İnternet sunucu adresini (ör. google.com) IP adresine dönüştürmek için DNS araması, TCP bağlantısını kurmak için ağın döngü süresi ve nihayet HTTP isteğini göndermek için tam ağ döngü süresi. Bu durumda bize sadece 400 ms kalır!
Bir saniyenin altında oluşturma deneyimi sunma
Ağ gecikmesini çıkardığımızda sınırlı süremizden geriye 400 milisaniyemiz kalır ve hâlâ sunucunun yanıtı oluşturması, istemci tarafı uygulama kodunun çalıştırılması ve tarayıcının yerleşim düzenini ayarlayıp içeriği oluşturması gibi yapılması gereken pek çok iş vardı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 geri döndürdüğü süreyi ifade eder. 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 (ekstra DNS araması gerekiyorsa) ağ döngüsü ilave edebilir. Bu durum, 3G ağlarda yüzlerce milisaniyelik fazladan 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.
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, 14 KB'nin altında olmalıdır. Böylece tarayıcı, sayfayı sadece bir döngüden sonra hazırlayabilir. 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.
- (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ı işlemi ve JavaScript'in çalıştırılması için süre ve istemci kaynakları gereklidir. 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 çalıştırılması binlerce milisaniye sürebilir. Kodunuzun profilini çıkarmak ve kodunuzu optimize etmek için tarayıcınızda 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
- 4G ağlar, yukarıdaki mobil ölçütleri nasıl etkileyebilir?
- Daha az döngü gecikmesi, 4G ağlarda yapılan önemli iyileştirmelerden biridir. Bu iyileştirme, şu anda 3G ağlardaki bir saniyelik sınırlı süremizin %50'sinden fazlasını oluşturan toplam ağ ek yük süresini azaltarak büyük ölçüde yardımcı olur. Ancak 3G, dünyadaki en yaygın ağ türüdür ve önümüzdeki yıllarda da bu özelliğini koruyacaktır. Sayfaları 3G kullanıcılarını düşünerek optimize etmeniz gerekir.
- JQuery gibi bir JavaScript kitaplığı kullanıyorum, öneriniz var mı?
- İlave etkileşim, animasyonlar ve diğer efektler eklemek üzere sayfayı geliş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 ile oluşturuluyorsa, fazladan ağ döngüsünü önlemek için ilgili JavaScript modüllerinin satır içine eklenmesini 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.
- SPDY ve HTTP 2.0 nasıl işime yarar?
- Hem SPDY hem de HTTP 2.0, alttaki TCP bağlantısının daha verimli bir şekilde kullanılmasını sağlayarak (multipleks kullanma, üst bilgiyi sıkıştırma, öncelik belirleme) sayfa yükleme gecikmesini azaltmayı hedefler. Ayrıca sunucu aktarma işlemi, fazladan ağ gecikmesini ortadan kaldırarak performansı daha da arttırabilir. Sunucularınıza SPDY desteğini eklemeyi araştırmanızı ve HTTP 2.0 standardı hazır olduğunda bu standarda geçmenizi öneriyoruz.
- 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'a bakı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?
- Kesinlikle. 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 sürümünün çalıştığından emin olun. İlk TCP sıkışma aralığı boyutundan (IW10) artırılmış olarak yararlanmak için Linux 2.6.39+ çekirdek sürümünü kullanmanız gerekir. Diğer işletim sistemleri için ilgili dokümanlara başvurun.
Sunucu yanıt süresini optimize etmek için kodunuzda çalışmalar yapın veya tıkanma noktanızı (ör. komut dizisi oluşturma süresi, veritabanı çağrıları, RPC talepleri, oluşturma vb.) belirlemek için uygulama izleme çözümü kullanın. Buradaki 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.
Öncelikle, mümkün olan yerlerde HTML öğelerindeki satır içi CSS özelliklerinden (ör.
< p style=...>) kaçınılmalıdır; çünkü bunlar, genellikle kodun gereksiz yere yinelenmesine neden olur ve varsayılan olarak CSP ile 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 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 stil karmalarını veya nonce'ları kullanması ya da tüm satır içi stil engellemelerini etkinleştirmek üzere “güvenli olmayan satır içi” öğesini kullanması için CSP politikasını güncellemeniz gerekir.
Başka sorularınız mı var? Lütfen pagespeed-insights-discuss tartışma grubumuza soru sormaktan ve geri bildirim sağlamaktan çekinmeyin.