પૃષ્ઠ રેન્ડરિંગને ઝડપી બનાવવા માટે વર્ડપ્રેસને બેકાર લોડ જાવાસ્ક્રિપ્ટ કેવી રીતે બનાવવી?

વર્ડપ્રેસપૃષ્ઠ રેન્ડરિંગ પદ્ધતિઓને ઝડપી બનાવવા માટે JavaScriptનું આળસુ લોડિંગ.

JavaScript ની ડિફર પ્રોપર્ટી શું છે?

દરેક વ્યક્તિએ કદાચ આ પરિસ્થિતિનો સામનો કર્યો છે:

હેડમાં N સ્ક્રિપ્ટો હોય છે, અને જ્યારે સ્ક્રિપ્ટો લોડ થાય છે, ત્યારે પૃષ્ઠ રેન્ડરિંગ અવરોધિત થાય છે, જે સામાન્ય રીતે ખાલી હોય છે.

અલબત્ત, સોર્સ કોડમાં સ્ક્રિપ્ટને ફૂટરમાં મૂકીને આપણે આની આસપાસ મેળવી શકીએ છીએ.

જો કે, કેટલાક જટિલ વિકાસ વાતાવરણ આ સરળ કાર્યને ખાસ કરીને જટિલ બનાવી શકે છે.

આ સમયે આપણે ડિફર પ્રોપર્ટીનો ઉપયોગ કરી શકીએ છીએ, જે JavaScriptમાં પ્રમાણમાં દુર્લભ પ્રોપર્ટી છે.

તમે તેનો ઉપયોગ ક્યારેય નહીં કરી શકો, પરંતુ આ પરિચય વાંચ્યા પછી, મને ખાતરી છે કે તમે તેને છોડશો નહીં.

તેનું મુખ્ય કાર્ય સમગ્ર પૃષ્ઠ લોડ થયા પછી સ્ક્રિપ્ટને લોડ પર પાર્સ કરવાને બદલે તેને પાર્સ કરવા દેવાનું છે, જે ફક્ત ઇવેન્ટ-ટ્રિગર કરેલ JavaScript ધરાવતી સ્ક્રિપ્ટો માટે સંપૂર્ણ પૃષ્ઠ લોડ ઝડપ પ્રદાન કરે છે.

હા, જો સ્ક્રિપ્ટ ટૅગમાં ડિફર એટ્રિબ્યુટ હોય, તો તે HTML પૃષ્ઠને પાર્સ કર્યા પછી ચલાવવામાં આવશે, ભલે તે હેડમાં મૂકવામાં આવે, જે પૃષ્ઠના તળિયે સ્ક્રિપ્ટ મૂકવા જેવું જ છે.

અલબત્ત, વિલંબનો ઉપયોગ પણ મર્યાદિત છે, સામાન્ય રીતે 2 મુદ્દાઓ પર ધ્યાન આપો:

1) સ્થગિત વિલંબિત સ્ક્રિપ્ટ બ્લોકમાં document.write આદેશને કૉલ કરશો નહીં;

• કારણ કે document.write સીધી આઉટપુટ અસર પેદા કરશે.

2) કોઈપણ તાત્કાલિક અમલ સ્ક્રિપ્ટો સહિત, ડિફર સ્ક્રિપ્ટ્સમાં વૈશ્વિક ચલ અથવા કાર્યોનો ઉપયોગ કરશો નહીં.

વર્ડપ્રેસમાં વપરાતી સ્ક્રિપ્ટમાં ડિફર એટ્રીબ્યુટ ઉમેરો

વર્ડપ્રેસમાં, આપણે વર્ડપ્રેસ દ્વારા ઉપયોગમાં લેવાતી સ્ક્રિપ્ટમાં ડિફર એટ્રીબ્યુટને આપમેળે કેવી રીતે ઉમેરી શકીએ?

અમે વર્તમાન થીમની 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 ટિપ્પણી કોડ ઉદાહરણ:

/*

这里是代码 

*/