Hızlı yüklenen bir web sitesi oluşturmanın ilk adımı, bir sayfanın HTML'si için sunucudan zamanında yanıt almaktır. Tarayıcının adres çubuğuna bir URL girdiğinizde tarayıcı, URL'yi almak için sunucuya bir GET isteği gönderir. Bir web sayfası için yapılan ilk istek bir HTML kaynağına yöneliktir. HTML'nin en az gecikmeyle hızlı bir şekilde ulaşmasını sağlamak, temel performans hedeflerinden biridir.
HTML için yapılan ilk istek birkaç adımdan geçer ve her adım biraz zaman alır. Her adımda harcanan süreyi azaltmak, Time to First Byte (TTFB) süresini kısaltır. TTFB, sayfaların ne kadar hızlı yüklendiği konusunda odaklanmanız gereken tek metrik olmasa da yüksek bir TTFB, Largest Contentful Paint (LCP) ve First Contentful Paint (FCP) gibi metrikler için belirlenen "iyi" eşiklere ulaşmayı zorlaştırır.
Yönlendirmeleri en aza indirin
Bir kaynak istendiğinde sunucu, kalıcı yönlendirme (301 Moved Permanently yanıtı) veya geçici yönlendirme (302 Found yanıtı) ile yanıt verebilir.
Yönlendirmeler, tarayıcının kaynağı almak için yeni konumda ek bir HTTP isteği yapmasını gerektirdiğinden sayfa yükleme hızını yavaşlatır. İki tür yönlendirme vardır:
- Tamamen kaynağınız içinde gerçekleşen aynı kaynaklı yönlendirmeler. Bu tür yönlendirmelerin yönetimi tamamen sizin kontrolünüzdedir. Çünkü bu yönlendirmeleri yönetme mantığı tamamen web sunucunuzda yer alır.
- Başka bir kaynak tarafından başlatılan kaynaklar arası yönlendirmeler. Bu tür yönlendirmeler genellikle sizin kontrolünüz dışındadır.
Kaynaklar arası yönlendirmeler genellikle reklamlar, URL kısaltma hizmetleri ve diğer üçüncü taraf hizmetleri tarafından kullanılır. Kaynaklar arası yönlendirmeler sizin kontrolünüzde olmasa da birden fazla yönlendirmeden kaçındığınızı kontrol etmek isteyebilirsiniz. Örneğin, HTTP sayfasına bağlantı veren ve ardından HTTPS eşdeğerine yönlendiren bir reklam veya kaynağınıza ulaşan ancak aynı kaynak yönlendirmesini tetikleyen bir kaynaklar arası yönlendirme.
HTML yanıtlarını önbelleğe alma
Yanıtta CSS, JavaScript, resimler ve diğer kaynak türleri gibi diğer önemli kaynaklara bağlantılar bulunabileceğinden HTML yanıtlarını önbelleğe almak zordur. Bu kaynaklar, dosya adlarında benzersiz bir parmak izi içerebilir. Bu parmak izi, dosyanın içeriğine göre değişir. Bu durumda, önbelleğe alınmış HTML belgeniz, dağıtımın ardından eski alt kaynaklara referanslar içereceğinden eski hale gelebilir.
Bununla birlikte, önbelleğe alma işleminin yapılmaması yerine kısa bir önbellek ömrü, bir kaynağın CDN'de önbelleğe alınmasına izin verme (kaynak sunucudan sunulan istek sayısını azaltma) ve tarayıcıda kaynakların yeniden indirilmek yerine yeniden doğrulanmasına izin verme gibi avantajlar sağlayabilir. Bu yaklaşım, herhangi bir bağlamda değişmeyen statik içerikler için en iyi sonucu verir. Kaynakları önbelleğe almak için uygun bir süre, uygun gördüğünüz birkaç dakika olarak ayarlanabilir. Statik HTML kaynakları için beş dakika güvenli bir seçimdir ve periyodik güncellemelerin gözden kaçırılmamasını sağlar.
Bir sayfanın HTML içerikleri, örneğin kimliği doğrulanmış bir kullanıcı için kişiselleştirilmişse güvenlik ve güncellik gibi çeşitli nedenlerle içeriği hiç önbelleğe almak istemeyebilirsiniz. HTML yanıtı kullanıcının tarayıcısı tarafından önbelleğe alınırsa önbelleği geçersiz kılamazsınız. Bu nedenle, bu gibi durumlarda HTML'nin tamamen önbelleğe alınmasından kaçınmak en iyisidir.
HTML'yi önbelleğe alma konusunda dikkatli bir yaklaşım olarak ETag veya Last-Modified yanıt başlıkları kullanılabilir. Bir ETag (diğer adıyla varlık etiketi) başlığı, istenen kaynağı benzersiz şekilde temsil eden bir tanımlayıcıdır. Bu tanımlayıcı genellikle kaynak içeriğinin karma değerini kullanarak oluşturulur:
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Kaynak her değiştiğinde yeni bir ETag değeri oluşturulmalıdır. Sonraki isteklerde tarayıcı, ETag değerini If-None-Match istek başlığı üzerinden gönderir. Sunucudaki ETag, tarayıcı tarafından gönderilenle eşleşirse sunucu ETag yanıtıyla karşılık verir ve tarayıcı, kaynağı önbellekten kullanır.304 Not Modified Bu durumda yine ağ gecikmesi yaşansa da 304 Not Modified yanıtı, HTML kaynağının tamamından çok daha küçüktür.
Ancak, bir kaynağın yeniliğini yeniden doğrulama işleminde ağ gecikmesi yine de bir dezavantajdır. Web geliştirmenin diğer birçok yönünde olduğu gibi, burada da ödünler ve tavizler kaçınılmazdır. HTML'yi bu şekilde önbelleğe almanın ek çabaya değip değmeyeceğini veya güvenli tarafta kalıp HTML içeriğini hiç önbelleğe almamayı tercih edip etmeyeceğinizi belirlemek size kalmıştır.
Sunucu yanıt sürelerini ölçme
Bir yanıt önbelleğe alınmamışsa sunucunun yanıt süresi, barındırma sağlayıcınıza ve arka uç uygulama yığınına büyük ölçüde bağlıdır. Veritabanından veri getirme gibi dinamik olarak oluşturulmuş bir yanıt sunan web sayfasının TTFB'si, arka uçta önemli bir hesaplama süresi olmadan anında sunulabilen statik bir web sayfasının TTFB'sinden daha yüksek olabilir. Yükleme animasyonu gösterip ardından tüm verileri istemci tarafında getirmek, çabayı daha öngörülebilir bir sunucu tarafı ortamından potansiyel olarak öngörülemeyen bir istemci tarafı ortamına taşır. İstemci tarafındaki çabayı en aza indirmek genellikle kullanıcı odaklı metriklerin iyileşmesini sağlar.
Kullanıcılar sahada yavaş TTFB ile karşılaşıyorsa Server-Timing yanıt başlığını kullanarak sunucuda zamanın nerede harcandığıyla ilgili bilgileri gösterebilirsiniz:
Server-Timing: auth;dur=55.5, db;dur=220
Bir Server-Timing başlığının değeri birden fazla metrik ve her birinin süresini içerebilir. Bu veriler daha sonra Navigation Timing API kullanılarak sahada kullanıcılardan toplanabilir ve kullanıcıların gecikme yaşayıp yaşamadığını görmek için analiz edilebilir. Yukarıdaki kod snippet'inde yanıt başlığı iki zamanlama içerir:
- Kullanıcının kimliğini doğrulama süresi (
auth) 55,5 milisaniye sürdü. - 220 milisaniye süren veritabanı erişim süresi (
db).
Ayrıca, barındırma altyapınızı inceleyip web sitenizin aldığı trafiği işlemek için yeterli kaynağa sahip olduğunuzu onaylamak da isteyebilirsiniz. Paylaşımlı hosting sağlayıcılar genellikle yüksek TTFB'ye karşı hassastır ve daha hızlı yanıt süreleri sağlayan özel çözümler daha maliyetli olabilir.
Sıkıştırma
HTML, JavaScript, CSS ve SVG resimleri gibi metin tabanlı yanıtlar, daha hızlı indirilmesi için ağ üzerinden aktarım boyutunu küçültmek üzere sıkıştırılmalıdır. En yaygın kullanılan sıkıştırma algoritmaları gzip ve Brotli'dir. Brotli, gzip'e kıyasla yaklaşık %15-20 daha iyi sonuç verir.
Sıkıştırma genellikle çoğu web barındırma sağlayıcısı tarafından otomatik olarak ayarlanır. Ancak sıkıştırma ayarlarını kendiniz yapılandırabiliyorsanız veya ince ayar yapabiliyorsanız dikkate almanız gereken bazı önemli noktalar vardır:
- Mümkün olduğunda Brotli'yi kullanın. Daha önce de belirtildiği gibi Brotli, gzip'e kıyasla oldukça belirgin bir iyileşme sağlar ve Brotli, tüm büyük tarayıcılarda desteklenir. Mümkün olduğunda Brotli'yi kullanın. Ancak web siteniz eski tarayıcılarda çok sayıda kullanıcı tarafından kullanılıyorsa herhangi bir sıkıştırma hiç sıkıştırma olmamasından daha iyi olduğundan, geri dönüş olarak gzip'in kullanıldığından emin olun.
- Dosya boyutu önemlidir. Çok küçük kaynaklar (1 KiB'den az) iyi sıkıştırılmaz veya bazen hiç sıkıştırılmaz. Herhangi bir veri sıkıştırma türünün etkinliği, sıkıştırma algoritmasının daha fazla sıkıştırılabilir veri bitleri bulmak için kullanabileceği büyük miktarda veriye sahip olmaya bağlıdır. Dosya boyutu ne kadar büyük olursa sıkıştırma o kadar iyi çalışır. Ancak daha etkili bir şekilde sıkıştırılabiliyor diye çok büyük kaynaklar göndermeyin. Örneğin JavaScript ve CSS gibi büyük kaynakların tarayıcı tarafından sıkıştırılması sonrasında ayrıştırılması ve değerlendirilmesi çok daha uzun sürer. Ayrıca, yalnızca küçük değişiklikler yapılmış olsa bile daha sık değişebilirler. Bunun nedeni, her değişikliğin farklı bir dosya karması ile sonuçlanmasıdır.
- Dinamik ve statik sıkıştırma arasındaki farkı anlayın. Dinamik ve statik sıkıştırma, bir kaynağın ne zaman sıkıştırılması gerektiği konusunda farklı yaklaşımlardır. Dinamik sıkıştırma, bir kaynağı istendiği sırada ve bazen de her istendiğinde sıkıştırır. Öte yandan, statik sıkıştırma dosyaları önceden sıkıştırır ve istek sırasında sıkıştırma yapılmasını gerektirmez. Statik sıkıştırma, sıkıştırmanın kendisinde oluşan gecikmeyi ortadan kaldırır. Bu gecikme, dinamik sıkıştırma durumunda sunucu yanıt sürelerini uzatabilir. JavaScript, CSS ve SVG resimleri gibi statik kaynaklar statik olarak sıkıştırılmalıdır. HTML kaynakları ise özellikle kimliği doğrulanmış kullanıcılar için dinamik olarak oluşturuluyorsa dinamik olarak sıkıştırılmalıdır.
Sıkıştırmayı kendi başınıza doğru şekilde yapmak zordur. Bu nedenle, genellikle bir İçerik Yayınlama Ağı'nın (CDN) (bir sonraki bölümde ele alınmıştır) bu işlemi sizin için yapmasına izin vermek en iyisidir. Ancak bu kavramları bilmek, barındırma sağlayıcınızın sıkıştırmayı doğru şekilde kullanıp kullanmadığını anlamanıza yardımcı olabilir. Bu bilgiler, sıkıştırma ayarlarınızı iyileştirme fırsatları bulmanıza yardımcı olabilir. Böylece, web siteniz için maksimum fayda sağlayabilirsiniz.
İçerik Yayınlama Ağları (CDN'ler)
İçerik yayınlama ağı (CDN), kaynak sunucunuzdaki kaynakları önbelleğe alan ve bunları kullanıcılarınıza fiziksel olarak daha yakın olan uç sunuculardan sunan, dağıtılmış bir sunucu ağıdır. Kullanıcılarınıza fiziksel olarak yakın olmak gidiş dönüş süresini (RTT) azaltır. HTTP/2 veya HTTP/3, önbelleğe alma ve sıkıştırma gibi optimizasyonlar ise CDN'nin içeriği, kaynak sunucunuzdan alınmasına kıyasla daha hızlı sunmasını sağlar. CDN kullanmak, bazı durumlarda web sitenizin TTFB'sini önemli ölçüde iyileştirebilir.
Bilginizi test etme
Hangi tür yönlendirme tamamen sizin kontrolünüzdedir?
Server-Timing üstbilgisi birden fazla metrik içerebilir.
Hangi tür sunucunun son kullanıcılarınıza fiziksel olarak en yakın olması muhtemeldir?
Sıradaki video: Kritik yolu anlama
Web sitenizin HTML'siyle ilgili performans hususlarından bazılarını öğrendiğinize göre, sitenizin mümkün olduğunca hızlı yüklenmesini sağlamak için daha iyi bir konumdasınız. Ancak bu, web performansı öğrenme sürecinin yalnızca başlangıcıdır. Ardından, kritik oluşturma yolu ile ilgili teori ele alınır. Bu modülde, oluşturmayı engelleyen ve ayrıştırmayı engelleyen kaynaklar gibi temel kavramlar ile bu kaynakların, bir sayfanın tarayıcıda mümkün olduğunca hızlı bir şekilde ilk oluşturulmasında oynadığı rol açıklanmaktadır.