Optimisation de vitesse de chargement des pages (div, tab, css...)

Bonjour à tous...

Cela fait quelques années que je parcours, que je lis et relis les différents articles et sujets sur Alsacréation (j'ai beaucoup apris grâce à ce site) et ce n'est qu'aujourd'hui que je décide de poster mon premier message sur le forum...

Je suis face à une problématique, ou peut être que je suis atteint de la "divite chronique"...

Dans un soucis d'optimisation des pages de mon site, j'ai décidé de transformer des blocs qui étaient construit en tableaux, en adoptant la technique des divs...

Les blocs ont la particularité d'être arrondis et d'être extensibles (largeur, hauteur) afin de garantir une souplesse lors de leurs implémentations ...

Cependant, je me demande si les divs ne sont pas plus lourds pour concevoir des blocs arondis... J'utilise aujourd'hui près de 11 divs plus ou moins imbriqués, pour un seul BLOC et j'ai l'impression que ceux-ci sont lourds lors du chargement d'une page...

Je ne compte pas les différents divs permettant de structurer headers, colones ou menus...

Je voulais savoir s'il n'est pas préférable, dans certains cas, d'utiliser des tableaux au lieu de div afin de préserver un chargement rapide des pages ???

Merci d'avance pour vos réponses...

Cordialement,

a écrit :
Je voulais savoir s'il n'est pas préférable, dans certains cas, d'utiliser des tableaux au lieu de div afin de préserver un chargement rapide des pages ???

Dans un très gros pourcentage des cas, je dirais que les divs sont plus légères. Maintenant, comme pour tout autre élément y compris les tableaux, il est pénalisant de les utiliser là où de simples déclarations CSS feraient l'affaire. Exemple avec un des modules de ta home (au complet hasard) :

<div class="bloc_blanc">

    <div class="header_cadre">

        <div class="hd">
        </div>

        <div class="hg">
        </div>

        <div class="haut">
            <img width="16" height="16" align="absmiddle" src="images/icons/France-Flag-16x16.png"/>
            <a href="location-vacances/france">Vacances en France</a>
        </div>

    </div>

    <div class="cgauche">

        <div class="cdroite">
    
            <div class="contenu">
                Contenu
            </div>
    
            <div class="footer_cadre">
        
                <div class="bd">
                </div>
        
                <div class="bg">
                </div>
        
            </div>
    
        </div>
    </div>
</div>

On s'en sort très bien avec simplement :

<div class="bloc_blanc">
    
    <div class="header">
        <a href="location-vacances/france" title="">Vacances en France</a>
    </div>
    
    <div class="body">
        Contenu
    </div>
    
    <div class="footer">
    </div>
    
</div>

Et encore, j'ai mis un footer bien que tu ne sembles pas en utiliser pour du contenu. On pourrait donc s'en passer (mais peut-être avec des arrière-plans un peu plus lourds).

Merci pour ta réponse

Cependant, je ne sais pas si la solution que tu apporte comprend aussi que les blocs soient extensibles...

Si je comprend bien, les divs :
<div class="header">
<div class="footer">
doivent appeler par le biais du CSS, une image avec une largeur définie...

???

Oui, désolé, j'avais zappé ça. Le HTML que je te proposais n'était stylable que pour une flexibilité en hauteur. Si tu veux aussi la largeur il te faut une div de plus dans le header et une autre dans le footer :

<div class="bloc_blanc">
    
    <div class="header">
        <h3>
            <a href="" title="">Vacances en France</a>
        </h3>
    </div>
    
    <div class="body">
        Contenu
    </div>
    
    <div class="footer">
        <div></div>
    </div>
    
</div>

Mais même remarque que précédemment. Si tu es prêt à avoir des images un tantinet plus lourdes, tu peux te passer totalement de footer vu que tu ne t'en sers (visiblement) pas.
Modifié par marcv (07 May 2009 - 17:45)

Okyoky

Le footer est quand même important afin d'éviter d'avoir une grosse image à utiliser dans le body en background !

Ta solution est simpa et légère... Cependant, je me demande si je ne devrais pas définir des largeurs de bloc afin d'utiliser ta solution...

Cordialement,

a écrit :
Le footer est quand même important afin d'éviter d'avoir une grosse image à utiliser dans le body en background !

Oui enfin "grosse", tout est relatif . Il s'agirait d'une image avec très peu de couleurs et de très grands espaces vides. On serait très probablement en dessous des 4 kilos (en fonction de la hauteur/largeur limite que tu te fixes). Et vu que ça part dans le cache après le premier chargement, ça vaut pitet' bien le coup d'y réfléchir.

a écrit :
Cependant, je me demande si je ne devrais pas définir des largeurs de bloc afin d'utiliser ta solution...

Hmm, non, je ne crois pas. Essaye et tiens nous au courant

Je pencherais plus pour créer 3 images

1 image pour le div header
1 image pour le div body (1px de hauteur avec répétition)
et 1 image pour le div footer...

Et un div principal engloberais les 3 div ...

C'est pas trop mal, mais quel solution pourriez vous me proposer si je souhaite conserver la flexibilité en largeur des blocs (sans que cela soit trop lourd pour le code html)

Je ne veux pas que la loi : "Trop de div, tue les div" soit appliqué !

a écrit :
1 image pour le div header
1 image pour le div body (1px de hauteur avec répétition)
et 1 image pour le div footer...
[...]
quel solution pourriez vous me proposer si je souhaite conserver la flexibilité en largeur des blocs

Avec une seule image par section, la flexibilité horizontale et/ou verticale est :
- en CSS2 : pas possible
- en CSS3 : possible avec {background-size:100%}, mais ce sera moche (images probablement pixelisées et rayon des angles proportionnel à la taille du conteneur)

Perso, la seule solution que je vois est celle que je t'ai proposée, et elle nécessite deux images pour chaque section
Modifié par marcv (07 May 2009 - 20:46)

Bonjour,

Ah, revoilà la quête du Graal.

Merci à marcv pour le travail de fond effectué. Je propose cependant de prendre un peu de recul, parce que c'est toujours instructif.

L'effet recherché est-il réalisable en CSS?

Je parle ici d'utiliser des propriétés CSS pour réaliser les effets graphiques voulus (boites ayant un style graphique particulier, extensibles en hauteur et en largeur), sans utiliser d'images de fond ou en utilisant le moins possible.

Il s'avère que oui... en CSS 3. C'est testable dans certains navigateurs (pour l'essentiel: Safari 3 et 4, Chrome 2, Firefox 3.5). Voilà ce qu'on utiliserait:

1. Une couleur de fond opaque? Pour avoir un fond orange ou brun de base, un peu de background-color (CSS 1). On veut des dégradés légers dans ces teintes pour ajouter un peu de volume? À ma connaissance, ce n'est pas gérable en CSS et pas prévu en CSS 3. Il faut passer par des images (avec juste le dégradé), en plus de la couleur de fond de base qui sera là en complément ou en sécurité.

2. Des bords arrondis? Propriété border-radius (CSS 3).

3. Une ombre portée? Propriété box-shadow (CSS 3).

Dans les propriétés CSS 3 intéressantes pour des boites décorées (mais pas nécessaires ici), il y a aussi les background multiples et les border-image.

Bon, et pour les navigateurs d'aujourd'hui et d'hier, on fait quoi?

Eh bien, on utilise plus d'images de fond, on alourdit la structure HTML, et pour l'essentiel on se casse pas mal la tête. Du moins pour du complètement extensible (hauteur et largeur). Bien souvent, on des largeurs fixes qui permettent de faciliter tout ça. Dans le cas présent, par exemple, on a des blocs de largeur déterminée, alignés (plus ou moins... ça devrait être plus que moins, d'ailleurs ) sur une grille.

Concrètement, on pourra avoir des images correspondant aux largeurs utilisées, et jouer sur les background de deux voire trois éléments imbriqués (ou pas) pour dessiner un bloc complet.

Et pour du vraiment extensible en largeur? C'est plus compliqué. En gros, on se retrouve alors à créer un code HTML très complexe, ou a utiliser un tableau à 9 cellules. Je recommanderais plutôt le tableau, dont la structure est plus «stable», d'ailleurs. Mais, suivant le design et ses caractéristiques, on pourra peut-être simplifier en bonne partie. Par exemple utiliser un tableau à quatre cellules plutôt que neuf, ou quelque chose d'équivalent (même si forcément différent dans la structure) avec des DIV.

J'ai écrit il y a quelques temps un article qui récapitule en bonne partie cette quête du Graal CSSien (aparté sur CSS 3 en moins, exemples en plus):
http://covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

Bonne lecture.

Aparté sur les performances

L'impact sur les performances est négligeable pour les pages de ce site. Il peut l'être un peu moins pour un contenu plus conséquent, que l'on s'amuserait à manipuler en JavaScript pour compliquer les choses et ralentir le navigateur avec des accès DOM répétés. Mais ici, ce n'est pas un facteur de décision.

Par contre, si le code HTML est lourd (dizaine de DIV imbriqués pour réaliser une décoration de boite), ça pose un problème pour l'évolution des styles et pour la maintenance du code HTML.
Modifié par Florent V. (08 May 2009 - 00:22)

a écrit :
On veut des dégradés légers dans ces teintes pour ajouter un peu de volume? À ma connaissance, ce n'est pas gérable en CSS et pas prévu en CSS 3.

Pas prévu dans les specs mais déjà implémenté chez l'ami Webkit.
Par contre, à spécifier sur background-image et non background-color (pas très inspiré, je trouve... )
Modifié par marcv (08 May 2009 - 08:43)