Un article amb sis demostracions pot deixar de respondre encara que el text ja aparegui. Cada embed crea reproductor, scripts, esdeveniments i recursos visuals. La feina combinada del fil principal, no només els megabytes, dificulta desplaçar-se o fer clic.
Conserva el valor editorial i canvia el moment en què es creen els reproductors.
Reproduir el bloqueig i comptar iframes
Prova desconnectat en un telèfon modest o amb limitació de CPU. Anota si falla en carregar, en acostar-se als vídeos o després d’iniciar-ne un.
Compta els iframes finals:
document.querySelectorAll("iframe").lengthExecuta el diagnòstic només en un web autoritzat. Compara el número amb els vídeos visibles. Poden existir duplicats mòbils, pestanyes ocultes, modals o carrusels.
Separar xarxa i feina del navegador
Network mostra dominis i bytes; Performance revela tasques llargues, recàlcul de disseny i execució.
Si es baixen molts megabytes abans d’arribar als vídeos, la càrrega anticipada és important. Si els bytes són moderats però la interfície es bloqueja durant la inicialització, JavaScript i DOM són la pista. Totes dues causes poden coexistir.
No culpis WordPress o l’allotjament si el document principal respon normalment i el cost apareix després.
Substituir reproductors inactius per previews
Utilitza un component accessible per a cada vídeo i crea l’iframe només en prémer aquella preview. L’article inicial contindrà miniatures, títols i botons, no sis reproductors.
Allotja imatges locals o utilitza una font aprovada per la política de consentiment. Reserva proporció 16:9 per evitar salts.
No carreguis un paquet JavaScript complet per bloc. Un listener petit pot gestionar-los tots mitjançant una classe compartida o delegació d’esdeveniments.
Triar clic o proximitat al viewport
IntersectionObserver pot inicialitzar un vídeo poc abans de veure’l, però també crea reproductors que el lector pot passar de llarg. El clic ofereix més estalvi i una acció de consentiment clara.
La proximitat pot servir per a un vídeo instructiu principal que gairebé tothom veurà. Aplica-la només a aquell element. Si requereix autoplay, respecta les polítiques i no iniciïs so inesperat.
Eliminar scripts duplicats amb cura
Alguns connectors carreguen l’API del proveïdor per cada bloc o combinen YouTube amb biblioteques de lliscador. Inspecciona URL i iniciadors.
WordPress hauria d’encuar un recurs compartit una sola vegada. En codi propi, utilitza un identificador estable; evita etiquetes <script> dins de blocs repetits. Amb connectors externs, reprodueix primer en staging.
Eliminar una còpia sense entendre dependències pot trencar tots els controls.
Revisar la càrrega editorial
No tota demostració necessita iframe. Un vídeo principal amb capítols i enllaços de text a exemples opcionals pot servir millor. Un índex també avisa quantes seccions multimèdia segueixen.
Reduir reproductors millora lectura, navegació amb teclat i consum de dades. Mantén incrustats els que expliquen realment un pas i enllaça el material secundari amb claredat.
Verificar memòria, desplaçament i reproducció
Després del canvi, confirma que no hi ha peticions del proveïdor abans del disparador, que l’scroll respon de principi a fi i que activar una preview crea només un reproductor.
Reprodueix un segon vídeo i comprova que el primer no manté àudio no desitjat. Valida teclat, pantalla completa i explicació quan es rebutja el consentiment.
Decideix també si en iniciar un altre vídeo s’ha de pausar o retirar l’iframe anterior. En articles llargs, conservar tots els reproductors creats pot tornar a augmentar memòria i esdeveniments encara que la càrrega inicial hagi millorat. Fes-ho sense destruir la posició de lectura ni obligar a baixar de nou un vídeo que l’usuari acaba de pausar.
Prova també després de navegar des d’una altra pàgina: les transicions tipus SPA poden deixar esdeveniments antics.
Demana una avaluació si el constructor genera reproductors ocults, l’API es carrega diverses vegades o la pàgina continua bloquejada amb previews. Aporta URL, dispositiu i vídeos imprescindibles, sense credencials.
Una reparació completa considera xarxa, JavaScript, memòria, consentiment i propòsit editorial; una puntuació més alta per si sola no ho demostra.