Have a couple of questions regarding my XHTML markup.
For CSS is it better to use
<link rel="stylesheet" href="/css/mystyle.css">
or
<link rel="stylesheet" href="http://www.mysite.com/css/mystyle.css">
With Javascript the same question, is it better to use
<script src="/js/theme.js"></script>
or
<script src="http://www.mysite.com/js/theme.js"></script>
Finding some people are complaining my site loads slow and I have notice it on older versions of IE
I don’t think the src attribute will slow down your website even with what path you choose. It might be that the actual script itself is the real issue. I always use the relative path for including source files into my project as if I move to a new domain or subdomain I can easily just upload it without having to make too many file changes.
The usual bottle necks are seldom related to issues you mentioned in your OP. Relative / Absolute links presents benefits or detrment only if you plan to migrate the site, change site structure or access content remotely.
It is possible if you depend on .js for layout or effects ( already a bad idea in itself) that it is teh EXECUTION of your script that slows down the site. For example lets say your theme script is attaching event listeners to EVERY single element ( why!?!?). Also AJAX dependent sites are going to take a big performance hit; think abaout it each AJAX call is like loading a new page into your current page.
Watch out for preloaders too… having many large images on a slide show that preloads … OMG!
I would also check the sizes of your BG and content images or the number of images ( even small ones) that you have. Again , each image is a http request and that cost time; one 150k image loads faster than 150 1k images. if your site has dozens of small images, consider using a sprite.
These are but general concepts, but I hope they help
I think I saw mention years ago that browsers cached files with relative paths but not those with absolute paths.
I don’t know if this was or is true (I’ve never looked for it in HTTP headers) but I imagine that even if true, it wouldn’t make much difference unless the files were monster sized, and even then most likely only an insignificant amount compared to what has been previously mentioned.
Wasn’t it so that an absolute path does ask a new DNS-lookup (search for the domain/server) before retrieving the file, where a relative path is already on the server, and can handle the file request faster (in both cases: cached or not)?
Hi motion2082,
>>> Finding some people are complaining my site loads slow and I have notice it on older versions of IE
Try this:
<?php
# http://stackoverflow.com/questions/19374843/css-delivery-optimization-how-to-defer-css-loading
$fCSS = 'relative/path/to/styles-sheets.css';
?>
<script type="text/javascript">
var stylesheet = document.createElement('link');
stylesheet.href = '<?=$fCSS;?>';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
</script>
The script was discovered after following a Google Page Load Faster Recommendations:
“http://developers.google.com/speed/pagespeed/insights/?url=www.johns-jokes.com”
Thanks, while reading your reply it looked so familiar I’m sure that’s what it was.
I doubt DNS lookups would slow things down a noticeable amount.
@ Mittineague:
Indeed, this will not make such a big difference as the points dresden_phoenix mentioned above.
=======
@John_Betong:
This script is “postloading” the css-file, if placed in the end of the page code (just before the </body></html> tags).
But for IE 10 and before, document.createStyleSheet(‘styles.css’); should be used/added , and for IE11+ it has to be: document.createElement(‘style’); (see[U] this MSDN-page[/U]).
Then another point.
The script is postloading the whole stylesheet after loading the content. That is giving an awful FOUC (Flash Of Unstyled Content): first the text of the content will be rendered, than a waiting time for the download of the stylesheet, and afterwards the styles will be added (not simultaneously).
As I understand the Google-recommendations properly, it reads as follows:
But all this is in vain if the styles cannot be split, and if it’s not a huge original stylesheet! 
=======
@motion2082:
That brings us back to dresden_phoenix’s remarks about the usual bottle necks. 
If you give us a link to the page/site, probably we can say more.
*) Note: this is the part of the page showed at first glance: 100% of the window height. So there has be payed attention to high resolutions: the Above part has to cover the largest window height.
Hi @Francky;
Many thanks for the detailed reply and especially for taking the time to create the FOUC demonstration page. (I have noticed this before and never knew it had an acronym). Your demo certainly highlighted the disadvantage of stylesheet delayed loading.
I did try and implement Google’s recommendations but unfortunately the Google search revealed an example of the script but did not specify that the script had to be loaded just before </body></html>. The results were worse so I abandoned the idea. Details here:
“http://stackoverflow.com/questions/19374843/css-delivery-optimization-how-to-defer-css-loading”
I checked your site using Pingdom and was amazed at just how fast your Server loads the header. It was more than ten times faster than the Server I use and I thought mine was fast
Further testing using “GWT->Crawl->Fetch as Google” revealed that loading an HTML page instead of the PHP dynamic cached page took 46ms instead of 125ms so I amended the following lines to the .htaccess file and now have a SplashPage, which now wants automating
# Apache looks first for "index.html" before looking for "index.php"
DirectoryIndex index.html index.php
Fortunately this does not affect any of the other dynamic pages.
The code you mentioned ‘<?php echo $fCSS;?>’ instead of stylesheet.href = ‘<?=$fCSS;?>’ is a shorthand form which saves typing eight characters and is also far more readable. The main reason the script uses a PHP variable instead of being hardcoded is to have a single page script for both Localhost and Online pages to cater for the different paths to the identical stylesheet.
I am pleased you highlighted the fact that because of the small stylesheet the Google’s recommendations were best ignored.
Many thanks once again.
@John_Betong
Thanks for the php shorthand explanation; I’m just a noob in php. 
About FOUC and FONC
The name “FOUC” (Flash of Unstyled Content) was given by bluerobot in [U]this 2001 article[/U] (see also [URL=“http://en.wikipedia.org/wiki/Flash_of_unstyled_content”][U]wikipedia[/U]).
Mostly a FOUC has a firm relation with Internet Explorer.
In addition to the bluerobot article: there was/is a difference in the way IE and other browsers render a page.
In fact this is not really a FOUC (when content is presented, but without styles/design), but more what I call a “FONC”: a “Flash Of No Content”. *)
If I encountered a FOUC or FOUC/FONC, I added for IE an IE-only <meta> with a fading page-transition:
[INDENT]<meta http-equiv=“Page-Enter” content=“blendTrans(Duration=.35)”>[/INDENT]
Then the deleting of the old page is prohibited while IE is building the new one.
Last years I didn’t see a lot of FOUC’s/FONC’s in my pages (viewed in IE7), so I don’t use this <meta> anymore.
========
@motion2082
Back on topic, to get it above the snow: do you have a link to your slow page?
*) In css-tricks it’s called a “[U]Fajax[/U]” (“fake ajax”).