Elementor affecte la vitesse de la page après un changement de police ? Optimisation

dépense ou frais Elementor La création d'un site web WordPress offre une grande liberté de conception et nous pouvons facilement modifier les polices, les styles et la typographie pour créer des pages personnalisées. De nombreuses personnes constatent qu'une fois les polices modifiées, la page se charge plus lentement, ce qui affecte les performances globales. Que se passe-t-il ici ?

Cet article se concentre sur les causes et propose une approche pratique de l'optimisation.

1. l'impact du chargement des polices sur la vitesse des pages

Les polices sont des paramètres ostensiblement esthétiques, mais qui impliquent en réalité des demandes de ressources.Elementor modifie les polices, notamment en activant l'option Polices de caractères Google ou des polices personnalisées, des fichiers de polices sont chargés, qui sont souvent des ressources externes affectant le rendu de la page.

1.1 Les problèmes de performance les plus courants sont les suivants

• Première pagechargement lentLes polices doivent être téléchargées à partir de Google ou d'autres sources.

• Fichiers de polices de grande taille (jusqu'à des centaines de Ko au total si plusieurs graisses de polices sont incluses)
• Le mélange de plusieurs familles de polices entraîne une forte augmentation du nombre de demandes.
• Absence de préchargement des polices, le texte de la page peut s'afficher avec un court délai ou sans problème de style.

Ceci est plus évident dans les environnements de réseaux mobiles ou faibles.

2) Causes de ralentissement dues aux paramètres de police d'Elementor

Au cours du processus de modification des polices, les paramètres suivants peuvent entraîner une dégradation des performances de la page :

2.1 Le chargement local des polices n'est pas activé

Elementor charge les polices à distance à partir de Google Fonts par défaut, si vous ne passez pas à l'optionHébergement localqui seraient soumis à des délais de réponse externes.

2.2 Utilisation simultanée de plusieurs familles et graisses de polices

Par exemple, l'utilisation de Lato pour les titres et d'Open Sans pour le corps du texte, ainsi que l'activation de plusieurs poids de mots (par exemple 300, 400, 700) séparément, augmenteront le nombre de mots. .woff2 peut-être .ttf Le nombre de demandes, avec un volume de demandes cumulées plus important.

2.3 Appels non consolidés ou différés aux ressources en fonte

Elementor ne fusionne pas automatiquement les fichiers de polices par défaut et ne retarde pas le chargement des ressources de polices, ce qui prend du temps au fil principal et empêche un rendu rapide de la page.

3. les méthodes d'optimisation du chargement des polices Elementor

Pour accélérer la pageVitesse de chargementqui peut être optimisé selon les points de vue suivants.

3.1 Réglage de la méthode de chargement des polices sur Swap

Trajectoire :Elementor → Paramètres → Avancés → Chargement des polices Google → Sélectionner "Échange"

En mode Swap, le navigateur rend d'abord le texte de la page avec les polices du système, puis les remplace automatiquement lorsque les polices Google ont fini de se charger. Cette méthode de chargement permet d'éviter efficacement la zone de texte vierge lors du chargement de la page, ce qui améliore la vitesse et la lisibilité du premier écran, et réduit également le nombre d'erreurs de saisie.Blocage du renduLa situation.

3.2 Rationalisation des familles de polices et des graisses de polices

• Utilisation uniforme d'une famille de polices sur l'ensemble du site
• Sélectionnez uniquement les graisses de police nécessaires, par exemple 400 (regular) et 700 (bold), les autres graisses de police peuvent être omises.

• Utilisez les paramètres du site web d'Elementor dans la sectionpolice globaleLes styles de police de la page unique sont chargés de manière répétée afin de réduire le nombre de fois qu'une page est chargée.

3.3 Configuration du préchargement des polices

existent En-tête> Ajoutez les balises suivantes pour précharger les polices clés dans :

<link rel="preload" as="font" type="font/woff2" href="路径/字体.woff2" crossorigin="anonymous">

Le préchargement des polices peut également être automatisé si vous utilisez des plugins tels que WP Rocket et Perfmatters.

3.4 Compression des requêtes de polices avec le plugin de performance

Les plugins suivants sont recommandés :

• AutoptimiserFusionner les demandes de CSS et de polices de caractères

• LiteSpeed Cache / WP Rocket : Activer la mise en cache des polices, l'accélération du CDN et la compression des ressources

• OMGFLes polices de caractères Google sont automatiquement téléchargées et remplacées par les chemins d'appel.

3.5 Utilisation de la pile de polices du système

Les polices système ne nécessitent pas le téléchargement de ressources supplémentaires et sont les plus rapides à charger :

font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif ;

Idéal pour les sites à la recherche de performances extrêmes.

4) Détecter l'impact du chargement des polices sur les performances

L'impact des polices de caractères sur les performances peut être analysé à l'aide des outils suivants :

• PageSpeed Insights (avec l'aimable autorisation de Google)
  Détection du temps de chargement des polices et suggestions d'optimisation

• GTmetrix
  Voir l'ordre des demandes de polices et le temps passé dans la cascade.

• Chrome DevTools
  Filtrez les types de polices dans Network pour voir les tailles de polices et les vitesses de chargement.

résumés

Elementor La modification des polices peut entraîner de multiples demandes de ressources, ce qui peut réduire la vitesse de la page si elle n'est pas optimisée. L'efficacité de l'accès peut être améliorée en réduisant le nombre de polices utilisées, en changeant la méthode de chargement local et en activant la mise en cache et le préchargement des polices.

Il est recommandé de prêter attention aux performances tout en concevant pour l'esthétique. Une stratégie de police unifiée, une mise en cache locale et des appels raisonnables permettent de trouver un bon équilibre entre l'aspect visuel et la vitesse.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.

© Déclaration de reproduction

Cet article a été écrit par lmx

Lien vers cet article :https://www.361sale.com/fr/69773
L'article est protégé par le droit d'auteur et doit être reproduit avec mention.