omarnetfr/gist:22fbd663646947a3d3ba Secret

## gistfile1.txt
Bonjour,

Dans le présent document j'ai séparé l'ensemble des modifications selon le sommaire suivant:

I-Résumé des modifications
   Chemins codes sources
   Optimisations de structure (HTML, CSS, JS)
   Optimisations de comportement (HTML, CSS, JS, APACHE)
II-Détail des modifications (par étapes et rapports)
   3 étapes et leurs rapports

Je vous souhaite bonne lecture.

*************************************************************************************************


I-Résumé des modifications:

*******************************Chemins codes sources*********************************************
1.HTML :
      http://entries.webperf-contest.com/4ce63091aafd1/sources/index-uncompressed.html (page d'index)
      http://entries.webperf-contest.com/4ce63091aafd1/sources/engagements-pratique-entreprise.asp-uncompressed.html (page footer)

2.CSS :
      http://entries.webperf-contest.com/4ce63091aafd1/sources/all-inline-uncompressed.css (CSS inline)
      http://entries.webperf-contest.com/4ce63091aafd1/sources/all-bottom-uncompressed.css (CSS complet)
      http://entries.webperf-contest.com/4ce63091aafd1/sources/all-lazy-uncompressed.css (CSS Autocomplete+JSON)

3.JS :
      http://entries.webperf-contest.com/4ce63091aafd1/core.js (est constitué des 2 scripts suivant en utilisant Packer JS de Dean Edwards)
      http://entries.webperf-contest.com/4ce63091aafd1/sources/jquery-uncompressed.js
      http://entries.webperf-contest.com/4ce63091aafd1/sources/autocomplete-uncompressed.js

4.APACHE :
      http://entries.webperf-contest.com/4ce63091aafd1/sources/htaccess.txt

*******************************Optimisations de structure****************************************
==Au niveau page HTML
   -Réduction considérable du DOM passage de 1962 éléments environ à 1345 éléments, résultats avec YSLOW passage du Grade F au Grade C, et aussi réduction de la complexité de la page selon YOTTAA et pagespeed, résultat coté browser accélération du rendu d'affichage, parsing pour le rendu CSS et JS, et réduction du onLoad.

==Au niveau CSS
   -Refonte totale des CSS sans aucuns hack en assurant la compatibilité avec tous les navigateurs, et utilisation des selectors bien ciblé en favorisant les # afin d'accélérer le rendu.
   -Utilisation des outils comme CSS Tidy qui organise et optimise le CSS pour plus de rapidité.
   -Utilisation de la compression pour CSS.
   -Utilisation des propriétés CSS2.1 coins arrondi en utilisant les propriété (-moz-border-radius pour FF, -webkit-border-radius pour safari et chrome et border-raduis pour IE8) pour la totalité des blocs avec coins arrondis.
   -Séparation du CSS en 3 parties :
        *CSS inline (all-inline-uncompressed.css) qui est inclut directement dans la page entre <style></style> juste après le titre et l'encodage. (pour plus de détail sur le comportement voir partie CSS Optimisations de comportement).
        *CSS Complet (all-bottom-uncompressed.css) qui est appelé en external après la balise body.
        *CSS Lazy (all-lazy-uncompressed.css) qui est chargé après l'action utilisateur est sert pour les styles du moteur de recherche et les flux JSON.

==Au niveau JavaScript
   -Utilisation d'une version légère de jQuery 1.2.6 (90ko en normal 15ko en gzip+minifié).
   -Compression jQuery avec Autocomplete en utilisant le Packer JS de Dean Ewards gain énorme 19ko en gzip+packé et utilisation de defer pour qu'ils bloque pas le téléchargement des autres ressources.
   -Optimisation des JS en les regroupant en bas de la page et utilisation de defer pour qu'il soit pas bloquant et pour qu'il s'exécute à la fin.
   -Nettoyage des fonctions inutiles.
   -Compression en utilisant le Packer de Dean Edwards et JSMIN.

==Au niveau Images
   -Optimisation des images PNG 8 bits en réduisant la palette des couleurs au nombre de couleurs nécessaire et l'utilisation d'indexed colors pour les images qui ont moins de 256 couleurs.
   -Regroupement des images en sprites (sprite-filet pour les filets des background, sprite-pictos pour les pictos).
   -Spécification des largeurs et hauteurs des images (selon les recommandations de pagespeed, et pour optimiser les perfs navigateurs lors de l'allocation de la mémoire pour les images).

==Au niveau Conf Apache
   -Mise en place du GZIP pour les contenus text (html, css, js, json)
   -Mise en place d'un cache (cache-control, expires) d'un mois pour les contenus (images, css, js), et no cache pour HTML

*******************************Optimisations de comportement*************************************
==Au niveau page HTML
   -Suppression des balises scripts bloquantes qui était partout dans la page
   -Mifier les codes sources a permit la réduction du poids, donc réduction du onload.
   -Chargement de 6 images (partenaires) en html,des sprites, et du CSS complet afin d'avoir un bon progressive render et pour que l'utilisateur ait le haut de la page chargé lors de la fin du onload.
   -Conversion du favicon en png, puis en base 64 et utilisation de datauri pour l'inclure.
   -Utilisation d'une image png transparente 1x1 en base 64 sur le logo pour pouvoir faire les map et mettre le logo en background, tout ça pour pouvoir inclure le logo en plaquette.

==Au niveau CSS
   -Mise en place d'un CSS inline (all-inline-uncompressed.css) <300 bytes en gzip+minifié entre la balise <style></style> qui précharge les 3 sprites qui seront utilisés ultérieurement par le css complet external, ce CSS aussi contient un reset padding, margin pour les éléments du DOM, cette technique consiste à utiliser 1 selector qui est déja intégré dans le CSS external (all-bottom-uncompressed.css) par background, l'utilité c'est de pouvoir réutiliser le CSS complet dans d'autres pages, cette technique consiste à la fois à réduire d'une façon considérable le start render qui est passé de 2.510s à environ 0,270s, et le onLoad puisqu'on on a un waterfall selon WPT bien rempli et sans beaucoup de blancs.

==Au niveau JS
   -Récupération du contenu des cookies envoyé par le serveur et leurs stockage dans des variable dans le scope globale window, afin de les réutiliser pour construire les urls lors d'un click sur un lien en utilisant le bind de jQuery, l'utilité et de pouvoir réduire le poids totale de la page en supprimant ces query string fixé en dur dans le HTML.
   -Chargement des 4 images restantes (partenaires) + la première image banner après l'événement onLoad.
   -Détection du mouvement onmouseover sur le document pour :
       *Charger la bannière publicitaire + ses 2 images restantes et pour la démarre en gros ce qui est en haut pour avoir une meilleure expérience utilisateur.
       *Pour charger la pub du droite
       *Pour activer le menu déroulant
       *Pour activer le moteur du recherche
       *Pour charger le CSS Lazy
       *Pour lancer le script de Google Anlytics
   -Détection du mouvement onscroll sur le window pour :
       *Charger les images produits en bas
       *Charger les flux json
       *Charger les images du bloc droite
       *Charger le iframe qui est en noscript pour garder les aspects SEO

II-Détail des modifications (par étapes et rapports)

Étape 1:
- Réduire le nombre du DOM qui est actuellement plus de 1962
- Refaire les CSS en essayant d'éliminer les hack CSS et les classer selon l'ordre de l'alphabet (exécution rapide de la part des navigateurs)
- Regroupement des CSS en un seul fichier
- Élimination des attributs qui sont fixé par défaut (Exemple media="all"), ca permet de gagner quelques octets :)

Rapport étape 1:
-Réduction du DOM à 1670 à voir encore si je peux enlever encore des éléments
-CSS 11Ko en compressé gain énorme par rapport à la version de base, à voir si je peux encore gagner quelque kilos et gagner en rapidité aussi
-Regroupement des images en sprite (sprite-filet pour les filets et sprite-pictos pour les petite icones), astuce pour le logo-cdc-fnac c'est de mettre une image 1x1 en base 64 et mettre la bonne image en background.
-Utilisation des parallèle domaines pour charger plusieurs images en même temps en étudiant le waterfall avec webpagetest.org pour réduire au max le temps de onload.
-Astuce pour réduire le start render, j'ai mis le CSS juste après la balise head en inline.
-Config des modules apache (
mod_expires, mod_headers, mod_gzip) mais ces paramétres à revoir et faire une comparaison mod_gzip et mod_deflate.

Etape 2
-Mettre les on hover sur les liens
-Charger les images produits après le onload en lazy loading
-Insertion du iframe en lazy loading et mettre la balise noscript pr le référencement
-Mettre les actions javascript

Rapport étape 2:
-Réduction encore du DOM, passage au grade D sous YSLOW
-Utilisation e la version 1.2.6 (version packé 15 Ko en GZIP), l'avantage c'est que c'est une version léger, j'ai essayé d'intégrer Sizzle mais l'inconvénient il y a pas de fonctions jSon.
-Utilisation du Packer (Dean Edwards) pour packer le core (jQuery, autocomplete), et jsMin pour le add-on.
-Séparation du CSS en 2 fichiers :
        - all-inline.css qui est intégré directement entre les 2 balises <style></style>: ce fichier contient tout ce qui est propriété de base (display, float, padding, margin...etc)
        - all-lazy.css qui est un fichier css inséré par javascript à l'événement onload, ce fichier contient 3 sprites, ainsi la fixation des position background.

Etape 3:
-Passage du nombre des éléments du DOM au 1345 éléments, grade C selon YSLOW.
-Séparation du CSS en 3 parties :
        *CSS inline (all-inline-uncompressed.css) qui est inclut directement dans la page entre <style></style> juste après le titre et l'encodage. (pour plus de détail sur le comportement voir partie CSS Optimisations de comportement).
        *CSS Complet (all-bottom-uncompressed.css) qui est appelé en external après la balise body.
        *CSS Lazy (all-lazy-uncompressed.css) qui est chargé après l'action utilisateur est sert pour les styles du moteur de recherche et les flux JSON.
-Mise en place des dernières retouches CSS et images.
-Test et correction avec IE6,7,8.
	Bonjour,

	Dans le présent document j'ai séparé l'ensemble des modifications selon le sommaire suivant:

	I-Résumé des modifications
	Chemins codes sources
	Optimisations de structure (HTML, CSS, JS)
	Optimisations de comportement (HTML, CSS, JS, APACHE)
	II-Détail des modifications (par étapes et rapports)
	3 étapes et leurs rapports

	Je vous souhaite bonne lecture.

	*************************************************************************************************


	I-Résumé des modifications:

	*****************************Chemins codes sources*******************************************
	1.HTML :
	http://entries.webperf-contest.com/4ce63091aafd1/sources/index-uncompressed.html (page d'index)
	http://entries.webperf-contest.com/4ce63091aafd1/sources/engagements-pratique-entreprise.asp-uncompressed.html (page footer)

	2.CSS :
	http://entries.webperf-contest.com/4ce63091aafd1/sources/all-inline-uncompressed.css (CSS inline)
	http://entries.webperf-contest.com/4ce63091aafd1/sources/all-bottom-uncompressed.css (CSS complet)
	http://entries.webperf-contest.com/4ce63091aafd1/sources/all-lazy-uncompressed.css (CSS Autocomplete+JSON)

	3.JS :
	http://entries.webperf-contest.com/4ce63091aafd1/core.js (est constitué des 2 scripts suivant en utilisant Packer JS de Dean Edwards)
	http://entries.webperf-contest.com/4ce63091aafd1/sources/jquery-uncompressed.js
	http://entries.webperf-contest.com/4ce63091aafd1/sources/autocomplete-uncompressed.js

	4.APACHE :
	http://entries.webperf-contest.com/4ce63091aafd1/sources/htaccess.txt

	*****************************Optimisations de structure**************************************
	==Au niveau page HTML
	-Réduction considérable du DOM passage de 1962 éléments environ à 1345 éléments, résultats avec YSLOW passage du Grade F au Grade C, et aussi réduction de la complexité de la page selon YOTTAA et pagespeed, résultat coté browser accélération du rendu d'affichage, parsing pour le rendu CSS et JS, et réduction du onLoad.

	==Au niveau CSS
	-Refonte totale des CSS sans aucuns hack en assurant la compatibilité avec tous les navigateurs, et utilisation des selectors bien ciblé en favorisant les # afin d'accélérer le rendu.
	-Utilisation des outils comme CSS Tidy qui organise et optimise le CSS pour plus de rapidité.
	-Utilisation de la compression pour CSS.
	-Utilisation des propriétés CSS2.1 coins arrondi en utilisant les propriété (-moz-border-radius pour FF, -webkit-border-radius pour safari et chrome et border-raduis pour IE8) pour la totalité des blocs avec coins arrondis.
	-Séparation du CSS en 3 parties :
	*CSS inline (all-inline-uncompressed.css) qui est inclut directement dans la page entre <style></style> juste après le titre et l'encodage. (pour plus de détail sur le comportement voir partie CSS Optimisations de comportement).
	*CSS Complet (all-bottom-uncompressed.css) qui est appelé en external après la balise body.
	*CSS Lazy (all-lazy-uncompressed.css) qui est chargé après l'action utilisateur est sert pour les styles du moteur de recherche et les flux JSON.

	==Au niveau JavaScript
	-Utilisation d'une version légère de jQuery 1.2.6 (90ko en normal 15ko en gzip+minifié).
	-Compression jQuery avec Autocomplete en utilisant le Packer JS de Dean Ewards gain énorme 19ko en gzip+packé et utilisation de defer pour qu'ils bloque pas le téléchargement des autres ressources.
	-Optimisation des JS en les regroupant en bas de la page et utilisation de defer pour qu'il soit pas bloquant et pour qu'il s'exécute à la fin.
	-Nettoyage des fonctions inutiles.
	-Compression en utilisant le Packer de Dean Edwards et JSMIN.

	==Au niveau Images
	-Optimisation des images PNG 8 bits en réduisant la palette des couleurs au nombre de couleurs nécessaire et l'utilisation d'indexed colors pour les images qui ont moins de 256 couleurs.
	-Regroupement des images en sprites (sprite-filet pour les filets des background, sprite-pictos pour les pictos).
	-Spécification des largeurs et hauteurs des images (selon les recommandations de pagespeed, et pour optimiser les perfs navigateurs lors de l'allocation de la mémoire pour les images).

	==Au niveau Conf Apache
	-Mise en place du GZIP pour les contenus text (html, css, js, json)
	-Mise en place d'un cache (cache-control, expires) d'un mois pour les contenus (images, css, js), et no cache pour HTML

	*****************************Optimisations de comportement***********************************
	==Au niveau page HTML
	-Suppression des balises scripts bloquantes qui était partout dans la page
	-Mifier les codes sources a permit la réduction du poids, donc réduction du onload.
	-Chargement de 6 images (partenaires) en html,des sprites, et du CSS complet afin d'avoir un bon progressive render et pour que l'utilisateur ait le haut de la page chargé lors de la fin du onload.
	-Conversion du favicon en png, puis en base 64 et utilisation de datauri pour l'inclure.
	-Utilisation d'une image png transparente 1x1 en base 64 sur le logo pour pouvoir faire les map et mettre le logo en background, tout ça pour pouvoir inclure le logo en plaquette.

	==Au niveau CSS
	-Mise en place d'un CSS inline (all-inline-uncompressed.css) <300 bytes en gzip+minifié entre la balise <style></style> qui précharge les 3 sprites qui seront utilisés ultérieurement par le css complet external, ce CSS aussi contient un reset padding, margin pour les éléments du DOM, cette technique consiste à utiliser 1 selector qui est déja intégré dans le CSS external (all-bottom-uncompressed.css) par background, l'utilité c'est de pouvoir réutiliser le CSS complet dans d'autres pages, cette technique consiste à la fois à réduire d'une façon considérable le start render qui est passé de 2.510s à environ 0,270s, et le onLoad puisqu'on on a un waterfall selon WPT bien rempli et sans beaucoup de blancs.

	==Au niveau JS
	-Récupération du contenu des cookies envoyé par le serveur et leurs stockage dans des variable dans le scope globale window, afin de les réutiliser pour construire les urls lors d'un click sur un lien en utilisant le bind de jQuery, l'utilité et de pouvoir réduire le poids totale de la page en supprimant ces query string fixé en dur dans le HTML.
	-Chargement des 4 images restantes (partenaires) + la première image banner après l'événement onLoad.
	-Détection du mouvement onmouseover sur le document pour :
	*Charger la bannière publicitaire + ses 2 images restantes et pour la démarre en gros ce qui est en haut pour avoir une meilleure expérience utilisateur.
	*Pour charger la pub du droite
	*Pour activer le menu déroulant
	*Pour activer le moteur du recherche
	*Pour charger le CSS Lazy
	*Pour lancer le script de Google Anlytics
	-Détection du mouvement onscroll sur le window pour :
	*Charger les images produits en bas
	*Charger les flux json
	*Charger les images du bloc droite
	*Charger le iframe qui est en noscript pour garder les aspects SEO

	II-Détail des modifications (par étapes et rapports)

	Étape 1:
	- Réduire le nombre du DOM qui est actuellement plus de 1962
	- Refaire les CSS en essayant d'éliminer les hack CSS et les classer selon l'ordre de l'alphabet (exécution rapide de la part des navigateurs)
	- Regroupement des CSS en un seul fichier
	- Élimination des attributs qui sont fixé par défaut (Exemple media="all"), ca permet de gagner quelques octets :)

	Rapport étape 1:
	-Réduction du DOM à 1670 à voir encore si je peux enlever encore des éléments
	-CSS 11Ko en compressé gain énorme par rapport à la version de base, à voir si je peux encore gagner quelque kilos et gagner en rapidité aussi
	-Regroupement des images en sprite (sprite-filet pour les filets et sprite-pictos pour les petite icones), astuce pour le logo-cdc-fnac c'est de mettre une image 1x1 en base 64 et mettre la bonne image en background.
	-Utilisation des parallèle domaines pour charger plusieurs images en même temps en étudiant le waterfall avec webpagetest.org pour réduire au max le temps de onload.
	-Astuce pour réduire le start render, j'ai mis le CSS juste après la balise head en inline.
	-Config des modules apache (
	mod_expires, mod_headers, mod_gzip) mais ces paramétres à revoir et faire une comparaison mod_gzip et mod_deflate.

	Etape 2
	-Mettre les on hover sur les liens
	-Charger les images produits après le onload en lazy loading
	-Insertion du iframe en lazy loading et mettre la balise noscript pr le référencement
	-Mettre les actions javascript

	Rapport étape 2:
	-Réduction encore du DOM, passage au grade D sous YSLOW
	-Utilisation e la version 1.2.6 (version packé 15 Ko en GZIP), l'avantage c'est que c'est une version léger, j'ai essayé d'intégrer Sizzle mais l'inconvénient il y a pas de fonctions jSon.
	-Utilisation du Packer (Dean Edwards) pour packer le core (jQuery, autocomplete), et jsMin pour le add-on.
	-Séparation du CSS en 2 fichiers :
	- all-inline.css qui est intégré directement entre les 2 balises <style></style>: ce fichier contient tout ce qui est propriété de base (display, float, padding, margin...etc)
	- all-lazy.css qui est un fichier css inséré par javascript à l'événement onload, ce fichier contient 3 sprites, ainsi la fixation des position background.

	Etape 3:
	-Passage du nombre des éléments du DOM au 1345 éléments, grade C selon YSLOW.
	-Séparation du CSS en 3 parties :
	*CSS inline (all-inline-uncompressed.css) qui est inclut directement dans la page entre <style></style> juste après le titre et l'encodage. (pour plus de détail sur le comportement voir partie CSS Optimisations de comportement).
	*CSS Complet (all-bottom-uncompressed.css) qui est appelé en external après la balise body.
	*CSS Lazy (all-lazy-uncompressed.css) qui est chargé après l'action utilisateur est sert pour les styles du moteur de recherche et les flux JSON.
	-Mise en place des dernières retouches CSS et images.
	-Test et correction avec IE6,7,8.