Tag : css

7 conseils pour optimiser le temps de chargement d’un site

On le sait tous l’optimisation d’un site est essentielle pour vos visiteurs qui prendront plus de plaisir à vous lire et à naviguer sur vos pages mais aussi pour le référencement car les robots iront plus vite et vous aurez une meilleure note sur le temps de chargement de vos pages. Il faut l’avouer l’optimisation d’un site est pénible, rasante mais vaut vraiment le coup! Voici quelques recommandations que je peux vous faire après avoir bien étudié le sujet.

Ne garder que l’essentiel

Le gain le plus facile est sans aucun doute enlever tout ce qui n’est pas nécessaire, et oui c’est le truc le plus con mais c’est certainement là que vous aurez le plus de chose à gagner! Il faut donc regarder vos pages et vous demander si vous utilisez bien tout ce que vous envoyez à votre visiteur. En regardant vous allez voir que le javascript et la feuille de votre formulaire de contact est chargé sur toutes les pages de votre site et pas uniquement sur votre page contact comme cela doit être (c’est un cas ultra classique pour les sites sous WordPress notamment).

Il y donc deux choses à faire :

virer les choses que vous n’utilisez pas
charger les scripts et feuilles de style uniquement sur les bonnes pages

Pour ceux sous wordpress vous pouvez utiliser des bouts de code comme cela pour optimiser le chargement des js et css de certains plugins qui ne sont pas utilisés partout sur le site, la solution est donc de ne les charger que sur les bonnes pages et donc les dé-enregistrer sur les autres :

Optimiser les images

Ah l’optimisation des images tout un roman… Premièrement il faut servir des images adaptées à la taille des écrans de vos visiteurs ainsi vous n’enverrez pas une image en 1980×800 à un utilisateur sur mobile. Ceci est globalement un peu complexe mais peut se gérer assez facilement avec le bon plugin. Personnellement sur Blogdecodesign.fr j’utilise le plugin « PB Responsive Images » et je suis très content du résultat même si forcément cela augmente un peu le besoin en espace disque sur le serveur.

Ensuite il faut compresser les images, encore une fois soit vous utilisez des images déjà compressées ou alors vous les recompressez sur le serveur mais c’est un peu plus complexe que de le faire initialement. Pour les compresser sur un mac j’utilise ImageOptim c’est pratique et efficace aussi bien avec des jpg que des png.

Pour les grosses images qui se situent sous la ligne de flottaison vous pouvez aussi différer l’affichage de l’image avec un code javascript defer comme celui-ci :

Chasser les requêtes mysql lentes

Vous ne le savez peut être pas mais sur votre site/blog vous avez certainement des requêtes sur vos bases de données, certaines requêtes peuvent être parfois lentes voir très lentes il faut donc les optimiser afin de réduire le temps de requête au maximum et ainsi gagner de précieuses secondes.
Pour trouver ses requêtes lentes cela n’est pas évident sauf si vous utilisez des plugins ou des scripts spécialisés dont c’est la fonction principale. Pour wordpress j’utilise l’excellent « Query Monitor » qui va vous afficher en live le temps consommé par chaque requête, c’est bien pratique pour savoir quoi optimiser en premier. Sur l’un de mes sites cela m’a permis de passer de 180 requêtes par pages à 70. Certes cela n’est pas le plugin qui va réduire le nombre de requêtes mais cela va vous permettre de réfléchir à la structure de vos requêtes, j’ai ainsi mutualisé beaucoup de requêtes identiques. En terme de gain en temps je suis passé de 2,5 secondes de requêtes MYSQL à 0,65 secondes vous voyez bien que l’optimisation était nécessaire!

Réduire votre feuille de style

La feuille de style est aussi un très bon angle pour optimiser votre site. Si vous regardez avec l’inspecteur de Google Chrome (clic droit « inspection de l’élément ») vous regardez dans l’onglet « audit » et vous allez constater que la page n’utilise que 15% des éléments de votre feuille de style, c’est logique mais cela vous coute en temps de chargement. Il faut donc partir à la chasse aux balises css que vous n’utilisez pas, pour moi j’ai pu réduire par deux le poids de ma feuille de style qui au fil des années s’était alourdie…

Pour les spécialistes vous pouvez aussi regarder du côté de Grunt Uncss pour optimiser efficacement votre feuille de style!

Vous devez aussi compresser votre feuille de style avec des outils en ligne qui font très bien le boulot comme cssminifier, cela permet de gagner facilement 25% de la taille du fichier.

Choisir des polices (font) légères

Certaines polices de caractères comme celles proposées par Google sont plus ou moins lourdes, il faut donc en choisir une légère et surtout ne pas sélectionner toutes les variations proposées…

Tip : Si vous voulez que votre site ne clignote pas au chargement de la page (flash of unstyled content (FOUC)), il faut mettre la feuille de style de google font au-dessus de la feuille de style de votre site.

Utiliser un système de cache

Si votre site peut être rendu momentanément statique il faut absolument envisager un système de cache, sur WordPress c’est facile de le faire avec un plugin spécifique. Aujourd’hui les plugins sont vraiment efficace et vous proposent même de minifier à la volée vos javascripts et vos différentes feuilles de style.

Utiliser un CDN

A le fameux CDN, tout le monde en parle mais pas beaucoup l’utilise et pourtant c’est un moyen de servir très rapidement vos fichiers statiques comme les images, les fichiers javascripts, et les feuilles de style. Pour ma part je pense utiliser prochainement Amazon Cloudfront en lien avec les fichiers que j’ai mis sur Amazon S3.

D’ailleurs à défaut de CDN vous pouvez déjà commencer avec un stockage des fichiers images sur Amazon S3, le temps de latence n’est pas celui d’un CDN mais cela certainement mieux que celui de votre serveur et cela lui donnera un peu d’air pour faire d’autres choses ! Sur l’un de mes sites j’ai hébergé 3 gigas d’images afin d’être plus efficace sur le chargement de celles-ci. Non pas que mon serveur ne soit pas à la hauteur mais il n’arrive pas à avoir la régularité d’Amazon S3.

Les outils en ligne pour tester

Afin de voir les impacts des différentes optimisations vous pouvez utiliser ces deux sites ils sont parfait et très pertinents :

Google Pagespeed Insights
Webpagetest

Voilà en ce qui concerne mon expérience personnelle sur le sujet de l’optimisation d’un site avec comme résultat un temps de chargement divisé pratiquement par deux, si vous avez des remarques ou d’autres amélioration n’hésitez pas à laisser un commentaire.

09-9-2015 | 1

Optimisez l’affichage de vos campagnes d’emailing

Vous êtes e-commerçant ou vous diffusez tout simplement des newsletters à vos lecteurs, dans ce cas vous savez que proposer un email compatible avec tous les clients de messagerie relève certainement de l’impossible. Je vous avais parlé il y a bien longtemps de l’outil de Campaign Monitor qui donne un bon coup de main visuel.

Aujourd’hui voici un petit outil, Inline Styler, qui va vous transformer une page web en quelque chose autonome d’un point de vue mise en forme (CSS). En effet, la feuille de style de la page va être intégrée au texte et vous aurez en plus des informations sur la compatibilité des attributs que vous utilisez sur votre page.

A vous les newsletters compatibles!

17-11-2009 | 2

Quelques idées pour adapter le design de son site à l’iphone

L’ergonomie sur mobile est de plus en plus un pré-requis pour la conception d’un site Internet, certains plugins de blogs permettent déjà de générer automatiquement des mises en page qui permettront d’optimiser l’affichage sur des terminaux comme les iphones. Pour les autres sites (autres que les blogs donc) il faut créer, porter ou adapter son thème actuel aux contraintes de la taille des écrans des téléphones qui sont plus petits donc moins lisibles.

Afin de vous donner quelques idées de mise en page bien fichues je vous encourage à aller visiter cette galerie de sites « iphone » qui est révélateur de beaucoup de très bonnes pratiques de mise en page. J’ai notamment apprécié PleaseFixTheIphone et la version mobile de flickr.

Pour ceux qui sont sous wordpress je vous conseille le plugin wptouch qui a l’air bien abouti et que je viens d’installer sur 2803.

25-3-2009 | 11

Passage aux couleurs d’été

Adieu la grisaille du design du site. Voici une version différente au niveau du header du site avec un beau bleu avec des coins arrondis en CSS, et un bandeau sur toute la longueur pour les adresses des blogs du réseau. Si vous ne les voyez pas c’est que votre navigateur ne rocks pas!

Ami lecteur RSS, n’hésites pas à me rendre une petite visite de courtoisie…

04-7-2008 | 42

Tous à poil demain

Demain c’est la troisième édition du CSS Naked Day ce qui revient à désactiver votre feuille de style (CSS) pour 24 heures. Le concept a pour objectif de promouvoir les standards web donc c’est plutôt une bonne initiative. Demain je désactive donc la feuille de style de 2803 on verra bien à quoi cela ressemble.

Si comme moi vous êtes sous wordpress plutôt que de vous embêter à intégrer un script PHP dans votre site comme celui ci :

< ?php
function is_naked_day($d) {
  $start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
  $end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
  $z = date('Z') * -1;
  $now = time() + $z; 
  if ( $now >= $start && $now < = $end ) {
    return true;
  }
  return false;
}
?>


...
< ?php
if ( is_naked_day(9) ) {
  echo '';
} else {
  echo '';
}
?>
...

Vous pouvez utiliser le plugin wordpress CSS Naked Day dont la page de l’auteur est déjà sans CSS… Qui le fait aussi demain?

08-4-2008 | 22

Non je n’ai pas bu… Sacré Internet Explorer

L’image ci-dessous est simplement le résultat de la double interprétation de 2803 par le navigateur IE6 et son grand frère IE7 (qui est en sur impression sur l’image ci-dessous). J’imagine qu’IE8 donnera lui aussi une autre mise en page… Merci pour le respect des standards!

Si vous voulez aussi voir les différences de mise en page sans passer 10 minutes sous photoshop IE NetRenderer le fera très bien à votre place…

11-3-2008 | 11

Bien choisir ses noms de champs de formulaire…

Parfois lorsque vous remplissez des formulaires en ligne vous pouvez avoir des surprises pour le moins originales. Voici un petit exemple parlant : en allant sur un site très sérieux où j’ai un accès pour me connecter lorsque je clique sur le champ « code d’accès » j’obtiens les propositions suivantes certainement issues d’un site marchand pour lequel firefox a conservé les données en cache :

Si l’on regarde un peu dans le code de la page on trouve ceci :

Donc le codeur a utilisé pour nom du champ lié à « code d’accès » le terme « id » ce qui n’est pas tellement malin car le terme id correspond plutôt à des nombres. Si jamais vous avez à coder des formulaires il faut, je pense, coller à l’information demandée dans le champ du formulaire avec par exemple

Pour le login : login, username, identifiant…
Pour le mot passe : password, …
Pour les villes : villes, town…

En tout cas moi j’essaye de faire comme cela, cela évite les petites surprises, faites vous pareil?

04-3-2008 | 5

Un skin pour Google Reader…

On aime ou on n’aime pas mais le principe est sympa… Un petit coup de l’extension pour firefox Stylish et suivre ce tutorial et le tour est joué :

Un google reader à la sauce apple…

17-4-2007 | 3