Réduire le temps de chargement d'un site web

Aujourd'hui avec internet nous avons l'habitude d'obtenir l'information recherchée immédiatement.

A une époque où l'on ne veut pas attentdre voici plusieurs pistes à explorer pour réduire le temps de chargement d'un site web, le but de cet article n'étant pas de rentrer dans les détails de chaque technique, mais de proposer des débuts de solution à méditer.

1. Réduire le nombre de requêtes HTTP
2. Réduire la taille des données téléchargées
3. Optimiser son code

 Réduire le nombre de requêtes HTTP

Supprimer les scripts et CSS chargés en doublon

Pour vérifier que vos JS et CSS sont bien chargés une seule fois, vous pouvez regarder les ressources chargées dans l'onglet "Réseau" de Firebug.

Utiliser la technique des CSS sprites pour les images

Il s'agit de regrouper un certain nombres de petites images les unes à côté des autres sur un même fichier. Par exemple vous utilisez plein de petites icones sur votre site et les chargez une par une : ce sont autant de requêtes HTTP que d'icones. En les regroupant sur un même fichier vous reduisez le chargement à une seule requête. Le découpage de chaque picto se fera ensuite en CSS.

Associer les scripts

Cette technique est à prendre avec des pincettes. Celà peut être bénéfique de regrouper plusieurs fichiers javascripts pour n'avoir plus qu'une seule requête HTTP ; cependant attention à la taille finale du script qui peut mettre énormément de temps à se charger également.

Charger les JS en fin de page

Celà peut permettre d'afficher plus rapidement la page, mais cette technique ne fonctionne que si les scripts concernés n'ont pas besoin d'être chargés plus tôt.

Utiliser le cache navigateur

Utiliser les en-têtes HTTP à bon escient peut éviter de redemander des ressources inutilement.

Utiliser un système de cache (par exemple Varnish)

Varnish vient se placer entre le client est le serveur. Si le client demande une ressource qui est déjà dans le cache, Varnish la renvoie sans faire appel au serveur. De nombreuses requêtes sont ainsi évitées. Vous pouvez bien entendu recharger certaines parties de code à la demande, grâce au langage ESI.

Réduire la taille des données téléchargées

(peut être en contradiction avec les préconisations précédentes, tout celà est à adapter en fonction des cas spécifiques)

Gzipper les fichiers

JS, CSS, HTML ou encore les fichiers XML/Texte seront compressés par le serveur avant envoi.

Réduire le poids des images quand celà est possible 

• Réduire le nombre de couleurs dans photoshop, tout en “dosant” 

• Utiliser un logiciel d’optimisation d’image, par exemple Caesium pour Windows

Minifier les fichiers JS et CSS

En supprimant les caractères non nécessaires ainsi que les commentaires et les espaces, la taille des fichiers est ainsi réduite et le temps de réponse est amélioré.

Optimiser son code

Encore une fois, vous trouverez dans cette partie quelques exemples de choses à faire pour optimiser votre code. Ces bonnes pratiques sont à avoir au moment du développement de votre projet, et sont de bonnes habitudes à prendre pour la suite.

• PHP : utiliser des simples quotes à la place des doubles quotes
• PHP : $array[‘key’] est 7 fois plus rapide que $array[key]
• PHP : éviter les fonction dans les boucles : for($i=0;$i=count($array);$i++) la perte de temps est multipliée par le nombre d’itération
• PHP : utiliser des chemins absolus évite le calcule du chemin d’un fichier
• PHP : certaines fonctions sont plus rapides que d’autres : préférer str_replace à preg_replace, explode à preg_split, etc...

• SQL : réduire le nombre de requêtes
• SQL : bien structurer sa base de données : mettre les types adéquats, la bonne longueur de champ...
• SQL : mettre en place des index pour accélérer la recherche de l'information en privilégiant les accès au fichier d'index
  
  et ainsi de suite...

Les qualités d'un bon développeur

Un bon développeur n'est pas seulement un développeur qui maîtrise ses technologies, sa façon de réflechir et son approche du travail sont tout autant importantes.

Une des qualités recherchées chez un développeur est le fait d'apprendre vite. Quelqu'un qui appréhende bien les problématiques, quelqu'un qui s'adapte facilement partira déjà avec un avantage. Néanmoins, cela peut être comblé par un travail supplémentaire qui permettra de développer cet aspect de la personnalité.

On dit toujours qu'un bon développeur est un feignant. A mon sens, c'est vrai et faux à la fois. Vrai car notre feignantise nous pousse toujours à développer pour nous faciliter la vie en automatisant certaines tâches répétitive par exemple. Et faux car pour devenir un bon développeur, il faut apprendre constamment, et pratiquer. Vous contenter de faire vos  35 heures et rentrer chez vous ne vous empêchera pas dêtre un bon technicien, mais ceux qui poussent plus loin la connaissance, la curiosité, se rapprocheront d'avantage que vous de l'excellence.

N'attendez pas que votre patron vous offre des formations, prenez votre carrière en main et devenez meilleur. Soyez curieux, c'est à mon sens une des qualités les plus importantes dans ce métier. tenez vous au courant des dernières techno, et mettez les en oeuvre. Ce n'est qu'en pratiquant qu'on saisi parfaitement les différentes problématiques que l'on peut rencontrer.

Une autre des qualités les plus importantes et la rigueur, et l'organisation. Ne soyez pas brouillon. Faîtes en sorte que votre travail soit homogène, adoptez des normes logiques et constantes, commentez votre code, faîtes des tests. Si vous ne savez pas si vous êtes rigoureux, penchez vous sur le code de quelqu'un d'autre, si vous vous sentez contrarié, c'est que vous êtes rigoureux !

Etre excellent techniquement et maîtriser ses technos ne suffit pas. Il faut savoir prendre un certain recul par rapport à ce que l'on fait ou ce que l'on va faire. Est-ce que ça répond au besoin ? est-ce que c'est logique ? est-ce que c'est réutilisable ? Cet aspect vient généralement avec l'expérience.

Pour conclure je dirais qu'être ou devenir un bon développeur est avant tout une question de caractère. Ce caractère peut être développé avec l'expérience, bien sûr on ne peut pas être parfait immédiatement. Prenez le temps d'élargir vos connaissances et développer celle que vous avez déjà. Mettez vous en place des protocoles de travail et essayez de les mettre en oeuvre.

Les emplacements essentiels des mots-clés sur votre site web

Pour avoir du traffic sur votre site web, il faut que vos pages soient optimisées pour les mots-clés. Il est donc important de savoir où placer ces mots-clés.
Si un moteur de recherche tel que Google fourni des résultats si efficaces, c'est parce qu'il est capable de déterminer en fonction des termes recherchés quels résultats sont les plus appopriés. C'est là que vous web marketers et web développeurs entrez en jeu.

Terminés, les métas keywords

Les "keywords" dans les métas ne sont plus pris en compte par le moteur de recherche. L'époque où l'on pouvait bourrer sa balise meta keyword de mots-clés pour gagner un avantage est révolue. L'objectif étant de fournir des résultats pertinents, le moteur de recherche ne se laisse plus abuser. D'ailleurs cette pratique n'était pas toujours à votre avantage et pouvait jouer contre vous si elle était mal utilisée.

Voici donc sur quoi vous devriez vous concentrer.

La balise "title"

Cette balise doit contenir le titre du contenu de votre page, le choix du contenu est donc très important, d'autant plus qu'il s'agit du titre qui apparaitra dans les résultats du moteur de recherche.

Cette balise devra contenir environ une douzaine de mots, qui doivent bien illustrer le sujet de votre page. Les termes les plus importants devront se trouver si possible au début du titre et devront donner envie à l'internaute de cliquer dessus dans le moteur de recherche.

Ne mettez pas le même titre sur toutes les pages, et personnalisez le plus possible en fonction de vos différentes pages. Celà permettra d'avoir un maximum de mots-clés, mais également d'éviter les filtres de duplication de contenu.

De jolies URL

Des URL parlantes permettront à l'internaute (mais également au moteur de recherche) d'avoir une idée du contenu qu'il trouvera dans vos pages, et donc d'avoir envie d'y jeter un oeil.

Par exemple :
http://www.monsitedactus.com/les-emplacements-essentiels-des-mots-cles-sur-votre-site-web.html vaut mieux que :
http://www.monsitedactus.com/article.php?id=3

Cette URL peut être le slug du titre de votre page.

La balise "h1"

Sans en abuser, vous pouvez mettre plusieurs balises h1 dans vos pages. Avec l'arrivée du HTML5 et ses nouvelles balises, vous pouvez par exemple maintenant imaginer avoir une balise h1 en en-tête de vos balises section.

La balise h1 étant la plus importante des balises de titre (h1, h2, h3, etc...), elle indique au moteur de recherche que les mots-clés qu'elle contient sont plus importants que les autres termes employés dans le contenu de votre page.

Le contenu de votre page


Le contenu de votre page doit rester pertinent. N'essayez donc pas de placer plus de mots-clés que de raison, ou alors c'est la qualité de votre contenu qui en patira. Si les termes viennent naturellement lors de l'écriture de votre contenu, très bien, mais ne tentez pas le diable en introduisant des couches et des couches de mots-clé.

Les images et leur attribut alt

Il ne faut pas oublier que les images aussi peuvent jouer dans les résultats de recherche, celà vaut donc la peine de passer un peu de temps à optimiser les votres avec les bons mots-clés. Rappelez-vous les jolies URL, celà fonctionne de la même façon. Privilégiez par exemple cathedrale-de-paris.png à img42.png.

Renseignez l'attribut alt avec du texte que vous aimeriez voir s'afficher si votre image n'était pas accessible. Par exemple : alt="Photo de la cathédrale de Paris". "alt" est l'abbréviation de "alternative", c'est le texte qui s'affiche lorsque l'image est "cassée", ou pas encore chargée.

N'oubliez pas que beaucoup d'internautes recherchent des images seules, celà peut valoir le coup si celà peut permettre de vous rapporter quelques visites.