[Astuce] Améliorer la rapidité d'affichage de son site

[utaku]

Bonjour,

 

Je viens vers vous, pour partager une petite astuce afin d'améliorer la vitesse d'affichage de son siteweb.

 

Tout d'abord je suis sur un VPS dédié avec 3Go de Ram...etc..

j'ai tout les CCC activer avec opti apache,... sans aucun serveur de média pour l'instant ( j'y travail ), mais avec Xcache d'activer et d'installer sur mon serveur.

 

 

RAPPEL : N'oublier pas de sauvegarder vos fichiers avant toute modification, ceci afin de revenir en arrière si problème il y a.

 

Après avoir analyser mon site avec page speed de google , je remarque en point Rouge que les polices

Open Sans et Open Sans 300,600 retarde grandement l'affichage du site au niveau de la ligne de flottaison.

 

J'ai donc modifier le fichier suivant :

 

/modules/themeconfigurator/css/Font1.css

 

voici son nouveaux contenu :

<link rel="stylesheet" href="OpenSans.css">

h1, h2, h3, h4, h5 {
	font-family: 'Open Sans', sans-serif !important;
}

Après avoir faite cela, il vous faut crée un fichier CSS avec comme nom : OpenSans et le mettre dans le même répertoire que Font1.css

 

Voici le contenu du fichier OpenSans.css :

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

Enregistrer le tout .

 

Ensuite il faut aller chercher l'endroit ou est appeler la police Open Sans 300,600 à savoir :

 

/themes/default-bootstrap/Header.tpl

 

à la ligne 52 :

EDIT : impossible de faire apparaitre le code sur le fofo... étrange donc

 

Comme vous pouvez le voir, j'ai d'abord essayer de remplacer le lien par défault, par le lien vers le fichier crée juste avant, mais après analyser avec page speed, il s'avère que cela ne change rien, le truc bloque toujours l'affichage.

J'ai donc commenter cette ligne par  

<!--

Pour terminer : je vous invite à videz le cache dans la partie performance en Bo, ainsi que celle de votre navigateur.

 

Voila j'ai donc réussi sans aucun souci a augmenter la vitesse d'affichage sans que cela ne pose aucun problème.

 

Test avec Firefox et Chrome et IE => Ok !

 

N'hésitez pas à faire un retour d'expérience .

 

Voici quelques outils :

 

Page Speed

 

Pingdom Tools

 

Gtmetrix

 

Dareboost

Edited April 25, 2014 by utaku (see edit history)

[JPresta.com]

Pour résumer la modif consiste à utiliser le proxy de google googleusercontent ?

[utaku]

Bonjour,

 

Non du tout le principe c'est que au lieu d'avoir une redirection vers les serveurs de google ( celui des fonts ), on utilise son propre serveur.

Cela diminue donc le nombre de connexion externe et surtout si il y a un souci avec leurs serveur ( panne ou plus lent que d'habitude ), il n'y aura donc plus aucun implication.

 

Personnellement avec tout les test effectués, j'avais un temps d'attente pour récupérer cette police comme suit :

 

DNS : +/- 1S

WAIT : +/- 1S

Transfer/recu : +/- 38 MS

 

Je perdais donc facilement à chaque fois 2S sur mon affichage complet.

 

Bien à toi

[DamienJ]

Bonjour, 

Attention cette technique pose des problèmes : 
 - Le CSS récupéré est celui généré par Google, en fonction de la détection du User Agent (du navigateur web). On voit ici que les polices référencées sont des fichiers woff. Le WOFF n'est pas supporté par certains navigateurs (http://caniuse.com/#feat=woff). D'autre part, sur les navigateurs récents (http://caniuse.com/#feat=woff2), le Woff2, plus performant peut-être utilisé, et on se prive ici de cette opportunité. 

 - Si pour une raison ou une autre Google change les chemins des fichiers de police, risque de 404 et d'absence des fonts. 

Alors oui le temps de réponse peut varier, mais il est très rare d'observer des valeurs aussi élevées que celle indiquées. Nous utilisons également Open Sans sur dareboost.com, et le fichier CSS est généralement récupéré en ~100ms.