2011-08-26 7 views
14

मेरी JavaScript फ़ाइलों के सभी पहले से ही तल पर हैं, लेकिन गूगल पृष्ठ गति की गति में सुधार करने के लिए इस सुझाव दे रहा है:आस्थगित करें पार्स - गूगल पृष्ठ गति

आस्थगित करें जावास्क्रिप्ट

की 88.6KiB की पार्स जावास्क्रिप्ट प्रारंभिक पृष्ठ लोड के दौरान पार्स किया गया है। पृष्ठ प्रतिपादन को अवरुद्ध करने के लिए पार्सिंग जावास्क्रिप्ट को हटाएं। http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js (76.8KiB) http://websiteurl/js/plugins.js (11.7KiB) http://websiteurl/ (इनलाइन JavaScript की 109B)

यह मेरा एचटीएमएल (उदाहरण)

<html> 
<head> 
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<head> 
<body> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script> 
    <script src="js/plugins.js"></script> 
    <script>$(document).ready(function() { 
      $("#various2").fancybox({ 
       'width': 485, 
       'height': 691, 
      }); 
     });</script> 
    </body> 
    </html> 

क्या मैं द्वारा प्रदर्शन को बढ़ाने के लिए क्या करना चाहिए है defer का उपयोग कर?

यह केवल Google chrome के लिए या सभी के लिए है?

+1

जब आप कहते हैं कि "मेरी जावास्क्रिप्ट पहले से ही नीचे स्थित है" आप अपने खुद के व्यक्तिगत रूप से लिखा जे एस की बात कर रहे हैं, या आप भी jQuery, आदि के लिए ' –

6

यदि आप पृष्ठ प्रदर्शन की तलाश में हैं तो सबसे पहले और सबसे महत्वपूर्ण आपको अन्य स्क्रिप्ट को लोड करने की अनुमति देने के लिए उन स्क्रिप्ट को अपने पृष्ठ के नीचे ले जाना चाहिए।

इसके अलावा सिर में DNS प्रीफ़ेच का उपयोग गूगल-कोड

<link rel="dns-prefetch" href="//ajax.googleapis.com"> 

के लिए आधार स्थापित करने के लिए डोमेन के बाद से यह सिर्फ कोड का एक छोटा सा टुकड़ा है, आप बस अपने plugins.js करने के लिए इसे जोड़ सकते हैं पर फ़ाइल नीचे प्लगइन्स फ़ाइल को स्थगित करें।

<script src="js/plugins.js" defer></script> 

क्या मैं वैसे भी करना चाहते हैं है कि, मेरे सभी साइटों YSlow और पेज गति में क्रमश: 98 और 97 के लिए अनुकूलित कर रहे हैं।

उम्मीद है कि यह मदद करता है।

वी

1

मैं देख रहा हूँ यह कोई पुराना सवाल है, लेकिन जब से मैं एक अच्छा जवाब खुद के लिए देख रहा था, मैं विधि मैं वर्तमान में उपयोग साझा करने के लिए जा रहा हूँ।

जहां तक ​​इनलाइन जावास्क्रिप्ट का संबंध है, मैं क्या करता हूं type गुण text/deferred-javascript, या कुछ समान है, ताकि पेज लोड के दौरान स्क्रिप्ट टैग के भीतर कोड का मूल्यांकन नहीं किया जा सके। फिर मैं पृष्ठ onload ईवेंट पर एक फ़ंक्शन संलग्न करता हूं; कहा गया कार्य उपरोक्त प्रकार से मेल खाने वाली सभी स्क्रिप्ट पाता है और eval() का उपयोग कर कोड का मूल्यांकन करता है। मुझे सामान्य में पता है eval() बुरा है लेकिन यह यहां सहायक प्रतीत होता है।

बाहरी जावास्क्रिप्ट फ़ाइलों के लिए, मैं कुछ बहुत समान करता हूं। पृष्ठ पर स्क्रिप्ट टैग जोड़ने के बजाय, मैं उन्हें रिकॉर्ड करता हूं और पेज लोड पूरा होने के बाद उन्हें एक-एक करके सम्मिलित करता हूं।

मुझे लगता है कि एक समस्या यह है कि यदि इनलाइन स्थगित जावास्क्रिप्ट में से एक त्रुटि है (एक पार्स त्रुटि कहें), बाद की स्क्रिप्ट लोड नहीं होती हैं (लेकिन यह मेरे वर्तमान कार्यान्वयन पर निर्भर हो सकती है)।

0

मुझे पेजस्पेड के साथ एक ही समस्या मिलती है - मुझे लगता है कि पेजस्पेड विश्लेषक यह जांच नहीं करता है कि जावास्क्रिप्ट शरीर के अंत में है या नहीं।

0

नमस्ते हाल ही में हमने "सुरुचिपूर्ण ढांचा" नामक एक ओपनसोर्स नोडज फ्रेमवर्क बनाया है जो आपको तेजी से वेब एप्लिकेशन बनाने में मदद करता है और हम सभी पृष्ठों में डेस्कटॉप और मोबाइल दोनों में 100% Google पेज की गति प्राप्त करने में सफल रहे: आप इसे देख सकते हैं :

https://developers.google.com/speed/pagespeed/insights/?url=getelegant.com

वहाँ बातें आप पेज स्रोत देख कर यह से सीख सकते हैं की एक बहुत कुछ है भी अगर कुछ भी आप नहीं समझ सकते तो टिप्पणी कृपया मैं

साथ मदद कर सकता है अब तक आप इस कोशिश कर सकते हैं विधि:

// Load script element as a child of the body 
function loadJS(src, callback) { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    if (script.readyState) { //IE 
     script.onreadystatechange = function() { 
      if (script.readyState == "loaded" || script.readyState == "complete") { 
       script.onreadystatechange = null; 
       if (callback) { 
        callback(); 
       } 
      } 
     }; 
    } else { //Others 
     script.onload = function() { 
      if (callback) { 
       callback(); 
      } 
     }; 
    } 
    script.src = src; 
    document.body.appendChild(script); 
} 
// Load style element as a child of the body 
function loadCSS(href,callback) { 
    var element = document.createElement("link"); 
    element.rel = "stylesheet"; 
    if (element.readyState) { //IE 
     element.onreadystatechange = function() { 
      if (element.readyState == "loaded" || script.readyState == "complete") { 
       element.onreadystatechange = null; 
       if (callback) { 
        callback(); 
       } 
      } 
     }; 
    } else { //Others 
     element.onload = function() { 
      if (callback) { 
       callback(); 
      } 
     }; 
    } 
    element.href = href; 
    document.body.appendChild(element); 
} 
// Load All Resources 
function loadResources() { 
    // css 
    loadCSS("/compressed/code-mirror-style.css?please1"); 
    loadCSS("/compressed/all.css?please2"); 

    // js 
    loadJS("/compressed/code-mirror.js", function() { 
     loadJS("/compressed/common.js", function() { 
      $("[data-lang]").each(function() { 
       var code = $(this).addClass("code").text(); 
       $(this).empty(); 

       var myCodeMirror = CodeMirror(this, { 
        value: code, 
        mode: $(this).attr("data-lang"), 
        lineNumbers: !$(this).hasClass('inline') && !$(this).hasClass('no-numbers'), 
        readOnly: true 
       }); 
      }); 
     }); 
    }); 
} 

// Check for browser support of event handling capability 
if (window.addEventListener) { 
    window.addEventListener("load", loadResources, false); 
} else if (window.attachEvent) { 
    window.attachEvent("onload", loadResources); 
} else { 
    window.onload = loadResources 
} 
0

<script type="text/javascript" defer="defer"> टैग में जोड़ें जैसे यह मेरे लिए काम करता है।

<script type="text/javascript" defer="defer" src="<?php echo $this->getSkinUrl();?>js/jquery.bxslider.js"></script> 
संबंधित मुद्दे