Hızlı yüklenen bir web sitesi oluşturmanın ilk adımı, sunucudan bir sayfanın HTML'si için zamanında yanıt almaktır. Tarayıcının adres çubuğuna bir URL girdiğinizde, tarayıcı URL'yi alması için sunucuya bir GET isteği gönderir. Bir web sayfası için yapılan ilk istek bir HTML kaynağı içindir ve HTML'nin en az gecikmeyle hızlı bir şekilde ulaşmasını sağlamak önemli bir performans hedefidir.
Bu ilk HTML isteği, her biri biraz zaman alan birkaç adımdan oluşur. Her adımda harcanan süreyi azaltarak İlk Bayt'a Geçiş Süresi (TTFB) süresini kısaltabilirsiniz. Sayfaların yüklenme hızı konusunda odaklanmanız gereken tek metrik TTFB 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.
Yeniden yönlendirmeleri en aza indir
Bir kaynak istendiğinde, sunucu kalıcı yönlendirme (301 Moved Permanently yanıtı) veya geçici (302 Found yanıtı) olmak üzere yönlendirmeyle yanıt verebilir.
Yönlendirmeler, tarayıcının kaynağı almak için yeni konumda ek bir HTTP isteğinde bulunmasını gerektirdiğinden sayfa yükleme hızını yavaşlatır. İki tür yönlendirme vardır:
- Tamamen kaynağınızda gerçekleşen aynı kaynak yönlendirmeleri. Bu yönlendirme türlerini yönetme mantığı tamamen web sunucunuzdan oluştuğundan, bu tür yönlendirmeler tamamen sizin kontrolünüzdedir.
- Başka bir kaynak tarafından başlatılan kaynaklar arası yönlendirmeler. Bu tür yönlendirmeler genellikle sizin kontrolünüzde değildir.
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üzün dışında olsa da, birden fazla yönlendirmeden kaçındığınızdan emin olmak isteyebilirsiniz. Örneğin, HTTP sayfasına bağlantı veren bir reklamın, içeriği kendi HTTPS eşdeğerine yönlendiren bir reklamın bulunması veya kaynağınıza gelen ancak daha sonra aynı kaynak yönlendirmesini tetikleyen bir çapraz kaynak yönlendirmesi.
HTML yanıtlarını önbelleğe al
Yanıtta CSS, JavaScript, resimler ve diğer kaynak türleri gibi diğer kritik kaynaklara bağlantılar bulunabileceğinden HTML yanıtlarının önbelleğe alınması zordur. Bu kaynakların ilgili dosya adlarında, dosyanın içeriğine göre değişen benzersiz bir parmak izi bulunabilir. Bu, önbelleğe alınan HTML dokümanınızın, eski alt kaynaklara referanslar içereceğinden bir dağıtım sonrasında eskiyebileceği anlamına gelir.
Bununla birlikte, önbelleğe alma işlemi yerine kısa bir önbellek ömrü, bir kaynağın CDN'de önbelleğe alınması, kaynak sunucudan ve tarayıcıdan sunulan istek sayısının azaltılması gibi avantajlara sahip olabilir. Böylece, kaynakların tekrar indirilmek yerine yeniden doğrulanmasını sağlayabilir. Bu yaklaşım, hiçbir bağlamda değişmeyen statik içeriklerde en iyi sonucu verir ve kaynakları önbelleğe almak için uygun bir süre uygun gördüğünüz birkaç dakikaya ayarlanabilir. Statik HTML kaynakları için beş dakika kullanmak güvenli bir risktir ve düzenli güncellemelerin gözden kaçmamasını sağlar.
Bir sayfanın HTML içeriği bir şekilde kişiselleştirilirse (örneğin, kimliği doğrulanmış bir kullanıcı için), muhtemelen güvenlik ve yenilik de dahil olmak üzere çeşitli endişelerle içeriği önbelleğe almak istemezsiniz. Bir 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'yi tümüyle önbelleğe almaktan kaçınmak en iyisidir.
HTML'yi önbelleğe alma konusunda dikkatli bir yaklaşım, ETag veya Last-Modified yanıt başlıklarını kullanmak olabilir. ETag (varlık etiketi olarak da bilinir) üst bilgisi, genellikle kaynağın içeriğinin karmasını kullanarak istenen kaynağı benzersiz bir şekilde temsil eden bir tanımlayıcıdır:
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 bir 304 Not Modified yanıtıyla yanıt verir ve tarayıcı önbellekteki kaynağı kullanır. Bu durum yine de ağ gecikmesine neden olsa da 304 Not Modified yanıtı, bir HTML kaynağının tamamından çok daha küçüktür.
Bununla birlikte, bir kaynağın güncelliğinin yeniden doğrulanmasında kullanılan ağ gecikmesi, yine de kendi başına bir dezavantajdır. Web geliştirmenin diğer birçok alanında olduğu gibi, ödünler ve uzlaşmalar kaçınılmazdır. HTML'yi bu şekilde önbelleğe almak için harcayacağınız ek çabaya değip değmeyeceğini, yoksa tedbiri elden bırakmamak ve HTML içeriğini hiç önbelleğe almakla uğraşmamanın en iyi yolu olup olmadığını anlamak sizin sorumluluğunuzdadır.
Sunucu yanıt sürelerini ölçün
Bir yanıt önbelleğe alınmazsa sunucunun yanıt süresi, büyük ölçüde barındırma sağlayıcınıza ve arka uç uygulama yığınınıza bağlıdır. Dinamik olarak oluşturulmuş bir yanıt sunan (örneğin, bir veritabanından veri getirmek) bir web sayfasının, arka uçta önemli işlem süresi olmadan anında sunulabilen statik bir web sayfasından daha yüksek bir TTFB'ye sahip olabilir. Yükleme çarkı görüntülemek ve ardından istemci tarafında tüm verileri getirmek, harcanan çabayı daha tahmin edilebilir bir sunucu tarafı ortamdan potansiyel olarak öngörülemez bir istemci tarafı ortamına taşır. İstemci taraflı işlemlerin en aza indirilmesi genellikle kullanıcı merkezli metriklerin iyileştirilmesini sağlar.
Kullanıcılar alanda yavaş bir TTFB yaşıyorsa Server-Timing yanıt başlığını kullanarak sunucuda nerede geçirilen süre hakkında bilgi edinebilirsiniz:
Server-Timing: auth;dur=55.5, db;dur=220
Server-Timing üstbilgisinin değeri, birden çok metriği ve her biri için bir süre içerebilir. Bu veriler, daha sonra Navigation Timing API kullanılarak sahadaki kullanıcılardan toplanabilir ve kullanıcıların gecikme yaşayıp yaşamadığını görmek için analiz edilebilir. Önceki kod snippet'inde, yanıt üstbilgisi iki zamanlama içerir:
- Kullanıcının kimliğini doğrulama süresi (
auth). Bu süre 55,5 milisaniyedir. - Veritabanı erişim süresi (
db) 220 milisaniye sürdü.
Ayrıca barındırma altyapınızı incelemek ve web sitenizin aldığı trafiği yönetmek için yeterli kaynaklara sahip olduğunuzu doğrulamak da isteyebilirsiniz. Paylaşılan barındırma sağlayıcıları genellikle yüksek TTFB'ye karşı savunmasızdır ve daha kısa 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ı indirilebilmeleri için ağ üzerindeki aktarım boyutlarını küçültmek üzere sıkıştırılmalıdır. En yaygın kullanılan sıkıştırma algoritmaları gzip veBrotli'dir. Brotli, gzip'e göre yaklaşık% 15 ila% 20 oranında bir iyileşme sağlar.
Sıkıştırma, ç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ıracak veya değiştirecek konumdaysanız dikkat etmeniz gereken bazı önemli noktalar vardır:
- Mümkün olduğunda Brotli'yi kullanın. Daha önce belirtildiği gibi, Brotli, gzip'e göre belirgin bir iyileştirme sağlar ve Brotli, yaygın olarak kullanılan tüm tarayıcılarda desteklenmektedir. Mümkünse Brotli'yi kullanın. Ancak web siteniz eski tarayıcılardaki çok sayıda kullanıcı tarafından kullanılıyorsa herhangi bir sıkıştırma sıkıştırma yapmamaktan daha iyi olduğundan, yedek olarak gzip'in kullanıldığından emin olun.
- Dosya boyutu önemlidir. Çok küçük kaynaklar (1 KiB'den az) çok iyi sıkıştırmaz veya bazen hiç sıkıştırmayın. Her türlü veri sıkıştırmanın etkinliği, bir sıkıştırma algoritmasının daha fazla sıkıştırılabilir veri biti bulmak için birlikte çalışabileceği büyük miktarda veriye sahip olmaya bağlıdır. Dosya ne kadar büyük olursa sıkıştırma o kadar iyi çalışır. Ancak, daha etkili bir şekilde sıkıştırılabilmeleri için çok büyük kaynakları göndermeyin. Örneğin, JavaScript ve CSS gibi büyük kaynakların ayrıştırılması ve değerlendirilmesi tarayıcı bunları sıkıştırdıktan sonra çok daha fazla zaman alır ve değişiklikler farklı bir dosya karması ile sonuçlandığı için yalnızca marjinal şekilde değişmiş olsalar bile daha sık değişebilir.
- Dinamik ve statik sıkıştırmayı anlama. 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 anda ve bazen her istendiğinde sıkıştırır. Diğer yandan, statik sıkıştırma işlevi dosyaları ileride sıkıştırarak istek sırasında sıkıştırma yapılmasını gerektirmez. Statik sıkıştırma, sıkıştırmayla ilişkili gecikmeyi ortadan kaldırır. Bu da dinamik sıkıştırma durumunda sunucu yanıt sürelerine ekleme yapılabilir. 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şturuldularsa) dinamik olarak sıkıştırılmalıdır.
Kendi başınıza doğru şekilde sıkıştırma yapmak zordur ve bir sonraki bölümde anlatılacak olan İçerik Yayınlama Ağı'nın (CDN) bunu sizin için halletmesini sağlamak genellikle 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 bilgi, sıkıştırma ayarlarınızı web siteniz için maksimum yarar sağlayacak şekilde iyileştirme fırsatlarını bulmanıza yardımcı olabilir.
İçerik Yayınlama Ağları (CDN'ler)
İçerik Yayınlama Ağı (CDN), kaynakları kaynak sunucunuzdan önbelleğe alan ve dolayısıyla 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 yakınlık gidiş dönüş süresini (RTT) azaltırken HTTP/2 veya HTTP/3, önbelleğe alma ve sıkıştırma gibi optimizasyonlar, CDN'nin içeriği kaynak sunucunuzdan getirilene göre daha hızlı şekilde sunmasını sağlar. CDN kullanmak, bazı durumlarda web sitenizin TTFB'sini önemli ölçüde iyileştirebilir.
Bilginizi test etme
Hangi yönlendirme türü tamamen sizin kontrolünüzdedir?
Server-Timing başlığı birden fazla metrik içerebilir.
Hangi sunucu türünün son kullanıcılarınıza fiziksel olarak en yakın konumda olması daha olasıdır?
Sıradaki: Kritik yolu anlama
Artık web sitenizin HTML'si ile ilgili performansla ilgili dikkat edilmesi gereken noktalardan bazıları hakkında bilgi sahibi olduğunuza göre, mümkün olduğunca hızlı yüklenmesini sağlamak için daha iyi bir konumdasınızdır. Ancak bu, web performansını öğrenmenin yalnızca başlangıç noktasıdır. Şimdi ise kritik oluşturma yolunun arkasındaki teoriyi ele alacağız. Bu modülde, oluşturma engelleme ve ayrıştırma engelleyici kaynaklar gibi temel kavramlar ve bir sayfanın tarayıcıda ilk oluşturulmasının mümkün olduğunca hızlı bir şekilde yapılmasında oynadıkları rol açıklanmaktadır.