Optimisations du frontend dans Speed Optimizer
Table des matières
Sur cette page, vous trouverez différentes optimisations pour les parties CSS, JavaScript et HTML de votre site web.
Réduire les CSS, JS, HTML
Activer ces trois fonctionnalités améliorera considérablement la vitesse de chargement de votre site en supprimant tous les caractères inutiles de vos fichiers CSS et JS ainsi que de la sortie HTML de votre site. Vous pouvez aussi utiliser la fonctionnalité d’exclusion si vous souhaitez exclure des scripts spécifiques de la minification.
Vous pouvez trouver chaque fonctionnalité dans leur onglet respectif:
Combine les fichiers CSS et JS
La combinaison de fichiers CSS et JS réduira le nombre de requêtes adressées à votre site web et améliorera ainsi sa vitesse de chargement. Le greffon conservera les scripts et les styles à leur emplacement d’origine après la combinaison pour une meilleure compatibilité avec les autres greffons.
La combinaison de fichiers JavaScript peut entraîner des problèmes avec les scripts qui nécessitent un certain ordre d’exécution. C’est pourquoi nous vous conseillons de vérifier le frontend de votre site web après avoir activé cette optimisation.
Vous pouvez aussi ajouter une valeur de préchargement au fichier css combiné, ce qui indiquera qu’il s’agit d’une ressource importante absolument nécessaire pour afficher correctement la page. Utilisez cette option si après avoir combiné les fichiers CSS, votre site web ne s’affiche pas correctement.
JavaScript bloquant l’affichage différé
Cette option vous permet de reporter les fichiers JS qui retardent l’affichage de votre site web lors des premières visites. La fonctionnalité JS qui bloque le rendu différé demandera aux navigateurs de charger et d’afficher les ressources qui devraient être immédiatement visibles sur vos sites web.
Le report de JavaScript bloquant l’affichage peut entraîner des problèmes avec les scripts qui nécessitent un certain ordre d’exécution. Une fois cette fonctionnalité activée, il est recommandé de vérifier minutieusement le frontend de votre site web. Si vous remarquez des problèmes avec cette fonctionnalité, utilisez l’option « Exclure du report de Render-blocking JS ».
Optimisation des polices web
Avec la Web Fonts Optimization , nous modifions le mode de chargement par défaut des polices Google afin d’enregistrer les requêtes HTTP. En plus de cela, toutes les autres polices utilisées par votre site WordPress seront correctement préchargées afin que les navigateurs prennent le moins de temps possible pour les mettre en cache et les afficher.
Lorsque vous l’activez, nous ajoutons le lien « preconnect » vers fonts.gstatic.com afin que nous nous occupions de la recherche DNS, de la négociation TLS et de l’établissement de liaison TCP, ce qui accélérera le téléchargement de la police lorsque vous le demanderez. il. Lorsque l’optimisation est activée et fonctionne correctement, vous pourrez voir le lien de préconnexion dans la balise head de la page web.
Préchargement des polices
Avec ce paramètre, vous pouvez précharger les polices que vous utilisez pour un rendu plus rapide et de meilleures performances pour votre site web. Assurez -vous de précharger uniquement les polices que vous utilisez réellement. Dans la plupart des cas, vous pouvez trouver ces polices lorsque vous effectuez un test PageSpeed et il vous sera demandé de précharger ces éléments. Vous pouvez le faire ici, dans notre plugin.
Cela ajoutera un lien de préchargement dans la section head de votre site web pour accélérer le chargement de ces ressources. Lorsque vous ajoutez des polices pour le préchargement, assurez-vous de coller l’URL complète de la police.
Supprimer les chaînes de requête des ressources statiques
La fonctionnalité standard du processus de chargement d’un script WordPress consiste à ajouter une version du script chargé. Supprimer ces paramètres de version améliore la mise en cache de vos pages à la fois par un CDN que vous pouvez utiliser et par les navigateurs de vos visiteurs.
Désactiver les émoticônes
Par défaut, WordPress chargera des scripts pour détecter et générer automatiquement les émojis dans votre contenu. Désactiver cette option arrêtera le chargement de ce script, ce qui vous fera gagner un temps précieux. Notez que la plupart des navigateurs modernes continueront de convertir des symboles comme; ) en smiley automatiquement.
