Guide ultime de l'optimisation Web (conseils et meilleures pratiques)

Optimisation Web est une partie vitale du développement et de la maintenance Web, mais également un aspect souvent négligé par les webmasters. Il suffit de penser à l’argent que vous pouvez économiser et à la manière dont il peut potentiellement aider à augmenter votre lectorat et votre trafic quand ils sont correctement réalisés.

Si vous n'avez pas encore optimisé votre site Web (ou votre blog) ou si vous êtes simplement curieux de savoir en quoi cela peut accélérer votre site, jetez un coup d'œil à cette liste de conseils d'optimisation que nous avons rassemblés..

Nous avons divisé les éléments en 3 sections distinctes pour une meilleure lisibilité - respectivement optimisation côté serveur, optimisation des actifs (qui inclut des composants Web tels que CSS, Javascript, images, etc.) et Plate-forme, où nous nous concentrerons sur Optimisation WordPress. Dans la dernière section, nous ajoutons quelques liens que nous avons jugés utiles. Liste complète après le saut.

Optimisation: côté serveur

1. Choisissez un hébergeur décent

   Votre compte d’hébergement Web n’a aucun lien direct avec les optimisations que vous êtes sur le point d’exécuter, mais nous avons pensé que choisir le bon compte d’hébergement Web était si important que nous avons décidé de le porter à votre attention en premier. Compte d'hébergement est la base de votre site / blog où la sécurité, l'accessibilité (cPanel, FTP, SSH), la stabilité du serveur, les prix et le support client jouent tous des rôles importants. Vous devez vous assurer que vous êtes entre de bonnes mains.

   Lecture recommandée: Comment choisir un hôte Web par wikiHow est un excellent article qui vous indique les étapes à suivre avant d'acheter un compte d'hébergement Web.

2. Héberger les actifs séparément

   Lorsque nous parlons d’actifs, nous entendons des composants Web tels que images et scripts statiques qui ne nécessitent pas de traitement côté serveur. Cela inclut tous les graphiques Web, images, javascripts, feuilles de style en cascade (CSS, etc.), etc. L'hébergement séparé des ressources n'est pas indispensable, mais nous avons constaté des résultats impressionnants en termes de stabilité du serveur avec cette implémentation, alors que le blog connaissait une pointe de trafic..

   Lecture recommandée: Maximiser les téléchargements parallèles dans la voie réservée au covoiturage.

3. Compression avec GZip

   En bref, le contenu voyage du côté serveur au côté client (et vice versa) chaque fois qu'une requête HTTP est faite. La compression du contenu à envoyer réduit considérablement le temps nécessaire au traitement de chaque demande..

   GZip est l’un des meilleurs moyens de le faire et varie en fonction du type de serveur que vous utilisez. Par exemple, Apache 1.3 utilise mod_zip, Apache 2.x utilise mod_deflate et voici comment vous le faites dans Nginx. Voici quelques très bons articles pour vous familiariser avec les compressions côté serveur:

   • Accélérez votre site Web en activant la compression de fichiers Apache
   • Compresser la sortie Web à l'aide de mod_gzip et Apache
   • Comment optimiser votre site avec la compression GZIP
   • Compression côté serveur pour ASP

4. Réduire les redirections

   Les webmasters font une redirection d'URL (qu'il s'agisse de redirections Javascript ou META) tout le temps. Parfois, le but est de diriger les utilisateurs d'une ancienne page vers une nouvelle page, ou simplement de les guider vers la bonne page. Chaque redirection crée une requête HTTP et RTT (temps d'aller-retour) supplémentaires. Plus vous avez de redirection, plus l'utilisateur accédera à la page de destination..

   Lecture recommandée: Éviter les redirections Google Code vous donne un bon aperçu de la question. L'article recommande également quelques moyens pratiques pour minimiser la redirection afin d'augmenter la vitesse de desserte.

5. Réduire les recherches DNS

   Selon Yahoo! Blog du réseau de développeurs, Il faut environ 20 à 120 millisecondes à DNS (système de noms de domaine) pour résoudre l'adresse IP d'un nom d'hôte ou d'un nom de domaine donné, et le navigateur ne peut rien faire tant que le processus n'est pas correctement terminé..

   Auteur Steve Souders a suggéré que le fractionnement de ces composants en au moins deux mais au plus quatre noms d'hôte réduit les recherches DNS et permet des téléchargements parallèles à un degré élevé. Lire la suite sur l'article.

Optimisation: les atouts (CSS, Javascripts, Images)

1. Fusionner plusieurs javascripts en un

   Les gens à rakaz.nl partage comment vous pouvez combiner plusieurs Javascripts comme:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   Dans un seul fichier en remplaçant l'URL par:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   en manipulant le .htaccess et en utilisant PHP. Cliquez ici lire plus.

2. Compresser Javascript et CSS

   Minify est une application PHP5 capable de combiner plusieurs fichiers CSS et Javascript, de compresser leur contenu (c'est-à-dire de supprimer les espaces et les commentaires inutiles) et de servir les résultats avec un codage HTTP (gzip / deflate) et des en-têtes permettant une mise en cache optimale du côté client.

   

   Compressez-les en ligne!Certains services Web vous permettent également de compresser manuellement vos fichiers Javascripts et CSS en ligne. Voici quelques-uns que nous venons de connaître:

   • compresseur.biene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • Optimiseur CSS (CSS)

3. Personnaliser l'expiration / la mise en cache de l'en-tête

   Crédit: httpwatch

   En utilisant un en-tête Expiry personnalisé, vos composants Web, tels que des images, des fichiers statiques, CSS et Javascript, ignoraient les requêtes HTTP inutiles lorsque le même utilisateur rechargeait la page pour la deuxième fois. Il réduit la bande passante nécessaire et aide définitivement à servir la page plus rapidement.

   Lectures recommandées:

   • Yahoo! Blog du réseau de développeurs - Ajouter un en-tête Expires
   • Comment ajouter de bons en-têtes Expires aux images dans Apache 1.3
   • Mise en cache HTTP
   • Tutoriel de mise en cache pour les auteurs Web et les webmasters

4. Décharger les actifs

   Par déchargement, nous entendons séparer les fichiers Javascripts, les images, les fichiers CSS et les fichiers statiques du serveur principal hébergeant le site Web et les placer sur un autre serveur ou s’appuyer sur d’autres services Web. Nous avons constaté une amélioration significative ici Hongkiat en déchargeant des ressources sur d’autres services Web disponibles, le serveur se chargeant principalement du traitement PHP. Voici quelques suggestions de services en ligne pour le déchargement:

   • Images: Flickr, Smugmug, Hébergement payant *
   • Javascripts: Bibliothèque Google Ajax, Google App Engine, hébergement payant *
   • Formulaire Webs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Enquête et sondages: SurveyMonkey, PollDaddy

   * Hébergement payant - Les services payants ont toujours une meilleure fiabilité et stabilité. Si votre site Web demande constamment des actifs, vous devez vous assurer qu'ils sont entre de bonnes mains. Nous recommandons Amazon S3 et Cloud Front.

5. Gestion des images Web

   Les images sont une partie importante de votre site web. Cependant, si elles ne sont pas correctement optimisées, elles peuvent devenir un fardeau et finir par utiliser de manière imprévisible une grande quantité de bandes passantes au quotidien. Voilà quelque meilleures pratiques pour optimiser vos images:

   • Optimiser les images PNGFolks at Smashing Magazine décrit des techniques astucieuses qui peuvent vous aider à optimiser vos images PNG..
   • Optimisation pour le Web - Ce que vous devez savoir (les formats) En savoir plus sur Jpeg, GIF, PNG et comment enregistrer vos images pour le Web..
   • Ne pas redimensionner les imagesToujours pratiquer l'insertion du largeur et la taille pour chaque images. De même, ne réduisez pas une image simplement parce que vous avez besoin d'une version réduite du Web.. Par exemple: Ne forcez pas l’échelle d’une image 200 × 200 px à 50 × 50 px pour votre site Web en modifiant largeur et la taille. Obtenez un 50 × 50 px à la place.

   Optimisation avec les services Web et les outils. La bonne nouvelle est qu'il n'est pas nécessaire d'être un expert de Photoshop pour optimiser vos images. Il existe de nombreux services Web et outils pour vous aider à faire le travail..

   • Smush.itProbablement l'un des outils en ligne les plus efficaces pour optimiser les images. Il y a même un plugin WordPress pour cela!
   • Stripper JPEG et PNGUn outil Windows permettant de supprimer / nettoyer / supprimer les métadonnées inutiles (fichiers indésirables) des fichiers JPG / JPEG / JFIF & PNG.
   • Optimiseur d'image en ligneVous permet d'optimiser facilement vos gifs, vos gifs animés, vos fichiers jpgs et vos fichiers pngs, de manière à ce qu'ils se chargent le plus rapidement possible sur votre site, par Dynamic Drive.
   • SuperGIFRéduisez sans effort toutes vos images et animations GIF.
   • Voici plus.

6. Manipulation de CSS

   Les sites Web modernes utilisent CSS comme fondement du style, ainsi que de son apparence. Non seulement CSS donne une grande flexibilité aux changements, il est également moins important en termes de codes nécessaires. Cependant, s'ils sont mal codés, cela pourrait être un retour de flamme. Voici quelques listes de contrôle, ou plutôt des guides pour vous assurer que vos CSS sont correctement optimisées:

   • Garder les enfants de vos éléments en ligne avec la progénitureComment garder votre balisage propre avec les sélecteurs CSS.
   • Gardez CSS courtQuand ils donnent le même style, les codes sont meilleurs quand ils sont courts. Voici un Guide de sténographie CSS vous aurez probablement besoin.
   • Utiliser CSS SpriteLa technique Sprite CSS réduit la requête HTTP chaque fois qu'une page est chargée en combinant plusieurs images (ou toutes les) ensemble sur un seul fichier image et en contrôlant le rendu en CSS position de fond attribut. Voici quelques guides et techniques utiles pour créer des sprites CSS:
     • Générateur de sprites CSS en ligne
     • Meilleur générateur de sprites CSS en ligne et hors ligne
   • Utiliser chaque déclaration juste une foisLorsque vous cherchez à optimiser vos fichiers CSS, l’une des mesures les plus puissantes que vous pouvez utiliser consiste à utiliser chaque déclaration une seule fois..
   • Réduire le nombre de fichiers CSSLa raison est simple: plus vous avez de fichiers CSS, plus vous aurez de requêtes HTTP à faire lorsqu'une page Web est demandée. Par exemple, au lieu d’avoir plusieurs fichiers CSS comme suit:

     Vous pouvez les combiner dans un seul CSS:

   Lectures recommandées:

   • Outils utiles pour vérifier, nettoyer et optimiser votre fichier CSSCertains des outils utiles que vous pouvez utiliser pour optimiser votre code CSS, même si vous ne connaissez absolument pas le codage CSS.
   • 7 principes de code CSS propre et optimiséL’optimisation ne consiste pas seulement à réduire la taille des fichiers, mais aussi à être organisée, sans encombrement et efficace..
   • Meilleures pratiques pour optimiser les CSSConsidérez cet article plus comme un exercice académique plutôt que comme des conseils d'optimisation réels.

Optimisation pour WordPress

De temps en temps, nous surveillons, analysons et analysons les performances de notre blog WordPress. Si le site est lent, nous devons savoir pourquoi. Voici quelques modifications de base que nous avons apportées et dont nous avons pensé qu’elles augmenteraient considérablement la vitesse de votre blog WordPress..

1. Cachez votre blog Worpress

   WP-Cache est un système de mise en cache de pages WordPress extrêmement efficace pour rendre votre site beaucoup plus rapide et réactif. Nous recommandons aussi WP Super Cache qui améliore du plugin mentionné précédemment et fait aussi un excellent travail.

2. Désactiver et supprimer les plugins inutilisés

   Lorsque vous remarquez que votre blog se charge très lentement, voyez si vous avez beaucoup de plugins installés. Ils pourraient être le coupable.

3. Supprimer les balises PHP inutiles

   Si vous consultez les codes sources de votre thème, vous trouverez beaucoup de balises comme celles-ci:

   Ils peuvent être remplacés par du contenu textuel qui ne provoque pas de charge sur le serveur. Check-out Michael Martinde 13 tags à supprimer de votre WordPress Blog

Lectures recommandées:

• 3 façons les plus rapides d'accélérer WordPressJohn Pozadzides explique comment son blog navigue sans encombre face à un pic de trafic Digg.
• 13 super trucs et astuces de vitesse WordPress pour une performance maximale Si vous constatez que votre site WordPress ne fonctionne pas aussi bien que possible, cela pourrait être dû à un trafic important ou à des problèmes cachés que vous ne connaissez pas..
• 40 conseils d'optimisation WordPressConseils d'optimisation dans les diapositives. 40 astuces en 40 minutes.

Enfin et surtout…

Voici quelques outils et services Web utiles qui vous donnent une perspective plus large et une meilleure analyse pour vous aider dans l'optimisation Web..

• Yahoo! YSlow

  YSlow analyse les pages Web et suggère des moyens d’améliorer leurs performances sur la base d’un ensemble de règles pour les pages Web hautes performances. Cela vous donne une bonne idée de ce qui doit être fait pour que le site Web se charge plus rapidement..

  (Firebug requis)

  

• PageSpeed

  Semblable à Yahoo! YSlow, Google Vitesse de la page est un complément Firebug à code source ouvert permettant d’évaluer les performances du site Web et de les améliorer. (Firebug requis)

  

• Outils Pingdom

  Outils Pingdom Effectuez un chargement complet de votre site Web, y compris de tous les objets (images, CSS, JavaScripts, RSS, Flash et images / iframes), et affiche des statistiques générales sur la page chargée, telles que le nombre total d’objets, le temps de chargement total et la taille de tous les éléments. objets.

  

Lectures recommandées:Voici d'autres conseils et outils qui valent le détour.

• Google Web Optimizer
• 15 outils pour vous aider à développer des pages Web plus rapides
• 15+ astuces pour accélérer votre site web et optimiser votre code!