Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

All PHP pages include the entire set of CSS and JS, efficient?

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!

like image 759
iWillGetBetter Avatar asked Oct 05 '16 09:10

iWillGetBetter


2 Answers

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.

like image 154
ICE Avatar answered Sep 27 '22 15:09

ICE


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.

like image 43
IsThisJavascript Avatar answered Sep 27 '22 15:09

IsThisJavascript