3

I have a website in which I finished with the basic layout, design, fonts, styles, css etc.

For almost whole of the website, the layout i.e the sidebar, the footer, the background etc. will remain the same. There are custom embedded fonts used as well.

Since this basic layout will remain the same all across the website, I wanted to ask how can I prevent downloading of this content (like side-bar, fonts, or javascript etc.) again for the user, so that the other pages after the start do not take as much time as the start page.

I am sure there would be some mechanism since most of the websites have header/footer/sidebar in common across the pages. My website is in plain html/css, and there's no backend being used. Any ideas?

user1372448
  • 427
  • 2
  • 12
  • 22
  • https://developers.google.com/speed/docs/best-practices/caching – SRN Aug 12 '12 at 13:30
  • What you're referring to is called caching, I know it can be done per page, or per resource (css file, js file, pictures). Don't know if it can be done with parts of the page. Great question though – Madara's Ghost Aug 12 '12 at 13:30
  • NOT RECOMMENDED! But, using frames would be a solution, so only the content would change, the footer and header stay the same... but do not do this. Good question, though.. and seems like the answer is not as easy as it seems... – Chris Aug 12 '12 at 16:50

6 Answers6

1

Your images, fonts, css and other contents will most likely be cached by the client's browser on the first hit, so it will be downloaded just once.

For the html page itself, since you use static html content, the only way I can think of is using AJAX request.

Johnny5
  • 6,664
  • 3
  • 45
  • 78
0

You probably want to use includes. So on each page you'd have a header include, a footer include, a sidebar include and even an include containing links to your css/js files.

Simplest way to do this would be to change your pages to be .php pages and use php includes to pull in the header file, footer file etc.

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • 1
    I think you are more talking about reusing the code, server-side. The PO asked about not re-downloading the entire page, from the client point of view. – Johnny5 Aug 12 '12 at 13:38
  • Yeah, I maybe misunderstood what he was asking. – Billy Moat Aug 12 '12 at 13:42
  • You won't reload the entire page with dynamic inclusion. –  Aug 12 '12 at 16:10
  • @nodirtyrockstar: what do you mean? Well, I actually never thought of the issue client side and never bothered to search for best practices, just did it as Billy Moat explained... nice to see that someone else uses this approach too :) – Chris Aug 12 '12 at 16:48
  • See the answer I posted for the link to the dynamic inclusion tutorial. It explains how everything works. –  Aug 14 '12 at 15:25
0

You can static-site generator like Jekyll.

Tanzeeb Khalili
  • 7,324
  • 2
  • 23
  • 27
0

You may design a basic layout first.

  • Avoid inline and embedded CSS maximum and add a class (can assign to multiple) or id (can assign to single) to common selectors.
  • Make a master stylesheet like master.css and attach this to every page.

Hope this helps.

Alfred
  • 21,058
  • 61
  • 167
  • 249
0

You can do this in two way. You say you don't have a backend, however the server where your website is hosted can be the backend.

Without any backend interaction: If you really prefer not to use the backend at all, you can make this a single page website, with some javascript to switch the content you have in there. The idea is you have your website structure, and your default data available the way you normally have it right. But you also have the html for your other pages in hidden divs. Then when you want to switch to say the about link you use javascript to get the content from the hidden div with that content and you place that content in the main div. 

 <!--First lets use jquery thought it can use some other framework-->
<script src="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery"></script>
<script>
    $('a[href=#myAboutPage]').on('click',function(){//Whenever link that points to #myAboutPage is clicked
         var getHTMLFROM = document.getElementById('myAboutPageHiddenContent').innerHTML;

         //And place it on main div
         document.getElementById('mainDivContent').innerHTML = getHTMLFROM
    });
</script>

If you wanted to use some ajax interactions: The process would be the same with the exception that the getHTMLFROM content, would actually be an html file that you request from the server.

Both of this javascript oriented methods will work, but would NOT recommend if you want your information to be SEO friendly. With that said reuse an external piece of css, to minimize redownloading the styling of your interface every single time.

Andres Gallo
  • 671
  • 6
  • 13
0

There are definitely many ways to do this. I am a fan of dynamic inclusion. Here is a link to a great tutorial which explains how to set it up for your own page very simply. Dynamic Inclusion Tutorial NOTE: Don't be afaid of PHP, or having to change your file extension to PHP. It won't change your coding experience at all. It will just enhance your abilities.

I also have used the Javascript feature to hide certain elements. Depending on the size of your website, it may be just as easy to reload your CSS and navigation elements. However, if you really don't want your menu and logo to blink momentarily while it is reloading, you can just hide/reveal elements very simply with a bit of JS.

Here is an example function from my website:

function toggleVisible(e){
var i = e.id;
if(e.className == 'collapsed')
{
    e.className = 'expanded';
    e.innerHTML = 'Hide'
    var hiddenArray = document.getElementsByClassName('hidden' + i);
    hiddenArray[0].setAttribute('class', 'expanded' + i);
}
else if (e.className == 'expanded')
{
    e.className = 'collapsed';
    e.innerHTML = 'Show More';
    var expandedArray = document.getElementsByClassName('expanded' + i);
    expandedArray[0].setAttribute('class', 'hidden' + i);
}

}

The above code will run when the following link is clicked:

<a href="anywebsite.com">ANYWEBSITE.com</a>  ||  <a onClick="toggleVisible(this)" id="4" class="collapsed">Show More</a> || <a href="document.pdf">View PDF</a>

Also, another user mentioned caching. Caching appears to be unreliable. Check out the following links for more info:

Community
  • 1
  • 1