WordPress wp_resource_hints() fonksiyonu

Modern tarayıcılar için artık web sitelerinde dns-prefetch ve preconnect kullanabiliyoruz, bunlar site hızına etki eden direktifler. WordPress 4.6 versiyonu ile birlikte kullanılmaya başlayan wp_resource_hints() fonksiyonu dns-prefetch ve preconnect işlerini tema ve eklentilerin kullandığı dış kaynaklara göre otomatik olarak site içerisine eklemekle bilikte aşağıda vereceğim örnek kodda göreceğiniz gibi kendinize özel düzenlemeler de yapabilmektesiniz.

Dns-prefetch nedir?

DNS-prefetchkaynaklar talep edilmeden önce alan adlarını çözümleme girişimidir. Bu, daha sonra yüklenen bir dosya veya bir kullanıcının izlemeye çalıştığı bağlantı hedefi olabilir. Tarayıcılar web sitesiyle iletişime kurmak için DNS adreslerini kullanır. DNS prefetch, sitede kullandığınız bir kaynağın getirilmesini belirtmek için kullanılır. DNS çözümleme, kullanıcının karşı sunucuyla bağlantısındaki ilk adımdır.

Preconnect nedir?

DNS-prefetch tekniğine ek olarak TCP anlaşmasının (handshake) ve TLS anlaşmasının (negotiation) yapılmasını sağlar.
Preconnect ve dns-prefetch arasında birbirini destekleyici bir ilişki bulunmaktadır. Hangisini kullanmanız gerektiğine gelecek olursa, en kritik olan kaynaklar için preconnect, geri kalan ihtiyaçlarınızı desteklemek için dns-prefetch kullanmalısınız.

Neden kullanmalıyız?

Bir tarayıcı bir (üçüncü taraf) sunucudan bir kaynak talep ettiğinde, tarayıcının isteği gönderebilmesi için bu çapraz kaynağın etki alanı adının bir IP adresine çözümlenmesi gerekir. Bu işlem, DNS çözümlemesi olarak bilinir. DNS önbelleğe alma bu gecikmeyi azaltmaya yardımcı olabilirken, DNS çözümlemesi isteklere önemli ölçüde gecikme ekleyebilir. Birçok üçüncü tarafla bağlantı açan web siteleri için bu gecikme, yükleme performansını önemli ölçüde azaltabilir.

Dns-prefetch ve Preconnect sitenizde kullandığınız dış kaynakları(Örnek Google Fonts) daha hızlı ve kusursuz yüklenmesine yardımcı olur bu sayede site hızında artış sağlanır, örnek aşağıdaki gibi kullanılabilir:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">

Kaynaklar

WordPress’de kullanım

WordPress’de temanızın <head> kısmına manuel ekleyebileceğinz gibi aslında daha uygunu wp_resource_hints() fonksiyonunu kullanmaktır, eklenti ve tema geliştiricileri bunu kullanırlar.

wp_resource_hints()

wp_resource_hints() – WordPress Developer Resources

Örnek aşağıda ben Google Fonts ve Analytics kullanan bir WordPress sitesi için en uygun kodu aşağıda örnek olarak paylaştım, bu kodu temanızın functions.php dosyasına yazacağınız gibi dilerseniz My Custom Functions eklentisini kullanarak da sitenize ekleyebilirsiniz.

//dns-prefetch preconnect prefetch prerender
add_filter('wp_resource_hints', function($hints, $relation_type){
	if('dns-prefetch'===$relation_type){
$hints[]='//www.google-analytics.com';
$hints[]='//www.googletagmanager.com';
		}else if('preconnect'===$relation_type){
			$hints[]='https://fonts.gstatic.com';
		}
			return $hints;
		}, 10, 2);

Eğer bu fonksyionu etkisiz hale getirmek isterseniz:

remove_action( 'wp_head', 'wp_resource_hints', 2 );

Eğer sitenizde w.org ile ilgili bir kaynak yok ise WordPress’in otomatik eklediği kodu kaldırmak isterseniz:

add_filter( 'wp_resource_hints', function( $urls ){
    foreach ($urls as $key => $url){
// dns-prefetch w.org kaldırır 
// detaylar: https://core.trac.wordpress.org/ticket/40426 
        if ( 'https://s.w.org/images/core/emoji/13.0.0/svg/' === $url ){
            unset( $urls[ $key ] );
       }
   }
    return $urls;
});