Kaynak İpuçları ile Performansı Optimize Etme

Yayınlanan: 2022-03-10

Hızlı özet ↬ Kullanıcıların gerçekte ne yapabileceklerini önceden tahmin edebildiğimizde birçok performans optimizasyonu yapılabilir. Kaynak İpuçları, web geliştiricilerinin tarayıcının kullanıcının bir adım önünde kalmasına ve sayfaları hızlı tutmasına yardımcı olabileceği basit ama etkili bir yoldur.

Modern web tarayıcıları, kullanıcının daha sonra ne yapacağını tahmin ederek sayfa yükleme performansını iyileştirmeye yardımcı olmak için her türlü tekniği kullanır. Tarayıcı, sitemiz veya bir bütün olarak uygulamamız hakkında fazla bir şey bilmiyor ve bir kullanıcının ne yapabileceğine dair en iyi bilgiler genellikle geliştiriciden geliyor.

Fotoğraf albümü gibi sayfalandırılmış içerik örneğini alın. Kullanıcı bir albümdeki bir fotoğrafa bakıyorsa, 'ileri' bağlantısını tıklayarak albümde aşağıdaki resmi görme şansının oldukça yüksek olduğunu biliyoruz. Ancak tarayıcı, sayfadaki tüm bağlantıların, kullanıcının tıklama olasılığının en yüksek olduğunu gerçekten bilmiyor. Bir tarayıcı için tüm bu bağlantılar eşit ağırlık taşır.

Ya tarayıcı bir şekilde kullanıcının bir sonraki nereye gideceğini bilseydi ve bir sonraki sayfayı vaktinden önce getirebilseydi, böylece kullanıcı bağlantıyı tıkladığında sayfa yüklemesi çok, çok daha hızlı olsaydı? Temelde Kaynak İpuçları budur. Bunlar , geliştiricinin, tarayıcıya, gelecekte olması muhtemel şeyler hakkında bilgi vermesinin bir yoludur, böylece tarayıcı, kaynakları nasıl yükleyeceği konusundaki seçimlerinde bunu hesaba katabilir.

Tüm bu kaynak ipuçları, HTML belgelerinizin <head> içinde bulmaya aşina olacağınız <link> öğesinin rel niteliğini kullanır. Bu makalede, ana Kaynak İpuçları türlerine ve bunları sayfalarımızda ne zaman ve nerede kullanabileceğimize bakacağız. Küçük ve ince ipuçlarından sondaki büyük silahlara geçeceğiz.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

DNS Önceden Getirme

DNS araması, example.com gibi insan dostu bir alan adını, bir kaynağı getirmek için gerçekten gerekli olan 123.54.92.4 gibi makine dostu IP adresine dönüştürme işlemidir.

Tarayıcı adres çubuğuna bir URL yazdığınızda, bir sayfadaki bir bağlantıyı takip ettiğinizde veya hatta farklı bir etki alanından bir resim gibi bir kaynak yüklediğinizde, tarayıcının elimizdeki kaynağı tutan sunucuyu bulmak için bir DNS araması yapması gerekir. talep edilen. Çok sayıda harici kaynağa sahip yoğun bir sayfa için (belki bir sürü reklam ve izleyici içeren bir haber sitesi gibi), sayfa başına düzinelerce DNS araması gerekebilir.

Tarayıcı bu aramaların sonuçlarını önbelleğe alır, ancak bunlar yavaş olabilir. Bir performans optimizasyon tekniği, kaynakları daha az etki alanında düzenleyerek gereken DNS aramalarının sayısını azaltmaktır. Bu mümkün olmadığında, tarayıcıyı dns-prefetch kaynak ipucu ile araması gerekeceği alanlar hakkında uyarabilirsiniz.

 <link rel="dns-prefetch" href="https://images.example.com">

Tarayıcı bu ipucu ile karşılaştığında, henüz nasıl kullanılacağını bilmese de images.example.com alan adını en kısa sürede çözmeye başlayabilir. Bu, tarayıcının oyunun önüne geçmesini ve paralel olarak daha fazla iş yapmasını sağlayarak toplam yükleme süresini azaltır.

`dns-prefetch` Ne Zaman Kullanmalıyım?

Sayfanız farklı bir etki alanındaki kaynakları kullandığında, tarayıcıya avantajlı bir başlangıç sağlamak için dns-prefetch kullanın. Tarayıcı desteği gerçekten harika, ancak bir tarayıcı bunu desteklemiyorsa, o zaman zarar gelmez - önceden getirme gerçekleşmez.

Kullanmadığınız alan adlarını önceden almayın ve çok sayıda alan adını önceden almak istediğinizi fark ederseniz, tüm bu alan adlarına neden ihtiyaç duyulduğuna ve sayıyı azaltmak için yapılabilecek bir şey olup olmadığına bakmanız daha iyi olabilir.

ön bağlantı

DNS önceden getirme işleminden sonraki bir adım, bir sunucuya önceden bağlanmaktır. Bir kaynağı barındıran bir sunucuyla bağlantı kurmak birkaç adımdan oluşur:

DNS araması (az önce tartıştığımız gibi);
TCP anlaşması
Bağlantıyı oluşturmak için tarayıcı ve sunucu arasında kısa bir "konuşma".
HTTPS sitelerinde TLS anlaşması
Bu, sertifika bilgilerinin bağlantı için geçerli ve doğru olduğunu doğrular.

Bu genellikle sunucu başına bir kez gerçekleşir ve özellikle sunucu tarayıcıdan çok uzaktaysa ve ağ gecikmesi yüksekse değerli zamanınızı alır. (Küresel olarak dağıtılan CDN'lerin gerçekten yardımcı olduğu yer burasıdır!) DNS'yi önceden almanın tarayıcının ne olduğunu görmeden oyunun önüne geçmesine yardımcı olabileceği gibi, bir sunucuya önceden bağlanmak, tarayıcının devreye girdiğinde bunu yapmasını sağlayabilir. bir kaynağa ihtiyaç duyulan sayfanın, bağlantı kurmanın yavaş çalışması çoktan gerçekleşti ve hat açıldı ve gitmeye hazır.

 <link rel="preconnect" href="https://scripts.example.com">

`preconnect` Ne Zaman Kullanmalıyım?

Yine, tarayıcı desteği güçlüdür ve bir tarayıcı önceden bağlanmayı desteklemiyorsa zararı olmaz - sonuç eskisi gibi olacaktır. Bir kaynağa erişeceğinizden emin olduğunuzda ve ilerlemek istediğinizde ön bağlantıyı kullanmayı düşünün.

Önceden bağlanmamaya ve ardından bağlantıyı kullanmamaya dikkat edin, çünkü bu hem sayfanızı yavaşlatacak hem de bağlandığınız sunucuda çok az miktarda kaynak bağlayacaktır.

Sonraki Sayfayı Önceden Getirme

Şimdiye kadar incelediğimiz iki ipucu, öncelikle yüklenen sayfadaki kaynaklara odaklanmıştır. Örneğin, tarayıcının resimlerde, komut dosyalarında veya yazı tiplerinde ilerlemesine yardımcı olmak için yararlı olabilirler. Sonraki birkaç ipucu daha çok gezinme ve kullanıcının şu anda yüklenmekte olan sayfadan sonra nereye gidebileceğini tahmin etme ile ilgilidir.

Bunlardan ilki önceden getirmedir ve bağlantı etiketi şöyle görünebilir:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

Bu, tarayıcıya, istendiğinde kullanıma hazır olması için devam edebileceğini ve arka planda bir sayfa getirebileceğini söyler. Burada biraz kumar var çünkü kullanıcının bir sonraki adımda nereye gideceğini düşündüğünüzü önceden belirlemeniz gerekiyor. Doğru anlayın, sonraki sayfa çok hızlı yükleniyor gibi görünebilir. Yanlış anlayın ve kullanılmayacak bir şeyi indirmek için zaman ve kaynak harcadınız. Kullanıcı, sınırlı bir cep telefonu planı gibi ölçülü bir bağlantıdaysa, onlara gerçek paraya mal olabilirsiniz.

Bir ön getirme gerçekleştiğinde, tarayıcı DNS aramasını yapar ve önceki iki tür ipucunda gördüğümüz sunucu bağlantısını yapar, ancak daha sonra bir adım daha ileri gider ve aslında dosyaları ister ve indirir. Ancak bu noktada durur ve dosyalar ayrıştırılmaz veya yürütülmez ve geçerli sayfaya hiçbir şekilde uygulanmaz. Sadece talep edilir ve hazır tutulurlar.

Önceden getirmeyi biraz tarayıcının önbelleğine bir dosya eklemek gibi düşünebilirsiniz. Kullanıcı bağlantıya tıkladığında sunucuya çıkıp indirmeye gerek duymak yerine, dosya bellekten çıkarılabilir ve çok daha hızlı kullanılabilir.

Özellik `as`

Yukarıdaki örnekte, as niteliğini as="document" ayarladığımızı görebilirsiniz. Bu, tarayıcıya getirdiğimiz şeyin bir belge (yani bir web sayfası) olarak ele alınması gerektiğini söyleyen isteğe bağlı bir özelliktir. Bu, tarayıcının, yeni bir sayfaya giden bir bağlantıyı izlemişiz gibi aynı türde istek üstbilgileri ve güvenlik ilkeleri ayarlamasını sağlar.

Tarayıcının farklı ön getirme türlerini uygun şekilde işlemesini sağlayarak as özelliği için birçok olası değer vardır.

`as` değeri	Kaynak türü
`audio`	Ses ve müzik dosyaları
`video`	Video
`Track`	Video veya ses WebVTT izleri
`script`	JavaScript dosyaları
`style`	CSS stil sayfaları
`font`	Web yazı tipleri
`image`	Görüntüler
`fetch`	XHR ve Getirme API istekleri
`worker`	Web çalışanları
`embed`	Multimedya `<embed>` istekleri
`object`	Multimedya `<object>` istekleri
`document`	internet sayfaları

as özniteliği ile kaynak türlerini belirtmek için kullanılabilecek farklı değerler.

`prefetch` Ne Zaman Kullanmalıyım?

Yine prefetch harika tarayıcı desteği var. Gezinmeyi hızlandırmanın kullanıcı deneyimini olumlu yönde etkileyeceğini düşünüyorsanız, kullanıcının sitenizi takip edebileceğinden makul ölçüde emin olduğunuzda kullanmalısınız. Bu, muhtemelen daha sonra kullanılmayan bir kaynağı getirerek kaynakları boşa harcama riskine karşı tartılmalıdır.

Sonraki Sayfayı Önceden Görüntüleme

prefetch ile, tarayıcının arka planda dosyaları kullanıma hazır olarak nasıl indirebileceğini gördük, ancak o noktada bunlarla daha fazla bir şey yapılmadığını da kaydettik. Önceden oluşturma bir adım daha ileri gider ve dosyaları yürütür, sayfayı gerçekten görüntüleme dışında görüntülemek için gereken tüm işi hemen hemen yapar.

Bu, JavaScript dosyaları ve görüntüleri gibi herhangi bir alt kaynak için kaynağı ayrıştırmayı ve bunları önceden getirmeyi içerebilir.

 <link rel="prerender" href="https://example.com/news/?page=2">

Bu gerçekten, tarayıcınızın geri düğmesine bastığınızda görebileceğiniz türden hızlı yükleme performansıyla, aşağıdaki sayfanın yüklenmesini anında hissettirebilir. Burada kumar daha da büyüktür, çünkü yalnızca dosyaları istemek ve indirmek için zaman harcamakla kalmaz, aynı zamanda bunları herhangi bir JavaScript ve benzeri ile birlikte yürütürsünüz. Bu, kullanıcının sayfayı istememesi durumunda fayda göremeyeceği bellek ve CPU'yu (ve dolayısıyla pili) tüketebilir.

`prerender` Ne Zaman Kullanmalıyım?

Ön işleme için tarayıcı desteği şu anda çok prerender , gerçekten yalnızca Chrome ve eski IE (Edge değil) bu seçenek için destek sunar. Bu, özellikle Chrome'u hedeflemediğiniz sürece kullanışlılığını sınırlayabilir. Yine bir “zarar yok, faul yok” durumudur, çünkü kullanıcı faydayı görmeyecektir, ancak görmemesi halinde onlar için herhangi bir soruna neden olmayacaktır.

Kaynak İpuçlarını Kullanmak

<link> etiketi kullanılarak bir HTML belgesinin <head> bölümünde kaynak ipuçlarının nasıl kullanılabileceğini zaten gördük. Muhtemelen bunu yapmanın en uygun yolu budur, ancak aynısını Link: HTTP başlığıyla da yapabilirsiniz.

Örneğin, bir HTTP başlığıyla önceden almak için:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

JavaScript'i, belki de etkileşimi kullanmaya yanıt olarak, kaynak ipuçlarını dinamik olarak uygulamak için de kullanabilirsiniz. W3C spesifikasyon belgesinden bir örnek kullanmak için:

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

Bu, kullanıcının sayfayla nasıl etkileşime girdiğine bağlı olarak bir sonraki nereye gidebileceğini tahmin etmek potansiyel olarak daha kolay olduğundan, bazı ilginç olasılıklar açar.

Dikkat Edilmesi Gerekenler

DNS'yi çözmek gibi en hafif dokunuştan arka planda çalışmaya hazır tam bir sayfa oluşturmaya kadar, kaynakları önceden yüklemenin giderek daha agresif dört yolunu inceledik. Bu ipuçlarının sadece bu olduğunu hatırlamak önemlidir; bunlar , tarayıcının performansı optimize edebileceği yolların ipuçlarıdır. Onlar direktif değil. Tarayıcı önerilerimizi alabilir ve nasıl yanıt vereceğine karar verirken en iyi kararını kullanabilir.

Bu, meşgul veya aşırı gerilmiş bir cihazda tarayıcının ipuçlarına hiç yanıt vermeye çalışmadığı anlamına gelebilir. Tarayıcı ölçülü bir bağlantıda olduğunu biliyorsa, örneğin tüm kaynakları değil, DNS'yi önceden getirebilir. Bellek düşükse, tarayıcı mevcut sayfa boşaltılana kadar sonraki sayfayı getirmeye değmeyeceğine tekrar karar verebilir.

Gerçek şu ki, bir masaüstü tarayıcısında, ipuçlarının tümü muhtemelen geliştiricinin önerdiği gibi izlenecektir, ancak her durumda bunun tarayıcıya bağlı olduğunu unutmayın.

Bakımın Önemi

Web ile birkaç yıldan fazla bir süredir çalışıyorsanız, bir sayfada görülemeyen bir şeyin genellikle ihmal edilebileceği gerçeğine aşina olacaksınız. Gizli meta veriler (sayfa açıklamaları gibi) buna iyi bir örnektir. Siteyle ilgilenen kişiler verileri kolayca göremezse, kolayca ihmal edilebilir ve güncelliğini yitirebilir.

Bu, kaynak ipuçlarıyla gerçek bir risktir. Kod gizlendiğinden ve kullanımda hemen hemen algılanmadığından, sayfanın değişmesi ve herhangi bir kaynak ipucunun güncellenmemesi çok kolay olacaktır. Diyelim ki kullanmadığınız bir sayfayı önceden getirmenin sonucu, sitenizin performansını iyileştirmek için yerleştirdiğiniz araçların sitenize aktif olarak zarar verdiği anlamına gelir. Bu nedenle, kaynak ipuçlarınızı güncel hale getirmek için iyi prosedürlere sahip olmak gerçekten çok önemli hale geliyor.

Kaynaklar

"Kaynak İpuçları belirtimi", W3C
Addy Osmani, “Önceden Getirme ile Sonraki Sayfa Gezinmelerini Hızlandırın”