[RESOLVED] includes for html header, footer, naviagation, responsive site, caching, slow js

jrough

I am building a web site that is all responsive, large screen, tablet, mobile sizes. Design has large images. When the page resizes it is jerky and doesn't recalculate in javascript until the event letting go of the page happens. I noticed in Chrome Inspector some of the javascripts take 8 secs to recalculate.

My question is will using php includes for header, footer and navigation make the load lighter? Can the header/footer/nv be cached? Can I cache the static images?

Or is the lag just because of the page re-rendering in Javascript and the includes aren't changing anything? If PHP serves the header and footer on every page hit and javascript, CSS renders them, then theoreticallyis it the same difference as having the header/footer/nav duplicated in each page? In this case the header,footer or nav will not be changing or at least I am not required to give them that feature so I am not worried about the client being able to edit it.

I want to ensure that the recalculations in the responsive is as speedy as possible.

thanks,

Weedpacket

What happens on the server has nothing to do with how responsive the layout is on the client.

Have you considered using CSS instead of JavaScript for controlling which layout is used at each size?

jrough

I am sorry the question was confusing.

What is the benefit of using PHP to serve the common header/footer/nav instead of using related style sheets on each page for the header/footer/nav? It would be more modular but is there any other advantage?

cretaceous

jrough;11042119 wrote:
I am sorry the question was confusing.

What is the benefit of using PHP to serve the common header/footer/nav instead of using related style sheets on each page for the header/footer/nav? It would be more modular but is there any other advantage?

It's massively easier to manage.. but it won't gain you any page load improvements.
8 seconds is bad.. as Weedpacket says you should be using media queries to serve different css - however large images are a problem as they get loaded even if not needed.
Check out this excellent script for a solution: http://adaptive-images.com/