WordPress Site Performansını Artırmak İçin Rel= Ön Yükleme Bağlantı Etiketi Nasıl Kullanılır

WordPress sitenizin performansını artırmak istiyorsanız, bunu yapmanın bir yolu rel=”preload” bağlantı etiketini kullanmaktır. Bu etiket, tarayıcıya, gerçekten ihtiyaç duyulmadan önce belirli varlıkları yüklemeye başlamasını söylemenizi sağlar. Örneğin, sayfanın ana içeriği yüklenmeden önce web sitenizin logosunu önceden yüklemek için kullanabilirsiniz.
WordPress sitenize rel=”preload” etiketi eklemek oldukça kolaydır. Sitenizin başlığına biraz kod eklemeniz yeterlidir. Bu yazıda, bunu nasıl yapacağınızı göstereceğiz.

WordPress'te Anahtar İstekleri Nasıl Önceden Yüklerim?

WordPress'te Autoptimize kullanarak anahtar istekleri yüklemek için Ayarlar > Otomatik Optimize Et > Anahtar isteklerini önceden yükle seçeneğine gidin. WordPress kontrol panelinize bir bağlantı üzerinden erişilebilir. Önceden yüklenen özel istekler kutusu mevcut olacaktır. Önyükleme anahtarı istekleri uyarısı sonucunda aldığınız bağlantıları o kutuya girin.

PageSpeed, yararlanmanız gereken bir fırsatı yüklemenizi önerebilir. Sayfanızı işlemek için, kodunuzun içinde 3 seviye olarak adlandırılan ve görüntülenmeden önce yüklenen dosyalar vardır. Başka bir deyişle, bitiş dosyası başka bir dosya tarafından istenir ve doğrudan bir WordPress sitesinin HTML'sinde bulunmaz. PageSpeed'i kullanarak sitenizin performansıyla ilgili sorunları belirleyebilirsiniz. Bir yazı tipi veya dosya yüklediğinizde, görünmesi biraz zaman alabilir. Yazı tipini kendileri için anlamadan önce yüklediğimizde, buna ihtiyaç duyacaklarını söylüyoruz. Bir dosyayı yüklerken, onu link rel=preload gibi belirli bir sözdizimi ile oynatma listesine eklemelisiniz.

Belirli bir dosya istendiğinde, tarayıcı özel bir bağlantı etiketi algılar ve onu indirmeye başlar. Çok fazla dosyaya öncelik verdiğinizde, diğer önemli dosyaları geciktiren bir darboğazla sonuçlanabilir. Bu durumda, WP Rocket Google yazı tiplerini önceden yükler, bu nedenle özel bir şey yapmanız gerekmez. Kullanılmayan CSS'yi Kaldır özelliğini kullanırsanız, yazı tiplerinizi bu özellikle önceden yükleyebilirsiniz. İsterseniz bu dosyaları yerel olarak da barındırabilirsiniz. Sonuç olarak, web sitenizi Google'ın barındırması yerine, barındırıcılarınız Google tarafından yönetilen bir sunucuda barındırılacaktır.

Bir WordPress eklentisi, başlık dosyasını düzenleyerek manuel olarak veya WordPress eklentisi WP Rocket aracılığıyla yazı tiplerini yükleyebilir. Google PageSpeed ​​Insights, WP Rocket aracılığıyla yazı tipi talep etmediğinden, bunların WP Rocket ile yüklenmesi önerilir.

WordPress'te Bağlantılar Nasıl Önceden Yüklenir

Blogunuzun ayarlarına gidin, 'Bağlantılar'ı tıklayın ve 'Bağlantılar' başlığının altındaki bağlantıyı 'Önceden yükle metin kutusuna' yapıştırın.

Link Rel'de Ön Yükleme Nedir?

Preload in link rel, HTML5'te tanıtılan ve web geliştiricisinin tarayıcıyı sayfa yükleme sırasında gerekli olacak dosyalar hakkında bilgilendirmesine olanak tanıyan yeni bir standarttır. Bu şekilde tarayıcı, HTML'nin ayrıştırılmasını beklemek yerine bu dosyaları hemen yüklemeye başlayabilir. Bu, özellikle çok sayıda harici dosya gerektiren sayfalar için sayfa yükleme süresini iyileştirebilir.

Link rel=”preload”, bu özniteliğin hangi bağlantıya öncelik verileceğini belirtmek için kullanılır. Ön yükleme, tarayıcının ön yüklemeyi kullanabilmesi için yapması gereken bir şeydir ve bunu yapıp yapmamaya karar verebileceği bir şeydir. Bu, W3C spesifikasyonundaki preload anahtar sözcüğünün son derece ayrıntılı bir açıklamasıdır.

Önceden getirmeyi kullanmanızın birçok nedeni vardır. Örneğin, bir sayfada sık kullanılan kaynakları önceden getirmeyi tercih etmek, bunların ağdan yüklenmeme olasılığını azaltır. Ayrıca, bellek şişkinliğini hafifletmek için yalnızca kısa bir süre için gerekli olan kaynakları önceden almak isteyebilirsiniz. Önceden getirme iki şekilde gerçekleştirilebilir: kaynak önceden getirme ve önbellek önceden getirme. Bir belgenin önceden getirme kaynakları, belgenin belgeleri önceden işlemek için kullandığı kaynakları ifade eder. Ayrıca, diğer dosya ve nesne türlerinin yanı sıra görüntü dosyaları ve stil sayfaları oluşturmak için kullanılabilecek komut dosyaları ve modüller de vardır. Öte yandan, önceden getirme, tarayıcının önbelleğinde kullandığı kaynakları önceden getirme anlamına gelir. Hâlâ önbelleğe alınmış olan AJAX çağrılarının yanı sıra HTML5 gibi kaynakları içerir. Önceden getirme algoritmaları çeşitli şekillerde kullanılabilir. En Az Son Kullanılan (LRU) algoritması, en az kullanılmış kaynakları seçmek için en yaygın yöntemlerden biridir. Rastgele Erken Yayın (RER) algoritması, kaynakları dosya adlarına göre seçen başka bir yaygın önceden getirme algoritmasıdır. Önceden getirmenin sonuçlarından biri, azaltılmış bir kullanıcı deneyimidir. Genel olarak, gerekli olabilecek kaynakları önceden getirmek, bir tarayıcının bunların kullanılabilir olmasını beklemesi için gereken süreyi azaltır. Sonuç olarak, kullanıcının bu yöntemi kullanarak sayfanın yüklenmesini beklemek için daha az zamanı olacaktır. Sayfa yüklendiğinde yazar, medyanın yüklenme şeklini önceden yükleme özniteliği atayarak belirleyebilir. Ön yükleme, yazarın tarayıcıya bir web sitesinin nasıl görünmesi ve hissettirmesi gerektiği konusunda bilgi verdiği bir yöntemdir. Önceden getirme, çeşitli şekillerde faydalı olabilir. Önbellek tercih edilir.

Daha Hızlı Sayfa Yükleme için Kaynakları Önceden Yükleme

Ana belge yüklenene kadar belirli kaynaklar önceden yüklendiğinde, bu, sayfa yükleme hızını artırır. Yazar, ana belgenin yüklenmesi bitene kadar belirli kaynakların gerekli olmayacağına inanıyorsa faydalı olabilir. Preload niteliği, bağlantısı olan herhangi bir öğede kullanılabilir. Hayır veya otomatik olabilen önyükleme özniteliği, bir Boolean değerini temel alır. Bağlantının içeriğine göre hangi kaynakların önceden yükleneceğini belirlemek için tarayıcıyı otomatik olarak ayarlayın. Ön yükleme özelliği, hiçbiri olarak ayarlandığında önyüklemeyi devre dışı bırakır.

Eklentiler Olmadan WordPress Siteme Nasıl Yükleyici Eklerim?

Eklentiler olmadan WordPress sitenize bir yükleyici eklemek basit bir işlemdir. Öncelikle WordPress temanızın klasöründe “loader.php” adında yeni bir dosya oluşturmanız gerekecek. Ardından, aşağıdaki kodu kopyalayıp yeni dosyanıza yapıştırın:
/**
* Yükleyici
*
* @paket WordPress
* @alt paket Yükleyici
* @author Burada Adınız
*
* @internal Bu kod, WordPress sitenize komut dosyaları yüklemek içindir
* Eklentiye ihtiyaç duymadan.
*/
/**
* Enqueue Scriptleri
*
* WordPress ön ucu için komut dosyalarını kaydeder ve sıraya koyar.
*/
function wp_enqueue_scripts() {

// Komut Dosyalarını Kaydet
wp_register_script('jquery-ui-core', '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', dizi( 'jquery'), '1.9.1' , doğru );

// Komut Dosyalarını Sıraya Al
wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'wp_enqueue_scripts');
? >
Bu kod, WordPress sitenizdeki jQuery UI Core komut dosyasını kaydedecek ve sıralayacaktır. Ardından, bir eklentiye ihtiyaç duymadan WordPress sitenizde jQuery UI Core komut dosyasını kullanabilirsiniz.

Html'de Bir Sayfayı Nasıl Önceden Yüklersiniz?

*link rel=preload kullanarak bir kaynağı (komut dosyası veya stil sayfası gibi) en kısa sürede indirebilir ve önbelleğe alabilirsiniz. Bu, sayfayı yükledikten sonra birkaç saniye içinde o kaynağa ihtiyacınız olduğunda kullanışlıdır; Sayfayı hızlandırmak istiyorsunuz. Kaynağı indirdikten sonra, tarayıcı onunla herhangi bir işlem gerçekleştirmez.

Yakın gelecekte bir web sayfasını yüklemek için gerekli olacak kaynaklara/dosyalara işaretçiler ile web tarayıcıları sağlama yöntemidir. Önyükleme ipucu, yüklenmesi gereken kaynakların öğesine bir değer olarak önyükleme eklenerek sağlanır. Ancak, yükleme durumunda kaynakların eşzamansız olarak indirilmesine izin verilmez. Tarayıcı başka bir şey gerçekleştirirken, aynı zamanda önyükleme ipuçlarını da indirir. Tarayıcılar, ayrıştırılıncaya kadar bu dosyalar hakkında bilgi sahibi olmadığı için, hangi dosyaların ayrıştırıldığını bilmiyorlar. Bu, tarayıcının bunu yapma yeteneği olmadığından, bu varlıkları yüklemek için verimsiz bir yöntemdir. Sonuç olarak, ön yükleme ipuçlarını kullanarak tarayıcılara bu kaynakları en baştan indirmelerini söyleyebilirsiniz.

Önceden yükleme, web sitenizi hızlandırmak için harika bir özelliktir, ancak yalnızca nadir durumlarda kullanılmalıdır. Ekranın üst kısmına yüklenmesi gereken dosyaları önceden yüklemek iyi bir fikirdir. Ayrıca Google PageSpeed ​​Insights'ta web sitenizin hızını artırabileceksiniz. Ayrıca, ön yükleme, HTTP/2 server push ile birleştirilebilir. Yazı tiplerinin, CSS'nin, JS'nin ve diğer kaynakların ön yüklemeleri mevcuttur. Bir dosya yalnızca başka bir dosya oluşturulurken keşfedildiğinde, web sitenizin genel olarak yüklenmesini hızlandırabilir. Bazı standart dosya türleri, aşağıda listelenen sözdizimi kullanılarak önceden doldurulabilir. Bu durumda, ön yükleme, web tarayıcılarına belirli dosyaları bir web sayfasına uygulama talimatı vermez.

WordPress'i önceden yükleyin

WordPress'te verileri önceden yüklemek, verilerin ihtiyaç duyulmadan önce yüklenmesi anlamına gelir. Bu, belirli bir veri parçasının gerektiğinde her zaman kullanılabilir olduğundan emin olmak istediğinizde veya her ihtiyaç duyulduğunda uzak bir konumdan veri yüklemek zorunda kalmaktan kaçınmak istediğinizde olduğu gibi bir dizi durumda yararlı olabilir. Verileri önceden yüklemek, gerektiğinde veri yüklemek için gereken süreyi azaltarak performansın iyileştirilmesine de yardımcı olabilir.

WordPress'te Preload, Prefetch ve Preconnect uygularsanız siteniz daha hızlı hale gelir. Kullanıcılarınızın birden fazla cihazda birden fazla sayfayı ziyaret etmesi bekleniyorsa, bunları önceden yüklemek iyi bir fikirdir. Preconnect, arka planda başka bir etki alanına giden bir bağlantı kurmanıza olanak tanır. Amaç, kaynakları başka bir etki alanından daha hızlı yüklemek için gecikmeyi azaltmaktır. Preconnect, Chrome, Edge, Firefox ve Safari'nin tüm sürümleriyle uyumludur. DNS önceden getirme, bir linkurl dizisi kullanılarak gerçekleştirilir. HTML veya statik kaynakları sisteme döndürmek için kullanabilirsiniz.

Bunları önceden oluşturmak, hala etkinken arka planda yüklemenizi sağlar. Bu, Parti Öncesi Kaynak İpuçları eklentisi kullanılarak gerçekleştirilir. Hafif bir varlığa ihtiyacınız varsa, onu oluşturun, ancak sitenin tamamını veya büyük kaynakları aşırı oluşturmamaya dikkat edin. Ayrıca, bir CDN kullanarak içeriği kullanıcılarınıza küresel olarak daha hızlı bir şekilde önbelleğe almayı ve teslim etmeyi düşünmeye değer. CDN ve güvenlik sağlayan birkaç şirket var ama ben her ikisini de sunan SUCURI'yi öneririm.

Ön yüklemenin bir sonucu olarak, kullanıcılar, özellikle bağlantıları yavaşsa, önemli performans kazanımları yaşayabilir. Bir web sayfasının daha hızlı yüklenmesini sağlamak için, kullanıcı kaynakları daha erken yükleyerek, kullanıcının sayfanın tamamen yüklenmesini beklemesi ihtiyacını ortadan kaldırabilir. Kaynakları yüklemeden önce birkaç şeyi aklınızda tutmalısınız: Dosyaları yüklerken, yoruma uygun rel=”preload” özniteliğini eklediğinizden emin olun. Kullanıcılar, tarayıcı ayarlarında Ön Yükleme Yok düğmesine tıklayarak ön yüklemeyi devre dışı bırakabilir. Kaynakları önceden yüklemenin bir avantajı, daha verimli kullanılabilmeleridir. Web sayfasının yüklenmesini , yüklenmeden önce yükleyerek hızlandırabilirsiniz. Bir sayfanın yüklenme süresi, kaynaklara erişilir erişilmez yüklenerek azaltılabilir. Kullanıcı tarafından sıklıkla talep edilen kaynakları önceden yükleyerek yüklemek için harcanan zamanı azaltabilir. Bir kullanıcı tarayıcıyı yüklediğinde, kaynakları yüklemek için gereken süreyi azaltır. Kullanıcı kaynakları talep ettiğinde, önceden yükleme, tarayıcının bunları bulması için gereken süreyi azaltarak süreci hızlandırabilir. Önceden yükleme, genel olarak bir web sayfasının yükleme sürecini hızlandırmada faydalı olabilir. Ön yüklemeyi kullanırken, faydalarının ve sınırlamalarının yanı sıra faydalı olabileceği çeşitli yolları anlamak çok önemlidir.

Eklentisiz WordPress Ön Yükleyici

İçeriğe manuel olarak CSS uygulayarak WordPress Önyükleme Animasyonunuzu yapabilirsiniz. CSS kaynak kodunda bulunabilecek animasyonları önceden yüklemeniz gerekir. Ardından, bu web sitelerinden herhangi biri tarafından sağlanan bir ön yükleme animasyonu için CSS kaynak kodunu kopyalayın.

Bağlantı Rel=preload> Geçerli Bir Değere Sahip Olmalıdır

Bir link rel=preload> öğesinin as değeri geçerli bir değer olmalıdır.

Ön Yükleme ve Ön Getirme: Kullanıcı Deneyiminizi Hızlandırın

Bir kullanıcı bir sayfaya ulaştığında, kaynak istemek için ön yükleme özelliği ile birlikte kullanılabilir. Kullanıcı sayfaya gelmeden önce tarayıcının hangi kaynakların gerekli olduğunu bilmesini sağlayarak kullanıcı deneyimini hızlandırmaya yardımcı olur.
Medya dosyası yüklendiğinde ve yüklendiğinde, ön yükleme adı verilen bir öznitelik kullanılır. Yazar, preload özniteliğini kullanarak, o site için mümkün olan en iyi kullanıcı deneyimiyle sonuçlanması gerektiğine inandığını belirleyebilir. Bu özellik bazı durumlarda göz ardı edilebilir.