Comment arrêter de charger des fichiers inutiles et réduire les requêtes HTTP du site Web – Conseils d'optimisation WordPress

Sur Crunchify, nous avons publié plusieurs tutoriels d'optimisation de la vitesse auxquels vous pouvez vous référer à tout moment.

Nous utilisons MaxCDN comme fournisseur de contenu. Cela fait presque 4 ans et pour l'instant ça marche trop bien. Genesis WordPress Framework et MaxCDN sont la meilleure combinaison. Par défaut, Genesis Framework est livré avec de nombreuses optimisations, un schéma de balisage Google, une structure adaptée aux mobiles et bien plus encore.

La semaine dernière, je regardais mon compte MaxCDN et j'ai soudainement remarqué les meilleures ressources de téléchargement. Comme vous le voyez dans l'image ci- top 9 out of 10 resource files ont été téléchargés plus de ~ 5 millions de fois la semaine dernière.

J'ai été surpris et j'ai pensé que j'aurais vraiment besoin de ces ressources ? Dois-je charger ces fichiers séparément ? Comment se débarrasser de ces fichiers s'ils ne sont pas nécessaires, à l'exception du fichier style.css , qui est absolument nécessaire au chargement du site.

Commençons par la façon dont je me suis débarrassé de tous ces 9 fichiers avec des astuces simples

Étape 1

Listons list all of those 9 files . La 2e colonne indique le nombre de fois qu'il a été téléchargé.

Étape 2

Regroupons les fichiers du plugin Crayon Syntax Highlighter .

Il y a 3 fichiers :

neon.css , crayon.min.css et crayon.min.js . J'ai écrit un tutoriel séparé complet avec un total de 7 étapes détaillées pour se débarrasser de ces fichiers. Veuillez le parcourir et faites-moi savoir si vous voyez un problème.

Étape 3

Passez maintenant sur wp-embed-min.js . Veuillez visiter le tutoriel Comment désactiver le script d'intégration automatique pour WordPress 4.4+. Il arrêtera de charger le fichier d'intégration à l'avant.

Étape 4

Passons en revue 3 more .png :

bg-motif.png

Je chargeais cette image dans l'en-tête et le pied de page. Je m'en suis débarrassé en utilisant la couleur #333 à la place.

crunchify-sprite.png

Je chargeais cette image de sprite pour afficher les boutons de suivi social dans la barre latérale. Je l'ai remplacé par des polices fontawesome .

h3.png

Je chargeais ceci pour afficher la coche des messages H3 sur certains emplacements. Je l'ai remplacé par des polices fontawesome . Vous trouverez ci-dessous un équivalent fontawesome.

Étape-5

Maintenant, nous nous retrouvons avec seulement 2 fichiers. crunchify-logo.png et bg.png , que j'ai pensé à conserver. Ainsi, au lieu d'appeler en tant qu'image, j'ai ajouté l'équivalent d'une image base64 pour ces fichiers.

Avant de:

Après:

J'ai converti les deux images en images base64. L'avantage que nous obtiendrons, ne pas avoir à ouvrir une autre connexion et à faire une requête HTTP au serveur pour l'image.

Moins de demande = meilleur temps de chargement de la page

Il y a certains avantages à utiliser l' SVG (Scalable Vector Graphic) image car les images s'adaptent à n'importe quelle taille sans perdre de clarté (sauf très petite), ce qui est superbe sur les écrans Retina.

Ces Data URIs ne sont pas limités aux .png ou aux images, mais à toutes les ressources. Voici un simple outil de conversion .png en .svg que j'ai utilisé en ligne.

Sommaire

Ce tutoriel fait partie de la section Comment accélérer WordPress et booster les performances. Vous y trouverez toutes les astuces et conseils d'optimisation de WordPress.

En suivant ces étapes, je me suis débarrassé des 9 ressources indésirables sur 10. Ce qui signifie que ma page se charge beaucoup plus rapidement car il y aura 9 demandes de moins sur chaque page.

Faites-moi savoir si vous avez d'autres conseils qui amélioreront la vitesse des pages du site. Chez Crunchify, la vitesse est le critère principal et c'est la raison pour laquelle nous utilisons très peu de plugins. Toutes les pages se chargent within half a second .