Spekülasyon Kuralları API: Web'in arkasındaki teknoloji anında yüklenir.

Web sitesi bir saniye için çok geç ... müşterilerin yarısı kayboluyor mu? Kimsenin beklemeyi sevmediği bir çağda asıl sorun.

Hiç bulundun mu? İlginç bir web sayfasına bağlantıyı tıklayın. Ama bunun yerine dönüp dönen beyaz ekranda oturup bakmak zorunda kaldı, web sitesinin indirmesini bekliyor ... 1 saniye ... 2 saniye ... 3 saniye ... heyecan yavaş yavaş tahriş oldu ve son olarak "kapanması daha iyi". Bu, tüm web sitesi insanlarının ve işletme sahiplerinin kabusu. SEO yapmak, çekim yapmak, iyi içerik oluşturmak için hem paraya hem de zamana adadık. İnsanları içeri çekmek, ancak sadece birkaç saniye boyunca kurşun veya satış olması gereken müşteriler için "yavaşlık" nedeniyle ölmek için ata düşmek zorunda kaldı. Geri düğmesine basın. Maalesef. Web sitesini mümkün olan en kısa sürede geliştirmeye çalışsak da, hem sıkıştırılmış görüntüleri hem de kodu ayarlıyor olsak da, tıklama sırasında "boşluk" ve hala var.

İllüstrasyonlar istemi: 2 kullanıcının karşılaştırma görüntüleri, biri sıkıntı ile bilgisayar ekranında kum saati izliyor. Başka bir kişi gülümsüyor ve tıkladıktan sonra hızlı bir şekilde yüklenen bir web sitesi kullanıyor.

Web sitesi neden bu kadar hızlı diyor ... hala beklememize izin vermelisiniz? Web yükünün arkasındaki sırrın kilidini açın.

Bu sorunun kaynağı, tarayıcının çalışmalarının doğasından gelir. Temel olarak tarayıcı sadece "Reaktif" gibi çalışacaktır, gerçekten "tıklayın" olana kadar hangi sayfaya gideceğinizi bilmeyecektir. Tıklamak. Tıkladıktan sonra bu işlemler başlayacaktır: 1. Sunucuya bir istek gönderin. 2. HTML dosyasını geri gönderin. Sunucunun ne kadar güçlü olduğunuza veya İnternet'in İnternet ne kadar hızlı olduğuna bakılmaksızın, bu "standart işlem" in hala gecikmeye neden olan bir darboğazdır. Dükkanda yiyecek sipariş etmek gibi. Önce şefin yapmaya başladığı sipariş vermelisiniz, şef "Kalbi tahmin et", sonra sipariş etmeden önce hammaddeleri önceden hazırlamaya başlar mısın?

İllüstrasyonlar istemi: Basit Infographic, normal web yükleme işlemini (Kullanıcı Tıklamaları -> İstek -> Sunucu -> İndir Kaynaklar -> Render) her adımın zamanı iletmektir.

Web sitesi yavaş olmaya devam etsin mi? Müşterileri kaybetmekten korkutucu bir etki

Bu sorunun sadece kullanıcının hayal kırıklığına uğramasına neden olmakla kalmayacak, aynı zamanda Domino'nun işini uzun vadeli uzun bir dönemde etkiler:

• Dönüşüm oranı, düşmüş: Yavaş yüklenen her saniye, müşterilerin ödeme sayfasına ulaşmadan veya formu doldurmadan önce sabır kaybedilen kayıp satış fırsatıdır.
• Books oranı yükseldi: Kullanıcı geldi ve hemen basıldı. Web sitenizin yeterince kaliteli olmadığı Google'a gönderilen kötü bir sinyaldir. SEO'yu doğrudan etkiler
• Çekirdek Web Vitals Sefil: Bir sonraki sayfayı yavaşlatın. INP iyileştirmek için web sitesini kullandığı en önemli metriklerden biri olan Next Paint'e (Inp) etkileşimli olanı etkileyen , bu yüzden olağandışı.
• Markanın güvenilirliği azalır: yavaş ve kötü deneyim olan web. Markanın kullanıcıların gözünde profesyonel ve güvenilmez görünmesini sağlar
• Dezavantajlı Yarış: Web sitesinin hala bir saniyeden daha hızlı deneyimler sağlayan rakipleri yavaşlatmasına izin verirken, tüm müşterilerinizi zaten yakalayabilir

Tüm bunlar, işinizi her gün ısıran ve büyüten görünmez bir maliyettir.

İllüstrasyonlar istemi: Bir taraftaki grafik, artan "sayfa yükleme süresini" gösterir. Ve diğer taraf, ters yöne indirgenmiş "dönüşüm oranı" ve "kullanıcı memnuniyeti" gösterir.

Tıklayacağımız "bilme" web sitesi daha iyi olur mu? Spekülasyon Kuralları API'sını karşılama

Tarayıcı kullanıcının bir sonraki eylemini "tahmin edecek" yeterince akıllıysa ne olacak? Beklemek yerine tıklayın ve indirin. Bunun yerine, bir sonraki sayfayı sessizce perde arkasına yüklemeye başladı. Spekülasyon Kuralları API'sı adı verilen en son teknoloji kavramıdır . Web sitenizi tıkladıktan hemen sonra yapan "sihir" dir!

Spekülasyon Kuralları API'sı basit bir kodda "kurallar" yazmanın bir yoludur. Tarayıcıya, kullanıcının en fazla 2 ana stratejiyle devam etmesi gerektiğini "hangi sayfa" nı söylemek için:

• Önceden: HTML, CSS, JS dosyaları gibi beklemek için bir sonraki sayfanın "Kaynaklarını İndir" tarayıcısını sipariş etme, ancak yine de görüntülenmeyin.
• Prender: Bu en iyisi! "Yükler ve Oluşturma" tarayıcısını sipariş etti, kullanıcı gerçekten tıkladığında arka planda bir sonraki web sayfası, sadece bu yüzü mobil cihazlarda bir uygulama açmayı hemen göstermek için geçiş yapmak için geçiş yapar. bir sonraki sayfa için problemi engelleme kaynaklarını

Spekülasyon kuralları API'sının başlangıcı, "ayar" web sitesi yapma kavramını, kullanıcılara talep etmeden önce hız sağlamaya hazır olan "proaktif" bir web sitesine değiştirmektir.

İllüstrasyonlar istemi: İlk 2 dinamo görüntü türü "normal" dır. İkincisi, web sayfası B'nin arka planda beklemesi ile "spekülasyon kuralları" dır. Ve kullanıcı tıkladığında hemen görüntülenecek

"Haber web sitesi%30 daha hızlı." Spekülasyon kuralları API kullanan devlerden gerçek vakalar.

Bu sadece kağıt üzerindeki teori değil. Ancak dünya sınıfı şirketi spekülasyon kuralları API'sını uyguladı ve şaşırtıcı sonuçları gördü. Le Figaro gibi ünlü Fransız haber web sitesi bu teknolojiyi denedi. Tarayıcının kullanıcıların en çok ilgilendiği bir Phender, Link, haber makalesi oluşturma kurallarını belirlediler. Sonuç, en büyük memnun boya (LCP) veya bir sonraki sayfanın ana içeriğini **%30'a kadar yükleme hızıdır! Okuyucuların daha önce hiç olmadığı gibi sürekli ve pürüzsüz bir deneyime sahip olmalarına izin vermek

Benzer şekilde, ev detayları sayfasıyla biberNder'ı kullanan büyük bir gayrimenkul web sitesi olan Realtor.com Sonuç, en önemli görevlerini yükleme hızıdır. ** Önemli ölçüde gelişti ** Bu, spekülasyon kuralları API'sının sadece geliştiriciler için bir oyuncak olmadığının bir kanıtıdır. , rekabet avantajları yaratabilen güçlü bir iş aracıdır .

İllüstrasyonlar istemi: Şirketin başarısı olan görüntüler (kurgusal bir logo olabilir) "+% 30 daha hızlı sayfa yükü" veya "Anında Gezinme" nin dikkate değer bir sonucu ile

Ne yapmak istiyorsun? Öğretim Kullanımı Spekülasyon Kuralları API. Kopya yapıştır!)!

İyi haber, Spekülasyon Kuralları'nı kullanmak API'sını düşündüğünüzden çok daha kolay. Deity programcısı olmanıza gerek yok. Aşağıdaki adımları izleyin:

Adım 1: Muhtemel olan hedef bağlantıyı belirtin.
Web sitenizde düşünün. En büyük tıklama şansı nerede? örneğin

• Blog sayfasındaki "Sonraki Makaleyi Okuyun"
• Kategoriden "ürün ayrıntılarına bakın"
• Sepetten "Ödeme Sayfasına" düğmesi

Adım 2: JSON şeklinde bir spekülasyon kuralları kuralı oluşturun.
Basit bir kod oluşturacağız. Tarayıcıya bu bağlantılarla ne yapacağını söylemek için

Örnek 1: Bağlantı olarak ayarlayın (Liste Kuralları)
. Tam olarak hangi sayfayı istediğinizi bildiğimizde


{
"Peprender": [
{
"kaynak": "liste",
"urls": ["/blog/formatlar-formlar", "/us-us"]
}
}
}


Blogdaki her bağlantı gibi belirttiğimiz biçime sahip her bağlantıyı etkilemek için kullanılan belge kurallarına göre tanımlanmıştır


{
"Peprender": [
{
"kaynak": "belge",
"nerede": {
"href_matches": "/blog/*"
},
"caziplik": "Orta"
}
]
}


*`` Heves '' ne kadar hızlı çalışacağını belirlemektir. `` Imediate '', `` `` orta ',' muhafazakar 'değeri var

Adım 3: Kodu web sitenize koyun.
Etikette oluşturulan JSON kodunu getirin.

‍