HTML performansıyla ilgili olarak dikkat edilmesi gereken genel noktalar

bookmark_border Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Hızlı yüklenen bir web sitesi oluşturmanın ilk adımı, bir teslim tarihinin için sunucudan bir yanıt alır. Bir URL'yi tarayıcının adres çubuğuna bir GET isteği gönderir. geri yükleyebilirim. Bir web sayfasına yönelik ilk istek bir HTML kaynağı içindir ve HTML'nin minimum gecikmeyle hızlı bir şekilde gelmesini sağlamak önemli bir performanstır. yardımcı olur.

HTML için yapılan bu ilk istek birkaç adımda tamamlanır. Bu adımların her biri biraz zaman alabilir. Her adımda harcadığınız zamanı azalttığınızda Birinci Bayt (TTFB). TTFB, belirli bir itiraz geliştirirken odaklanmanız gereken sayfaların yüklenme hızı önemli. Yüksek bir TTFB, sayfaya ulaşmayı zorlaştırır belirlenen "iyi" Largest Contentful Paint gibi metriklerin eşikleri (LCP) ve First Contentful Paint (FCP).

Yönlendirmeleri en aza indirin

Bir kaynak istendiğinde sunucu bir yönlendirme ile yanıt verebilir. Örneğin, kalıcı yönlendirme (301 Moved Permanently yanıtı) veya geçici bir (302 Found yanıtı).

Yönlendirmeler, tarayıcının bir web sitesini çalıştırmasını gerektirdiğinden sayfa yükleme hızını yavaşlatır. kaynağı almak için yeni konumda ek HTTP isteği bulunmalıdır. Her biri 100'den az gösterim alan iki tür yönlendirme vardır:

1. Tamamen kaynağınız içinde gerçekleşen aynı kaynaklı yönlendirmeler. Bu türler yönetmenin mantığı tamamen sizin kontrolünüzdedir. tamamen web sunucunuzda bulunur.
2. Başka bir kaynak tarafından başlatılan kaynaklar arası yönlendirmeler. Bu türler yönlendirmelerin genellikle kontrolünüz dışında olduğunu unutmayın.

Kaynaklar arası yönlendirmeler genellikle reklamlar, URL kısaltma hizmetleri ve üçüncü taraf hizmetleri. Kaynaklar arası yönlendirmeler sizin kontrolünüz dışında olsa da, yine de birden fazla yönlendirmeden kaçındığınızdan emin olmanız önerilir (örneğin, bir HTTP sayfasına bağlantı veren ve bunun karşılığında HTTPS'ye yönlendiren bir reklama sahip olma veya eşdeğeri veya kaynağınıza gelen kaynaklar arası yönlendirmedir. aynı kaynak yönlendirmesini tetikler.

HTML yanıtlarını önbelleğe al

Yanıt, HTML yanıtlarının bağlantılarını içerebileceğinden HTML yanıtlarını önbelleğe almak zordur CSS, JavaScript, görseller ve diğer kaynaklar gibi diğer kritik kaynaklar bulunur. Bu kaynaklar, ilgili benzersiz bir parmak izi içerebilir dosya adları, dosyanın içeriğine göre değişir. Bu, önbelleğe alınan verilerinizin Bir dağıtımdan sonra HTML belgesi eski haline gelebilir. Bunun nedeni, dokümanın eski alt kaynaklara referanslar.

Bununla birlikte, önbelleğe alma yerine kısa bir önbellek ömrü, Örneğin, bir kaynağın CDN'de önbelleğe alınmasına izin vererek verilerin sayısını azaltarak hem kaynak sunucudan hem de tarayıcıda kaynakların tekrar indirilmesi yerine yeniden doğrulanmasını sağlar. Bu yaklaşım işe yarar hiçbir bağlamda değişmeyen statik içerik ve uygun bir kaynakları önbelleğe alma süresi, belirli bir süre içinde uygun olmalıdır. Statik HTML kaynakları için beş dakika ayırmak güvenli bir yöntemdir ve düzenli güncellemeler fark etmez.

Bir sayfanın HTML içeriği bir şekilde kişiselleştirilirse (örneğin, bir kullanıcınız varsa büyük olasılıkla belli bir sorgu için içeriği güvenlik dahil çeşitli endişeler ve güncellik. HTML yanıtı önbelleği geçersiz kılamazsınız. İnsanların bu nedenle, bu gibi durumlarda HTML'yi tamamen ö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ı. ETag (tüzel kişi olarak da bilinir) etiketi: Üstbilgi, istenen kaynağı benzersiz bir şekilde temsil eden bir tanımlayıcıdır. Genellikle kaynak içeriğinin karmasını kullanarak:

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Kaynak her değiştiğinde yeni bir ETag değeri oluşturulmalıdır. Şu tarihte: istekte bulunulduğunda, tarayıcı ETag değerini If-None-Match istek başlığı. Sunucudaki ETag, sunucu tarafından gönderilen bir 304 Not Modified yanıtıyla Tarayıcı önbellekteki kaynağı kullanır. Bu durum, ağ gecikmesi varsa 304 Not Modified yanıtı, yanıtın tamamına göre çok daha küçüktür HTML kaynağı.

Bununla birlikte, bir kaynağın güncelliğinin yeniden doğrulanmasında ilgili ağ gecikmesi kendi dezavantajı var. Web geliştirmenin diğer birçok alanında olduğu gibi, ödünler ve uzlaşmalar kaçınılmazdır. Bu risklerin karşılanıp karşılanmadığını HTML'yi bu şekilde önbelleğe almak için daha fazla çaba harcamaya değer veya hiçbir zaman HTML içeriğini önbelleğe alma.

Sunucu yanıt sürelerini ölçme

Yanıt önbelleğe alınmazsa sunucunun yanıt süresi büyük ölçüde arka uç uygulama yığınınızı dikkate alabilirsiniz. Kullanıcılara hitap eden bir web sayfası Örneğin bir veritabanından veri getirmek gibi dinamik olarak oluşturulan bir yanıt bir statik web sayfasından daha yüksek bir TTFB'ye sahip olabilir. ve arka uçta önemli işlem süresi olmadan anında gerçekleştirilir. Görüntülenen döner simgenin yüklenmesi ve ardından istemci tarafında tüm verilerin getirilmesi, bir ortamdan tahmin edilemeyecek bir hale dönüştürülebilir. birinci taraf verileri olabilir. İstemci tarafında yapılan çalışmaların en aza indirilmesi, genellikle kullanıcı odaklı metriklerden bahsedeceğiz.

Kullanıcılar alanda yavaş bir TTFB yaşıyorsa bilgileri Server-Timing kullanımı yoluyla sunucuda nerede zaman geçirildiğine dair yanıt başlığı:

Server-Timing: auth;dur=55.5, db;dur=220

Server-Timing başlığının değeri birden fazla metrik ve süresini belirleyebilirsiniz. Bu veriler daha sonra alandaki kullanıcılardan toplanabilir. Gezinme Zamanlama API'si kullanılarak ve kullanıcıların benzer bir deneyim yaşayıp yaşamadığı gecikme olabilir. Önceki 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ı gözden geçirmeli ve Web sitenizin aldığı trafiği yönetmek için yeterli kaynaklara sahip olmanız gerekir. Paylaşıldı barındırma sağlayıcıları genellikle yüksek TTFB'ye ve özel çözümlere açıktır. daha hızlı yanıt süreleri sunan reklamlar daha pahalı olabilir.

Sıkıştırma

HTML, JavaScript, CSS ve SVG resimleri gibi metin tabanlı yanıtlar ağ üzerinden aktarım boyutunu küçültmek için sıkıştırarak daha hızlı indirmenizi sağlar. En yaygın olarak kullanılan sıkıştırma algoritmaları gzip ve Brotli'ye 3 km uzaklıktadır. Brotli, gzip'e kıyasla yaklaşık% 15 ila% 20 oranında iyileşme sağlıyor.

Sıkıştırma çoğu web barındırma sağlayıcısı tarafından genellikle otomatik olarak ayarlanır ancak yapılandırabileceğiniz bir konumdaysanız göz önünde bulundurmanız gereken bazı önemli noktalar vardır. veya sıkıştırma ayarlarını kendiniz değiştirin:

1. Mümkün olduğunda Brotli'yi kullanın. Daha önce de belirttiğimiz gibi, Brotli gzip'e göre belirgin bir iyileşme görüldü ve Brotli tüm ana tarayıcılar başlıklı makaleyi inceleyin. Mümkün olduğunda Brotli'yi kullanın, ancak web siteniz çok sayıda kullanıcı tarafından kullanılıyorsa sayısını artırmak için gzip'in yedek olarak kullanıldığından emin olun. hiç sıkıştırmamaktan daha iyidir.
2. Dosya boyutu önemlidir. 1 KiB'tan az olan çok küçük kaynaklar sıkıştırmayın. veya bazen hiç sıkıştırmayabilir. Her türlü etkinlik bir başka deyişle, bir başka deyişle bir işlemin, daha fazla sıkıştırılabilir bit bulmak için birlikte çalışma olabilir. Dosya ne kadar büyükse o kadar iyi sıkıştırma çalışır. Ancak, çok büyük kaynaklar gönderebilirsiniz. Zira bu kaynaklar, çeşitliliğini dikkate almıyor. JavaScript ve CSS gibi büyük kaynaklar, sonra ayrıştırıp değerlendirmek için önemli ölçüde daha fazla zaman sıkıştırılmış bir hale getirilmiştir ve yalnızca yakın zamanda herhangi bir değişiklik farklı bir dosya karması ile sonuçlanacağından, bu oran marjinal şekilde değiştirilir.
3. Dinamik ve statik sıkıştırmayı anlama. Dinamik ve statik bir kaynağın ne zaman gerektiği konusunda farklı yaklaşımlar sıkıştırılmış. Dinamik sıkıştırma, bir kaynağı kullanıldığı anda sıkıştırır istenir ve bazen her istendiğinde. Diğer yandan Statik sıkıştırma, dosyaları sıkıştırma gerektirmeden ileride sıkıştırır yerine getirilmelidir. Statik sıkıştırma, Sıkıştırmanın kendisinde yaşanan gecikme (bu da sunucu yanıtına ek olabilir) iki kat daha fazla belirir. Statik kaynaklar: JavaScript, CSS ve SVG resimleri statik olarak sıkıştırılmalı, HTML ise özellikle kimlik doğrulaması yapılmış uygulamalar için dinamik olarak oluşturuldularsa dinamik olarak sıkıştırılmalıdır.

Sıkıştırmayı kendi başınıza uygulamak zor bir işlemdir ve genellikle en iyisi, bir sonraki bölümde ele alınacak olan İçerik Yayınlama Ağı (CDN), bu işlemleri sizin yerinize halleder. Ancak bu kavramları bilmek, üzerinde çalıştığınız projenin barındırma sağlayıcınızın sıkıştırma özelliğini doğru kullanıp kullanmadığı. Bu bilgi, yardımcı olması için, sıkıştırma ayarlarınızı geliştirme en iyi sonuçları elde etmenizi sağlar.

İçerik Yayınlama Ağları (CDN'ler)

İçerik Yayınlama Ağı (CDN) kaynak sunucunuzdaki kaynakları önbelleğe alır ve karşılığında, bunları uçtan sunar. Kullanıcılarınıza fiziksel olarak daha yakın sunucular. İşletmenize fiziksel yakınlık kullanıcılar gidiş süresini (RTT) azaltırken HTTP/2 veya HTTP/3, önbelleğe alma ve sıkıştırma, CDN'nin içeriği daha hızlı sunmasını sağlar getirileceğine dair bir fikir edinin. Bir CDN kullanıldığında, Bazı durumlarda web sitenizin TTFB'sini önemli ölçüde iyileştirebilir.

Bilginizi test etme

Sıradaki: Kritik yolu anlama

Performansla ilgili dikkat edilmesi gereken bazı noktaları öğrendiğinize göre, sitenizin HTML'si ile yüklendikten sonra, sayfanın sorunsuz bir şekilde yüklenmesini sağlamak için mümkün olduğunca çabuk başlayabilirsiniz. Ancak bu, web'i öğrenmenin yalnızca başlangıcı. bazı yolları da görmüştük. Bir sonraki adımda, kritik oluşturma yolunun arkasındaki teori cevaplar. Bu modülde oluşturma engelleme ve reklam oluşturma gibi engelleme kaynaklarını ve bunların bir sayfanın ilk URL'sini almada oynadıkları rolü olabildiğince hızlı şekilde oluşturun.