Link to home
Start Free TrialLog in
Avatar of rhyno99
rhyno99

asked on

php: print, include, or neither to save loading time

Hello Experts,
I have a rather lengthy menu bar that is included on a template for every page of my website. I am trying to see if there is a way to cut down loading time by making the menu an external file and using php include(). Would it be best to include as a .html or as a .php file? I am assuming that if I choose the .php file option, I will need to use print. Any other suggestions for a faster loading of this part of the my template would be very appreciated.
Thanks,
rhyno99

Below is the menu html.

<div class="textBox2">
    <div id="grades">
      <!--<a href="../index.html"><div class="menuButton"id="home">Home</div></a>-->
      <div class="menuButton"id="hideshowWelcome">Home</div>
      <div class="menuButton"id="hideshowk-2">Grades K-2</div>
      <div class="menuButton"id="hideshow3-5">Grades 3-5</div>
      <div class="menuButton"id="hideshow6-8">Grades 6-8</div>
      <div class="menuButton"id="hideshow9-12">Grades 9-12</div>
    </div>
</div>


<div class="textBox2">
  <div id="welcome" class="outer_menu_div">
          
<div class="inner_menu_div">      
        <div class="menuBar2" id="mHomeAnswersParent">
        Answers</div>
        <div id="mHomeAnswersChild" class="homeTable">
       
       <!-- <h3><a href="../all-answers.html">All Science Answers</a></h3>-->
        <h3><a href="../astronomy-answers.html">Astronomy Answers</a></h3>
        <h3><a href="../biology-answers.html">Biology Answers</a></h3>
        <h3><a href="../chemistry-answers.html">Chemistry Answers</a></h3>
        <h3><a href="../earth-science-answers.html">Earth Science Answers</a></h3>
        <h3><a href="../physics-answers.html">Physics Answers</a></h3>
        <!--<h3><a href="../human-biology-answers.html">Human Biology Answers</a></h3>-->
        </div>
        </div>
<div class="inner_menu_div">      
       
        <div class="menuBar2" id="mHomeGamesParent">Games</div>
        <div id="mHomeGamesChild" class="homeTable">
       
        <h3><a href="../all-games.html">Science Games</a></h3>
 
        </div>
        </div>
<div class="inner_menu_div">      
       
        <div class="menuBar2" id="mHomeActivitiesParent">Activities</div>
        <div id="mHomeActivitiesChild" class="homeTable">
       
        <h3><a href="../all-activities.html">Science Activities</a></h3>
       
        </div>
        </div>
<div class="inner_menu_div">
             
        <div class="menuBar2" id="mHomeWorksheetsParent">Worksheets</div>
        <div id="mHomeWorksheetsChild" class="homeTable">
       
        <h3><a href="../all-worksheets.html">Science Worksheets</a></h3>
       
        </div>
        </div>
<div class="inner_menu_div">
             <div class="menuBar2" id="mHomeLinksParent">Links</div>
          <div id="mHomeLinksChild" class="homeTable">
       
        <h3><a href="../all-links.html">Science Links</a></h3>
       
        </div>
        </div>
</div>
   
    <div id="catk-2" class="outer_menu_div">
      <div class="inner_menu_div">
        <div id="mk-2ObservationParent"class="menuBar2">Observation</div>
        <div id="mk-2ObservationChild" class="k-2Table">
       
<h3><a href="../K-2/observation/water-and-ice.html">Water and Ice</a></h3>
<h3><a href="../K-2/observation/rocks-and-sand.html">Rocks and Sand</a></h3>
<h3><a href="../K-2/observation/sun-and-weather.html">Sun and Weather</a></h3>
<h3><a href="../K-2/observation/force-and-motion.html">Force and Motion</a></h3>
<h3><a href="../K-2/observation/your-body.html">Your Body</a></h3>
       
        </div>
      </div>
     
      <div class="inner_menu_div">
        <div id="mk-2SortingParent" class="menuBar2">Sorting</div>
        <div id="mk-2SortingChild" class="k-2Table">
       
<h3><a href="../K-2/sorting/grouping-objects.html">Grouping Objects</a></h3>
<h3><a href="../K-2/sorting/sorting-rocks.html">Sorting Rocks</a></h3>
<h3><a href="../K-2/sorting/alive-and-not.html">Nature and Not</a></h3>
     
      </div>
      </div>
     
      <div class="inner_menu_div">
        <div id="mk-2SystemsParent" class="menuBar2">Systems</div>
        <div id="mk-2SystemsChild" class="k-2Table">
       
<h3><a href="../K-2/systems/living-systems.html">Living Systems</a></h3>
<h3><a href="../K-2/systems/nonliving-systems.html">Non-Living Systems</a></h3>

       
        </div>
      </div>
     
      <div class="inner_menu_div">
        <div id="mk-2LivingParent" class="menuBar2">Living Things</div>
        <div id="mk-2LivingChild" class="k-2Table">
       
<h3><a href="../K-2/living/life-cycle.html">Life Cycle</a></h3>
<h3><a href="../K-2/living/plants.html">Plants</a></h3>
<h3><a href="../K-2/living/animals.html">Animals</a></h3>
<h3><a href="../K-2/living/insects.html">Insects</a></h3>
<h3><a href="../K-2/living/fossils.html">Fossils</a></h3>
     
      </div>
      </div>
     
     <div class="inner_menu_div">
       <div id="mk-2ExperimentsParent" class="menuBar2">Experiments</div>
       <div id="mk-2ExperimentsChild" class="k-2Table">
       
<h3><a href="">Scientific Method</a></h3>
<h3><a href="">Science Fair</a></h3>
<h3><a href="">Safety</a></h3>
           </div>
      </div>
    </div>
   
    <div id="cat3-5" class="outer_menu_div">
      <div class="inner_menu_div">
        <div id="m3-5SpaceParent" class="menuBar2">Space</div>
        <div id="m3-5SpaceChild" class="three-5Table">
       
<h3><a href="../3-5/astronomy/sun.html">Sun</a></h3>
<h3><a href="../3-5/astronomy/moon.html">Moon</a></h3>
<h3><a href="../3-5/astronomy/stars.html">Stars</a></h3>
<h3><a href="../3-5/astronomy/planets.html">Planets</a></h3>
<h3><a href="../3-5/astronomy/space.html">Space</a></h3>
       
        </div>
      </div>
     
      <div class="inner_menu_div">
        <div id="m3-5LifeParent" class="menuBar2">Life Science</div>
        <div id="m3-5LifeChild" class="three-5Table">
       
<h3><a href="../3-5/biology/living.html">Alive/Not Alive</a></h3>
<h3><a href="../3-5/biology/lifecycle.html">Life Cycle</a></h3>
<h3><a href="../3-5/biology/grouping.html">Grouping and Sorting</a></h3>
<h3><a href="../3-5/biology/adaptations.html">Adaptations</a></h3>
<h3><a href="../3-5/biology/foodweb.html">Food Web</a></h3>
<h3><a href="../3-5/biology/heredity.html">Heredity</a></h3>
<h3><a href="../3-5/biology/cells.html">Cells</a></h3>
       
        </div>
      </div>
     
      <div class="inner_menu_div">
        <div id="m3-5ChemParent" class="menuBar2">Chemistry</div>
        <div id="m3-5ChemChild" class="three-5Table">
     
<h3><a href="../3-5/chemistry/structureofmatter.html">Matter and Elements</a></h3>
<h3><a href="../3-5/chemistry/statesofmatter.html">States of Matter</a></h3>
<h3><a href="../3-5/chemistry/conservation.html">Conservation of Matter and Energy</a></h3>
       
        </div>
      </div>
     
      <div class="inner_menu_div">
        <div id="m3-5EarthParent" class="menuBar2">Earth Science</div>
        <div id="m3-5EarthChild" class="three-5Table">
       
<h3><a href="../3-5/earth/watercycle.html">Water Cycle</a></h3>
<h3><a href="../3-5/earth/weather.html">Weather</a></h3>
<h3><a href="../3-5/earth/rocks.html">Rocks</a></h3>
<h3><a href="../3-5/earth/soil.html">Soil</a></h3>
<h3><a href="../3-5/earth/landforms.html">Landforms</a></h3>
<h3><a href="../3-5/earth/erosion.html">Erosion</a></h3>
<h3><a href="../3-5/earth/weathering.html">Weathering</a></h3>
<h3><a href="../3-5/earth/disasters.html">Natural Disasters</a></h3>
<h3><a href="../3-5/earth/fossils.html">Fossils</a></h3>
       
        </div>
      </div>
     
      <div class="inner_menu_div">
        <div id="m3-5PhysicsParent" class="menuBar2">Energy/Motion</div>
        <div id="m3-5PhysicsChild" class="three-5Table">
       
<h3><a href="../3-5/physics/forms-of-energy.html">Forms of Energy</a></h3>
<h3><a href="../3-5/physics/force-and-motion.html">Force and Motion</a></h3>
<h3><a href="../3-5/physics/simplemachines.html">Simple Machines</a></h3>
       
        </div>
      </div>
     
      <div class="inner_menu_div">
        <div id="m3-5HumanParent" class="menuBar2">Human Body</div>
        <div id="m3-5HumanChild" class="three-5Table">
       
<h3><a href="../3-5/humanbiology/skeletal.html">Skeletal System</a></h3>
<h3><a href="../3-5/humanbiology/muscular.html">Muscular System</a></h3>
<h3><a href="../3-5/humanbiology/digestive.html">Digestive System</a></h3>
<h3><a href="../3-5/humanbiology/respitory.html">Respitory System</a></h3>
<h3><a href="../3-5/humanbiology/nervous.html">Nervous System</a></h3>
<h3><a href="../3-5/humanbiology/cardiovascular.htm">Cardiovascular</a></h3>
            
        </div>
      </div>
      <!--<div class="inner_menu_div">
        <div class="menuBar2">Experiments</div>
        <ul>
        <li class="3-5Table"><h4>
              <a href="../3-5/scientificmethod/scientificmethod.html">Scientific Method</a></h4></li>
        <li class="3-5Table"><h4><a href="#">Experiments</a></h4></li>
        <li class="3-5Table"><h4>
        <a href="../3-5/scientificmethod/sciencefair.html">Science Fair</a></h4></li>
            <li class="3-5Table"><h4><a href="#">Challenges</a></h4></li>
        </ul>
      </div>-->
  </div>
  <div id="cat6-8" class="outer_menu_div">
      <div class="inner_menu_div">
        <div id="m6-8AstroParent" class="menuBar2">Astronomy</div>
        <div id="m6-8AstroChild" class="six-8Table">
           
<h3><a href="../6-8/astronomy/sun.html">The Sun</a></h3>
<h3><a href="../6-8/astronomy/moon.html">The Moon</a></h3>
<h3><a href="../6-8/astronomy/planets.html">Planets</a></h3>
<h3><a href="../6-8/astronomy/orbitpatterns.html">Orbit Patterns</a></h3>
<h3><a href="../6-8/astronomy/asteroids.html">Asteroids</a></h3>
<h3><a href="../6-8/astronomy/meteors.html">Meteors</a></h3>
<h3><a href="../6-8/astronomy/comets.html">Comets</a></h3>
<h3><a href="../6-8/astronomy/sizeanddistance.html">Size and Distance</a></h3>
           
            </div>
    </div>
       <div class="inner_menu_div">
        <div id="m6-8BioParent" class="menuBar2">Biology</div>
        <div id="m6-8BioChild" class="six-8Table">
                
<h3><a href="../6-8/biology/classification.html">Classification</a></h3>
<h3><a href="../6-8/biology/foodweb.html">Food Web</a></h3>
<h3><a href="../6-8/biology/cells.html">Cells</a></h3>
<h3><a href="../6-8/biology/heredity.html">Heredity</a></h3>
<h3><a href="../6-8/biology/evolution.html">Evolution</a></h3>
             
              </div>
            </div>
       
        <div class="inner_menu_div">
              <div id="m6-8ChemParent"class="menuBar2">Chemistry</div>
            <div id="m6-8ChemChild" class="six-8Table">
             
<h3><a href="../6-8/chemistry/properties-of-matter.html">Properties of Matter</a></h3>
<h3><a href="../6-8/chemistry/matter-and-elements.html">Matter and Elements</a></h3>
<h3><a href="../6-8/chemistry/mixtures-and-solutions.html">Mixtures and Solutions</a></h3>
             
              </div>
        </div>
       
      <div class="inner_menu_div">
        <div id="m6-8EarthParent"class="menuBar2">Earth Science</div>
        <div id="m6-8EarthChild" class="six-8Table">
       
<h3><a href="../6-8/earth/properties-of-earth-materials.html">
Properties of Earth Materials</a></h3>
<h3><a href="../6-8/earth/layers-of-the-earth.html">Layers of the Earth</a></h3>
<h3><a href="../6-8/earth/formation-erosion-weathering.html">
Formation, Erosion, and Weathering</a></h3>
<h3><a href="../6-8/earth/fossils-and-earth-history.html">Fossils and Earth's History</a></h3>
<h3><a href="../6-8/earth/hydrosphere-and-atmosphere.html">Hydrosphere and Atmosphere</a></h3>
           
           </div>
      </div>
       
       <div class="inner_menu_div">  
              <div id="m6-8PhysicsParent" class="menuBar2">Physics</div>
            <div id="m6-8PhysicsChild" class="six-8Table">
           
<h3><a href="../6-8/physics/force-and-motion.html">Force and Motion</a></h3>
<h3><a href="../6-8/physics/light-energy.html">Light Energy</a></h3>
<h3><a href="../6-8/physics/sound-energy.html">Sound Energy</a></h3>
<h3><a href="../6-8/physics/heat-energy.html">Heat Energy</a></h3>
<h3><a href="../6-8/physics/motion-energy.html">Motion Energy</a></h3>
<h3><a href="../6-8/physics/electrical-energy.html">Electrical Energy</a></h3>
<h3><a href="../6-8/physics/chemical-energy.html">Chemical Energy</a></h3>
<h3><a href="../6-8/physics/energy-transfers-and-transformation.html">
                    Energy Transfer and Transformation</a></h3>
<h3><a href="../6-8/physics/simple-machines.html">Simple Machines</a></h3>
<h3><a href="../6-8/physics/wave-behavior.html">Wave Behavior</a></h3>
                   
                    </div>
        </div>
       
        <div class="inner_menu_div">
        <div id="m6-8HumanParent" class="menuBar2">Human Biology</div>
         <div id="m6-8HumanChild" class="six-8Table">
         
<h3><a href="#">Components of Organ Systems</a></h3>
<h3><a href="#">Relationships Between Human Systems</a></h3>
<h3><a href="#">Comparison between Human and non Human Systems</a></h3>
                    </div>
      </div>
       
        <!--<div class="inner_menu_div">        
              <div class="menuBar2">Experiments</div>
                    <div class="6-8Table"><h4><a href="#">Science Fair</a></h4></div>
                <div class="6-8Table"><h4><a href="#">Questions</a></h4></div>
                <div class="6-8Table"><h4><a href="#">Predictions</a></h4></div>
            </div>-->
</div>
 
  <div id="cat9-12" class="outer_menu_div">
    <div class="inner_menu_div">
      <div id="m9-12AstroParent" class="menuBar2">Astronomy</div>
      <div id="m9-12AstroChild" class="nine-12Table">
                           
<h3><a href="../9-12/astronomy/components-of-the-solar-system-and-beyond.html">
                Components of the Solar System and Beyond</a></h3>
<h3><a href="../9-12/astronomy/interactions-in-the-solar-system-and-beyond.html">
                         Interactions in the Solar Sytem</a></h3>
<h3><a href="../9-12/astronomy/interactions-in-the-solar-system-and-beyond.html">
                  Interactions Beyond the Solar System</a></h3>
               
                </div>
    </div>
     
    <div class="inner_menu_div">
    <div id="m9-12BioParent" class="menuBar2">Biology</div>
    <div id="m9-12BioChild" class="nine-12Table">
   
<h3><a href="../9-12/biology/characteristics-of-living-matter.html">
                Characteristics of Living Matter</a></h3>
<h3><a href="../9-12/biology/life-proceesses-and-the-flow-of-matter-and-energy.html">
                    Life Processes and the Flow of Energy and Matter</a></h3>
<h3><a href="../9-12/biology/biological-evolution.html">Biological Evolution</a></h3>
<h3><a href="../9-12/biology/interdependence-of-life.html">Interdependence of Life</a></h3>
<h3><a href="../9-12/biology/molecular-basis-of-heredity.html">Molecular Basis of Heredity</a></h3>
<h3><a href="../9-12/biology/structure-and-organization-of-living-systems.html">
                    Structure and Organization of Living Systems</a></h3>
<h3><a href="../9-12/biology/human-biology.html">Human Biology</a></h3>
                        
                  </div>
    </div>
     
    <div class="inner_menu_div">
    <div id="m9-12ChemParent" class="menuBar2">Chemistry</div>
    <div id="m9-12ChemChild" class="nine-12Table">
   
<h3><a href="../9-12/chemistry/properties-of-substances.html">Properties of Substances</a></h3>
<h3><a href="../9-12/chemistry/conservation-of-matter-and-energy.html">
                    Conservation of Matter and Energy</a></h3>
<h3><a href="../9-12/chemistry/structure-of-matter.html">Structure of Matter</a></h3>
               
                </div>
    </div>
     
    <div class="inner_menu_div">
    <div id="m9-12EarthParent" class="menuBar2">Earth Science</div>
    <div id="m9-12EarthChild" class="nine-12Table">
   
<h3><a href="../9-12/earth/nature-and-properties-of-earth-materials.html">
                    Nature and Properties of Earth Materials</a></h3>
<h3><a href="../9-12/earth/processes-and-interactions-in-the-earth-system.html">
                          Processes and Interactions in Earth Systems</a></h3>
<h3><a href="../9-12/earth/history-and-evolution-of-the-earth.html">
                          History and Evolution of the Earth</a></h3>
<h3><a href="../9-12/earth/hydrosphere-and-atmosphere.html">
                          Hydrosphere and Atmosphere</a></h3>
<h3><a href="../9-12/earth/components-and-patterns-of-earth-systems.html">
                              Components and Patterns of Earth Systems</a></h3>  
                   
                    </div>
    </div>
     
    <div class="inner_menu_div">
    <div id="m9-12PhysicsParent" class="menuBar2">Physics</div>
    <div id="m9-12PhysicsChild" class="nine-12Table">
   
<h3><a href="../9-12/physics/wave-behavior.html">Wave Behavior</a></h3>
<h3><a href="../9-12/physics/motion-of-objects.html">Motion of Objects</a></h3>
<h3><a href="../9-12/physics/forms-of-energy.html">Forms of Energy</a></h3>
<h3><a href="../9-12/physics/nature-of-force.html">Nature of Force</a></h3>
<h3><a href="../9-12/physics/forces-to-explain-motion.html">Forces to Explain Motion</a></h3>
<h3><a href="../9-12/physics/energy-transfer-and-transformation.html">
Energy Transfer and Transformation</a></h3>
<h3><a href="#">Systems Structure</a></h3>
                   
    </div>
         </div>
     
    <div class="inner_menu_div">
    <div id="m9-12HumanParent" class="menuBar2">Human Biology</div>
    <div id="m9-12HumanChild" class="nine-12Table">
   
<h3><a href="#">Analyze how Systems Regulate Growth</a></h3>
<h3><a href="#">How Human Systems Develop</a></h3>
<h3><a href="#">How Human Organs Regulate Life Functions</a></h3>
   
    </div>
</div><!--Place SS Ad between two of these divs for a right side 160x600 Ad-->


</div><!--these two divs close the menubar-->
</div>
SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rhyno99
rhyno99

ASKER

Thank you all for your help. So I guess there is no speed benefit. After I made the change, I was trying to see if there was a difference.

Is there a resource for speed testing that you recommend?

I guess if it is not speed that is the problem, then what I am trying to fix is making a smoother load. The page seems to jump around a bit when loading. All the action seems to center around the menu. Using jQuery, most of the divs are told to hide depending on what page is displayed. You can see the behavior at www.observescience.org.

Is there a better way, should the divs be told to hide in css then opened by jQuery? What is the load order?

fibo, do you have an example of a menu with an array that I could see and adapt?

Thank you all again for your help,
rhyno99
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rhyno99

ASKER

Thanks DaveBaldwin,
I removed the Google Ads and Facebook code. What should I look for? What do you think might stop the divs from showing then hiding (making the areas jump around on loading)?
Thanks
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rhyno99

ASKER

The jumping is not as bad sometimes. Does that have to do with cache? I really don't know anything about it. What might be taking so much memory? Is this a problem? Should I be trying to use less? Thank you again for your help.
Avatar of rhyno99

ASKER

All errors are google ad, google +1, or facebook code. One is placing an inline (href)  outside of a block (div). I decided it was okay for now.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rhyno99

ASKER

I know how to fix but decided to leave for now so users can click the div (not text) to navigate home.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
sorry I don't follow what you mean with
I know how to fix but decided to leave for now so users can click the div (not text) to navigate home.
.  Are you referring to the scripts or the W3 validation errors?
btw I'm using firefox (and firebug) without any issues on your site
Avatar of rhyno99

ASKER

Sorry, the short of it was I left one error. I think you are right about changing to HTML5. The fb like box is not on every page and the pages were checking out. I guess it was more for me. I appreciate the feedback. Please excuse my slow typing, I need to hold my sleeping baby while I type with one hand. :)
Avatar of rhyno99

ASKER

So it seems that I need to remove some scripts? I'll see if there is anything that can go.
LOL I know what it's like - my 10 mth old likes to bang on my keyboard...

That would be the best place to start... try to keep only what is required on each page.
Avatar of rhyno99

ASKER

Understanding what makes pages load well is new to me. Removing the ads, I notice a faster load time. What else might help? I tiled x and y images (when possible) and compressed them. Looking at the scripts, I have:
1. Google +1
2. FB like box
3. Adsense Ads
4. jQuery load
5. jQuery script
6. Google Anayltics

I dumped analytics. What other things might I look for to clean? Did I miss anything?
Avatar of rhyno99

ASKER

scratch that last question. I discovered yslow on firebug. Thank you all for your help.
no problem.  keep us up to date.
Thx for the grade and points.

Additional test ground:
- Check if your jQuery above can be downloaded from Google's servers: they would presumably load faster than from your own server
- Since you need to keep your adsense ads, keeping Google analytics as well will probably have a very low impact.
- Check if you can load the javascript for your "social boxes" (FB & G+) after your </body>. Thus the html will load fast, and will not be delayed by any javascript