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.
- Réduire le nombre de requêtes HTTP
- Réduire la taille des données téléchargées
- 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...
Aucun commentaire:
Enregistrer un commentaire