Doriti sa eliminati JavaScript-ul si CSS-ul care blocheaza randarea din WordPress?

Daca verificati site-ul dvs. web prin interogarea de la Google PageSpeed, atunci veti primi probabil o sugestie de a elimina scripturile si CSS-ul care ar putea bloca randarea.

Cu toate acestea, nu se ofera si detalii despre cum sa efectuati eliminarea pe site-ul dvs WordPress.

In acest articol, vom specifica cum sa eliminati JavaScript-ul si CSS-ul care blocheaza randarea din WordPress, pentru a imbunatati scorul Google PageSpeed.

Ce este JavaScript-ul si CSS-ul cu blocare a randarii?

Fisierele JavaScript si CSS care blocheaza randarea sunt de fapt fisiere care impiedica un site web sa afiseze o pagina web inainte de a incarca aceste fisiere.

Fiecare site WordPress are o thema si plugin-uri care adauga fisiere JavaScript si CSS pentru partea frontala a site-ului.

Aceste script-uri pot creste timpul de incarcare a paginii de pe site-ul dvs. si pot bloca chiar redarea sau randarea paginii.

Browser-ul unui utilizator va trebui sa incarce acele scripturi impreuna cu CSS-urile inainte de a incarca restul HTML-ului pe pagina.

Aceasta inseamna ca utilizatorii cu o conexiune mai lenta vor trebui sa astepte cateva milisecunde mai mult pentru a vedea pagina.

Aceste scripturi si stylesheets sunt denumite JavaScript si CSS-uri care blocheaza redarea.

Proprietarii de site-uri web care incearca sa obtina scorul de 100 in Google PageSpeed vor trebui sa rezolve aceasta problema pentru a obtine scorul perfect.

Care este de fapt scorul dat de Google PageSpeed?

Google PageSpeed Insights este un instrument de testare a vitezei site-ului web creat de Google. Ajuta proprietarii site-urilor sa testeze si sa optimizeze site-urile lor.

Acest instrument testeaza site-ul dvs. web dupa recomandarile Google pentru rapiditate si ofera sugestii pentru a imbunatati timpul de incarcare a paginii.

Va afisa un scor bazat pe numarul de reguli pe care site-ul dvs. le parcurge. Majoritatea site-urilor web ajung undeva intre 50-70.

Cu toate acestea, unii proprietari de site-uri se simt obligati sa obtina 100 (cel mai mare punctaj pe care il poate obtine o pagina).

Aveti nevoie cu adevarat de scorul perfect 100 in Google PageSpeed?

Scopul informatiilor Google PageSpeed este de a va oferi indicatii pentru a imbunatati viteza si performanta site-ului dvs. web. Nu vi se cere sa urmati strict aceste reguli.

Nu uitati ca viteza este doar una dintre numeroasele valori SEO ale site-urilor care ajuta Google sa determine modul de clasare a site-ului. Motivului pentru care viteza este atat de importanta este ca imbunatateste experienta utilizatorului pe site-ul dvs.

O experienta mai buna a utilizatorului necesita mult mai mult decat o simpla viteza de incarcare a paginii web.

De asemenea, trebuie sa oferiti informatii utile, o interfata de utilizator mai buna si continutului captivant prin text, imagini sau videoclipuri.

Obiectivul dvs. ar trebui sa fie crearea unui site web rapid care sa ofere o experienta excelenta pentru utilizatori.

Pe parcursul ultimei proiectări WPBeginner, ne-am concentrat asupra vitezei, precum și îmbunătățirea experienței utilizatorului.

Va recomandam sa utilizati regulile Google Pagespeed ca “linii mari” si daca se pot implementa cu usurinta fara a strica experienta utilizatorului.

In caz contrar ar trebui sa va straduiti sa imbunatatiti cat de mult puteti, iar apoi sa nu va faceti griji pentru restul.

Acestea fiind spuse, sa aruncam o privire la ce puteti face pentru a elimina blocarea redarii din JavaScript si CSS in WordPress.

Vom acoperi doua metode de a elimina blocarea in WordPress. Puteti alege metoda care functioneaza cel mai bine pentru site-ul dvs. web.

1. Remedierea scripturilor de blocare si a CSS-ului cu plugin-ul WP Rocket

Pentru aceasta metoda, vom folosi plugin-ul WP Rocket.

Este unul dintre cele mai bune plugin-uri de memorie cache WordPress de pe piata si va permite sa imbunatatiti rapid performanta site-ului dvs. web.

Asta fara sa fie nevoie sa aveti abilitati tehnice sau o configurare complicata.

In primul rand, trebuie sa instalati si sa activati plugin-ul WP Rocket. Pentru mai multe detalii puteti consulta ghidul nostru pas cu pas despre instalarea unui plugin WordPress.

WP Rocket functioneaza fara alte setari si va activa memoria cache cu setari optime pentru site-ul dvs. web.

In mod implicit, nu se activeaza optimizarea JavaScript si CSS. Aceste optimizari pot afecta aspectul site-ului dvs. web sau unele functii; motiv pentru care plugin-ul va permite sa le activati in mod optional.

Pentru a efectua acest lucru, trebuie sa accesati pagina Settings >> WP Rocket dupa care sa selectati optiunea “File Optimization“.

De aici, derulati la sectiunea “CSS Files” si bifati “Minify CSS“, “Combine CSS Files” si “Optimize CSS Delivery options“.

Nota: WP Rocket va incerca sa minimizeze toate fisierele CSS, sa le combine si sa incarce doar CSS-urile necesare pentru partea vizibila a site-ului dvs. web.

Acest lucru ar putea afecta aspectul site-ului dvs. web, de aceea trebuie sa testati site-ul pe mai multe dispozitive cu dimensiuni de rezolutie diferite.

In continuare derulati la sectiunea “JavaScript Files“. De aici puteti bifa toate optiunile pentru imbunatatirea maxima a performantei.

Puteti minima si combina fisiere JavaScript, asa cum ati efectuat mai devreme pentru CSS.

De asemenea, puteti opri WordPress de la incarcarea fisierului jQuery Migrare. Este un script pe care WordPress il incarca pentru a oferi compatibilitate pentru pluginuri si theme folosind versiuni vechi de jQuery.

Majoritatea site-urilor web nu au nevoie de acest fisier, dar totusi trebuie sa verificati dupa dezactivare, site-ul dvs.; pentru a va asigura ca eliminarea acestuia nu afecteaza thema sau pluginurile.

In continuare derulati in jos un pic mai departe si bifati optiunile “Load JavaScript Deferred” si “Safe Mode for jQuery”.

Cum functioneaza?

Aceste optiuni intarzie incarcarea unor JavaScript-uri neesentiale; jQuery safe mode va permite sa incarcati jQuery-uri pentru theme care pot fi folosite inline. Puteti lasa aceasta optiune bifata daca sunteti sigur ca thema dvs. nu foloseste jQuery in linie niciunde.

Efectuati click pe butonul “Save Changes” pentru a salva noile setari.

Stergeti memoria cache din WP Rocket inainte de a testa din nou site-ul dvs. cu Google Page Speed Insights.

2. Eliminati scripturile de blocare a randarii si a CSS-ului cu Autoptimize

Pentru aceasta metoda, vom folosi un plugin creat special pentru imbunatatirea livrarii fisierelor CSS si JS ale site-ului dvs. web. In timp ce acest plugin efctueaza optimizarea, ii lipsesc totusi functiile puternice pe care WP Rocket le are.

Primul lucru pe care trebuie să il efectuati este sa instalati si sa activati plugin-ul Autoptimize.

Dupa activare, trebuie sa accesati Settings >> Autoptimize pentru a configura setarile plugin-ului.

In primul rand, trebuie sa bifati “Optimize JavaScript Code” din blocul “JavaScript Options“. Sa va asigurati ca optiunea “Aggregate JS-files” nu este bifata.

Derulati in jos pana la caseta CSS Options si bifati optiunea “Optimize CSS Code“. Asigurati-va de asemenea ca optiunea “Aggregate CSS-files” nu este bifata.

Acum puteti face click pe butonul “Save Changes and Empty Cache” pentru a salva setarile.

In continuare testati site-ul dvs. web cu ajutorul instrumentului Page Speed Insights.

Daca in site mai exista scripturi care blocheaza randarea, atunci trebuie să reveniti la pagina de setari a plugin-ului; reverificati optiunile din tab-ul JavaScript cat si CSS.

De exemplu, puteti permite pluginului sa includa JS inline si sa eliminati scripturile care sunt excluse in mod implicit, precum seal.js sau jquery.js.

Click din nou pe butonul “Save Changes and Empty Cache” pentru a salva modificarile si pentru a goli cache-ul plugin-ului.

Dupa ce ati finalizat, reverificati site-ul dvs. web cu ajutorul instrumentului Page Speed.

Cum functioneaza?

Autoptimize uneste toate codurile JavaScript si CSS solicitate. Dupa aceasta, creeaza fisiere CSS si JavaScript minimizeaza si serveste copii cache pe site-ul dvs. ca async sau amanate.

Acest lucru va permite sa remediati script-urile care blochează randarea impreuna cu problema de stiluri. Cu toate acestea, retineti ca poate afecta totusi si performanta sau aspectul site-ului dvs. web.

Troubleshooting

In functie de modul in care plugin-urile si thema dvs. WordPress utilizează JavaScript si CSS, ar putea fi destul de dificil sa remediati complet toate situatiile in care blocheaza randarea.

In timp ce instrumentele de mai sus va pot ajuta, plugin-urile dvs. pot avea nevoie de anumite scripturi cu un nivel de prioritate diferit pentru a functiona corect.

In cazul respectiv, solutiile de mai sus pot duce la nefunctionalitati ale unor astfel de plugin-uri sau ar putea duce la un comportament neasteptat.

Google va poate sugera in continuare anumite probleme, cum ar fi optimizarea livrarii CSS pentru continutul “above the fold” din site.

WP Rocket va permite sa remediati si acest aspect adaugand manual CSS-uri critice, necesare pentru a afisa zona de pliere (above the fold) de mai sus a themei.

Cu toate acestea ar poatea fi destul de dificil sa aflati ce cod CSS va trebui sa afisati pentru zona de pliere.

Speram ca acest articol v-a ajutat sa eliminati JavaScript-ul si CSS-ul care blocheaza randarea din WordPress.

Va invitam sa consultati pagina noastra de blog – AICI pentru alte articole si tutoriale cu privire la CMS-ul WordPress.

Pentru tutoriale de hosting si domenii SkaleWeb Hosting va pune la dispozitie o gama variata de tutoriale pentru cPanel, email, domenii, etc.