03/29/2024

Cum să eliminați resursele care blochează randarea din WordPress [Plugins or Manually]

În peisajul digital competitiv de astăzi, viteza site-ului contează foarte mult când vine vorba de succesul unei afaceri online. Giganții motoarelor de căutare precum Google acordă prioritate site-urilor cu încărcare rapidă, recunoscând necesitatea de a oferi o experiență de utilizator fără întreruperi.

Potrivit studiilor, încărcările mai rapide ale paginii sporesc implicarea utilizatorilor și ratele de conversie. De fapt, o întârziere de o secundă în timpul necesar pentru încărcarea unei pagini poate determina o scădere cu 7% a conversiilor clienților. Având în vedere acest lucru, este evident că proprietarii de site-uri ar trebui să pună un accent deosebit pe performanța site-ului.

Google ia în serios performanța site-ului și o ia în considerare atunci când stabilește rezultatele căutării. În consecință, site-urile care se încarcă rapid au mai multe șanse să apară primele în rezultatele căutării, atrăgând mai mulți vizitatori și, în cele din urmă, generând mai multe venituri. Dar cum puteți îndeplini cerințele Google și vă puteți încărca rapid site-ul?

Scăpați de resursele care ar putea bloca timpul de încărcare a unui site web, cum ar fi fișierele CSS și JavaScript.

Cu toate acestea, eliminarea acestor resurse poate fi o provocare și consumatoare de timp, în special pentru persoanele lipsite de abilități tehnice.

În acest articol, vom explica resursele de blocare a redării și modul în care acestea influențează performanța site-ului web și vom oferi un ghid pas cu pas pentru eliminarea lor de pe site-ul dvs. WordPress. Deci, să începem să vă optimizăm site-ul pentru viteză și succes!

Rendarea resurselor de blocare

Orice resursă care trebuie încărcată înainte ca o pagină web să poată fi afișată este considerată o resursă care blochează randarea. Aceste resurse influențează performanța și eficacitatea unui site web și prelungesc timpul necesar pentru a încărca o pagină.

Un fișier CSS sau JavaScript poate fi considerat o resursă care blochează redarea dacă acel fișier blochează redarea unei pagini web. Cu toate acestea, semnificația încărcării paginii poate varia în funcție de necesitatea lor imediată.

Când un utilizator accesează o pagină, browserul mai întâi procesează codul HTML pentru a-și afișa conținutul deasupra pliului. Când browserul întâlnește fișiere CSS și JavaScript, le descarcă și le procesează, de asemenea. Dacă fișierele de resurse conțin coduri suplimentare sau porțiuni neutilizate, este nevoie de mai mult timp pentru a încărca pagina web.

Tipuri de resurse de blocare a randării

În general, fișierele de resurse precum CSS și JavaScript sunt considerate resurse care blochează randarea în WordPress. Browserul vede aceste resurse ca fiind critice și necesită încărcare înainte ca pagina să poată fi afișată. Dar asta nu este; există mai multe fișiere de resurse care blochează redarea unei pagini web.

Iată o listă de resurse de blocare a randării:

Foi de stil CSS

Designul și prezentarea unei pagini web sunt determinate de foile de stil CSS. Un fișier CSS va fi considerat o resursă de blocare a randării dacă este plasat în secțiunea a unei pagini HTML.

  Cum să selectați o rezoluție exactă de afișare pe Mac

Fișiere JavaScript în secțiunea

JavaScript este un limbaj de scripting care poate fi utilizat pentru a oferi unei pagini web un comportament dinamic și interacțiune. Un fișier JavaScript va fi considerat o resursă de blocare a redării dacă este plasat în secțiunea a unei pagini HTML.

Fonturi

Textele de pe o pagină web sunt afișate folosind fonturi diferite. Fonturile sunt, de asemenea, considerate o resursă de blocare a randării dacă sunt incluse în secțiunea a unei pagini HTML și sunt încărcate de pe un server local sau un CDN.

Importuri HTML

Acestea sunt caracteristica HTML mai veche care permite paginilor web să includă elemente din alte documente HTML. Chiar dacă importurile HTML nu mai sunt folosite la fel de des, ele pot fi încă văzute pe anumite site-uri mai vechi. Importurile HMTL sunt, de asemenea, considerate resurse de blocare a redării.

De ce sunt teribile resursele care blochează randarea pentru paginile web

Dacă site-ul dvs. WordPress include resurse de blocare a randării, veți rămâne în urmă în rezultatele căutării. Chiar dacă în prezent ești în prima linie, site-urile cu performanțe mai bune te vor copleși în cele din urmă.

Site-urile cu resurse de blocare a redării vor încărca fișiere suplimentare în timp ce redă site-ul. Înainte de a vedea site-ul, utilizatorii trebuie să aștepte până când fișierele sunt procesate. Următorii indicatori de performanță pentru site-uri web vor fi afectați de acele resurse:

  • Cea mai mare vopsea de conținut: aceasta determină cât timp ar dura încărcarea conținutului principal al paginii.
  • First Contentful Paint: Timpul necesar unui browser pentru a produce primul conținut de model de obiect (DOM) de pe site-ul dvs. web.
  • Timp total de blocare: Aceasta evaluează cât timp durează de la Primul Pianto Contentful până la cât durează o pagină pentru a deveni complet interactivă.

Deși resursele de blocare a redării nu sunt necesare pentru încărcare, acestea pot împiedica redarea unui site web sau a unei pagini web. Prin urmare, este esențial să eliminați astfel de resurse pentru a preveni îngreunarea navigației pe site-ul dvs. de către utilizatori.

Să aruncăm o privire mai atentă la motivul pentru care blocarea redării este o problemă serioasă pentru paginile web:

Timp lent de încărcare a paginii

Resursele care blochează randarea vor face ca site-ul web să se încarce mai lent, ceea ce este unul dintre principalele sale dezavantaje. O pagină web se încarcă lent când conține fișiere de resurse cu elemente inutile. Prin urmare, va afecta aspectul rezultatelor căutării, implicarea mai scăzută a utilizatorilor și rata de respingere mai mare.

Redare blocată

Adesea, un browser oprește redarea unei pagini web atunci când întâlnește resurse de blocare a redării, deoarece dorește ca resursele de blocare a redării să fie preluate și procesate.

În cele din urmă, utilizatorii se vor enerva și vor părăsi site-ul dvs. din cauza lipsei de răspuns a paginii sau a redării lente.

În plus, dacă o resursă se încarcă lent, browserul poate de asemenea să renunțe și să nu mai încerce să o încarce. Acest lucru poate duce la pagini sparte sau lipsă de informații.

Scăderea implicării utilizatorilor

Când apar întârzieri de redare, experiența utilizatorului scade odată cu aceasta. Utilizatorii se așteaptă întotdeauna la timpi de încărcare rapid și, de obicei, părăsesc un site cu încărcare lentă. Deci, ajung pe un site care se încarcă mai repede.

Site-urile cu încărcare lentă au un efect dăunător asupra satisfacției consumatorilor și reputației mărcii. Cu asta, traficul pe site și rata de conversie scad, de asemenea, drastic.

  Microfonul MacBook-ului nu funcționează? 5 remedieri de încercat

Există diferite abordări pentru eliminarea resurselor care blochează randarea din WordPress. Cu toate acestea, vă vom prezenta metode manuale pentru a elimina resursele care blochează randarea. Apoi vă vom arăta cum puteți face acest lucru folosind unele dintre pluginurile renumite din WordPress.

Eliminați manual resursele care blochează randarea

Puteți evita să o faceți manual, așa că nu vă frustrați. Dar parcurgerea acestei secțiuni vă va ajuta cu siguranță să învățați câteva tehnici de optimizare a performanței WordPress. Dar mai întâi, uită-te la acest videoclip pentru a te familiariza cu termenii discutați.

#1. Identificați resursele care blochează randarea

Mai întâi trebuie să aflați resursele de blocare a randării înainte de a le elimina de pe site-ul dvs. web. Pur și simplu urmați acești pași pentru a afla resursele de blocare a randării de pe site-ul dvs. WordPress:

  • Accesați Google PageSpeed ​​Insights.
  • Introduceți adresa URL a site-ului dvs. în bara de căutare.
  • Faceți clic pe butonul „Analizați” pentru a obține informații despre site-ul dvs.

  • Derulați în jos și verificați secțiunea Oportunități.
  • Dacă pagina dvs. are resurse de blocare a redării, acestea vor fi listate.

#2. Utilizarea atributelor „Defer” și „Async” pentru JS

După identificarea resurselor care blochează randarea, este timpul să le eliminăm pentru o performanță mai bună a site-ului. Din diverse metode, utilizarea metodei „amânare” sau „async” pentru fișierele JavaScript este o abordare pentru a face acest lucru.

Când vine vorba de atributul „amânare”, acesta permite browserului să descarce fișierul JS și apoi să îl execute. Dar se întâmplă când pagina s-a terminat de încărcat și este gata să-și afișeze conținutul.

Deci, restul elementelor de pe pagină se pot încărca în paralel cu fișierul JavaScript. Ca urmare, timpul necesar pentru încărcarea paginii se reduce.

O altă abordare este atributul „async”, care permite browserului să descarce fișierul JS ori de câte ori este disponibil. Acest lucru se întâmplă fără a bloca alte elemente ale paginii. În consecință, fișierul JS se poate încărca în paralel cu alte elemente, accelerând procesul de încărcare.

Puteți scăpa de resursele care blochează randarea și puteți crește viteza site-ului dvs. utilizând fie atributul „amânare”, fie „async”.

#3. Utilizarea atributului „Media” pentru CSS condiționat

Utilizarea atributelor „media” pentru CSS condiționat este o altă abordare pentru eliminarea resurselor de blocare a redării. Cu acest atribut, puteți defini fișiere CSS unice pentru browsere desktop și mobile.

De exemplu, puteți include un fișier CSS care este dedicat dispozitivelor desktop și un alt fișier CSS care este adaptat dispozitivelor mobile. Puteți indica browserului că fișierul CSS de pe desktop se va încărca atunci când este accesat printr-un dispozitiv desktop.

În mod similar, CSS-ul mobil ar trebui să fie încărcat numai atunci când este accesat prin intermediul dispozitivelor mobile. Încărcând CSS specific dispozitivului pentru dispozitivele desemnate, puteți reduce resursele de blocare a redării și puteți crește timpul de încărcare a site-ului dvs.

#4. Amânarea CSS non-critice

Pe lângă utilizarea atributului „media” pentru CSS condiționat, încercați să amânați CSS-ul necritic. Pentru această abordare, trebuie să încărcați în primul rând CSS-ul esențial. Apoi, încărcați restul CSS pe măsură ce pagina se încarcă.

De exemplu, este posibil să aveți un fișier CSS uriaș care include toate stilurile pentru site-ul dvs. Dar doar o mică parte din acel fișier CSS este necesară pentru a afișa conținutul în regiunea de deasupra paginii site-ului dvs. Conținutul de deasupra paginii poate fi afișat rapid prin întârzierea CSS-ului necritic, iar CSS-ul rămas poate fi încărcat când pagina se încarcă.

  Wifi Collector scanează și adună informații despre rețeaua wireless

#5. Eliminarea CSS și JS neutilizate

Eliminarea fișierelor CSS și JavaScript inutile este o altă tehnică de eliminare a resurselor care blochează randarea. Aceste fișiere vă pot face pagina mai grea și pot crește timpul de încărcare.

Prin eliminarea oricăror fișiere CSS și JS neutilizate, puteți reduce numărul de resurse care blochează randarea. Puteți utiliza cu ușurință instrumente precum PurifyCSS sau UnusedCSS pentru a elimina orice fișier CSS neutilizat de pe site-ul dvs.

#6. Se încarcă local fonturi personalizate

Fonturile personalizate pot include și resurse care restricționează randarea. În loc să depindeți de surse externe, cum ar fi Google Fonts, ar trebui să vă încărcați local propriile fonturi personalizate pentru a evita necesitatea acestor resurse.

Puteți garanta că fonturile dvs. personalizate se încarcă rapid și eficient, fără a încetini performanța site-ului dvs., încărcându-le local. Acest lucru poate duce la un site web mai rapid și mai receptiv și poate îmbunătăți experiența utilizatorului.

#7. Minimizarea JS și CSS

În cele din urmă, reducerea fișierelor CSS și JavaScript poate ajuta site-ul dvs. să funcționeze mai bine. Minimizarea elimină caracterele inutile, cum ar fi spațiile albe și comentariile, din codul dvs. Astfel, dimensiunea fișierelor dvs. este redusă, ceea ce accelerează încărcarea.

Pentru a vă reduce fișierele, puteți utiliza instrumente precum MinifyJS sau CSSNano. Păstrați o copie a fișierelor originale doar în cazul în care trebuie vreodată să le modificați.

Eliminați resursele care blochează randarea cu pluginul

În această secțiune, vă vom arăta cum puteți elimina resursele care blochează randarea folosind plugin-uri WordPress. Aceste plugin-uri sunt renumite în WordPress și pot elimina rapid resursele care blochează randarea. Cea mai bună parte este că puteți chiar să vă îmbunătățiți performanța site-ului web fără nicio expertiză specializată.

#1. Cache total W3

W3 Total Cache (W3TC) îmbunătățește întreaga experiență de utilizare a unui site web WordPress. Elimină resursele care blochează randarea și îmbunătățește SEO, Core web vitals și multe altele. Pluginul utilizează funcții precum integrarea rețelei de livrare a conținutului pentru a implementa cele mai bune practici.

Pentru a elimina resursele care blochează randarea, instalați și activați pluginul W3 Total Cache și urmați acești pași:

  • Accesați secțiunea Performanță din tabloul de bord WordPress și faceți clic pe Setări generale.
  • Sub titlul Minimizare, activați Minimizare și selectați Manual ca mod de minimizare.
  • Acum faceți clic pe Salvați toate setările.

  • Apoi colectați toate fișierele Javascript și CSS care blochează randarea prin Google PageSpeed ​​Insights.
  • Urmează revenirea la Performanță > Minimizare.
  • Acum, în secțiunea js, mai întâi, faceți clic pe Activare pentru setările JS Minify. Apoi, în secțiunea Operațiuni în zone, selectați Neblocare folosind tipul „amânare” pentru eticheta Înainte .
  • Acum mergeți la gestionarea fișierelor JS, selectați tema pe care ați activat-o și faceți clic pe butonul Adăugați script. Acum colectați adresele URL Javascript care au probleme scanate de Google PageSpeed ​​Insights. Lipiți adresele URL în câmpul desemnat, așa cum se arată în imagine.

  • Acum derulați puțin în jos până la secțiunea CSS. Selectați tema din meniul drop-down din secțiunea de gestionare a fișierelor CSS și faceți clic pe Adăugați o foaie de stil. Acum pur și simplu urmați pasul anterior și copiați și lipiți adresele URL colectate de la PageSpeed ​​Insight care au probleme.

  • Deoarece toate setările sunt configurate, faceți clic pe butonul Salvare setări și curățare pentru a executa.

#2. JCH Optimize

JCH Optimize îmbunătățește performanța site-ului WordPress măsurată prin informațiile Google PageSpeed. Plugin-ul îmbunătățește Prima vopsea de conținut (FCP), cea mai mare vopsea de conținut (LCP), Index de viteză (SI), Schimbare cumulativă a aspectului (CLS), Time to Interactive (TTI) și multe altele.

Astfel, experiența generală a utilizatorului și performanța site-ului se îmbunătățesc semnificativ.

După instalarea și activarea JCH Optimize, urmați aceste procese pentru a elimina resursele care blochează randarea:

  • Accesați Setări> JCH Optimize, derulați puțin în jos și accesați setările caracteristicilor de bază.
  • Activați livrarea Optimizați CSS pentru a elimina blocarea redării CSS. Această funcție determină automat CSS-ul esențial necesar pentru afișarea conținutului deasupra pliului pe fiecare pagină web. În plus, îl include în secțiunea a conținutului HTML al fiecărei pagini.

  • Link-ul de preîncărcare este apoi folosit pentru a încărca fișierele CSS concatenate în mod asincron.
  • Pentru a elimina resursele care blochează redarea Javascript, trebuie să includeți atributele asincrone sau amânate la eticheta