Wordpress

WordPress Kaydırma Performansı

Pagespeed üzerinde WordPress kaydırma performansını artırmak için gibi bir hata çıkıyorsa aşağıdaki işlemler ile düzeltebilirsiniz. Kısacası anlatmak gerekirse mobil üzerinde kaydırma işlemini daha akıcı bir şekilde yapmanızı sağlamak için, pasif olay dinleyicilerini aktifleştiriyorsunuz.

Burada ki video da bunu güzel bir şekil de göstermişler. Videoyu izleyerek ne olduğunu anlamanız daha iyi olacaktır.

1. Yol – Kaydırma Performansı

Komut dosyasının yüklenmesini kaldırarak, WordPress için aşağıdaki kod ile çözebilirsiniz. Ancak, bunu kaldırırsanız iç içe yorum çalışmayacaktır.

functions.php

function wp_dereg_script_comment_reply(){wp_deregister_script( 'comment-reply' );}
add_action('init','wp_dereg_script_comment_reply');

2. Yol Kaydırma Performansı

Kaynak olarak burayı kullanacağız. Burada 2 farklı seçenek var. İsterseniz JS dosyasını kendi temanızın JS klasörüne ekleyip header üzerinden çekebilirsiniz. İsterseniz burada yayınlanan JS dosyasını uzaktan çekebilirsiniz. İlk olarak CDN olarak yayınlanan dosyayı çekmeye bakalım.

<head> </head> arasına ekleyin.

<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>

Bunu WordPress de header.php içine <head> tagları arasına eklerseniz sorun çözülecektir.

3. Yol Kaydırma Performansı

3. yol da ise yukarıda ki çektiğiniz JS dosyasının içindekileri kopyalayıp bir JS dosyası yaratmanızdır. Sonra bu dosyayı temanızın klasörüne atıp header dan çekeceksiniz.

Yeni bir metin belgesi aç ve içine aşağıdakileri yapıştır. Ardından farklı kaydet diyerek passive.js diye masaüstüne kaydedin.

!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){var e,t=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"];if(function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}return e}()){var n=EventTarget.prototype.addEventListener;e=n,EventTarget.prototype.addEventListener=function(n,o,r){var i,s="object"==typeof r&&null!==r,u=s?r.capture:r;(r=s?function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&&!0!==t.writable&&void 0===t.set?Object.assign({},e):e}(r):{}).passive=void 0!==(i=r.passive)?i:-1!==t.indexOf(n)&&!0,r.capture=void 0!==u&&u,e.call(this,n,o,r)},EventTarget.prototype.addEventListener._original=e}});

Daha sonra kaydettiğiniz JS dosyasını temanızın JS klasörünün içine atın. Attıktan sonra aşağıdaki kodu yine aynı şekilde <head> </head> etiketleri arasına alın. Sorununuzu bu şekilde de çözebilirsiniz.

<script type="text/javascript" src="/wp-content/themes/temaismi/js/passive.js"></script>

Yapamadığınız kısımlar olursa yorumlar bölümünden iletebilirsiniz.

Yorum yaz