Etiketiyle Web Sitesi Nasıl Hızlandırılır

"öngören"tarayıcılar internette en yüksek hızda gezinmenin geleceğidir, bize istediğimiz kaynakları getirmek bilmeden önce bile onları istediğimizi. Bugünün tarayıcıları zaten Yapmak bazı tahminler şimdi ve sonra belgelerin alınmasını ve oluşturulmasını hızlandırmak için. Bunu bir sonraki adıma atmak için, web geliştiricilerinden başkasına bakmıyoruz..

Geliştiriciler bir oldukça iyi fikir arasında web siteleri nasıl gezilir, ve hangisi kaynaklar en sık talep ediliyor ve böylece, tarayıcıların siteler için yapması gereken gelecekteki bazı işlemleri tahmin edebilirler. Şimdi tek gereken şey geliştiricilerin bir yolunu bulmaları. bunları ilet tahminler tarayıcılara ve onları iyi kullanmak. Bazı özel "HTML linkleri" buraya giriyor..

HTTP İsteklerinde Tazeleme

Bu bağlantılara göz atmadan önce, tipik bir HTTP tarafından istenen dosya alma işleminin nasıl gerçekleştiği konusundaki hafızamızı tazeleme zamanı geldi. Diyelim ki Joe adında biri bir web sitesini ziyaret etmek istiyor.

İşte bundan sonra ne olacak:

1. Joe web sitesinin insan tarafından geri alınabilir adresini bir tarayıcının adres çubuğuna yazar ve "Enter" tuşuna basar..
2. Bu adresi aldığında, tarayıcı Joe tarafından verilen adresin IP adresi için bir DNS sunucusu (ISP’nin övgüleri) ister.
3. DNS sunucusu zorunludur.
4. Artık tarayıcı IP adresini bildiğinden, bağlantı isteğinde bulunan bir iletiyi (TCP lehçesinde) web sitesinin sunucusuna gönderir..
5. Sunucu canlı ve iyi durumda ise, tarayıcının isteğini onaylayan bir yanıt gönderir ve tarayıcı sunucunun mesajını yanıtlar ve onaylar. (Not: Evet, bu bir istemci ile bir sunucu arasındaki TCP el sıkışmasının aşırı derecede sulandırılmış bir versiyonudur.)
6. El sıkışmaları sona erdiğinde, ikisi arasında bir bağlantı kurulur..
7. Şimdi, tarayıcı lehçe stilini HTTP olarak değiştiriyor ve sunucuya web sitesi için soruyor..
8. Web sitesinin ana sayfasını bilen sunucu, tarayıcı tarafından alınan ve bilgisayar önünde çok sabırla bekleyen Joe'ya gösterilen tam olarak geri döner..

Tipik bir HTTP isteği geçiyor herşey Internet üzerinden bir belge almak için bu (ve daha fazlası). Yani bu işlemlerden herhangi biri varsa mümkünse atlanabilir, yapabiliriz İstediğimiz kaynakların teslimi için beklemek zorunda kaldığımız zamanı azaltmak.

HTML Bağlantı İlişkileri

W3C, 4 HTML bağlantısı ilişkisini belirtir (rel ilişki için) adlı dns önden getirilmeyen, önceden bağlanma, Önalım, ve PreRender. Birlikte onlar (W3C) denir "Kaynak İpuçları". Şimdi göreceğiz Ne yapabilirler ve kullanılabilecekleri yerler.

1. DNS Öncesi

DNS ön ekinde alan adı çözünürlüğü (aka DNS sunucusundan eşleşen IP adresini alma) önceden yapılmış.

Diyelim ki bir web sitesinde, kardeş sitesine çok sayıda referans bağlantısı olan bir referans sayfası var. Bir kullanıcı referans sayfasını ziyaret ettiğinde yüksek olasılık Kullanıcının kardeş sitesine gideceği. Yani, bir erken DNS araması kardeş site için siteyi açma süresini kısaltabilir (böylece kullanıcı deneyimini iyileştirebilir).

Bu DNS ön ayarı yoluyla gecikme azaltma bu kodu referans sayfasına ekleyerek yapılabilir.

Bir tarayıcı başvuru sayfasındaki bu kodu işlediğinde, kardeş sitenin DNS aramasını görev sıralarına ekler ve sıradaki diğer yüksek öncelikli görevlerden arındırıldığında sıradaki DNS çözünürlüğünü başlatır. kardeş sitesi.

Böylece bir kullanıcı nihayet kardeş siteye yönlendiren linklerden birini tıkladığında, o sitenin DNS çözünürlüğü çoktan tamamlanmış olabilir ve tarayıcı hemen kardeş siteyle istemci-sunucu TCP bağlantısını kurmaya başlayabilir. sunucu, bu sayfanın daha hızlı yüklenmesini sağlar.

Bu özellik, Mart 2016'dan itibaren Safari hariç neredeyse tüm modern tarayıcılarda kullanılabilir.

2. Ön bağlantı

Preconnect, DNS prefetch'ten bir adım ötededir, ileride daha sonra gönderilen bir talebin olabileceği sunucuyla bağlantı kurar..

W3C ön bağlantı için ideal bir kullanım durumu listeler: yönlendirmeleri. Geliştiriciler yönlendirmeleri çeşitli nedenlerle kullanırlar..

Bu durumda, tarayıcının bir sonraki isteği (yönlendirilen site) % 100 tahmin edilebilir, ve olabilir önceden bağlanmak, için gezinme gecikmesini azalt.

"Yönlendiren bir aracı site sayfası olduğunu hayal edin"xyzsite", aşağıdaki HTML bağlantısı, tarayıcıyı, bu aracı sayfasına geldiğinde, xyzsite sunucusuyla önceden bağlamanızı sağlar.

Mart 2016'dan itibaren bu özellik Chrome, Opera ve Firefox'ta mevcuttur..

3. Önceden Getirme

İle Önalım, bir kaynak için tarayıcı kaynağın etki alanı adının DNS çözünürlüğünü uygulamaya başlar, sonra kaynağın sunucusuyla bir TCP bağlantısı kurar, HTTP isteğini yapar ve nihayet önceden kaydedilmiş kaynağı alır ve saklar tarayıcı önbelleğinde.

Hangi kaynaklara daha sonra ihtiyaç duyulacağından eminseniz, önceden hazırlayacağınız kaynak budur; orda yakalamak yatıyor. Önceden alma tahmin gerektirir, ve yanlış tahmin ederseniz, sitenizi hızlandırmak yerine aslında yavaşlayabilir.

Çevrimiçi kitaplar, galeriler veya portföyler için, kullanıcının bir sonraki sayfaya göz atması muhtemelse, örneğin Görüntüler, işleri önemli ölçüde hızlandırabilir. İşte bunu yapmak için kod.

Öncül Chrome, Firefox ve Opera’da desteklenir.

4. Öncül

Yalnızca HTML sayfaları için ön hazırlık yapılabilir. Önceden hazırlanmış bir HTML sayfası çevrimdışı hale getirildi, ve aslında kullanıcı tarafından ihtiyaç duyulduğunda ekrana boyanır. Rendering daha yüksek bir hesaplama işi ve hafıza kaynağı maliyeti; Ayrıca, bir sayfayı oluşturmak için, tarayıcının yönlendireceği ilave kaynaklara (sayfaya eklenen resimler gibi) ihtiyaç duyabilir. daha sonraki istekler tarayıcı tarafından.

Yani, PreRender olmalı dikkatli kullanılır, ve fazla kullanılmamış. Aşağıdaki kodun eklenmesi, önceden "Hakkında" sayfasının önüne geçecektir..

Prerender, Mart 2016’dan itibaren Chrome, IE ve Opera’da zaten mevcut.

Dikkat Edilecek Birkaç Şey

(1) Yukarıda belirtilen kaynak ipuçlarının hiçbiri, tarayıcı zaten mevcut olduğunda, kullanıcının mevcut sayfanın işlemleri için ihtiyaç duyulan istekleri işleme koymak ve bu optimizasyonları gerçekleştirmek için yapılan isteklerin farklı aşamalarını yerine getirmesini garanti etmemektedir. kullanıcının mevcut görevlerini engelleyebilir.

Yani her şey tarayıcı bunu yapmak için yeterince özgür hissettiğinde sıraya alınır ve yürütülür.

Bu kaynak ipuçlarının, sayfanın yüklenmesinden önce bile sayfada mutlaka bulunması gerekmez. Onlar yapabilir daha sonra JavaScript tarafından eklendi, ve kaynak ipuçları işlerini her zamanki gibi yapacak.

(2) W3C bir belirtir. HTML bağlantısı özelliği denilen ipucu olasılığı, pr (0 ile 1 arasında) bu kaynak ipuçları için, gelecekte yapılacak taleplerin olasılığını sağlamak için kullanılabilir. Bu özelliğin henüz herhangi bir tarayıcı tarafından uygulandığını görmedim. Örnek olarak, aşağıdaki kod gelecekte% 80 şans xyzsite talebinde bulunacağını ve yaklaşık sayfa için% 30’un isteneceğini belirtiyor.

İsteğe bağlı crossorigin özelliğini, bağlantılı isteğin CORS kimlik bilgilerini tarayıcıya bildirmek için kaynak ipuçlarına da ekleyebiliriz..