If you want to make your web page load faster, from now onwards consider using all the CSS and JavaScript files externally. When you use everything inline, then every time a page gets refreshed, it loads every bit of code from scratch. But using external files give you the opportunity to make it cached, so that on page load it would be served from the cache at the minimal latency and thus reduce the file size and also consume less bandwidth.

It is very useful for the site that uses uniform pattern for every web page. For example, consider any popular Content Management System (CMS), for example, Drupal, WordPress, Joomla!, and so on. They have uniform CSS and JavaScript patterns and use it for almost every web page, which makes it faster by using this technique and caching these external files and scripts.

It is the web developers' responsibility to include both the CSS and JavaScript files in the correct order to make the website faster. If any JavaScript is mentioned before the CSS files or the Meta tag, it will block other files to download simultaneously, which will slow down the website.

Let's assume a website sends a lot of requests to the server and can download four files simultaneously; in this case, you should use the order wisely to use the simultaneous download properties, which are being chocked by the JavaScript files if encountered in between. The following code shows how the Meta tag, the CSS files, and JavaScript have been wrongly written, which could be modified to make the website response faster:

<link rel = "EditURI" type = "application/rsd+xml" title = "RSD" href = "http://www.aliencoders.com/blogapi/rsd"/>
<meta property = "fb:app_id" content = "180767955291621"/>
<script type = 'text/javascript' src = '//s7.addthis.com/js/250/addthis_widget.js#async = 1'></script>
<link rel = "alternate" type = "application/rss+xml" title = "Alien Coders  RSS" href = "http://www.aliencoders.com/rss.xml"/>
<link rel = "shortcut icon" href = "/sites/default/files/acquia_marina_favicon.gif" type = "image/x-icon"/>
<meta name = "keywords" content = "aliencoders, technical website, site for students, site for professionals"/>
<link rel = "canonical" href = "http://www.aliencoders.com/"/>
<meta property = "og:url" content = "http://www.aliencoders.com/"/>
<meta name = "revisit-after" content = "1 day"/>

It is designed usually so that each host can have six parallel connections to download the mentioned files. Let's say there are four CSS files and two JavaScript files and each file takes 20 milliseconds to get downloaded properly. If JavaScript is mentioned above the CSS files, it would take 20 milliseconds to download the first JavaScript file, then the second JavaScript would take 20 milliseconds, and only then will it start downloading the rest of the four CSS files simultaneously in another 20 milliseconds, which sum up to 60 milliseconds to download all the files.

But, if we reorder the code in such a way that all the CSS files would lay above the JavaScript files, and if you follow the rule of HTML standards mentioned in the Following HTML standards (Simple) recipe, the modified code would look like this:

<meta name = "keywords" content = "aliencoders, technical website, site for students, site for professionals"/>
<meta property = "og:url" content = "http://www.aliencoders.com/"/>
<meta name = "revisit-after" content = "1 day"/>
<link rel = "shortcut icon" href = "marina_favicon.gif" type = "image/x-icon"/>
<link rel = "alternate" type = "application/rss+xml" title = "Alien Coders RSS" href = "http://www.aliencoders.com/rss.xml"/>
<link rel = "canonical" href = "http://www.aliencoders.com/" />
<link type = "text/css" rel = "stylesheet" media = "all" href = "css-file.css"/>
<script type = 'text/javascript' src = 'javascript-file.js'></script>

And now assume those four CSS files are at the top and then those two JavaScript files are mentioned, it would download the four CSS files and one JavaScript file simultaneously in 20 milliseconds (as it can't start another JavaScript in parallel because while downloading JavaScript, it doesn't allow any more parallel download) and then the last JavaScript file will get downloaded in 20 milliseconds, which means you saved 20 milliseconds just by reordering the files and scripts properly. If you have any inline JavaScript, put it at the end to evaluate, if possible.

The following section helps you with removing duplicate scripts:

Sometimes it happens that by mistake or by erroneous code implementation few scripts or CSS files would be loaded more than once due to bad coding, which would do nothing other than causing harm to your sites by not only making the users irate, but by slowing it down tremendously. In any case, you need to avoid it, either by manually inspecting the working code or using any programming language to check for the existence of scripts. If it's there, it does nothing else but load that script.

if(exists "$file"){//do nothing and move forward}
else {load_script($file)}

To avoid using CSS @import, the following points can be considered:

@import is a property in CSS to include other related CSS files that just imports those included CSS files, which are doing no good but adding extra bits of seconds in getting to that web page.

The simple thing is, instead of parallel download from one host is getting violated here when @import is being called, which just says pause to other downloads until it gets downloaded first, which you don't want for sure and it surely is going to add extra round-trip times to that web page. For example, if male.css contains the following content: @import url("female.css"), the browser would first download and fully parse the male CSS file before downloading the female CSS file.

I would suggest you to use the <link> tag and forget about anything like the @import annotation properties in CSS unless and until you have to attend an interview as a CSS expert. It will allow parallel download to the female.css file too, which would reduce round-trip time and the page would get loaded faster. For example:

<link rel = "stylesheet" href = "first.css">
<link rel = "stylesheet" href = "second.css">

Do you want to corrupt the user's data, which you track or maintain at your server log? Do you want to increase the page loading time unnecessarily? If the answer to both is yes, God bless you; otherwise stop using empty SRC either in the HTML or CSS or JavaScript codes.

Never write the code as follows:

<img src = ""> or background-image: url("");
or var img = new Image();
img.src = "";

It will send an extra request to either the same directory where the page is or requests for the same page again and again when encountered with an empty image SRC in IE, Chrome, and Safari. Firefox and Opera have fixed this issue though, but never ever use an empty image SRC in your life.

For more details on it, check RFC 3986 (http://www.ietf.org/rfc/rfc3986.txt); especially sections 5.2 and 5.4.