Web Sayfalarını Anında Yüklemek İçin Spekülasyon Kuralları API'si Nasıl Kullanılır?

2024, anında yüklemenin web performansında yeni standart haline geleceği ve çevrimiçi işletme sahiplerinin kulak kabartacağı bir yıl olacak şekilde şekilleniyor.

Ancak hızlıdan anlık duruma geçiş bir süredir üzerinde çalışılıyor.

2009 gibi erken bir tarihte, daha hızlı ve daha verimli sayfa yükleme arayışı, Chromium ekibinin ilk kaynak ipuçlarını oluşturmasına yol açtı ve bu ipuçlarına daha sonra rel=”prerender” bağlantısı eklendi.

Kullanıcı bu sayfalara gitmeden önce sonraki sayfaların arka planda yüklenmesini içerdiğinden ve geçiş gerçekleştiğinde daha hızlı görüntü oluşturulmasını sağladığından, performans üzerinde önemli bir etkisinin olması bekleniyordu.

Ancak önceden oluşturmanın bu sürümü yeterince verimli olmadı ve 2017'de kullanımdan kaldırıldı.

Bugün hızla ilerlersek Google, Spekülasyon Kuralları API'sinde umut verici gelişmeler başlattı; bu, tam ön işleme ve gerçekten kusursuz web taramasının kilidini açma konusunda daha karmaşık bir yaklaşıma olanak tanıyor.

Google'ın Spekülasyon Kuralları API'si Nedir?

Spekülasyon Kuralları API'si, spekülatif yükleme stratejileri aracılığıyla web sayfası yükleme performansını artırmak için Google tarafından geliştirilen JSON tanımlı bir API'dir.

Spekülatif yükleme, sonraki sayfa gezintileri için kaynakların tahmin edilmesini ve önceden yüklenmesini içerir, bu da daha hızlı oluşturma sürelerine ve gelişmiş kullanıcı deneyimlerine yol açar. Google, geliştiricilere hangi belgelerin önceden getirilmesi veya önceden oluşturulması gerektiğini belirtmenin daha esnek ve anlamlı bir yolunu sağlamak için bu API'yi kullanıma sundu.

Spekülasyon Kuralları API'sine ilişkin önemli ayrıntılar:

• Belge URL'lerini Hedefleme: Belirli kaynak dosyalarını hedefleyen geleneksel önceden getirme mekanizmalarının aksine, Spekülasyon Kuralları API'si belge URL'lerine odaklanır. Bu, onu tek sayfalı uygulamalar (SPA'lar) yerine özellikle çok sayfalı uygulamalar (MPA'lar) için uygun kılar.

• Önceden Oluşturma ve Önceden Getirme: API, hem önceden oluşturma hem de önceden getirme stratejilerini destekler. Önceden oluşturma, içeriğin, kullanıcı sayfaya gittiğinde neredeyse anında etkinleştirilmeye hazır, görünmez bir sekmeye getirilmesini, oluşturulmasını ve yüklenmesini içerir. Öte yandan önceden getirme, belirtilen sayfa kaynaklarını (örneğin, belge, resim, komut dosyası vb.) indirip kaydeder, böylece kullanıcı daha sonra bu sayfalara gittiğinde yükleme sürelerini optimize eder.

• Tarayıcı Desteği: API şu anda Chrome, Edge, Opera, Chrome Android, Opera Android ve WebView Android dahil tüm Chromium tabanlı tarayıcılarla uyumludur. Tam uyumluluk dökümü için Mozilla'nın belgelerine bakın:

Aşağıdaki kodla tarayıcıların API'yi destekleyip desteklemediğini de kontrol edebilirsiniz:

• Kullanımdan Kaldırılan Özelliklere Alternatif: Daha iyi performans ve daha etkileyici sözdizimi sunarak, kullanımdan kaldırılan yalnızca Chrome özelliği gibi eski teknolojilere bir alternatif olarak hizmet eder .
• Güvenlik Konusunda Dikkate Alınması Gereken Hususlar: Siteler arası önceden getirme işlemlerinin kullanıcı gizliliğini korumaya yönelik sınırlamaları vardır. Siteler arası önceden getirme, yalnızca kullanıcının hedef site için ayarlanmış çerezleri yoksa çalışır, bu da kullanıcı etkinliğinin olası izlenmesini engeller.
  

Web Sitenizde Neden Spekülasyon Kuralları API'sini Kullanmalısınız?

Spekülasyon Kuralları API'si,kusursuz tarama deneyimleri için sayfaların neredeyse anında yüklenmesinisağlar.

İyileştirilmiş sayfa yükleme süreleri,artan kullanıcı memnuniyeti ve potansiyel SEO avantajları,geliştiricilerin bu teknolojiyi benimsemesinin zorlayıcı nedenleridir.

Sayfa gezintileri arasındaki gecikmeyi azaltarak kullanıcılar web sitesini daha akıcı ve duyarlı olarak algılar. Bu, sitenizinÖnemli Web Verileri'nde açıkça görülebilir; burada En Büyük İçerikli Boya (LCP), Kümülatif Düzen Kayması (CLS) ve Sonraki Boyayla Etkileşim (INP) büyük ölçüde azalır.

Anında gezinme deneyimleri , daha düşük hemen çıkma oranları ve artan kullanıcı tutma oranlarınıberaberinde getirir; bunlar, çevrimiçi platformunuzun başarısı için hayati ölçütlerdir. Böylece Spekülasyon Kuralları API'sini entegre etmenin stratejik değerinin altı çiziliyor.

Spekülasyon Kuralları API'si Nasıl Çalışır?

Google'ın Spekülasyon Kuralları API'si, belirli kaynak dosyaları yerine belge URL'lerini hedeflemek için tasarlanmıştır. Spekülasyon Kuralları API'si, hangi belgelerin önceden getirilmesi veya önceden işlenmesi gerektiğini belirlemek için daha anlamlı ve yapılandırılabilir bir sözdizimi sunar.

Bir komut dosyası türü = "speculationrules" içinde JSON biçiminde tanımlanan bir yapıyla geliştiriciler, hem önceden oluşturma hem de önceden getirme için kurallar belirleyebilir. Bu gelişmiş esneklik, spekülatif yüklemenin ince ayarına olanak tanır.

Son zamanlarda Google, Chrome 121'deki Spekülasyon Kuralları API'sinde artık otomatik bağlantı bulma seçeneği sunan yeni bir geliştirmeyi duyurdu.

Bu şu şekilde yapılır:

• Belgenin kaynağını belirtme
• Sayfadaki bağlantıları URL'lere veya CSS seçicilere göre seçme
• Bir "heveslilik" düzeyi belirtme - istekli (hemen), orta (200 ms'lik fareyle üzerine gelindiğinde) ve muhafazakar (farede veya dokunarak)

Ancak Spekülasyon Kuralları API'sinde yeniyseniz öncelikle aşağıdaki farklı kurulumları test etmenizi öneririz.

Google'ın Spekülasyon Kuralları API'si Nasıl Kullanılır?

Spekülasyon Kuralları API'si, geliştiricilerin önceden oluşturma ve önceden getirme süreçlerini optimize etmek için yapılandırılmış bir yaklaşım izlemesine olanak tanır.

Kurmak

İlk önce bir script type = "speculationrules" öğesi oluşturmak ve bunun içindeki bir JSON yapısında spekülasyon kurallarını tanımlamakla başlar.

Ana çerçevenin başlığına veya gövdesine spekülasyon kuralları eklenebilir.

Önemli: Alt çerçevelerdeki spekülasyon kurallarına göre işlem yapılmaz ve önceden oluşturulmuş sayfalardaki spekülasyon kurallarına yalnızca kullanıcı sayfanın kendisine gittiğinde işlem yapılır.

Spekülasyon kuralları statik veya dinamik olarak dahil edilebilir.

• Statik kurulum, sayfanın HTML'sinde yapılır (bir sonraki eylemin kesinliğinin yüksek olduğu web siteleri için mükemmeldir; örneğin, bir haber web sitesi günün öne çıkan anlarını önceden sunmak isteyebilir)
• Dinamik kurulum JavaScript aracılığıyla yapılır (kişiselleştirilmiş kullanıcı deneyimlerinin yoğun olarak kullanıldığı web siteleri için uygundur)

Önemli: Dinamik kurulumu tercih ederken, gelecekteki gelişmeler ve gelecekte kullanıma sunulacak kullanım senaryoları için her zaman destek belgelerine bakın.

Tarayıcıya hangi URL'lerinönceden oluşturulacağını bildirmek için sayfalarınıza JSON talimatları ekleyebilirsiniz:

Benzer şekilde, önceden getirme için aşağıdaki JSON talimatlarını ekleyin:

Bir sayfaya birden fazla spekülasyon kuralı eklemek mümkündür; bu durumda tarayıcıya aşağıdaki düzeylerden herhangi birinde talimat verebilirsiniz:

• URL'lerin listesi
• Çoklu spekülasyon kuralları
• Bir dizi spekülasyon kuralı içinde birden fazla liste
  

Önceden Oluşturma/Ön Getirme İçin Rotaları Belirleme

Spekülatif yüklemenin ince ayarı, önceden oluşturma ve önceden getirme için rotaların belirtilmesini içerir. Geliştiriciler, sayfaları önemlerine veya kullanıcı gezinme olasılıklarına göre kategorilere ayırarak spekülatif yükleme stratejisini optimize edebilir.

Ancak güvensiz olduğu düşünülen bazı rotalar vardır:

• Oturum kapatma URL'leri;
• Dil değiştirme URL'leri;
• "Sepete ekle" URL'leri;
• Sunucunun SMS gönderilmesini istediği oturum açma akışı URL'leri (örneğin, iki faktörlü kimlik doğrulama (2FA) gerektiğinde);
• Sunucu tarafı reklam dönüşümü izlemeyi başlatan URL'ler;
• Örneğin aylık ücretsiz makale izinlerini kullanarak kullanıcının kullanım sınırlarını tetikleyen URL'ler.

Bu tür sayfaların önbelleğe alınmasından hariç tutulmasına benzer şekilde, bunların önceden getirilmesinden ve önceden oluşturulmasından kaçınmanın nedeni de dinamik değişkenlerle ilgilidir.

Bunlar, değerlerin kullanıcı eylemlerine göre güncellendiği içeriğe duyarlı sayfalardır ve arka planda önceden yüklendiğinde sayfanın güncelliğini kaybetmiş bir durum gösterme riski çok yüksektir.

Doğruluk ve Takaslar

Barry Pollard'ın “Sayfaları Anında Yükleme” konulu web seminerimizde belirttiği gibi:

Önceden getirme, birçok web sayfanızda çoğaltabileceğiniz en güvenli yaklaşım olsa da, yalnızca belirli kaynakların indirilmesini içerdiğinden en düşük ödülü de sunar.

Öte yandan, tam sayfa önceden oluşturucular daha yüksek ödüller sunar ancak aşağıdakileri yapabildikleri için dikkatli kullanılmalıdırlar:

• Arka planda yalnızca sınırlı sayıda görevi çalıştırabildiği için tarayıcıyı bunaltın.
• Daha yavaş ağlardaki veya sınırlı kaynaklara sahip cihazlardaki kullanıcılar için performans düşüşüne yol açabilecek önemli miktarda bant genişliği ve CPU kaynağı tüketin.
• Ziyaretçinin sayfaya gitmemesi daha yüksek kaynak israfına yol açar.

Önceden oluşturmayı doğru şekilde ayarlamak için kullanıcılarınızın davranışlarını dikkate almalı ve web sitenizdeki yaygın gezinmeleri analiz etmelisiniz. Isı haritalarını ve Google Analytics akış şemalarını kullanarak önemli rotaları belirleyebilir ve tahmine dayalı yükleme denemelerinizi başlatabilirsiniz.

Bir sayfanın önceden oluşturulup oluşturulmadığını kontrol etmek için PerformanceNavigationTiming'in sıfır olmayan bir activeStart girişini kullanın. Bu daha sonra Özel Boyut kullanılarak kaydedilebilir:

Bu şekilde, önceden oluşturma ve diğer gezinme türleri arasındaki oranı ölçebileceksiniz.

Ek olarak, spekülasyon kurallarını optimize etmek, daha yüksek isabet oranlarına ve daha düşük kaynak israfına ulaşmak için sonradan ziyaret edilmeyen, önceden oluşturulmuş sayfaların sayısını ölçmek de önemlidir.

Bunu, önceden oluşturmanın istendiğini belirtmek için spekülasyon kuralları eklendiğinde bir analiz olayı tetikleyerek de yapabilirsiniz. Daha sonra bu etkinliklerin sayısını gerçek ön oluşturma sayfa görünümleriyle karşılaştırın.

Veya yapabilirsiniz…

NitroPack Tarafından Navigasyon Yapay Zekası ile Otomatik Sayfa Önceden Oluşturmayı Düşünün

Navigasyon AI, NitroPack'in, müşteri yolculuğu sırasında tam sayfaları önceden oluşturmak için kullanıcı davranışını aktif olarak tahmin eden ve analiz eden, AI destekli web tarama iyileştiricisidir.

Navigasyon yapay zekası, site sahiplerinetek bir satır kod yazmadan masaüstü ve mobil cihazlarda anında gezinme deneyimleri sunma gücü vererek müşteri etkileşimini ve dönüşüm oranlarını artırır.

Not: Navigasyon AI ayrı bir üründür ancak NitroPack ile %100 uyumludur ve site sahipleri için avantajları daha da artırır.

Navigasyon AI için bekleme listesine katılın ve sitenizde anında kullanıcı deneyimlerinin kilidini açın →

NitroPack'in Navigasyon Yapay Zekası, Spekülasyon Kuralları API'sini temel alır ve önceden oluşturma senaryolarında yüksek isabet oranına ve kaynak verimliliğine ulaşmak için otomatik bir çözüm sunar.

Gezinme Yapay Zekası, verilere dayalı olarak sayfa yükleme sırasında yapay zeka ile geliştirilmiş başlangıç ​​tahminleri uygulayarak ve kullanıcı davranışını analiz ederek tahminleri ayarlayabilir ve Spekülasyon Kuralları API'sine gerçekten ziyaret edilecek sayfaları önceden oluşturması için doğru şekilde talimat verebilir.

Sonuç, bu sayfanın arka planda zaten boyalı olması sayesinde sayfanın anında yüklenmesidir. Mobil cihazlarda Navigasyon AI, kullanıcının sayfada nerede olduğunu belirlemeye dayanır ve küçük görünüm alanı göz önüne alındığında, nereye dokunacaklarını kolayca tahmin edebilir.

1.200 web sitesini temel alan Navigasyon Yapay Zekası şimdiden olağanüstü sonuçlar gösteriyor.

• Sonuç #1: Navigasyon AI kullanan web sayfaları, Navigasyon Yapay Zekası olmayan 6.12 saniyeye kıyasla sürekli olarak ~2,86 saniyelik bir yükleme süresi gösteriyor

• Sonuç #2: Navigasyon AI ile önceden oluşturulmuş sayfalar %85'lik bir LCP iyileşmesi (3,1 saniyeden 0,4 saniyeye) ve %80'lik bir CLS iyileşmesi (0,3 saniyeden 0,06 saniyeye) gösteriyor.Önceden getirilen sayfalar için Navigasyon AI, LCP'yi %52 artırır (3,1 saniyeden 1,5 saniyeye).

• Sonuç #3: Navigasyon AI ile tüm web sitesine ilişkin performans ölçümleri önemli ölçüde iyileşiyor: LCP %15, CLS %8 ve TTFB %26

Bekleme listemize katılarak Navigasyon Yapay Zekasına erişin →

Spekülasyon Kuralları API'si ve WordPress

"Anında Sayfa Yükleme" web seminerimizde Google'ın Geliştirici İlişkileri Mühendisi Adam Silverstein, WordPress Temel Performans ekibinin yeni Spekülasyon Kuralları API'sinin daha istikrarlı uygulamaları üzerinde çalıştığını açıkladı.

Şu anda odak noktası, API'nin işlevselliğinin küçük bir kısmını, ekosistemdeki site sahiplerinin ve geliştiricilerin, API'yi çekirdeğin bir parçası haline getirmeden önce verimliliğini ve benimseme oranını test etmeleri için kullanılabilir hale getirmeye devam ediyor. WordPress kullanıcılarının şu ana kadar yararlanabileceği şeyler:

• Performance Lab eklentisindeki bir modül
• Yalnızca Spekülasyon Kuralları API'sinin ön ucunu uygulayan bağımsız bir eklenti (muhafazakar "heves" düzeyini uygular, ancak geliştiriciler davranışı değiştirmekte özgürdür)

WP-admin rotaları varsayılan olarak hariç tutulur, ancak öncelik vermek istedikleri rotaları belirlemek WP geliştiricilerine kalmıştır.

WordPress Çekirdek Performansı ekibi ayrıca ekosistemdeki eklentiler içinde daha karmaşık uygulamalar üzerinde çalışıyor. Bu, geliştiricilerin hangi rotaların öncelikli olduğunu ve hangilerinin yapılmayacağını belirlerken yapması gereken bazı ağır işleri hafifletmeyi amaçlıyor.

Spekülasyon Kurallarında Hangi İyileştirmeler Geliyor?

Şu anda spekülasyon kuralları aynı sekmedeki sayfalarla sınırlıdır ancak bu kısıtlamaların azaltılmasına yönelik çalışmalar devam etmektedir.

Önceden oluşturma varsayılan olarak aynı kaynak sayfalarla sınırlıdır. Bununla birlikte, Chrome 119'daki yeni bir güncelleme artık aynı siteler arası kökene sahip sayfalar için önceden oluşturmayı destekliyor ve bu da bir HTTP üstbilgisi aracılığıyla kaydolmayı gerektiriyor.

Gelecek sürümler, önceden oluşturmayı çapraz kaynak sayfalara genişletebilir ve yeni sekmelerde buna izin verebilir. Spekülasyon Kuralları API'si genişleyecek, belge kuralları için puanlar ve söz dizimi sunacak ve fareye basıldığında bağlantıların önceden oluşturulması gibi daha fazla esneklik sağlayacak şekilde ayarlanmıştır.

Chrome'da devam eden deneyler, ek özellikleri araştırıyor ve siteler, gelecekteki potansiyel eklemeleri test etmek ve bunlar hakkında geri bildirim sağlamak için bir kaynak denemesine katılabilir.