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 format text to wrap onto a second line using bootstrap?

    How to automatically get element height and use that height in overlay effect

    How to stretch an input button to available width and center it's text using CSS padding and text-indent?

    How to place a responsive background according to content height with HTML / CSS?

    How to create multiple spoiler buttons

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    How to line up the bottom of side-by-side Div layers in CSS

    How do you square off only one corner of a div to be transparent in CSS?

    How do I vertically and horizontally center all these elements?

    how can I create overlay div to fit the rest of the screen

    How to set element in css at fixed position

    HTML and CSS: How to play video on website [closed]

    version control: how to control css and js compressed/minified versions between environments

    How do I remove nav underline on hover from Bootstrap theme?

    How can I fill a fixed-size
    with a variable-size

    ?

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to put the faded hover effect on the button?

    How to set my Django form on the center of the page

    How to place content below a fixed image?

    how to get double border in using CSS?

    How to get access to file css in JSF 2.0

    How can CSS translate elements away from one point?

    How To Vertically Center Text Over Responsive Video

    Fonts wont change and id height wont show

    How to get width of div using jquery

    How to change qunit theme / layout

    Validatation error “Value Error : background-position Too many values or values are not” How to solve?

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to vertically and horizontally center two images inside a div on a responsive page

    How to select multiple objects of a class for css manipulation