10 façons d'accélérer votre site Web - et améliorer la conversion de 7%
Un retard de 1 seconde avec des rendements de temps de chargement de page:
Ce n'est pas tout. Une étude réalisée par Akamai a constaté que:
Il faut maintenant 7,72 secondes à charge est loin de la limite de deux secondes de votre utilisateur moyen.
Profitez de votre essai gratuit de 30 jours, à partir d'aujourd'hui
1. Réduire au minimum les demandes HTTP
Selon Yahoo. 80% d'un temps de chargement de page Web est consacré à télécharger les différentes pièces-parties de la page: images, feuilles de style, scripts, Flash, etc. Une requête HTTP est fait pour chacun de ces éléments, de sorte que les composants plus sur la page, plus il faut pour la page de rendre.
- Rationaliser le nombre d'éléments sur votre page.
- Utilisez CSS au lieu d'images chaque fois que possible.
- Combiner plusieurs feuilles de style en un seul.
- Réduire les scripts et les mettre en bas de la page.
2. Réduire le temps de réponse du serveur
Votre cible est un temps de réponse du serveur de moins de 200 ms (millisecondes). Et si vous suivez les conseils donnés dans cet article, vous êtes bien sur votre chemin pour y parvenir.
Google recommande d'utiliser une solution de surveillance de l'application Web et la vérification des goulots d'étranglement dans la performance.
Puis puiser dans ces ressources:
3. Activer la compression
De grandes pages (qui est ce que vous pourriez avoir si vous créez un contenu de haute qualité) sont souvent 100kb et plus. En conséquence, ils sont encombrants et lents à télécharger. La meilleure façon d'accélérer leur temps de charge est de les-zip une technique appelée compression.
La compression réduit la bande passante de vos pages, réduisant ainsi la réponse HTTP. Vous faites cela avec un outil appelé Gzip.
La plupart des serveurs Web peuvent compresser les fichiers au format gzip avant de les envoyer en téléchargement, soit en appelant un module tiers ou en utilisant des routines intégrées. Selon Yahoo. cela peut réduire le temps de téléchargement d'environ 70%.
Astuce Pro: Lisez cet article pour plus de détails sur la compression Gzip. Ensuite, configurez votre serveur pour activer la compression:
4. Activer la mise en cache du navigateur
Voici comment Tenni Theurer. anciennement de Yahoo, l'explique ...
Une fois que la page a été chargée et les différents composants stockés dans le cache de l'utilisateur, seuls quelques composants doivent être téléchargées pour des visites ultérieures.
Dans le test de Theurer, qui était seulement trois composants et .9 secondes, ce qui rasent près de 2 secondes du temps de chargement.
Astuce Pro: Lisez cet article pour apprendre quatre méthodes pour permettre la mise en cache.
Les ressources statiques devraient avoir une durée de vie de cache d'au moins une semaine. Pour les ressources tierces comme des annonces ou des widgets, ils devraient avoir une durée de vie de cache d'au moins un jour.
Pour toutes les ressources cacheable (JS et les fichiers CSS, fichiers d'images, des fichiers multimédias, PDF, etc.), ensemble au minimum Expire d'une semaine, et de préférence jusqu'à un an à l'avenir. Ne le mettez pas à plus d'un an à l'avenir parce que constitue une violation des directives RFC.
5. Ressources Réduire Liste
Étant donné que chaque morceau inutile de code ajoute à la taille de votre page, il est important que vous éliminez des espaces supplémentaires, les sauts de ligne et le retrait dans votre code afin que vos pages sont aussi mince que possible.
Il aide également à rapetisser votre code. Voici la recommandation de Google:
6. Les images Optimize
Avec des images, vous devez vous concentrer sur trois choses: la taille, le format et l'attribut src.
images surdimensionnées prennent plus de temps à charger, il est donc important que vous gardiez vos images aussi petit que possible. Utiliser des outils d'édition d'image:
Une fois que vous avez la taille et format, assurez-vous que le code est bon aussi. En particulier, évitez les codes vides d'image src.
En HTML, le code d'une image comprend ceci:
Astuce Pro: Prenez le temps de redimensionner vos images avant de les télécharger. Et toujours inclure l'attribut src avec une URL valide.
7. Livraison CSS Optimize
Le CSS externe est chargé dans la tête de votre HTML avec le code qui ressemble à ceci:
CSS en ligne est imbriqué dans le code HTML de votre page et ressemble à ceci:
En général, une feuille de style externe est préférable, car elle réduit la taille de votre code et crée moins de duplications de code.
Astuce Pro: Lorsque vous configurez vos styles, utilisez une seule feuille de style CSS externe depuis les feuilles de style supplémentaires augmentent les requêtes HTTP. Voici deux ressources qui peuvent aider:
Évitez d'inclure CSS dans le code HTML, comme divs ou vos titres (comme le CSS en ligne photo ci-dessus). Vous obtenez un codage plus propre si vous mettez tous les CSS dans votre feuille de style externe.
8. Donner la priorité au-dessus du pli contenu
Juste après avoir recommandé que vous utilisez une seule feuille de style CSS et CSS pas en ligne, il y a une mise en garde que vous devez considérer. Vous pouvez améliorer l'expérience utilisateur en ayant votre above-the-fold (haut de la page) charge plus rapide, même si le reste de la page prend quelques secondes pour charger.
Astuce Pro: votre CSS envisager de scinder en deux parties: une courte partie en ligne que les styles au-dessus du pli des éléments, et une partie externe qui peut être reportée.
10. Réduire réoriente
Réoriente créer des requêtes HTTP supplémentaires et d'augmenter le temps de chargement. Donc, vous voulez les garder au minimum.
La ligne de fond
Certains de ces conseils sont faciles à mettre en œuvre, mais quelques-unes sont des tactiques avancées qui peuvent être intimidants si vous n'êtes pas porté sur la technique.
Si tel est le cas, vous pouvez obtenir de l'aide. Voici quelques ressources que je peux recommander:
Bon point, Ledio. Il serait sans doute utile d'utiliser Crazy Egg sur la page pour savoir comment les gens sont loin un défilement Optimize la zone les gens regardent.
C'est bon de savoir, Caleb. Merci. On dirait que, si vous utilisez CSS, vous devez garder les choses simples.
Je suis heureux de l'entendre, Aabhas.
avez-vous des solutions de rechange?
article Nice. Je voulais juste ajouter quelques points sur l'optimisation de l'image.
Ces jours-ci nous avons des techniques d'image sensibles que vous n'avez pas mentionnés. techniques d'image sensibles sont de plus en plus importante (et de préférence) en raison de l'utilisation croissante des appareils mobiles.
« JPEG est votre meilleure option. »
Je ne suis pas d'accord JPEG est tout simplement la meilleure option dans tous les cas. Parfois, il est préférable d'utiliser-24 PNG (puis à l'aide d'un outil comme TinyPNG pour réduire la taille du fichier) en particulier lorsque le maintien d'une qualité d'image élevée est plus préoccupant. Rappelez-vous, JPEG utilise une compression avec perte et PNG utilise une compression sans perte. Un exemple cas d'utilisation pour ce serait des portfolios photographiques.
« GIFs ne doit être utilisé pour les graphiques simples ou petites (moins de 10 × 10 pixels, ou une palette de couleurs de 3 couleurs ou moins) et pour les images animées. »
Je suis également en désaccord avec l'idée que GIFs sont mieux utilisées avec des graphiques plus petites que 10x10px ou avec 3 couleurs ou moins. GIF peut être utilisé pour toute taille tant qu'il n'y a pas besoin de transparence, et à condition que le graphique en question ne nécessite pas plus de 256 couleurs. J'ai personnellement trouvé par comparision, parfois GIFs finissent toujours par être une plus petite taille de fichier que le format PNG-8s même après avoir utilisé un outil d'optimisation de PNG. Mais cela varie, il est donc préférable de vérifier chaque fois.
Il existe des solutions de contournement pour soutenir PNG avec les anciens navigateurs comme IE6 ou ci-dessous.
Il permet également d'utiliser la technique de sprites CSS où les petits graphiques (logo, icônes, boutons, etc.) sont combinés en un seul gros fichier, puis positionnés au besoin par le positionnement CSS. Cela réduit les requêtes HTTP, ce qui améliore la vitesse de page. Pour vous faciliter la tâche, il existe des outils en ligne qui vous permettent de télécharger un fichier contenant graphiques combinés, puis ils la sortie CSS nécessaire. SpriteCow est un tel outil.
De plus, en utilisant un CDN pour la vidéo d'hébergement, les fichiers audio et image peut aider.
Grande après Kathryn
Et un sujet que j'aime tendrement. En fait, j'envoie les abonnés sur mon blog 5 e-mails, une fois par semaine, en leur montrant comment mettre en œuvre certains de ces conseils très (généralement les plus faciles) afin qu'ils puissent vraiment réduire et mesurer leur vitesse de charge.
Je suis d'accord qu'il est vraiment important, et Google utilise pour classer les pages trop
Merci
ashley