5

I'll summarise. Please correct me wherever I was not able to phrase my question correctly.

I have a few PHP pages, all of them have the following format:

<?php
include "header.php";
?>
INSERT PAGE SPECIFIC MATERIAL HERE
<?php
include "footer.php" ?>

header.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Main CSS -->
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <navmenu></navmenu>

footer.php

    <footer></footer>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- Theme JavaScript -->
    <script src="js/main.js"></script>

</body>
</html>

I am new to PHP and not sure if this is the correct way to efficiently structure my PHP files because my concerns are:

  1. Each PHP page now loads the same navigation menu and footer. This is intended and is ok. However, it also loads ALL CSS and JS together, even when there are lots of lines of CSS and JS where it is not actually useful in that specific page BUT used in other pages. Is this a need for concern and if yes what ways should we go about doing this?
  2. Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
  3. What is the standard practice when dealing with this case?

Would appreciate it if you can give some advice!

Improve this question
4
  • You can create a templating system if you want that will give you the option to include or not certain css or js libraries. Commented Oct 5, 2016 at 10:02
  • "However, it also loads ALL CSS and JS together, even when there are lots of lines of CSS and JS where it is not actually useful in that specific page BUT used in other pages" - do you expect the typical visitor of your site to come by and look at one single page, then go "aw, this is shite, I'm off to somewhere else" - or do you expect them to visit multiple pages consecutively? Well there's your answer. Commented Oct 5, 2016 at 10:08
  • @CBroe Yes, for example, the index.php usually has a lot of plugins to make the landing page cool, but those plugins are not used in other pages like search.php and product.php but read by them because they are in the header.php. My question is then is it worth the trouble to separate them. Please see WillParky93 suggestion below. Commented Oct 5, 2016 at 12:27
  • 2
    If your users generally reach the cool landing page first, they will download all that CSS and JavaScript on their first page load; it should then be cached locally by their browser, so it won't be reloaded when they visit another page. You may be better off waiting until something is actually causing you a specific, measurable problem, and then asking about that problem. Commented Oct 8, 2016 at 9:33

4 Answers 4

Reset to default
2

Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?

You should create ONE css file and ONE js file for your entire web site. don't use php file act as css because:

  1. If you have high visited web site, It's better to have ONE css and js file. Because It's a direct file. but when you are creating css or js by php file, php need to calculate. Maybe you think it's fast calculation, but if you need a good performance on high visited web site, it matters.

  2. If you create css and js file by php, sometimes you need to import multiple js or css file. Who knows? maybe it makes you to use 10 js and 10 css inside your head tag! and It's bad for SEO.

  3. Don't worry about one css or js file size. It's better with lower size but you can still create 100KB css or js file without SEO problem.

  4. You can have one css file for all media. print included. Doesn't matter you are using multiple or single file, always use @media print{} inside the same file if you need it.

  5. ONE css and js file can be globally cached. even if you don't need the css or js file, the global css and js file are already cached.

I'm not saying ONE css and js file is always great idea but it has the most benefit.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

If you want to reduce the ammount of css/js on your page, then you can do something like this... Call your CSS with:
<link rel='stylesheet' type='text/css' href='css/style.php' />

Inside style.php it would look like something like this: 

 <?php
 switch(basename($_SERVER['PHP_SELF'])){
    case 'index.php':
      echo 'CSS code for index.php gos here';
    break;

    case 'login.php':
      echo 'CSS code for login.php gos here';  
    break;
 }
?>

Unless you've got like lots of styling and javascript which is confirmed to be seriously increasing load time, then it's fine and I wouldn't do the above.

Improve this answer

3 Comments

I will give you a +1 but I happen to run out of votes today, will do so tomorrow.
Nice suggestion with the case switch, but it seems way too much effort. If using a standard header and footer that includes ALL the css and js is the standard practice, then I dont feel the need to change anything. Thing is, do normal html pages also load ALL the JS, CSS needed for ALL the pages?
It purely depends on the developer. It would decrease load time if each HTML page had the minimum CSS/JS needed for that page. When I ran my little site years ago (just HTML, before I dived into php) I had all my CSS in one file. Proffesionals would most likely split it though.
1 
<?php 
$filename = basename(__FILE__, '.php'); 
?>
<link rel="stylesheet" href="css/<?= $filename ?>.css" />

...

<script src="js/<?= $filename ?>.js"></script>

Drawbacks: 1. Naming each CSS and JS file as your PHP file. 2. Each PHP file should have its own CSS and JS files

P.S: Minimizing all your styles and scripts to only one file loads your pages faster.

Improve this answer

Comments

0

Yes it is good approach to manage code. To include same header and footer you can easily add/update/remove menus and other functionality without edit every page file.

Improve this answer

2 Comments

So you would recommend taking out navmenu and footer into another php include and make the <head> of php pages different so as to not include unneccessary JS and CSS?
No you just create two header and footer files where you can put js, css and menus which we required every pages. I would like to suggest put js files in footer which you are using for every pages. it will help improve your page load time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.