Share
Donnez un coup de pouce à votre site! Mettez en œuvre des techniques d’optimisation cruciales qui amélioreront non seulement votre y Slow marquer, mais votre rang de Google aussi. Dans ce didacticiel, nous aborderons tous les aspects de la mise en cache W3, de ySlow, de la vitesse de page Google, des sprites CSS et des règles htaccess, pour atteindre un score ySlow élevé, comme je l’ai fait sur mon blog..
Une petite note avant de commencer, même si ce tutoriel couvrira tout le détail nécessaire, il y aura (dans la mesure du possible) des raccourcis pour vous faire gagner du temps..
Installer un plugin de mise en cache: Tout d’abord, quel que soit le plugin de mise en cache que vous utilisez, désactivez-le maintenant! Sauf s'il s'agit du puissant cache W3 Total, nous travaillerons ici avec cela. (Ok, donc ça a été un peu fort, mais j'ai utilisé beaucoup de plugins de cache et W3 est mon préféré. Si vous en utilisez un autre pour une raison quelconque, c'est probablement bien - nous allons passer au W3 recommandation cependant.) Rendez-vous dans la section «Ajouter de nouveaux» plugins de WordPress, recherchez «W3 Total Cache», téléchargez-le, installez-le mais ne l'allumez pas… enfin pas encore.
Installez un plugin de gestionnaire de base de données: Ensuite, vous aurez besoin d'un autre plugin appelé “WP-DBmanager” pour rechercher et installer ceci à nouveau en vous assurant qu'aucun autre plugin de base de données n'est installé..
Avant d’aller de l’avant pour améliorer votre site, voyons d’abord en quoi consistait le traitement. Ouvrez Google Chrome ou installez-le si vous ne l'avez pas déjà. Une fois que vous êtes en chrome, installez le plug-in ySlow ICI. Une fois installé, vous verrez une nouvelle icône en haut à droite de votre écran. Cliquez dessus. (Assurez-vous que vous êtes sur la page d'accueil de votre site)
ySlow vérifiera ensuite votre site, vous dira ce qui est bon, ce qui est mauvais et tout ce qui se trouve entre les deux. Nous voulons d’abord nous concentrer sur tout ce qui est en dessous d’un niveau B. En dessous, je vais passer en revue tous les paramètres W3 dont vous avez besoin pour améliorer le temps de chargement de vos sites..
Une fois que W3 Total Cache est activé, un nouvel onglet de la barre latérale intitulé «Performances» s'affiche. Cliquez dessus. Maintenant, évidemment, nous allons exécuter toutes les différentes sections de W3, mais pour gagner du temps, vous pouvez importer le fichier de paramètres W3, regroupé dans les «fichiers source» & passer à l'étape 2C.
C’est ici que se trouvent tous les paramètres de W3. Examinons d’abord les «Paramètres généraux». Cochez les cases suivantes (pour activer):
Cache de pages (sélectionnez «Disque: Amélioré» dans le menu déroulant) - La mise en cache des pages réduira le temps de réponse de votre site et augmentera l’échelle de votre serveur Web..
Réduire (sélectionnez «Manuel», laissez les autres paramètres) - La minification peut réduire la taille de fichier HTML, CSS, JS et les flux respectivement d'environ 10% en moyenne..
Ne cochez pas le cache de la base de données (nous trierons cela plus tard selon une méthode différente)
Cache d'objets (sélectionnez "Disque" dans la liste déroulante) - La mise en cache d'objets augmente considérablement les performances des sites très dynamiques (qui utilisent l'API de cache d'objets).
Cache du navigateur - Activez la compression HTTP et ajoutez des en-têtes pour réduire la charge du serveur et le temps de chargement du fichier.
Laisser le CDN, le vernis et les reflets nuageuses intacts. (encore une fois pour cela, chargez rapidement le fichier de paramètres inclus dans les «fichiers source» via l’option au bas des «Paramètres généraux»)
Cliquez sur l'onglet / lien "Réduire" en haut du panneau / de la page W3. Dans la section «HTML et XML», assurez-vous que les trois premières cases sont cochées. Puis cliquez sur le bouton "Aide" en haut.
Une fois que ce popover se charge, vous serez confronté à une liste de fichiers javascript, suivis des feuilles de style auxquelles votre site est lié. Essentiellement, nous voulons essayer de cocher tout ce qui est EXCEPTÉ:
Jquery files
Annonces Google (ou autres annonces)
Tous les fichiers stats.wordpress.js (vous les aurez si vous avez installé Jetpack
Cependant, pour CSS, vous pouvez tous les sélectionner en toute sécurité. Ce n’est pas une science exacte, car il s’agit de minifier vos fichiers de thème (ne vous inquiétez pas, il est non destructif) et il existe de nombreux thèmes différents, qui utilisent tous un large éventail de fichiers, de plugins et de fonctions. Prévisualisez vos modifications avant de les soumettre..
Minify est l’une des améliorations les plus importantes que vous intégrerez. Une fois que vous avez sélectionné tous vos fichiers (et que vous avez fait la même chose pour chaque thème, si vous en utilisez plusieurs), cliquez sur «Appliquer & fermer», directement suivi de «Enregistrer tout». paramètres "(Déployez-le si votre site a toujours le même aspect / fonctionne de la même manière).
Une fois que vous êtes dans l'onglet / la page «Cache du navigateur», vous devrez changer la «durée de vie de l'en-tête Expires» à 691200 secondes. Cela augmentera immédiatement votre score ySlow.
Maintenant, retournez dans «Paramètres généraux» et cliquez sur «Vider tous les caches», puis allez à votre page d'accueil et exécutez à nouveau le test ySlow, vous devriez voir une belle amélioration.
Sous l'onglet «Performance» de la barre latérale du back-end WordPress, il devrait y avoir un autre onglet nommé «Base de données» (sinon, retournez-le et activez-le)..
Maintenant, c’est très simple, vous devez faire trois choses: sauvegarder, réparer, optimiser.
Pour sauvegarder cliquez sur “Backup DB” puis en bas cliquez sur “Backup” (Ne vous inquiétez pas de gzipping).
Ensuite, nous souhaitons réparer votre base de données (en cas de besoin), consultez la section «Réparation de la base de données» dans la barre latérale. Cliquez sur le bouton "Réparer" en bas.
Enfin, optimisez-le. Cliquez sur le bouton de la barre latérale «Optimiser la base de données» et, oui, vous l'avez deviné, cliquez sur le bouton «Optimiser» en bas..
Pour éviter ce processus, ouvrez de nouveau l'onglet «Options de la base de données». En bas, il y aura une section «Planification automatique». Assurez-vous que les sauvegardes sont effectuées TOUS LES JOURS (vous ne pouvez pas être trop prudent), puis configurez-le pour optimiser, par exemple tous les deux ou trois jours et effectuez les réparations une fois par semaine. Puis enregistrez les modifications.
Maintenant, dans ySlow, vous aurez probablement remarqué dans la section «Effectuer moins de requêtes HTTP» une chaîne de texte disant: «Cette page contient 10 images d'arrière-plan externes. Essayez de les combiner avec des sprites CSS. ”
Imaginez les économies si toutes ces petites images pouvaient ne représenter qu'une seule image… Cela accélérerait certainement les choses. Pour cela, nous allons utiliser un outil gratuit appelé "Spriteme", alors rendez-vous sur le site ICI (faites-le dans un nouvel onglet, assurez-vous de nouveau que votre site se trouve sur la page d'accueil)..
Une fois que votre page d'accueil est ouverte dans un onglet et que spriteme est ouvert dans un autre, faites glisser le texte «SpriteMe» sur l'onglet contenant votre site. Une boîte apparaîtra en haut à droite de l'onglet / de la fenêtre. Vous voudrez cliquer sur le bouton «Créer un sprite» qui se trouve dans la boîte «Sprites suggérés». Une fois que c'est fait, téléchargez l'image créée et chargez-la quelque part sur votre site (de préférence dans le thème que vous utilisez).. 
Maintenant, cliquez sur le bouton "exporter CSS" en haut à droite de la fenêtre "SpriteMe", copiez et collez le code CSS qu'il vous a donné (c'est TOUT) directement dans le bas de vos thèmes "style.css" ou n'importe où. il va être utilisé à la place du code par défaut (car nous ne voulons pas vraiment écraser le code du thème par défaut). Vous devrez vous assurer que la deuxième image de fond «image d'arrière-plan: url» de «http://www.jaredhirsch.com» soit remplacée par l'emplacement où vous avez enregistré l'image de sprite précédente.
Une fois que cela est fait, merci de "vider tous les caches" dans l'onglet "Performances" de la barre latérale..
Pour la plupart, j'utilise personnellement toujours Photoshop pour compresser mes images avant de les télécharger, mais pour beaucoup d'entre vous, ce n'est pas une option, car vous n'avez pas Photoshop. Donc ici je vais vous aider à réduire la taille du fichier de vos images.
Tout d’abord, vous voudrez vous assurer que les images de thème sont optimisées. Vous pouvez les acheter et les capturer dans cette fantastique petite application appelée "ImageOptim".
Une fois que vos images de thème sont bien compressées, vous voudrez peut-être consulter des plugins tels que «Smush.it» pour Wordpress qui optimiseront les images que vous pourrez utiliser dans des publications et similaires..
C'est certainement une technique d'optimisation cruciale. Pour activer la compression PHP GZIP, éditez le fichier php.ini (par exemple, avec les emplacements tels que / etc / ou / usr / local / lib) avec n’importe quel éditeur de texte tel que vi, et localisez la directive suivante:
zlib.output_compression
La valeur par défaut est Off, définissez le paramètre sur On pour que la ligne ressemble à ceci:
zlib.output_compression = On
Redémarrez le serveur Apache HTTPD après la modification. Toutes les pages Web produites par PHP seront maintenant compressées avant leur envoi par Internet au navigateur Web pour décodage..
PHP a aussi une directive qui peut être utilisée pour ajuster le niveau de compression. Pour définir le niveau de compression, utilisez la ligne suivante dans le fichier php.ini, avec des valeurs valides comprises entre 1 et 9, où 1 correspond à la compression minimale et 9 à la compression maximale. Le niveau de compression par défaut est 6, ce qui fournit la meilleure compression sans dégrader les performances du serveur..
zlib.output_compression_level = 6
Auparavant, la compression PHP était obtenue en entrant code au début de chaque script PHP. La méthode n'est pas recommandée car chaque script doit être modifié. L'activation de zlib dans php.ini s'appliquera à tous les scripts PHP sur le serveur Web sans exclusion..
S'il est impossible de modifier le fichier php.ini ou n'a pas le contrôle de php.ini en particulier sur un hébergement partagé, la compression PHP GZIP peut également être configurée via le fichier .htaccess, situé en général à la racine du site. Pour activer la compression PHP GZIP via Zlib, ajoutez simplement la ligne suivante au fichier .htaccess. Notez que chaque site doit être changé individuellement.
php_flag zlib.output_compression sur
L'inconvénient d'activer la compression GZIP via PHP est que seules les pages Web générées par des scripts PHP seront compressées par le codage GZIP. Tous les fichiers CSS ou JavaScript externes ne seront pas compressés. Pour pouvoir activer la compression GZIP sur tous les types de fichiers, utilisez plutôt mod_deflate ou mod_gzip sur le serveur Web HTTPD..
Vérifiez et vérifiez que la compression GZIP s'exécute correctement
Alors que nous arrivons à la fin de ce tutoriel, je veux juste passer en revue quelques dernières choses. Maintenant que vos images ont été écrasées et que les images-objets ont été créées, vous voudrez peut-être vider le cache de votre navigateur et une fois de plus «vider tous les caches» dans l'onglet de la barre latérale «Performances»..
Maintenant, revenons en arrière, déconnectons-nous de WordPress, chargez la page d'accueil de votre site et faites un test ySlow. Encore une fois, il aurait dû être augmenté. Dans la section CDN de ySlow, vous avez la possibilité «Ajouter en tant que CDN» sur certains composants. Cela augmentera votre note encore plus loin.
Si vous voulez ajouter correctement un CDN dédié, puis-je vous suggérer de suivre ce tutoriel?.
Maintenant que vous avez croisé les doigts, vous devriez rechercher un score au test de grade A et, si vous le comparez au test de rapport de vitesse de page propre à Google, vous obtiendrez un score très sain..
Une section de ySlow que je n'ai pas encore couverte est le «domaine sans cookies», qui correspond au moment où le navigateur demande une image statique et envoie des cookies avec la demande. Le serveur n'a aucune utilisation de ces cookies. Ils ne créent donc que du trafic réseau sans raison valable. Vous devez vous assurer que les composants statiques sont demandés avec des demandes sans cookie. Créez un sous-domaine et hébergez tous vos composants statiques.
Si votre domaine est www.example.org, vous pouvez héberger vos composants statiques sur onStatic.example.org. Toutefois, si vous avez déjà défini des cookies sur le domaine de premier niveau example.org, par opposition à www.example.org, toutes les demandes adressées à static.example.org incluront ces cookies. Dans ce cas, vous pouvez acheter un tout nouveau domaine, y héberger vos composants statiques et conserver ce domaine sans cookies. Yahoo! utilise yimg.com, YouTube utilise ytimg.com, Amazon utilise images-amazon.com etc..
Un autre avantage de l'hébergement de composants statiques sur un domaine sans cookies est que certains mandataires peuvent refuser de mettre en cache les composants qui sont demandés avec des cookies. Sur une note connexe, si vous vous demandez si vous devriez utiliser example.org ou www.example.org pour votre page d'accueil, prenez en compte l'impact des cookies. Omettre www ne vous laisse pas d'autre choix que d'écrire des cookies sur * .example.org. Pour des raisons de performances, il est donc préférable d'utiliser le sous-domaine www et d'écrire les cookies dans ce sous-domaine..
Je n'entrerai pas dans les détails, mais ce qui précède devrait vous donner une idée juste. J'examinerai cela en profondeur dans un prochain tutoriel. Cela améliore le score mais ce n'est pas complètement essentiel.
Ce sont les étapes que je fais lors de la création de sites Web et qui font toute la différence pour améliorer la vitesse et permettre des temps de réponse rapides. Pour ceux d'entre vous qui ont besoin de plus d'informations ou qui ont besoin d'aide pour effectuer les procédures, veuillez commenter ci-dessous ou envoyez-moi un message via mon profil d'auteur.
Accentsconagua