How to properly preload images, js and css files?


Tags: php,html,css

Problem :

I'm creating a website from scratch and I was really into this in the late 90's but the web has changed alot since then! And I'm more of a designer so when I started putting this site together, I basically did a system of php includes to make the site more "dynamic"

When you first visit the site, you'll be presented to a logon screen, if you're not already logged on (cookies). If you're not logged on, a page called access.php is introdused. I thought I'd preload the most heavy images at this point. So that when the user is done logging on, the images are already cached. And this is working as I want. But I still notice that the biggest image still isn't rendered immediatly anyway. So it's seems kinda pointless.

All of this has made me rethink how the site is structured and how scripts and css files are loaded. Using FireBug and YSlow with Firefox I see a few pointers like expires headers and reducing the size of each script. But is this really the culprit?

For example, would this be really really stupid in the main index.php? The entire site is basically structured like this

<?php
require("dbconnect.php");
?>

<?php
include ("head.php");
?>

And below this is basically just the body and the content of the site. Head.php however consists of the doctype, head portions, linking of two css style sheets, jQuery library, jQuery validation engine, Cufon and Cufon font file, and then the small Cufon.Replace snippet.

The rest of the body comes with the index.php file, but at the bottom of this again is an include of a file called "footer.php" which basically consists of loading of a couple of jsLoader scripts and a slidepanel and then a js function. All of this makes the end page source look like a typical complete webpage, but I'm wondering if any of you can see immediatly that "this is really really stupid" and "don't do that, do this instead" etc. :) Are includes a bad way to go?

This site is also pretty image intensive and I can probably do a little more optimization. But I don't think that's its the primary culprit. YSlow gives me a report of what takes up the most space:

doc(1) - 5.8K
js(5) - 198.7K
css(2) - 5.6K
cssimage(8) - 634.7K
image(6) - 110.8K

I know it looks like it's cssimage(8) that weighs the most, but I've already preloaded these images from before and it doesn't really affect the rendering.



Solution :

To speed a little, you could assemble all your images on the same image sprite, so that you have only 1 request to download all the images. But that requires you to fine tune your css to let display just the small subset of your image. To have a better explanation, check out : http://css-tricks.com/css-sprites/

Another answer that could seem a little stupid but I like to think of this when I make a website : Just Keep It Simple. I mean do all your JS add real value, do all this images are fine, could you display less, make a lighter design ? I'm not criticizing your work at all, just suggest you...


    CSS Howto..

    How do I make this background repeat horizontally the entire way across the screen?

    How to write syntax in internal css to external css?

    How to stick a div when scrolled past 50% of the item?

    CSS: How do you keep this Div to the right of a float?

    how to connect circles with lines without ovelaping

    How to position a drop down list nav bar inside header in html css

    How do I add a transition to this rollover?

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How to add a z-index to separate image from div border

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    Nginx server (not showing changes) - Delete cache?

    How to show only the top portion of an image with CSS?

    CSS page headers - how to use print margins?

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    How to refer to a CSS style using ASP.NET MVC?

    hover div to show another div

    How to change hover background on links in css?

    How to stick a background behind the navbar?

    Google chart - how to change a css property for the whole table

    How can I align two different-size pieces of text to the left and right while matching baselines?

    How can I make the parent div draggable

    How to 'clip away' part of a div using CSS?

    How to deal with image references in CSS in a Rails 3.1 app

    using css, how to position image so when resizing window, image will not move

    How to make space visible in between an unsorted list in HTML/CSS?

    Liferay: how to avoid rebuilding/redeploying CSS files

    How to get at Apache Wicket PropertyColumn data to dynamically change CSS class based on content?

    jQuery DataTables is messing op my CSS grids in IE8, how to fix?

    How to put Facebook and Twitter buttons next to each other?

    How to add left margin and wrap long lines in code tag