Son yıllarda, ön uç projelerini optimize etmeye yönelik giderek daha fazla platform, kendi kendine barındırma veya üçüncü taraf kaynakları proxy olarak kullanma fırsatları sunuyor. Akamai ayarlamanıza izin verir kendi kendine oluşturulan URL'ler için. Cloudflare, Edge Workers teknolojisine sahiptir. Fasterzin kutusu Sayfalardaki URL'ler, sitenin ana etki alanında bulunan üçüncü taraf kaynaklarına işaret eder.
Projenizde kullanılan üçüncü taraf hizmetlerinin çok sık değişmediğini ve bunları müşterilere sunma sürecinin iyileştirilebileceğini biliyorsanız, muhtemelen bu tür hizmetleri proxy olarak kullanmayı düşünüyorsunuz. Bu yaklaşımla, bu kaynakları kullanıcılarınıza çok daha yakın hale getirebilir ve bunların istemci tarafında önbelleğe alınması üzerinde daha eksiksiz kontrol sahibi olabilirsiniz. Bu ayrıca, kullanıcıları üçüncü taraf bir hizmetin "çökmesi" veya performansının düşmesinden kaynaklanan sorunlardan korumanıza da olanak tanır.
İyi: Geliştirilmiş performans
Başka birinin kaynaklarını kendi kendine barındırmak, performansı çok açık bir şekilde artırır. Tarayıcının tekrar DNS'ye erişmesine gerek yoktur, TCP bağlantısı kurmasına ve üçüncü taraf bir etki alanında TLS anlaşması yapmasına gerek yoktur. Aşağıdaki iki rakamı karşılaştırarak başka birinin kaynaklarını kendi kendine barındırmanın performansı nasıl etkilediğini görebilirsiniz.
Üçüncü taraf kaynakları harici kaynaklardan indirilir (alınan )
Üçüncü taraf kaynakları, site malzemelerinin geri kalanıyla aynı yerde saklanır (alınan )
Bu durum, tarayıcının, ana etki alanıyla halihazırda kurulmuş olan HTTP/2 bağlantısından gelen verileri çoğullama ve önceliklendirme yeteneğini kullanması gerçeğiyle de iyileştirilir.
Üçüncü taraf kaynakları barındırmıyorsanız, bunlar ana alandan farklı bir alan adından yükleneceği için önceliklendirilemezler. Bu onların müşterinin bant genişliği için birbirleriyle rekabet etmelerine neden olacaktır. Bu, ideal koşullar altında elde edilebilecek olandan çok daha uzun bir sayfa oluşturmak için kritik olan içeriğin yüklenme sürelerine neden olabilir. Tüm bunları çok iyi açıklayan HTTP/2 önceliklendirmesi hakkında konuşun.
Dış kaynaklara bağlantılarda özniteliklerin kullanımının preconnect sorunun çözümünde yardımcı olacaktır. Ancak farklı alanlara giden bu bağlantıların sayısı çok fazlaysa, aslında iletişim hattının en kritik anda aşırı yüklenmesine neden olabilir.
Üçüncü taraf kaynakları kendiniz barındırıyorsanız, bu kaynakların müşteriye tam olarak nasıl verildiğini kontrol edebilirsiniz. Yani aşağıdakilerden bahsediyoruz:
- Her tarayıcıya en uygun veri sıkıştırma algoritmasının (Brotli/gzip) kullanılmasını sağlayabilirsiniz.
- Genellikle çok uzun olmayan kaynaklar için önbelleğe alma süresini, en tanınmış sağlayıcılarda bile artırabilirsiniz (örneğin, GA etiketi için karşılık gelen değer 30 dakikaya ayarlanmıştır).
İlgili içeriği önbelleğe alma yönetimi stratejinize (URL karmaları, sürüm oluşturma vb.) dahil ederek bir kaynağın TTL'sini örneğin bir yıla kadar uzatabilirsiniz. Aşağıda bunun hakkında konuşacağız.
▍Üçüncü taraf hizmetlerinin işleyişindeki kesintilere veya bunların kapatılmasına karşı koruma
Kendi kendini barındıran üçüncü taraf kaynaklarının bir başka ilginç yönü de, üçüncü taraf hizmetlerinin kesintileriyle ilişkili riskleri azaltmanıza olanak sağlamasıdır. Kullandığınız üçüncü taraf A/B testi çözümünün, sayfanın başlık bölümüne yüklenen bir engelleme komut dosyası olarak uygulandığını varsayalım. Bu komut dosyası yavaş yükleniyor. İlgili komut dosyası yüklenemezse sayfa boş olacaktır. Yüklenmesi çok uzun sürüyorsa sayfa uzun bir gecikmeyle görünecektir. Veya projenin üçüncü taraf bir CDN kaynağından indirilen bir kitaplık kullandığını varsayalım. Bu kaynağın bir arıza yaşadığını veya belirli bir ülkede engellendiğini düşünelim. Böyle bir durum site mantığının ihlaline yol açacaktır.
Bazı harici hizmetler kullanılamadığında sitenizin nasıl çalıştığını öğrenmek için SPOF bölümünü kullanabilirsiniz. .
webpagetest.org'daki SPOF bölümü
▍Tarayıcılarda materyallerin önbelleğe alınmasıyla ilgili sorunlar ne olacak? (ipucu: bu bir efsane)
Bu hizmetler oldukça yüksek kaliteli ağlara sahip olduğundan ve dünya çapında dağıtıldığından, genel CDN'leri kullanmanın otomatik olarak daha iyi kaynak performansına yol açacağını düşünebilirsiniz. Ama aslında her şey biraz daha karmaşık.
Diyelim ki birkaç farklı sitemiz var: website1.com, website2.com, website3.com. Bu sitelerin tümü jQuery kütüphanesini kullanıyor. Bunu onlara bir CDN kullanarak bağlarız, örneğin - googleapis.com. Tarayıcının kitaplığı bir kez indirip önbelleğe almasını ve ardından onu üç sitenin tamamında kullanmasını bekleyebilirsiniz. Bu, ağdaki yükü azaltabilir. Belki bu, bir yerde tasarruf etmenize ve kaynak performansını artırmanıza yardımcı olur. Pratik açıdan bakıldığında her şey farklı görünüyor. Örneğin Safari'nin şöyle bir özelliği var: : Önbellek, belgenin kaynağına ve üçüncü taraf kaynağın kaynağına göre ikili anahtarlar kullanır. bu konuyla ilgili iyi bir makale.
eski çalışmalar и ve daha yeni Paul Calvano, kaynakların tarayıcı önbelleklerinde beklediğimiz kadar uzun süre saklanmadığını gösteriyor: “Bir projenin kendi ve üçüncü taraf kaynaklarının önbelleğe alma süreleri arasında ciddi bir boşluk var. CSS ve web fontlarından bahsediyoruz. Yani, yerel yazı tiplerinin %95'inin önbellek ömrü bir haftadan uzunken, üçüncü taraf yazı tiplerinin %50'sinin önbellek ömrü bir haftadan kısadır! Bu, web geliştiricilerine yazı tipi dosyalarını kendileri barındırmaları için ikna edici bir neden veriyor!
Sonuç olarak, başkalarının içeriğini barındırırsanız tarayıcı önbelleğinin neden olduğu herhangi bir performans sorununu fark etmezsiniz.
Artık üçüncü taraf kendi kendine barındırmanın güçlü yanlarını ele aldığımıza göre, bu yaklaşımın iyi bir uygulamasını kötü bir uygulamadan nasıl ayırt edeceğimiz hakkında konuşalım.
Kötü: Şeytan ayrıntıda gizlidir
Üçüncü taraf kaynaklarının kendi etki alanınıza taşınması, söz konusu kaynakların uygun şekilde önbelleğe alınmasını sağlamadan otomatik olarak yapılamaz.
Buradaki ana sorunlardan biri önbelleğe alma süresidir. Örneğin, sürüm bilgileri aşağıdaki gibi üçüncü taraf komut dosyası adlarına dahil edilir: jquery-3.4.1.js. Böyle bir dosya gelecekte değişmeyecektir ve sonuç olarak bu, önbelleğe alınmasında herhangi bir soruna neden olmayacaktır.
Ancak dosyalarla çalışırken bazı sürüm oluşturma şemaları kullanılmazsa, dosya adı değişmeden içeriği değişen önbelleğe alınmış komut dosyaları güncelliğini yitirebilir. Bu ciddi bir sorun olabilir, çünkü örneğin otomatik güvenlik yamalarının istemcilerin mümkün olduğu kadar çabuk alması gereken komut dosyalarına eklenmesine izin vermez. Geliştiricinin önbellekteki bu tür komut dosyalarını güncellemek için çaba göstermesi gerekecektir. Ayrıca istemcide önbellekten kullanılan kodun, projenin sunucu kısmının tasarlandığı kodun son sürümünden farklı olması nedeniyle uygulama hatalarına neden olabilir.
Doğru, sık sık güncellenen materyallerden (etiket yöneticileri, A/B testi çözümleri) bahsedersek, bunları CDN araçlarını kullanarak önbelleğe almak çözülebilecek bir iştir ancak çok daha karmaşıktır. Bir etiket yönetimi çözümü olan Commanders Act gibi hizmetler, yeni sürümleri yayınlarken web kancalarını kullanır. Bu size CDN'de önbellek temizleme işlemini zorlama veya daha iyisi karma veya URL güncellemesini zorlama yeteneği sağlar.
▍Malzemelerin müşterilere uyarlanabilir şekilde teslim edilmesi
Ayrıca önbelleklemeden bahsederken CDN üzerinde kullanılan önbellekleme ayarlarının bazı üçüncü parti kaynaklara uygun olmayabileceğini de hesaba katmamız gerekiyor. Örneğin, bu tür kaynaklar, belirli tarayıcılara, bu tarayıcılar için özel olarak optimize edilmiş içerik sürümleriyle hizmet vermek üzere kullanıcı aracısı koklama (uyarlanabilir sunum) teknolojisini kullanabilir. Bu teknolojiler, tarayıcı yeteneklerini anlamak için normal ifadelere veya HTTP başlık bilgilerinin bulunduğu bir veritabanına dayanır. User-Agent. Hangi tarayıcıyla uğraştıklarını öğrendikten sonra ona kendisi için tasarlanmış materyaller verirler.
Burada iki hizmeti hatırlayabilirsiniz. Bunlardan ilki googlefonts.com'dur. İkincisi polyfill.io'dur. Google Fonts hizmeti, belirli bir kaynak için, tarayıcının özelliklerine bağlı olarak çeşitli CSS kodları sağlar (woff2 kaynaklarına bağlantılar vermek için) unicode-range).
Farklı tarayıcılardan yapılan birkaç Google Fonts sorgusunun sonuçlarını burada bulabilirsiniz.
Chrome'dan Google Fonts sorgu sonucu
IE10'dan yürütülen Google Fonts sorgusunun sonucu
Polyfill.io, tarayıcıya yalnızca ihtiyaç duyduğu çoklu doldurmaları sağlar. Bu, performans nedenleriyle yapılır.
Örneğin aşağıdaki isteği farklı tarayıcılardan çalıştırdığınızda ne olacağına bir göz atalım:
IE10'dan gerçekleştirilen böyle bir isteğe yanıt olarak 34 KB veri alınacaktır. Ve Chrome'dan yürütülen cevap boş olacak.
Kızgın: Gizlilikle ilgili bazı hususlar
Bu nokta sonuncudur ancak en az önemli olanıdır. Mesele şu ki, üçüncü taraf kaynaklarının projenin ana etki alanında veya alt etki alanında kendi kendine barındırılması, kullanıcıların gizliliğini tehlikeye atabilir ve ana web projesini olumsuz etkileyebilir.
CDN sisteminiz doğru yapılandırılmamışsa alan adınızın çerezlerini üçüncü taraf bir hizmete göndermeniz gerekebilir. CDN düzeyinde uygun filtreleme düzenlenmezse, normalde JavaScript'te kullanılamayan oturum çerezleriniz ( httponly), yabancı bir ana bilgisayara gönderilebilir.
Eulerian veya Criteo gibi izleyicilerde tam olarak bu gerçekleşebilir. Üçüncü taraf izleyiciler, çerezde benzersiz bir tanımlayıcı belirlemiş olabilir. Bunlar site materyallerinin bir parçası olsaydı, kullanıcı farklı web kaynaklarıyla çalışırken tanımlayıcıyı kendi takdirine göre okuyabilirdi.
Günümüzde çoğu tarayıcı bu tür izleyici davranışlarına karşı koruma içermektedir. Sonuç olarak izleyiciler artık teknolojiyi kullanıyor , çeşitli projeler için kendi senaryoları gibi görünüyorlar. Yani izleyiciler, site sahiplerine, adresi genellikle rastgele bir karakter kümesi gibi görünen belirli bir alan adı için ayarlarına bir CNAME ekleme olanağı sunar.
Web sitesi çerezlerinin tüm alt alan adlarında (örneğin - *.website.com) kullanılabilir hale getirilmesi önerilmese de birçok site bunu yapmaktadır. Bu durumda, bu tür çerezler otomatik olarak gizlenmiş bir üçüncü taraf izleyiciye gönderilir. Sonuç olarak artık herhangi bir gizlilikten bahsedemeyiz.
Ayrıca aynı şey HTTP başlıklarında da olur oluşturmak için kullanılabildikleri için yalnızca ana alana gönderilirler. kullanıcı. Kullandığınız CDN hizmetinin bu başlıkları doğru şekilde filtrelediğinden emin olun.
sonuçlar
Yakın zamanda üçüncü taraf kaynakların kendi kendine barındırılmasını uygulamayı planlıyorsanız size bazı ipuçları vereyim:
- En önemli JS kitaplıklarınızı, yazı tiplerinizi ve CSS dosyalarınızı barındırın. Bu, site için hayati öneme sahip bir kaynağın üçüncü taraf bir hizmetin hatası nedeniyle kullanılamaması nedeniyle site arızası veya performans düşüşü riskini azaltacaktır.
- Üçüncü taraf kaynaklarını bir CDN'de önbelleğe almadan önce, dosyalarını adlandırırken bir tür sürüm oluşturma sisteminin kullanıldığından veya yeni bir sürümünü yayınlarken CDN önbelleğini manuel veya otomatik olarak sıfırlayarak bu kaynakların yaşam döngüsünü yönetebildiğinizden emin olun. senaryo.
- CDN'niz, proxy sunucunuz ve önbellek ayarlarınız konusunda çok dikkatli olun. Bu, projenize veya başlıklarınıza çerez gönderilmesini önlemenize olanak tanır
Client-Hintsüçüncü taraf hizmetleri.
Sevgili okuyucular! Projelerinizin işleyişi için son derece önemli olan, başkalarına ait materyalleri sunucularınızda mı barındırıyorsunuz?
Kaynak: habr.com