WordPress'te Anahtar İstekler Nasıl Önceden Yüklenir

Web yazı tiplerini, CSS'yi ve JavaScript'i kullanmak, web sitenizi daha benzersiz ve etkileşimli hale getirebilir. Ancak bu dosya türlerinin yüklenmesini beklemek, sitenizin ziyaretçileri için sinir bozucu olabilir.

Burası, WordPress'te anahtar isteklerinin önceden yüklenmesinin kullanışlı olabileceği yerdir. Tarayıcılara istek zincirinin başlarında bu dosya türlerini indirmelerini söyleyerek, tarayıcı içeriği oluşturmaya hazır olduğunda hazır olacaklardır. Buna karşılık, bu, algılanan sayfa yükleme sürenizi hızlandırabilir ve genel olarak daha iyi bir web deneyimi sağlayabilir.

Bugünün kılavuzunda, web siteniz için olası performans avantajlarının yanı sıra anahtar isteklerini önceden yüklemenin ne anlama geldiğini tartışacağız. Ardından, bunu WordPress sitenizde Google Yazı Tipleri, Harika Yazı Tipi, CSS ve JavaScript ile nasıl yapacağınızı açıklayacağız.

WordPress'te "anahtar isteklerini önceden yükle" ne anlama geliyor?

Birisi web sitenizi ziyaret ettiğinde, tarayıcıları sitenizin sunucusuna içeriğinizi oluşturan dosyaları isteyen birden çok HTTP isteği gönderir. Sunucunun bu isteklere yanıt vermeye başlaması ve tarayıcıya İlk Bayt Süresi (TTFB) olarak adlandırılan bilgileri göndermesi belirli bir süre alacaktır.

Ardından, tarayıcı site dosyalarınızdan içerik (PHP, JavaScript ve CSS) indirmeye ve ön uçta görüntülenebilir sayfaları (HTML) görüntülemek için işlemeye başlayacaktır. Bu işlem tamamlandıktan sonra, ziyaretçi tamamen yüklenmiş web sayfanızı görebilir.

Bir tarayıcı, bir sırayla içerik istemek ve oluşturmak için bir "istek zinciri" kullanır. Bu, daha büyük istekler içinde birden çok küçük istek adımı olduğu anlamına gelir ve sonuçta bir ziyaretçi sitenizdeki içeriği görüntüleyebilir.

Esasen, 'ön yükleme', bir kullanıcının tarayıcısına yükleme işleminin bitmesini beklemek yerine önce gerekli dosyaları indirmesini söylemek anlamına gelir. Bunlar tipik olarak yazı tipleri (özellikle web yazı tipleri), CSS, JavaScript ve bazen resimlerdir.

Anahtar istekleri benzersizdir, çünkü tarayıcınız genellikle bu dosyaları yükleme işleminin sonraki aşamalarına kadar istemez. Bu nedenle, tarayıcı o noktaya geldiğinde ve dosyaları talep etmesi gerektiğini keşfettiğinde bir gecikme olacaktır. Tarayıcıya önce bu dosyaları yüklemesini söyleyerek, bunları işlemesi gerektiğinde kullanışlı hale getirecektir.

Anahtar isteklerini önceden yüklemenin faydaları nelerdir?

Anahtar isteklerini önceden yüklemenin ana yararı, sitenizin algılanan performansını iyileştirmektir. Bu, bir kullanıcının tarayıcısının içeriğinizi daha hızlı oluşturabileceği ve ziyaretçilerin sitenizin daha hızlı olduğunu hissedeceği anlamına gelir. Ancak, siteniz bu şekilde görünmesini sağlamak için gerçekten sadece temel içeriği önceden yüklüyor.

Ayrıca isteklerin önceden yüklenmesi, Önemli Web Verileri puanlarınız için çok önemlidir. Bu Google ölçümleri, sitenizin yükleme performansını, etkileşimini ve görsel kararlılığını ölçer ve size web sitenizin genel kullanıcı dostu olduğunu gösteren bir puan verir.

Bunlar üç Temel Web Verisidir:

• En Büyük İçerikli Boya (LCP): Sayfanızdaki en büyük öğenin yüklenmesinin ne kadar sürdüğü.
• İlk Giriş Gecikmesi (FID): Tarayıcının, içeriğinizle kullanıcı etkileşimine yanıt vermesinin ne kadar sürdüğü.
• Kümülatif Düzen Kayması (CLS) : Sayfa yüklenirken öğelerin ne kadar hareket ettiği.

Özellikle, anahtar isteklerinin önceden yüklenmesi LCP puanınız üzerinde önemli bir etkiye sahip olabilir. Görüntüleri, yazı tiplerini ve diğer büyük dosyaları önceden yükleyerek bunların oluşturulması için gereken süreyi azaltabileceksiniz.

Ek olarak, ön yükleme First Contentful Paint (FCP) puanınızı etkileyebilir. Bu ölçüm, sayfanızdaki ilk HTML öğesinin görüntülenmesinin ne kadar sürdüğünü ölçer. Bu öğeyi önceden yükleyebilirseniz, tarayıcı içeriğinizin ilk bölümlerini daha hızlı gösterebilir.

Dahası, Google gibi arama motorları hızlı yüklenen ve etkileşimli içeriği tercih eder. Bu nedenle, daha iyi bir kullanıcı deneyimi sağlamanın ötesinde, bu performans metriklerini iyileştirmek web sitenizin Arama Motoru Optimizasyonunu (SEO) artırabilir.

Temel olarak, performans iyileştirmeleri, sitenizin sayfalarının sıralamada yukarılara çıkmasına ve içeriğinizin daha fazla kullanıcıya ulaşmasına yardımcı olabilir. Ayrıca, anahtar isteklerini önceden yüklemek nispeten kolaydır. Bu yazının devamında, bunu tam olarak nasıl yapacağınızı size göstereceğiz!

Anahtar isteklerini önceden yüklemenin dezavantajları var mı?

Ön yükleme istekleri, performans açısından harika bir fikir gibi gelebilir. Bununla birlikte, çok fazla öğeyi önceden yüklemeye çalışmak aleyhinize olabilir.

Bir tarayıcı aynı anda yalnızca bu kadar çok isteği işleyebilir. Bu nedenle, ona birden çok öğeyi önceden yüklemesini söylerseniz, sitenizin sayfa yükleme süresine karşı çalışan bir 'darboğaz' oluşturabilir.

Bu nedenle, en büyük etki için hangi öğelerin önceden yüklenmesi gerektiğini dikkatlice seçmeye değer. Çoğu durumda bunlar web yazı tipleri, CSS ve JavaScript olacaktır, çünkü bunlar genellikle en ağır dosyalardır.

Sitenizin anahtar isteklerini önceden yükleyip yüklemediğini nasıl kontrol edebilirsiniz?

Birkaç farklı araç, sitenizin istekleri önceden yükleyip yüklemediğini belirleyebilir ve bu optimizasyon tekniğinden yararlanabilecek öğeler önerebilir. Örneğin, PageSpeed ​​Insights, web sitenizdeki performans sorunlarını belirlemeye yönelik en popüler seçeneklerden biridir.

Bu ücretsiz aracı kullanmak için sitenizin URL'sini girmeniz ve Analiz Et'i tıklamanız yeterlidir. Bu, ayrıntılı bir performans raporu oluşturacaktır.

Performans fırsatlarını, teşhisleri ve başarılı denetimleri görmek için aşağı kaydırın. Önyükleme anahtarı istekleri önerisini bu bölümlerden birinde bulabilmeniz gerekir.

Siteniz ile PageSpeed ​​Insights arasında gidip gelmek istemiyorsanız, Google Lighthouse Chrome uzantısını yüklemeyi düşünün. Tarayıcı içinden raporlar oluşturmanıza ve bir sayfanın performans ölçümlerini görüntülemenize olanak tanır.

Benzer şekilde, GTMetrix herhangi bir site için ayrıntılı performans raporları oluşturabilir. Birden çok konumdan sayfaları analiz etmenize ve zaman içindeki performanslarını izlemenize olanak tanır.

GTMetrix'in Yapı sekmesi altında, anahtar isteklerini önceden yüklemenin sitenizin performansına yardımcı olup olmayacağını görebileceksiniz.

WordPress'te anahtar istekleri nasıl önceden yüklenir

Özel kod eklemek gibi WordPress sitenizde herhangi bir önemli değişiklik yapmadan önce, her zaman tam bir yedekleme yapmaya değer. Bu güvenlik önlemi, herhangi bir hata yaparsanız web sitenizin işlevsel bir sürümünün elinizin altında olacağı anlamına gelir.

Jetpack VaultPress Yedeklemenin kullanışlı olduğu yer burasıdır. Bu kullanıcı dostu eklenti, dosyaları, veritabanı tabloları ve WooCommerce ürün bilgileri dahil olmak üzere tüm verilerinizin kapsamlı yedeklerini otomatik olarak oluşturur. Bu yedeklemeler gerçek zamanlı olarak kaydedilir ve güvenli bir şekilde bulutta saklanır. Hareket halindeyken veya sitenize hiç erişemiyor olsanız bile bunları yalnızca birkaç tıklamayla geri yükleyebilirsiniz.

1. Yazı Tipleri

Bazen yazı tipleri, web sitenizdeki CSS ve JavaScript dosyaları dahil olmak üzere diğer dosyalara gömülebilir. Maalesef bu, sayfa oluşturma sürecini yavaşlatabilir.

İstekleri WordPress'te yazı tipleriyle önceden yüklemek için, bu kodu kopyalayıp sayfanızın <head> bölümüne yapıştırın:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

Yazı tipinizin adını “Yazı Tipi Adı” ile değiştirmeyi unutmayın. Ayrıca, tarayıcıya dosyayı harici bir sunucudan yüklemesi gerektiğini bildirdiğinden, yazı tipiniz üçüncü taraf bir kaynaktan geliyorsa "crossorigin" ifadesini dahil etmek önemlidir.

2. Google Yazı Tipleri

Google Yazı Tipleri, yaklaşık 1500 yazı tipi ailesinden oluşan açık kaynaklı bir kitaplık içerir. Sitenizde kullanmak için özel web yazı tipleri arıyorsanız, muhtemelen orada bir tane bulabilirsiniz.

Google Yazı Tiplerini kullanmak, sitenize benzersiz bir tasarım getirmeye yardımcı olabilir, ancak tarayıcının içeriği oluştururken yazı tipi dosyalarını da indirmesi gerekir. Yazı tipinize bağlı olarak bu, sayfa yükleme sürenizi artırabilir.

Google Yazı Tiplerini önceden yüklerken, önce onları "önceden bağlamak" da iyi bir fikirdir. Bu adım, tarayıcıya bir kaynağı almak için bir üçüncü taraf sitesine (örn. Google Yazı Tipleri) bağlanması gerekeceğini önceden bildirir.

Ek olarak, ön yükleme kodunuzu ekledikten sonra, stil sayfasına bir bağlantı eklemenizde fayda var. Bu şekilde, kullanıcınızın tarayıcısı söz konusu yazı tipini önceden yükleyemiyorsa, yine de onu oluşturabilecektir.

Aşağıdaki kodu sayfanızın <head> bölümüne eklemeniz yeterlidir:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

Kodunuzda, Google Yazı Tipinize bir bağlantı yerine “$fontURL”yi kullanmanız gerekecek. Örneğin, şöyle görünebilir:

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Ardından, düzenlemelerinizi kaydettiğinizden emin olun!

3. Harika Yazı Tipi

Font Awesome, kitaplığında hem ücretsiz hem de premium seçeneklerle özel simgeler ve yazı tipleri için harika bir kaynaktır. Menüler, üstbilgiler, altbilgiler ve içerik alanlarınızdaki tasarımı güçlendirmek için bu simgelerden bazılarını kullanabilirsiniz.

Google Yazı Tipleri gibi, Yazı Tipi Müthiş simgelerini önceden yüklemek, algılanan sayfa yükleme süresini hızlandırmak için iyi bir fikir olabilir. Bu kodu sayfanın <head> bölümüne eklemeniz yeterlidir:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Web sitenizde kullandığınız yazı tipi veya simge için dosya yolunu değiştirmeniz gerekecek. Ardından, değişikliklerinizi kaydedin!

4. CSS

Basamaklı Stil Sayfaları (CSS), bir web sayfasının stilini ve sunumunu belirlemek için HTML ile birlikte çalışan bir tasarım dilidir. Özel CSS ile farklı öğelerin görünümünü hızla değiştirebilirsiniz.

Web sitenizdeki stilize edilmiş her HTML sayfası, tüm CSS'lerinizle ilgili bir stil sayfasına sahip olacaktır. Bir tarayıcının bir web sayfası oluştururken bu dosyayı yüklemesi gerekir, bu nedenle tarayıcıya bu kaynağı önceden yüklemesi gerektiğini söylemeye değer.

Neyse ki, CSS'yi önceden yüklemenin kolay bir yolu var. Bu kodu sayfanızın <head> bölümüne eklemeniz yeterlidir:

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

Stil sayfasının adını "styles.css" olarak değiştirdiğinizden emin olun. Ayrıca, bu kodun Google Chrome'da çalışacak olmasına rağmen tüm tarayıcılar tarafından desteklenmediğini unutmayın.

5. JavaScript

JavaScript, WordPress'te kullanılan yaygın betik dillerinden bir diğeridir. Animasyonlar, hareketli resim döngüleri ve otomatik olarak güncellenen beslemeler gibi dinamik içerikler oluşturmanıza olanak tanır.

JavaScript oluşturmak genellikle daha karmaşıktır çünkü dosyaları nispeten ağırdır ve içeriği görüntülemek için daha uzun bir işlem gerektirir. Bu nedenle, bir tarayıcıya ağır JavaScript'i önceden yüklemesini söylemek, sayfa yükleme süresini hızlandırmak için faydalı olabilir.

CSS'de olduğu gibi, sayfanın <head> bölümüne şu basit kod satırını eklemeniz yeterlidir:

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

Daha önce olduğu gibi, JavaScript dosyasının adı yerine "ui.js" yazın ve değişikliklerinizi kaydedin.

Bonus: Önemli Web Verilerini iyileştirmek için ücretsiz bir eklenti kurun

Ön yükleme istekleri, WordPress sitenizin Önemli Web Verileri puanlarını iyileştirmek için kullanabileceğiniz tekniklerden yalnızca biridir.

Daha kapsamlı (ve ücretsiz!) bir çözüm arıyorsanız, Jetpack Boost'u yüklemeyi düşünün. Bu araç, WordPress.com'un arkasındaki aynı şirket olan Automattic tarafından geliştirilmiştir.

Bu kullanıcı dostu eklenti, tüm web sitenizi tarar ve size masaüstü ve mobil cihazlarda bir puan verir. Ayrıca Jetpack Boost, yalnızca üç Temel Web Yaşamsal Öğesi için yararlı değildir. Optimizasyon yöntemleri, Etkileşim Süresi (TTI) ve Toplam Engelleme Süresi (TBT) dahil olmak üzere diğer ölçümleri iyileştirebilir.

CSS yüklemesini optimize etmek, gerekli olmayan JavaScript'i ertelemek ve görüntüleri yavaş yüklemek için basit bir geçiş sistemi kullanabileceksiniz. Eklentinin premium sürümü, web sitenizde her değişiklik yaptığınızda otomatik olarak kritik CSS oluşturur.

Alternatif olarak, Jetpack Complete, WordPress sitenizi tamamen yeni bir seviyeye taşıyabilir. Bu plan, hem bant genişliğinden tasarruf sağlayabilen hem de sayfa yükleme sürenizi iyileştirebilen Jetpack'in görüntü İçerik Teslim Ağı'na (CDN) erişim de dahil olmak üzere birden fazla performans aracı içerir. Ayrıca, gelişmiş WordPress güvenlik ve geliştirme araçlarına sahip olacaksınız.

Anahtar isteklerini önceden yükleme hakkında sık sorulan sorular

Bu noktada, WordPress'te anahtar isteklerinin nasıl önceden yükleneceği konusunda iyi bir anlayışa sahip olmalısınız. Yine de emin olmak için bazı sık sorulan soruları gözden geçireceğiz!

Ön yükleme istekleri kullanıcı deneyimini iyileştirir mi?

Ön yükleme istekleri, sitenizin algılanan yükleme sürelerini azaltarak kullanıcı deneyimini iyileştirebilir. Ziyaretçiler, içeriğinizin oluşturulması için uzun süre beklemek zorunda kalmayacağından, hayal kırıklığına uğrama olasılığı daha düşük olacak ve potansiyel olarak farklı bir site için web sitenizi terk edeceklerdir.

Ön yükleme istekleri, Önemli Web Verilerini iyileştirir mi?

WordPress'te anahtar isteklerini önceden yüklemek, özellikle En Büyük İçerikli Boyama (LCP) söz konusu olduğunda, Önemli Web Verileri puanlarınızı artırabilir. Aslında, hangi öğeleri önceden yükleyeceğinize karar verirken, 'en büyük' ​​veya 'ana' içeriğinizi dahil etmek akıllıca olacaktır, çünkü bu içerikten en çok fayda sağlayacak şey bu olacaktır.

Anahtar isteklerini önceden yükle ve kritik varlıkları önceden yükle

Anahtar isteklerini önceden yüklemenin, kritik varlıkları önceden yüklemekle aynı anlama geldiğini belirtmek gerekir. Her iki terim de bir tarayıcıya, bir sayfanın içeriğini daha hızlı işlemek için önceden belirli kaynakları yüklemesini söylemeyi ifade eder.

Ön yükleme, ön bağlantı ve ön getirme

Ön yükleme, ön bağlantı ve önceden getirme benzer kavramlar gibi görünebilir, ancak aslında biraz farklı anlamlara gelirler. Bunların tümü, bir tarayıcıya içeriğin hangi sırayla yükleneceği talimatını veren etiketlerdir, ancak farklı işlevlere hizmet ederler.

Birincisi, ön yükleme, bir kullanıcının tarayıcısında sayfayı oluşturmak için gereken içeriğin yüklenmesini içerir. Bir kaynağı birkaç saniye içinde hazır hale getirecek olan yüksek öncelikli bir etikettir.

Buna karşılık, önceden getirme, yüklenmesi gerekebilecek sonraki öğelerle ilgilidir. Tarayıcı kaynakları önceden arayacak ve önbelleğinde saklayacaktır. Çok düşük öncelikli bir etikettir, bu nedenle acil kaynaklar için kullanmamalısınız.

Son olarak, bir tarayıcıya belirli bir etki alanına bağlanmasını söylemek istediğinizde ön bağlantı kullanılır. Siteniz belirli bir üçüncü taraf siteden (Google Yazı Tipleri gibi) bir kaynak kullanıyorsa, ön bağlantı, tarayıcıya yükleme işleminin bir noktasında o etki alanına bağlanması gerekeceğini söyler.

Sitemin performansını iyileştirmek için başka ne yapabilirim?

Aşağıdakiler de dahil olmak üzere çeşitli görevler, WordPress sitenizin performansını artırmanıza yardımcı olabilir:

• İçeriğinizi dünya çapındaki ziyaretçilere sunmak için bir CDN kullanma
• Kullanılmayan CSS'yi erteleme (veya silme)
• Oluşturmayı engelleyen kaynakları ortadan kaldırma
• CSS ve diğer kaynakları küçültme
• Daha az HTTP isteği yapma

Ayrıca, size özel önbelleğe alma, çalışma süresi garantisi ve dünya çapında geniş bir veri merkezi ağı gibi performans optimizasyonu özellikleri sağlayacak yüksek kaliteli bir WordPress barındırma seçmeye değer.

Anahtar isteklerini önceden yükleyerek WordPress sitenizin performansını artırın

Sayfa yükleme süreleri, web sitenizin kullanıcı deneyimini ve arama motoru sıralamalarını önemli ölçüde etkileyebilir. Bu nedenle, bir tarayıcının sitenizin içeriğini görüntülemesi için gereken süreyi hızlandırmak için elinizden gelen her şeyi yapmak isteyeceksiniz.

Sayfalarınızda anahtar istekleri önceden yüklediğinizde, bir ziyaretçinin tarayıcısında hazır kaynaklar (yazı tipleri, CSS ve JavaScript gibi) olacaktır. Ardından, içeriğinizin yüklenmesi ve kullanıcıların erişimine açılması sırasında herhangi bir gecikme yaşanmaz.

Anahtar isteklerini önceden yüklemek, sitenizin performansını iyileştirmeye yönelik yalnızca bir adımdır. Jetpack Boost'u kullanarak, web sitenizi görüntüleri yavaş yükleyecek, gerekli olmayan JavaScript'i erteleyecek ve daha fazlasını yapacak şekilde kolayca yapılandırabilirsiniz. Daha da iyisi, eklentinin kullanımı ücretsizdir. Jetpack Boost'a bugün göz atın!