homefinance blog
Cum să evitați document.write() în WordPress
Audit Google PageSpeed: evitați document.write() Google PageSpeed (Lighthouse) va afirma că site-ul web „folosește document.write()”, ceea ce face ca auditul să eșueze. 
De asemenea, este posibil să fiți notificat că site-ul dvs. WordPress nu reușește acest audit printr-un raport Lighthouse, pentru consolele de instrumente Firefox și Chrome Dev. Acestea sunt principalele căi care vă vor alerta dacă site-ul dvs. folosește document.write(). Chrome DevTools: [Încălcare] Evitați utilizarea document.write(). Sau, 
Firefox DevTools: Un arbore dezechilibrat a fost scris utilizând document.write(), ceea ce determină analizarea datelor din rețea. De asemenea, rețineți că acest articol este special conceput pentru site-urile WordPress, dar puteți eșua acest audit cu orice include funcția JavaScript.
Ce este document.write()? Înainte să ne dăm seama cum să remediam acest audit, să ne dăm seama ce este de fapt document.write() și de ce dorește Google să-l înlocuim. Este o funcție JavaScript care inserează HTML în pagină oriunde apare. Executat după încărcarea paginii, înlocuiește întregul antet și eticheta de corp cu tot ce conține. Practic, va suprascrie fiecare bucată de cod utilizabilă din site-ul web dacă este folosită de la sine. Iată un exemplu în acest sens pe The Economist: document.write("<h3>Yeah,nah,yeah… You have been replaced</h3>");
Evident, dacă site-ul dvs. WordPress eșuează auditul evita document.write(), probabil că acesta nu este complet suprascris de acesta. Proprietatea de suprascriere completă a acestei funcții are loc numai dacă este încărcată după ce pagina în sine a fost încărcată. Dacă îl rulați înainte ca documentul să fie încărcat, acesta inserează HTML direct acolo unde apare.
Aici cazurile de utilizare devin mai comune. De obicei, poate fi folosit pentru a insera o reclamă în site-ul dvs. web. Acesta este cel mai frecvent caz de utilizare a document.write() în 2020: injectarea de reclame în conținutul site-ului. TLDR; document.write este de obicei folosit pentru a injecta scripturi: document.write('<script src="https://makingadrevenue.con/ad-inject.js"></script>'); Cum influențează document.write() performanța? Această mică funcție afectează de fapt performanța atât de mult încât versiunile moderne ale browserului Chrome îl vor bloca de fapt să ruleze, dacă sunt îndeplinite cazuri specifice.
Aceste cazuri specifice trebuie să includă faptul că utilizatorul se confruntă cu o conexiune la internet slabă, scriptul nu conține atribute asincrone sau amânate și este încărcat în documentul de nivel superior (în engleză, aceasta înseamnă pagina web principală și nu orice iframe care sunt conținute în interior). Această blocare este folosită în principal pentru a proteja vizitatorii care utilizează o conexiune de rețea foarte lentă pe un dispozitiv mobil (gândiți-vă la 2G sau chiar la 3G). Conform testării Chrome, blocarea documentului corect pentru utilizatorii lor 2G a dus la un timp de analiză a paginii care a fost cu 38% mai rapid în medie. Acest 38% se traduce în șase secunde întregi. (Sursă)
O altă problemă majoră atunci când utilizați document.write() pe site-ul dvs. WordPress este o altă proprietate a funcției. Această proprietate reîmprospătează și reîncarcă arborele Dom. Dacă arborele Dom a fost deja construit, utilizarea document.write() va forța să fie construit din nou. Acest lucru duce la un transfer excesiv de date, precum și la o încărcare mai lentă a paginii web. Aceasta poate să nu fie problema pe o pagină web mică și ar adăuga probabil doar câteva milisecunde la timpul de încărcare, dar pe o pagină web mai mare (ceea ce este extrem de comun când se utilizează WordPress și un generator de teme/pagini grele), acest lucru ar putea au un impact mare.
Deci, până acum, ar trebui să știți că auditul „Evitați document.write()” alias „▲ Utilizează document.write()” Este unul de care ar trebui să vă faceți griji dacă se declanșează pe site-ul dvs. WordPress. În continuare, să analizăm cauzele comune ale utilizării document.write() pe site-ul dvs. web și ce puteți face pentru a remedia problema.
Ce cauzează document.write() într-un site web WordPress? Instalarea de bază a WordPress nu folosește document.write(), nici majoritatea pluginurilor în prezent. După cum ar fi trebuit să înțelegeți din secțiunea de mai sus, această practică a căzut în disgrație în ultimii doi ani.
Să trecem peste câteva elemente web comune care vor folosi document.write() (și de ce includ această funcție în codul lor): Reclame: Cel mai important exemplu de document.write() în 2020 este în anunțurile grafice. JS terță parte: JavaScript terță parte poate folosi document.write(). Acest lucru va declanșa un avertisment, dar în majoritatea cazurilor Chrome nu va bloca funcționarea funcției, deoarece nu provine din același domeniu. Pluginuri: Prin extensie, uneori, pluginurile vor avea această etichetă în propriul cod, dar cea mai comună instanță în care aceasta este inclusă este în scripturile terță parte. Dacă un plugin apelează un script terță parte pe site-ul dvs. web, acest lucru poate declanșa eșecul auditului.
CDN de rezervă: După cum s-a subliniat în acest comentariu într-o discuție GitHub, document.write() poate fi folosit ca o alternativă la un script local dacă un CDN eșuează. Este cu siguranță demn de remarcat faptul că utilizarea document.write() este cu siguranță eliminată. În 2016, Google a început să blocheze acest lucru cu browserul Chrome, iar majoritatea rețelelor publicitare (dacă nu toate) au remediat această problemă. Cum să identifici ce se află în spatele document.write() În această subsecțiune, vă vom arăta cum să identificați unde este apelată funcția document.write() pe site-ul dvs. WordPress. După ce îl găsiți, îl puteți elimina cu ușurință.
Acest lucru este de fapt destul de ușor, deoarece tot ce trebuie să faceți este să rulați raportul Google PageSpeed. Dacă nu reușiți acest audit, acesta va identifica adresa URL sau scriptul în care document.write() este utilizat pe site-ul dvs. WordPress. De acolo, puteți elimina, înlocui sau remedia în alt mod problema. Cum să eliminați document.write() de pe un site web WordPress Cel mai simplu răspuns este să nu injectați scripturi folosind această funcție. În acest caz, cel mai simplu răspuns poate fi cel mai ușor de implementat. Atâta timp cât ați identificat ce folosește document.write() pentru a injecta un script în site-ul dvs. web, îl puteți aborda.
Reclame: În 2020, majoritatea rețelelor de publicitate nu folosesc această funcție. Dacă o fac, puteți solicita un script care nu folosește document.write(). Dacă nu au această opțiune, puteți adăuga o etichetă asincronă la elementul de script (în timp ce căutați alte rețele publicitare la care să treceți). Pluginuri WordPress: În unele cazuri, puteți chiar să contactați dezvoltatorul pluginului și să îi cereți să înlocuiască această funcție cu ceva care face același lucru. Este în interesul dezvoltatorului să-și îmbunătățească pluginul, deoarece utilizarea acestui script nu respectă cele mai bune practici și are ca rezultat blocarea utilizatorilor de site-uri web care utilizează pluginul. Le puteți sugera să folosească una dintre aceste două funcții JavaScript care îndeplinesc același scop: document.appendChild() sau parentNode.insertBefore() (Așa își inserează Google Analytics scripturile). Dacă totul eșuează: În cele din urmă, dacă trebuie neapărat să utilizați acest script pe site-ul dvs. (uneori pluginul îl va include, dar tot trebuie să îl utilizați), îl puteți încărca pur și simplu asincron sau îl amânați. Dacă puteți accesa codul real care inserează acest JavaScript în site-ul dvs. web, puteți adăuga cu ușurință o etichetă ca aceasta: <script async src="script.js"></script> depinde de utilizarea JavaScript pe site-ul dvs. WordPress, dar încărcarea asincronă este de obicei mai bună decât amânarea. Dacă nu puteți accesa codul și acesta este probabil cel mai comun blocaj de drum, există un instrument minunat care vă permite să încărcați lucrurile și să le amânați fără a fi nevoie să accesați codul. Puteți utiliza cu ușurință un plugin numit curățare active pentru a identifica ce scripturi fac ca pagina dvs. WordPress să se încarce lent și apoi să le încărcați asincron sau să le amânați printr-un clic pe o casetă de selectare. Puteți face acest lucru pe bază de pagină cu pagină sau pentru întregul site. Lucrul bun despre acest instrument este că nu trebuie să editați codul real. Mai ales dacă acesta este cu un plugin, orice modificări ale codului vor fi suprascrise atunci când pluginul se actualizează. Utilizarea acestui instrument vă permite să accelerați drastic timpul de încărcare a site-ului dvs. De asemenea, puteți face o mulțime de alte lucruri care au un impact pozitiv asupra performanței site-ului dvs. Concluzie Sperăm că acest articol vă va învăța cum să evitați document.write() în WordPress. Avoid document.write() este un audit pe care îl puteți eșua în Google PageSpeed, Lighthouse, Chrome și multe altele. Poate afecta serios timpul de încărcare a site-ului dvs., uneori chiar și până la 10 secunde, dar, din fericire, problema poate fi rezolvată destul de ușor. Dacă aveți întrebări despre cum să evitați document.write() în WordPress, nu ezitați să le lăsați în secțiunea de comentarii de mai jos.
