10 conseils pour optimiser la vitesse de votre site

Vitesse d'une page Web et la performance sont très importantes pour l'expérience utilisateur . Si votre site est trop lent, vous aurez non seulement perdu des visiteurs, mais aussi des clients potentiels . Les moteurs de recherche comme Google le facteur de vitesse tenant compte d'un site dans les classements de recherche, donc quand l'optimisation de la vitesse de votre site, vous devez tout prendre en considération. Chaque millième de seconde compte .
Voici quelques suggestions de base et général pour améliorer les performances d'un site.

1 . Différer Chargement de contenu lorsque cela est possible

Ajax nous permet de construire des pages web qui peuvent être asynchrone mis à jour à tout moment. Cela signifie qu'au lieu de recharger une page entière quand un utilisateur effectue une action, nous pouvons simplement mettre à jour des parties de cette page.


Nous pouvons utiliser une galerie d'images par exemple . Les fichiers images sont grands et lourds, ils peuvent ralentir la vitesse de chargement de page de pages Web . Au lieu de charger toutes les images quand un utilisateur visite d'abord la page web , nous pouvons simplement afficher les miniatures des images et puis quand l'utilisateur clique sur eux, nous pouvons asynchrone demander les images en mode plein écran à partir du serveur et mettre à jour la page. De cette façon , si un utilisateur veut seulement voir quelques photos, ils n'ont pas à souffrir d'attente pour toutes les images à télécharger. Ce modèle de développement est appelé lazy loading .
Ajax / Web bibliothèques de développement telles que j'uery, Prototype, MooTools et peuvent faire différé contenu chargement plus facile à mettre en œuvre.

2 . Utilisez JS externe et les fichiers CSS

Lorsque l'utilisateur charge d'abord votre page Web, le navigateur met en cache les ressources externes comme les fichiers CSS etJavascript. Ainsi, au lieu de fichiers CSS Javascript en ligne et, il est préférable de les placer dans des fichiers externes .
En utilisant CSS en ligne augmente également le temps de rendu d'une page web ; avoir toute définie dans votre fichier CSS principal permet au navigateur de faire moins de travail lors du rendu de la page, car il connaît déjà toutes les règles de style dont il a besoin pour appliquer .

En prime, l'aide extérieure fichiers Javascript et CSS facilite la maintenance du site, car vous avez seulement besoin de tenir des dossiers mondiaux au lieu du code éparpillé dans plusieurs pages Web .

3 . Utilisez les systèmes de mise en cache

Si vous trouvez que votre site se connecte à votre base de données afin de créer le même contenu, il est temps de commencer à utiliser un système de cache . En ayant un système de cache en place, votre site n'aura qu'à créer le contenu une fois au lieu de créer le contenu à chaque fois que la page est visitée par vos utilisateurs. Ne vous inquiétez pas, les systèmes de mise en cache rafraîchir périodiquement leurs caches selon la façon dont vous l'avez configuré - de sorte que même en constante évolution des pages web ( comme un billet de blog avec commentaires) peut être mis en cache .
Systèmes de gestion de contenu populaires comme WordPress etDrupal auront des caractéristiques de mise en cache statique qui convertissent pages générées dynamiquement vers des fichiers HTML statiques pour réduire le traitement du serveur inutile. Pour WordPress , consultez WP Super Cache ( l'un des six pluginsWordPress critiques Six révisions a installé) . Drupal dispose d'une fonctionnalité de mise en cache la page dans le noyau .
il y a aussi la mise en cache de base de données et des scripts côté serveur systèmes que vous pouvez installer sur votre serveur web ( si vous avez la possibilité de le faire) la mise en cache . Par exemple, PHP dispose d'extensions appelées accélérateurs PHP qui optimisent la performance à travers la mise en cache et de diverses autres méthodes, un exemple d'un accélérateur PHP est APC . La mise en cache de base de données améliore les performances et l'évolutivité des applications Web en réduisant le travail associé à la base de données en lecture-écriture / processus d'accès; memcached, par exemple, met en cache des requêtes de base de données fréquemment utilisées.

4 . Évitez Redimensionnement des images en HTML

Si une image et à l'origine 1280x900 px en dimension, mais vous devez avoir ce soi 400x280 px, vous devez redimensionner et réenregistrer l'image en utilisant un éditeur d'image comme Photoshop au lieu d'utiliser la largeur et attributs height de HTML (ie image width = hauteur «400» = " 280 " Src = " mon image.Jpg "/> ) . C'est parce que , naturellement, une grande image sera toujours plus grande en taille de fichier d'une image plus petite.
Au lieu de redimensionner une image en utilisant HTML, redimensionner à l'aide d'un éditeur d'image comme Photoshop, puis l'enregistrait comme un nouveau fichier.

5 . Cesser d'utiliser les images pour afficher le texte

Non seulement du texte dans une image ne ? devienne inaccessible à des lecteurs d'écran et complètement inutile pour le référencement, mais en utilisant des images pour afficher le texte accroît également le temps de chargement de vos pages Web, car plus d'images signifient une page web plus lourd.
Si vous devez utiliser un grand nombre de polices personnalisées à votre site web, apprendre CSS @ fait-face pour voir le texte avec des polices personnalisées de manière plus efficace . Il va sans dire que vous devez déterminer si la distribution de fichiers de police serait plus optimale que de servir images.

6 . Optimiser l'image Tailles à l'aide du fichier correct format

En choisissant le format de l'image de droite, vous pouvez optimiser la taille des fichiers sans perte de qualité d'image. Par exemple, si vous avez besoin de la transparence de l'image ( couches alpha) que le format PNG a à offrir, le format JPG affiche souvent des images photographiques à des tailles de fichiers plus petites .
Pour en savoir plus sur la façon de choisir entre JPG, PNG et GIF, lire les guides suivants:
le guide complet de l'enregistrement d'images pour le Web
Guide du Web designer en PNG Format image
JPEG 101 : un guide de crash course sur JPEG
En outre, il existe de nombreux outils que vous pouvez utiliser pour réduire davantage le poids de fichier de vos images. Consultez cette liste d'outils pour l'optimisation de vos images.

7 . Optimiser la façon dont vous écrivez le code

Regardez autour de votre code source. Avez-vous vraiment besoin de toutes les balises que vous utilisez ou vous pouvez utiliser les CSS pour aider à l'écran ? Par exemple, au lieu d'utiliser h1> en> Votre titre / en> / h1>>, vous pouvez facilement l'utiliser CSS pour rendre vos rubriques en italique en utilisant la propriété fait-style . Écrire du code efficace non seulement de réduire la taille des fichiers de votre HTML et CSS documents, mais aussi il est plus facile à entretenir.

8 . Chargez Javascript à la fin de votre document

Il est préférable si vous avez vos scripts de chargement à la fin de la page plutôt qu'au début . Il permet au navigateur de rendre tout avant de commencer avec le Javascript. Cela rend vos pages web se sentent plus sensibles parce que la façon Javascriptfonctionne, c'est qu'il bloque rien en dessous de rendu jusqu'à ce qu'il ait fini le téléchargement. Si possible, référence Javascriptjuste avant la balise body de clôture de vos documents HTML . Pour en savoir plus, lisez le report de la charge de Javascript.

9 . Utiliser un réseau de diffusion de contenu (CDN)

La vitesse de votre site est grandement affectée par l'endroit oul'emplacement de l'utilisateur, par rapport à votre serveur web. Le plus loin qu'ils sont, plus loin, les données transmises doiventvoyager . Avoir votre contenu mis en cache sur plusieurs sites géographiques, placés stratégiquement permet de prendre soin de ce problème . À CDN sera souvent rendre votre exploitation a coûté un peu plus élevé, mais vous avez certainement gagné un bonus de vitesse. Découvrez Simple Storage Service ( Amazon S3) MaxCDN ou Amazon .

10 . Optimiser la mise en cache Web

Avec l'aide de systèmes de mise en cache, vous devez créer des sites Web qui utilisent la mise en cache autant que possible web. Mise en cache Web est lorsque les fichiers sont mis en cache par le navigateur Web pour une utilisation ultérieure . Choses que les navigateurs peuvent inclure cachent les fichiers CSS, Javascript, images .

Mais à part les bases, telles que la mise CSS et du codeJavascript qui sont utilisés dans plusieurs pages dans des fichiers externes, il y a beaucoup de façons de vous assurer que vous êtes en cache les fichiers de la manière la plus efficace possible.
Par exemple, vous pouvez définir des en-têtes de réponse HTTP comme Expires et Last-Modified pour réduire le besoin de re- télécharger certains fichiers lorsque l'utilisateur revient sur votre site. Pour en savoir plus, lire sur la mise en cache HTTP et l'optimisation cache du navigateur .
Pour configurer expiration HTTP headers dans Apache, lisez ce tutoriel sur l'ajout d'avenir expire têtes..