Member Avatar for genieuk

Hi,

I wanted to ask professional members who has built websites in the past wheter you include all your include files in the <head></head> section of your site. I split my design in two header-inc.php and footer-inc.php, obviously the <head></head> section will be in header-inc.php.

Reason is most of my pages require different scripts. Currently i just place for example the javscript in the file that requires it but it makes my code look very messy and hard to navigate/read or i just put an include in the file that requires the script.

I wanted to know as if i had let say 6-8 includes in my head section will it slow down my site, some of the includes won't be required on everypage so in a sence it seems silly to have an include on a page that won't requrie that specific included file althou i think it is best practice... but i thought if i add them all in the <head></head> tags it would save me having to put the code within the actual page or use an include in whatever file etc.

Thansk for any responce. Just want to clean up my code and organise things more now i have learnt allot more and wanted to know how you do it and/or what is the best way/best practice.

Thanks.

Can you tell me how you do it?

Edited by genieuk because: n/a
  • 4 Contributors
  • 8 Replies
  • 158 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for wrivera

i usually seperate my dynamic pages into 3 parts
1) top which includes head and navigation, css, includes
2)footer which includes footer information and maybe some generic functions that I will use on certain pages
3) all pages these will change depending of the nav but I dont have to rewrite any navigation so it saves time.

As i understand it there is a loading order when a page is loaded by the browser, javascript is usually loaded before css internally before externally so excluding these additional pages is supposed to make load time fast but I have never had problems with loading to actually verify this on a personal basis.

Member Avatar for genieuk

Hi,

It doesn't really answer my question i don't think, my site design which is split in two files is fine as it is as i want same layout navigation links etc the same on all pages hence why it is only in two parts.

My question is more wheter i should put all includes in the head tags or just include the scripts within the page that needs it althou like you said it should really be in an order, as loading javascript after the head section etc has been processed suppose to slow things down to what i have been reading online.

Once i get a few more responces from the community and if they agree i should put them all in the head section i can simply just put all javascript in one file and compress to reduce size and HTTP REQUESTS. I can simply keep an uncompressed version and if and when i ever need to edit the javascript i can just compress again after editing. Same goes for other files like my function and global file, i could just make one file and put all code in the one file to reduce HTTP REQUESTS as much as possible. Things like website address, name and other $variables are in my global file so if i ever change host, websiteaddress etc i only have to edit one page.

Thanks

Edited by genieuk because: n/a
Member Avatar for genieuk

Hi hope it ok to reply as not had any others yet, anyone else recommend best way or the way they do it?

Thanks

Member Avatar for genieuk

Hi hope it ok to reply as not had any others yet, anyone else recommend best way or the way they do it?

Thanks

Member Avatar for pritaeas

My recommendation would be to pack all js scripts together into one file and include that one on every page. It would mean a bigger download on the first run, but on every next page, the scripts are taken from the browser's cache.

Member Avatar for almostbob

I use 4 includes, and
stitch scripts into 1 file

enable mod_gzip or mod_deflate on html php asp script and css files and their size becomes about 25%,
style.css.php

<?php header ('content-type:text/css'); 
ob_start("ob_gzhandler"); ?>/*<style>*/
.rss-box { margin:1em 3%; padding:4px 8px; background-color:#ededed; border:2px dashed #7485CA; }
.topmenu { background-color:#f6f6f6; text-align:right; top:1px; left:auto; bottom:auto; right:1px; position:fixed; }
<?php ob_flush(); ?>

script.js.php

<?php header ('content-type: text/javascript');
ob_start("ob_gzhandler"); ?>
function movein(which,html){
which.style.background='turquoise'
window.status=html
}
function moveout(which){
which.style.background='#d4d0c8'
window.status=''
}
<?php ob_flush(); ?>
Edited by almostbob because: n/a
Member Avatar for genieuk

Thanks for replying. I will rename my css and js file to .php and do what you said i know what ob_start() and flush is but did not think of it like that.

Thanks for all the replies.

Member Avatar for almostbob

There is a prior thread including much better instructions on permanently gzipping unchanging files to lower processing overhead,
I have it enabled, its brilliant, but I cant find the link, (and dont care coz "Mine is working" (I do just writing that coz I'm POed at myself))
as well as this on minify mod deflate gzip http://www.daniweb.com/forums/thread182518.html
the difference in apparent load times that can be made from optimized images, minified code, gzip/deflate, changing the load order of images & such, establishing subdomain names so that some elements can parallel download from

to make the most of http protocol abilities (2 files each from 3 domains concurrently)
sample code gzip enabled on all text files and images tweaked for size blank.jpg is a 1*1 blank image just for page load
the page loads, becomes functional before all the eyecandy is finished downloading

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="keywords" />
<meta name="Description" content="." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stdStyle.css" />
</head>
<body>
<img src='blank.jpg' alt='www.realimgsrc.jpg' width='100' height='100' />
<img src='blank.jpg' alt='www.realimgsrc2.jpg' width='100' height='100' />
<img src='blank.jpg' alt='img.mysite.com/realimgsrc3.jpg' width='100' height='100' />
<img src='blank.jpg' alt='img.mysite.com/realimgsrc4.jpg' width='100' height='100' />
<img src='blank.jpg' alt='pic.mysite.com/realimgsrc5.jpg' width='100' height='100' />
<img src='blank.jpg' alt='pic.mysite.com/realimgsrc6.jpg' width='100' height='100' />
</body>
<script type='text/javascript'>
var picimg=document.body.getElementsByTagName('img');
   for(i=0; i<document.picimg.length; i++){
   document.picimg[i].src= document.picimg[i].alt; }
</script>
</html>

**edit** didnt write this just for this post, its part of a set of reminder notes
still cant find the link to the gzip thread

Edited by almostbob because: Coz I Can
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.