Cum să Minimizezi Activitatea Principală pe WordPress și Să Îmbunătățești Viteza Paginii

Cum să Minimizezi Activitatea Principală pe WordPress

Cauți o modalitate cum să minimizezi activitatea principală pe WordPress pentru a îmbunătăți performanța Core Web Vitals și pentru a vă crește scorul PageSpeed Insights? Continuați să citiți acest articol și veți găsi toate informațiile de care aveți nevoie!

„Minimize main thread work” este una dintre recomandările PageSpeed incluse în Zona de diagnosticare a raportului de performanță.

Când testați site-ul dvs. WordPress, este posibil să fi întâlnit o astfel de sugestie.

Să aflăm care este funcționarea firului principal, cum vă afectează performanța site-ului WordPress și cum puteți remedia problema.

Ce este sau care este Main Thread Work

Pentru a înțelege care este firul principal, trebuie să facem un pas înapoi și să explicăm ce se întâmplă atunci când doriți să încărcați conținutul unei pagini.

În primul rând, browserul face o cerere către server. Odată ce serverul trimite înapoi conținutul solicitat, browserul poate începe să analizeze (parsa) codul HTML și să construiască arborele DOM – aceasta este structura HTML. În acest moment, browserul poate reda și afișa conținutul.

Procesul de analiză și redare a codului este firul principal al browserului. Când browserul întâlnește resurse care blochează randarea care încetinesc procesul, firul principal devine ocupat și blocat. Ca urmare, pagina nu poate fi interactivă și nu poate răspunde la nicio interacțiune a utilizatorului.

Principalul vinovat pentru un fir principal ocupat este JavaScript – și fișierele CSS joacă un rol. Browserul nu ar trebui să întâlnească aceste fișiere atunci când analizează codul și redă pagina, deoarece blochează randarea JS și CSS și ar trebui eliminate.

Puteți avea o imagine de ansamblu clară asupra modului în care este afectată funcționarea firului principal, examinând raportul PageSpeed Insights:

După cum puteți vedea, recomandarea PageSpeed este împărțită în șapte secțiuni diferite. Puteți vedea care categorie are cel mai relevant impact asupra performanței.

Categoriile pe care le puteți îmbunătăți cel mai mult sunt:

• Evaluarea scripturilor
• Analiza și compilarea scripturilor
• Analizați HTML și CSS.

Toate aceste secțiuni sunt legate de analizarea și executarea codului – tocmai atunci firul principal devine ocupat dacă întâlnește resurse care blochează randarea.

De Ce ar Trebui Să Minimizați Funcționarea Firului Principal

După cum puteți vedea, lucrul cu firul principal poate avea un impact semnificativ asupra performanței.

Întrucât principalul motiv pentru un fir principal ocupat este JavaScript, cea mai afectată măsurătoare este First Input Delay (FID), care măsoară interactivitatea și capacitatea de răspuns a unei pagini.

First Input Delay este una dintre valorile de bază ale Core Web Vitals și este măsurată pe teren prin date și interacțiuni reale ale utilizatorilor. Este înlocuit cu Total Blocking Time din scorul de performanță Lighthouse. TBT reprezintă 25% din nota generală. Și de aceea nu puteți trece cu vederea firul principal și ar trebui să abordați recomandarea PSI dacă doriți să creșteți performanța site-ului dvs.

Cum să Minimizezi Activitatea Principală pe WordPress

Există cinci moduri principale să Minimizezi Activitatea Principală pe site-ul dvs. WordPress:

1. Amână JS
2. Eliminați JS neutilizat și Întârziați JS
3. Minimizează JS
4. Minimizează CSS
5. Amână CSS non-critic.

1.Amână JS

Prima opțiune pe care o aveți pentru a aborda fișierele JS este să amânați scripturile JavaScript și să le încărcați numai după redarea celui mai relevant conținut.

Amânarea JS va aborda în mod specific categoria de analiză și compilare a scripturilor.

Dacă doriți să amânați JS manual, ar trebui mai întâi să identificați scripturile prin raportul PageSpeed Insights. Apoi, ar trebui să includeți atributul defer pentru fiecare fișier JavaScript, astfel încât scripturile să nu fie analizate și încărcate până când redarea paginii nu este completă.

Iată un exemplu al atributului de amânare:

<script defer src=”/exemplu-js-script”></script>

O modalitate mai rapidă și mai simplă de a amâna JS este să profitați de funcția Load Javascript Deferred oferită de WP Rocket.

Este o opțiune puternică care vă permite să amânați fișierele JS în cel mai scurt timp. În fila Optimizare fișier, accesați Load Javascript Deferred și bifați opțiunea. Destul de ușor, nu? De asemenea, puteți exclude anumite fișiere JS de la amânare.

2.Eliminați JS neutilizat + JS întârziat

O altă modalitate eficientă de a gestiona fișierele JS este eliminarea JS neutilizată și întârzierea resurselor JS.

Datorită acestor două acțiuni, vă veți ocupa de categoriile de evaluare și compilare Script-uri și analizare și compilare Script incluse în raportul PSI.

Când eliminați JavaScript neutilizat, fișierele JS nu vor fi incluse în redarea conținutului deasupra pliului. Drept urmare, browserul – prin urmare, funcționarea firului principal – nu va fi întrerupt de fișiere JS grele care nu sunt necesare pentru afișarea conținutului celei mai importante pagini.

Întârzind resursele JavaScript, browserul nu va încărca aceste fișiere până la prima interacțiune cu utilizatorul (de exemplu, derulare, clic pe un buton). Încă o dată, firul principal nu va fi ocupat și blocat.

În calitate de utilizator WordPress, aveți opțiuni diferite.

Puteți alege un plugin care întârzie JS, cum ar fi WP Meteor sau Flying Scripts. De asemenea, puteți profita de un plugin de gestionare a activelor pentru a selecta unde să încărcați anumite fișiere JS. Unele opțiuni pentru WordPress sunt Plugin Organizer, Gonzales, Perfmatters și Asset CleanUp.

Cel mai simplu și mai rapid mod de a aborda JS este să folosești WP Rocket și funcția de execuție Delay JS. În fila Optimizare fișiere, veți găsi opțiunea de a întârzia toate fișierele JS până la interacțiunea utilizatorului. Desigur, puteți exclude anumite fișiere JS de la întârzieri, după cum puteți vedea în captura de ecran de mai jos:

Este un mod simplu și eficient de a gestiona JS și de a economisi timp.

Obțineți WP Rocket acum și testați îmbunătățirile imediat!

3.Minimizează JS

Al treilea și ultimul mod de a gestiona fișierele JS este prin minificare. Vă permite să vă ocupați de evaluarea Scriptului și de categoriile de analiză și compilare Script.

Scopul minimizării JS este de a face codul mai ușor și mai rapid. Prin eliminarea întreruperilor de rând, comentariile și spațiile albe, veți reduce dimensiunea fișierelor JS.

Puteți folosi un instrument de minificare JS sau puteți profita de WP Rocket. Pe lângă funcțiile puternice de performanță web, WP Rocket vă permite să minimizați JS în cel mai scurt timp și fără efort. Trebuie doar să accesați fila Optimizare fișiere și să bifați Minificare fișiere JavaScript:

4.Minimizează CSS

Alături de JS, ar trebui să minimizați fișierele CSS pentru a aborda categoriile PSI legate de evaluarea scriptului și Analiza HTML și CSS.

Motivul este întotdeauna același. Prin reducerea CSS, veți reduce dimensiunea codului și îl veți încărca mai repede.

Încă o dată, puteți utiliza un instrument de minificare CSS sau puteți alege opțiunea oferită de WP Rocket în fila Optimizare fișier:

5.Amânați CSS non-critic

Dacă doriți să minimizați lucrul firului principal și să abordați Parse HTML & CSS.

Categorie în auditul PSI, ar trebui să amânați și CSS non-critice – fișierele CSS care nu se află deasupra pliantei și nu sunt necesare pentru a reda pagina.

Scopul este de a încărca CSS non-critice numai după ce browserul a redat și afișat deja conținutul cel mai relevant.

Puteți amâna fișierele CSS în moduri diferite.

Primul lucru de știut este că amânarea CSS-ului non-critic merge mână în mână cu inline-ul CSS critic – fișierele care trebuie încărcate cât mai repede posibil.

De aceea ar trebui să identificați și să introduceți CSS-ul critic în codul HTML. Puteți face acest lucru folosind un generator CSS Critical Path. După aceea, puteți încărca fișierul CSS necritic în mod asincron, aplicând următorul model.

Dacă doriți să aveți grijă de fișierele CSS cel mai simplu și mai eficient, WP Rocket este ceea ce aveți nevoie. Funcția de optimizare a livrării CSS, elimină CSS neutilizate fără niciun efort din partea dvs. – nu trebuie să faceți nimic altceva.

În fila Optimizare fișier, trebuie doar să „Ștergeți CSS neutilizat” și să lăsați pluginul să facă treaba pentru dvs.:

Dacă opțiunea nu funcționează pentru dvs., atunci o puteți activa pe cealaltă: Încărcați CSS asincron:

6.Alte Optimizări de Performanță

După cum ați observat în recomandarea „Minimizarea activității firului principal”, există și alte categorii pe care ar trebui să le optimizați:

• Stil și Aspect
• Redare
• Colectarea Gunoiului.

Stilul, aspectul și redarea sunt legate de structura aspectului și de arborele DOM construit atunci când se analizează codul HTML. Google recomandă reducerea sferei și complexității calculelor de stil și evitarea machetelor mari și complexe și a deplasărilor.

În ceea ce privește Colectarea Gunoiului, ar trebui să monitorizați utilizarea totală a memoriei paginii dvs. web.

Începe Să Minimizezi Activitatea Principală Chiar Acum

Minimizarea activității firului principal vă va ajuta să optimizați nota FID și să vă îmbunătățiți scorul de performanță PageSpeed Insights.

Mulțumită WP Rocket, puteți remedia câteva probleme majore și puteți spori performanța site-ului dvs. fără să transpirați și să vă pierdeți timpul!

Nu sunteți încă client WP Rocket? Economisiți timp și lăsați WP Rocket să facă treaba pentru dvs. WP Rocket este cel mai simplu mod de a vă îmbunătăți scorul PageSpeed Insights.

Puteți conta întotdeauna pe garanția lor de rambursare 100% a banilor. Deși nu cred că veți dori vreodată una, vă vor oferi cu plăcere o rambursare dacă o solicitați în termen de 14 zile de la cumpărare.

Singurul risc pe care vi-l asumați cu acest plugin este accelerarea site-ului dvs. WP Rocket aplică automat 80% din cele mai bune practici de performanță web, sporind instantaneu scorurile Core Web Vitals.

Recomandarea autorului:

• Cum Reduci Greutatea Paginii pe WordPress – Ghid cu Bune Practici
• Ce este Performanța Percepută și De Ce Trebuie Să o Optimizați
• Cât de Rapid este Site-ul Meu Mobil ? Sfaturi și Instrumente Pentru a Testa Viteza Site-ului Mobil
• Cum să vă Accelerați Site-ul Mobil pe WordPress – 11 Sfaturi de Performanță