different small js files per page VS. 1x site-wide js file?
<p>Different pages of my site have different js needs (plugins mainly), some need a lightbox, some dont, some need a carousel, some dont etc.</p>

<p>With regards to pageloading speed should i </p>

<p><strong>option 1 - reference each js file when it is needed:</strong></p>

<p>so one page might have:</p>

<pre><code>&lt;script type="text/javascript" src="js/carousel/scrollable.js"&gt;&lt;/script&gt;    
&lt;script type="text/javascript" src="js/jquery.easydrag.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"&gt;&lt;/script&gt;
</code></pre>

<p>and another have:</p>

<pre><code>&lt;script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"&gt;&lt;/script&gt;   
&lt;script type="text/javascript" src="st_wd_assets/js/typewatch.js"&gt;&lt;/script&gt;
</code></pre>

<p><strong>option 2 - combine and compress into one site_wide.js file:</strong></p>

<p>so each page would reference:</p>

<pre><code>&lt;script type="text/javascript" src="js/site_wide.js"&gt;&lt;/script&gt;
</code></pre>

<p>there would be unused selectors/event listeners though, how bad is this?
I would include any plugin notes/accreditations at the top of the site_wide.js file</p>
