WordPress 视频一放就变慢？90% 的站长都忽略了这个 Core Web Vitals 杀手

La vidéo est devenue un moyen important d'améliorer la présentation du contenu, mais elle est aussi un moyen d'améliorer la qualité de l'information.L'un des types de ressources les plus négligés, qui a le plus grand impact sur les performances des pages.. La pratique a montré que dans les pages centrées sur la vidéo, ce n'est que par le biais de laOptimisation de la compression vidéo et de la stratégie de chargementC'est un excellent moyen d'améliorer votre vie. Core Web VitalsEn particulier, le LCP répondre en chantant INP Indicateurs. Cet article sera centré sur les principes et les pratiques, et analysera systématiquement les indicateurs de performance. L'impact de la compression vidéo sur WordPress Core Web Vitalset fournir des solutions d'optimisation qui peuvent être mises en œuvre sur le terrain.

I. Données de base sur le Web et performances vidéo de WordPress

1.1 Paramètres de base pour Core Web Vitals

À partir de 2026, Google Core Web Vitals continuera à se composer des trois paramètres clés suivants :

LCP (Largest Contentful Paint): Mesure le temps nécessaire pour que le contenu principal de la page finisse de s'afficher.
INP (Interaction to Next Paint)Mesure le délai entre l'interaction de l'utilisateur et la réponse de la page.
CLS (Cumulative Layout Shift)La stabilité de la mise en page lors du chargement des pages : mesure de la stabilité de la mise en page lors du chargement des pages

Pour les pages WordPress, lorsque la vidéo se trouve sur le premier écran, que la stratégie de chargement est incorrecte ou que le nombre de vidéos est élevé, la fonctionLa même source vidéo peut avoir un impact sur chacun de ces trois paramètres séparément.

1.2 Pourquoi la vidéo est une priorité pour l'optimisation des performances de WordPress

Par rapport aux images ou aux ressources CSS et JS, les vidéos présentent les caractéristiques suivantes :

Des fichiers de grande taille, souvent mesurés en mégaoctets, voire en dizaines de mégaoctets.
Le processus de décodage consomme des ressources CPU ou GPU.
La phase de chargement tend à concurrencer d'autres ressources critiques pour la largeur de bande.
Si la taille n'est pas définie, il est très facile de déclencher des perturbations dans la mise en page.

C'est pourquoi, dans de nombreux projets WordPress, même si la mise en cache, les CDN et l'optimisation du code sont activés, la fonctionCore Web Vitals Les classements restent médiocres, et la cause principale réside souvent dans les ressources vidéo.

II. impact spécifique de la vidéo sur les indicateurs de base de Web Vitals

2.1 Mécanismes de l'influence de la vidéo sur le LCP

2.1.1 Pourquoi la vidéo est-elle souvent un élément du programme de formation continue ?

Sur les pages WordPress, les éléments vidéo suivants sont facilement reconnus par les navigateurs comme des LCP :

Grande vidéo dans la zone de la bannière du premier écran
La vidéo principale de la zone de présentation du produit ou de la fonction
sur base d'affiches élément d'un ensemble

Lorsque la taille du fichier vidéo est trop importante ou que l'ordre de chargement est déraisonnable, le navigateur doit attendre que la vidéo ou sa ressource de couverture ait fini d'être téléchargée avant de déclencher le LCP, ce qui entraîne directement une durée de LCP élevée.

2.1.2 Problèmes vidéo courants entraînant un ralentissement de LCP

Les problèmes les plus fréquents dans les projets réels sont les suivants

Chargement direct de la vidéo originale ou exportée par un logiciel de montage
Utiliser des vidéos 4K ou à haute fréquence d'images comme matériel de présentation sur le web
Aucune affiche n'est définie, le navigateur doit attendre les métadonnées de la vidéo.
Les ressources vidéo sont chargées en même temps que les images et les polices du premier écran.

Ces problèmes ne peuvent généralement pas être résolus par les seuls plugins de mise en cache.

2.1.3 Amélioration pratique du LCP par la compression vidéo

existentÀ condition que la vidéo soit reconnue comme un élément LCP et que la vidéo originale soit de grande taille.en compressant le fichier vidéo de manière raisonnable :

Le volume de la vidéo peut souvent être réduit 70%-90%
Temps de téléchargement nettement plus courts pour les ressources du premier écran
La durée de la LCP peut être améliorée dans un grand nombre de projets 1-3 secondes

Il s'agit du moyen le plus simple et le plus rentable d'optimiser les pages qui utilisent la vidéo comme élément visuel principal.

2.2 Mécanismes de l'impact de la vidéo sur les PNI

2.2.1 Pourquoi la vidéo affecte-t-elle indirectement les INP ?

INP La mesure est le délai entre l'interaction de l'utilisateur (clic, défilement, saisie) et le rendu suivant de la page.
Comportement lié à la vidéo lorsquePeut augmenter indirectement les INP: :

Vidéo en lecture automatique au chargement de la page
Plusieurs instances de vidéo sur la page en même temps
Le codage vidéo est complexe et le décodage n'utilise pas pleinement l'accélération matérielle.
Chargement ou lecture de vidéos avec exécution supplémentaire de JavaScript

Tous ces facteurs augmentent la charge sur le thread principal, ce qui affecte la réactivité des interactions avec les utilisateurs.

2.2.2 Compression et recodage pour les INP

La compression et le réencodage de la vidéo peuvent être efficaces :

Complexité de décodage réduite
Réduction de l'utilisation de l'unité centrale
Réduire le temps d'occupation du fil principal par des tâches multimédias

Dans les projets réels, la réduction de l'INP de 300-400 ms à 150-200 ms est un résultat plus courant, en particulier sur les appareils mobiles.

2.3 Mécanismes de l'impact de la vidéo sur la CLS

2.3.1 Raisons courantes pour lesquelles la vidéo déclenche le CLS dans WordPress

Les problèmes de CLS sont généralement liés aux scénarios suivants :

peut-être <iframe> Largeur et hauteur non déclarées
Remonter dynamiquement le conteneur une fois le chargement de la vidéo terminé
poster La figure ne correspond pas à l'échelle réelle de la vidéo
La taille des vidéos change dans la mise en page réactive

Ces problèmes sont particulièrement évidents sur les téléphones mobiles.

2.3.2 Rôle de la compression vidéo dans l'optimisation du CLS

Il est important de noter queLa compression vidéo elle-même ne réduit pas directement le CLS.
Cependant, dans un processus de traitement vidéo réglementé, il coopère généralement :

Préciser l'aspect ou le rapport de la vidéo
Utilisation de conteneurs fixes
Veillez à ce que l'affiche soit à l'échelle de la vidéo.

Cela permet d'éliminer presque complètement la gigue de mise en page induite par la vidéo.

Troisièmement, la compression vidéo WordPress des bonnes idées

3.1 Pourquoi n'est-il pas recommandé de télécharger directement la vidéo originale ?

WordPress Le comportement par défaut de la médiathèque est le suivant :

Pas de réencodage du fichier vidéo lui-même
Pas de réglage actif du débit ou de la résolution vidéo
Générer uniquement la pochette et les métadonnées sous-jacentes

En d'autres termes :Quel type de vidéo est téléchargé, quel type de vidéo est chargé sur le front-end ?.
Si vous téléchargez directement le fichier vidéo original, les risques de performance sont presque inévitables.

3.2 Objectifs principaux de la compression vidéo dans les scénarios Web

L'objectif principal de la vidéo en ligne n'est pas une "clarté extrême", mais plutôt.. :

Réduire la taille tout en conservant une qualité d'image acceptable
Complexité de décodage réduite
Donner la priorité à la performance des pages et à l'expérience des utilisateurs

Quatrièmement, la compression vidéo WordPress des paramètres pratiques de la méthode proposée.

4.1 Recommandations de résolution

Scénarios d'utilisation	Résolution recommandée
Accueil / Bannière	1920×1080 ou 1280×720
texte	1280×720
Le mobile d'abord	854 x 480

Principes :Le 1080p n'est pas utilisé, sauf en cas de nécessité, et le 4K n'est jamais utilisé pour les scènes web..

4.2 Recommandations relatives au format de codage et au débit de code

4.2.1 Sélection du format d'encodage

H.264La meilleure compatibilité et la meilleure solution par défaut : La meilleure compatibilité et la meilleure solution par défaut
VP9 / AV1Taille plus petite pour les solutions CDN ou avancées

Lors de l'utilisation de VP9 / AV1, H.264 devrait également être fourni comme format de repli pour assurer la compatibilité avec des environnements tels que Safari.

4.2.2 Référence au taux de code et au taux de trame

résolution (d'une photo)	Taux de code recommandé
1080p	2-4 Mbps
720p	1-2 Mbps
480p	600-1000 Kbps

Il est recommandé de contrôler la fréquence d'images à 24-30 fpsSi vous ne voulez pas utiliser 60 fps, ne le faites pas à moins d'y être obligé.

V. Le processus de compression et de déploiement vidéo

5.1 Processus de compression locale (recommandé)

Idéal pour les sites qui exigent un haut niveau de qualité et de contrôlabilité :

Exporter la vidéo originale
Recodage à l'aide d'outils spécialisés
Contrôle de la résolution, du débit binaire et de la fréquence d'images
Exporter des versions spécifiques au Web

Cette approche est stable, contrôlable et adaptée à une utilisation à long terme par les tutoriels et les sites de contenu.

5.2 Programmes de compression des nuages et des plateformes

Idéal pour les webmasters non techniques ou les sites avec des mises à jour vidéo fréquentes :

service de transcodage en nuage
CDN vidéo avec auto-compression et sorties multi-bitrate

L'avantage est l'efficacité, l'inconvénient est une contrôlabilité légèrement moindre.

VI. pratiques d'optimisation du chargement des vidéos dans WordPress

6.1 Chargement paresseux

Applicable :

Vidéo hors premier écran
Intégration d'une vidéo dans le texte principal
vidéo iframe

Le chargement différé est efficace pour réduire le nombre de demandes de premier examen et a un impact positif à la fois sur le LCP et le INP.

6.2 Bonnes pratiques pour l'affichage

2026 Pratique recommandée :

La vidéo n'est pas diffusée automatiquement par défaut
Utiliser un poster graphique de haute qualité comme premier visuel d'écran
L'utilisateur clique puis charge le flux vidéo

Il s'agit d'une solution équilibrée plus idéale entre la performance et l'expérience de l'utilisateur.

6.3 Optimisation du CDN vidéo et de la distribution

Les valeurs clés d'un CDN vidéo sont les suivantes

Réduction de la durée du premier octet
Distribution près des nœuds de bordure
Lecture à débit adaptatif

Pour les sites web accueillant un grand nombre de visiteurs ou dont le contenu principal est une vidéo, le CDN vidéo est indispensable.

VII. Comparaison des résultats typiques avant et après l'optimisation vidéo (intervalle de référence)

norme	pré-optimisation	post-optimisation
volume vidéo	40-60MB	5-8MB
LCP	4-6s	2-2.5s
INP	300-400ms	150-200 ms
CLS	≥0.2	<0.05

Les intervalles indiqués ci-dessus sont des intervalles courants dans un projet typique. Il ne s'agit pas d'une valeur garantie, l'effet réel dépend de la structure de la page et de l'environnement de l'équipement.

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 : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.