ਪੇਜ ਰੈਂਡਰਿੰਗ ਨੂੰ ਤੇਜ਼ ਕਰਨ ਲਈ ਵਰਡਪਰੈਸ ਆਲਸੀ ਲੋਡ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਨੂੰ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ?

ਵਰਡਪਰੈਸਪੇਜ ਰੈਂਡਰਿੰਗ ਵਿਧੀਆਂ ਨੂੰ ਤੇਜ਼ ਕਰਨ ਲਈ JavaScript ਦੀ ਆਲਸੀ ਲੋਡਿੰਗ।

JavaScript ਦੀ Defer ਵਿਸ਼ੇਸ਼ਤਾ ਕੀ ਹੈ?

ਹਰ ਕਿਸੇ ਨੂੰ ਸ਼ਾਇਦ ਇਸ ਸਥਿਤੀ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਿਆ ਹੈ:

ਸਿਰ ਵਿੱਚ N ਸਕ੍ਰਿਪਟਾਂ ਹਨ, ਅਤੇ ਜਦੋਂ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਲੋਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪੰਨਾ ਰੈਂਡਰਿੰਗ ਬਲੌਕ ਹੋ ਜਾਂਦੀ ਹੈ, ਜੋ ਕਿ ਆਮ ਤੌਰ 'ਤੇ ਖਾਲੀ ਹੁੰਦੀ ਹੈ।

ਬੇਸ਼ੱਕ, ਅਸੀਂ ਸੋਰਸ ਕੋਡ ਵਿੱਚ ਸਕ੍ਰਿਪਟ ਨੂੰ ਫੁੱਟਰ ਵਿੱਚ ਪਾ ਕੇ ਇਸ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ।

ਹਾਲਾਂਕਿ, ਕੁਝ ਗੁੰਝਲਦਾਰ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਇਸ ਸਧਾਰਨ ਕੰਮ ਨੂੰ ਖਾਸ ਤੌਰ 'ਤੇ ਗੁੰਝਲਦਾਰ ਬਣਾ ਸਕਦੇ ਹਨ।

ਇਸ ਸਮੇਂ ਅਸੀਂ Defer ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ, ਜੋ JavaScript ਵਿੱਚ ਇੱਕ ਮੁਕਾਬਲਤਨ ਦੁਰਲੱਭ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ।

ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਕਦੇ ਨਾ ਕਰੋ, ਪਰ ਇਸ ਜਾਣ-ਪਛਾਣ ਨੂੰ ਪੜ੍ਹਨ ਤੋਂ ਬਾਅਦ, ਮੈਨੂੰ ਯਕੀਨ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸਨੂੰ ਨਹੀਂ ਛੱਡੋਗੇ।

ਇਸਦਾ ਮੁੱਖ ਕੰਮ ਸਕ੍ਰਿਪਟ ਨੂੰ ਲੋਡ ਹੋਣ 'ਤੇ ਪਾਰਸ ਕਰਨ ਦੀ ਬਜਾਏ, ਪੂਰੇ ਪੰਨੇ ਦੇ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਪਾਰਸ ਕਰਨ ਦੇਣਾ ਹੈ, ਜੋ ਉਹਨਾਂ ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਪੂਰਾ ਪੰਨਾ ਲੋਡ ਸਪੀਡ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਸਿਰਫ਼ ਇਵੈਂਟ-ਟਰਿੱਗਰਡ JavaScript ਹੁੰਦੀ ਹੈ।

ਹਾਂ, ਜੇਕਰ ਸਕ੍ਰਿਪਟ ਟੈਗ ਵਿੱਚ ਇੱਕ ਮੁਲਤਵੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ, ਤਾਂ ਇਹ HTML ਪੰਨੇ ਨੂੰ ਪਾਰਸ ਕਰਨ ਤੋਂ ਬਾਅਦ ਚਲਾਇਆ ਜਾਵੇਗਾ ਭਾਵੇਂ ਇਹ ਸਿਰ ਵਿੱਚ ਰੱਖਿਆ ਗਿਆ ਹੈ, ਜੋ ਕਿ ਸਕ੍ਰਿਪਟ ਨੂੰ ਪੰਨੇ ਦੇ ਹੇਠਾਂ ਰੱਖਣ ਦੇ ਸਮਾਨ ਹੈ।

ਬੇਸ਼ੱਕ, ਦੇਰੀ ਦੀ ਵਰਤੋਂ ਵੀ ਸੀਮਤ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ 2 ਪੁਆਇੰਟਾਂ ਵੱਲ ਧਿਆਨ ਦਿਓ:

1) ਇੱਕ ਸਥਗਤ ਮੁਲਤਵੀ ਕਿਸਮ ਸਕ੍ਰਿਪਟ ਬਲਾਕ ਵਿੱਚ document.write ਕਮਾਂਡ ਨੂੰ ਕਾਲ ਨਾ ਕਰੋ;

• ਕਿਉਂਕਿ document.write ਸਿੱਧਾ ਆਉਟਪੁੱਟ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕਰੇਗਾ।

2) ਕਿਸੇ ਵੀ ਤਤਕਾਲ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਸਕ੍ਰਿਪਟਾਂ ਸਮੇਤ, ਡਿਫਰ ਸਕ੍ਰਿਪਟਾਂ ਵਿੱਚ ਗਲੋਬਲ ਵੇਰੀਏਬਲ ਜਾਂ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ।

ਵਰਡਪਰੈਸ ਵਿੱਚ ਵਰਤੀ ਗਈ ਸਕ੍ਰਿਪਟ ਵਿੱਚ Defer ਗੁਣ ਸ਼ਾਮਲ ਕਰੋ

ਵਰਡਪਰੈਸ ਵਿੱਚ, ਅਸੀਂ ਵਰਡਪਰੈਸ ਦੁਆਰਾ ਵਰਤੀਆਂ ਗਈਆਂ ਸਕ੍ਰਿਪਟਾਂ ਵਿੱਚ ਡਿਫਰ ਗੁਣ ਨੂੰ ਆਪਣੇ ਆਪ ਕਿਵੇਂ ਜੋੜ ਸਕਦੇ ਹਾਂ?

ਅਸੀਂ ਮੌਜੂਦਾ ਥੀਮ ਦੀ functions.php ਫਾਈਲ ▼ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹਾਂ

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• ਉਪਰੋਕਤ ਕੋਡ ਸਿਰਫ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਨੁਸਾਰਵਰਡਪਰੈਸ ਦੁਆਰਾ ਪੇਸ਼ ਕੀਤਾ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਕੋਡਅਸਰਦਾਰ ਹੋਵੇਗਾ।

ਸਾਵਧਾਨੀਆਂ

ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਪ੍ਰਬੰਧਨ ਖਾਲੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦਾ ਹੈ:

ਜੇਕਰ ਤੁਸੀਂ ਉਪਰੋਕਤ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਜਦੋਂ ਤੁਸੀਂ ਰੀਅਲ-ਟਾਈਮ ਪੂਰਵਦਰਸ਼ਨ ਪ੍ਰਬੰਧਨ (ਦਿੱਖ → ਕਸਟਮਾਈਜ਼) ਨੂੰ ਖੋਲ੍ਹਦੇ ਹੋ, ਤਾਂ ਇਹ ਖਾਲੀ ਦਿਖਾਈ ਦੇ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਕਿਰਪਾ ਕਰਕੇ ਇਸਨੂੰ ਉਚਿਤ ਰੂਪ ਵਿੱਚ ਵਰਤੋ।

ਜਦੋਂ ਰੀਅਲ-ਟਾਈਮ ਪ੍ਰੀਵਿਊ ਪ੍ਰਬੰਧਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਉਪਰੋਕਤ ਕੋਡ ਨੂੰ ਟਿੱਪਣੀ ਕਰੋ, ਅਤੇ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ ਟਿੱਪਣੀ ਕੀਤੇ ਕੋਡ ਨੂੰ ਮਿਟਾਓ।

PHP ਟਿੱਪਣੀ ਕੋਡ ਉਦਾਹਰਨ:

/*

这里是代码 

*/