Entre les moltes raons de l’aclaparadora popularitat de WordPress al web, la comunitat de desenvolupadors és que hi ha un gran nombre de connectors i temes disponibles per crear un lloc web personalitzat amb relativament poc esforç i inversió. No obstant això, quan hi ha diversos scripts treballant al lloc, pot alentir el rendiment i el temps de càrrega.
Tot i que no cal carregar alguns dels scripts al mateix temps, ho fan i acaben impedint que els usuaris puguin veure els continguts del lloc web ràpidament, cosa que comporta l’abandonament del lloc per frustració. Per sort, hi ha moltes maneres en què es poden eliminar aquests fitxers JavaScript i CSS que bloquegen la representació per permetre que el lloc web es carregui ràpidament i lliuri el contingut als lectors.
Explicació de JavaScript i CSS de bloqueig de renderització
Sempre que es carrega un lloc web en un navegador web, sol·licita que es carreguin tots els scripts en una cua. Si per algun motiu, la cua dels scripts es nega a netejar-se, el lloc web no es mostra. Aquests scripts que es neguen a carregar s’anomenen fitxers JavaScript i CSS que bloquegen la representació. El temps per carregar completament el lloc depèn de la durada de la cua. Molt sovint, molts dels scripts encallats a la cua ni tan sols són necessaris per permetre que l’espectador pugui veure el lloc web en aquell moment i es pot fer esperar molt fàcilment fins que el lloc web s’hagi carregat completament.
Inconvenients de JavaScript i CSS de bloqueig de renderització
El primer i principal impacte dels scripts JavaScript i CSS que bloquegen la representació al lloc web és que disminueixen la velocitat de càrrega. La velocitat del lloc és un paràmetre molt important que dicta la utilitat del lloc web i el seu bon rendiment en els SERP. Si el lloc es carrega lentament, és més probable que els visitants l'abandonin per algun altre lloc; el percentatge de rebots que segueix és un fort senyal de SEO que fa baixar la classificació dels motors de cerca. D'acord amb diari de cercadors, més que el temps real dedicat a carregar el lloc, el problema està en la percepció dels usuaris del temps que es triga a carregar el lloc web. Com que els navegadors intenten carregar-ho tot, inclosos els scripts de bloqueig de representació, al mateix temps, heu d’assegurar-vos que el lloc carregui només els scripts necessaris perquè el lloc pugui ser utilitzat al principi, i després la resta d’escriptures poden càrrega.
Eliminació de JavaScript i CSS de bloqueig de renderització
Fins i tot abans d’intentar eliminar els scripts de bloqueig de representació, haureu d’identificar els scripts responsables del problema. Utilitzar l'eina PageSpeed Insights de Google és la manera més senzilla de fer-ho. Heu de fer una llista dels scripts que necessiten atenció i, a continuació, decidir si voleu resoldre el problema manualment o utilitzar un complement, especialment dissenyat per a aquest propòsit.
Tot i això, si implementeu certes pràctiques recomanades per reduir el nombre d’escriptures de bloqueig de representació al vostre lloc web durant l’etapa de desenvolupament, no només us facilitareu la vida, sinó que també us assegurareu SEO assequible. Algunes de les tàctiques habituals inclouen la reducció de JavaScript i CSS mitjançant la supressió d’espai en blanc i comentaris innecessaris al codi, concatenació de fitxers JavaScript i CSS per reduir el seu nombre global, així com l’ús de càrregues asíncrones per diferir la càrrega de Java Script.
Per molt senzill que semblin els mètodes, eliminar els scripts manualment pot resultar fastigós a causa del gran nombre de fitxers JavaScript i CSS que vénen amb cadascun dels connectors orientats a la part frontal. Tot i que WordPress ofereix un filtre combinat per a tots els scripts front-end que fan servir, podeu identificar tots els fitxers JavaScript o CSS entrants; és molt més fàcil emprar un connector en lloc de fer-ho des de zero.
Connectors principals per reduir el nombre de scripts JavaScript i CSS que bloquegen la renderització
Rocket WP
WP Rocket actua com una molt bona eina per optimitzar llocs web, ja que és extremadament versàtil i pot gestionar diverses tasques com la reducció de CSS i JavaScript, ajornant les sol·licituds de JavaScript remotes, carregant imatges mandroses i molt més. Tot i que el procés de configuració fàcil és un gran avantatge, el complement us requerirà que us adapteu a una experiència de tauler de WordPress diferent de la que acostuma la majoria de desenvolupadors. Tot i que el coet WP inclou alguns extres gratuïts, el preu base d’un lloc web comença a 49 dòlars anuals.
Autoptimize
Construït específicament per abordar problemes identificats per eines com PageSpeed insights, Autoptimize permet als usuaris configurar el complement amb un nou menú al tauler de WordPress. Tot i que Autoptimize realitza totes les tasques bàsiques com la memòria cau i la reducció d’escriptures, també pot optimitzar i convertir imatges al format de fitxer WebP. Tot i que configurar-lo pot ser una mica difícil, el connector gratuït té una valoració molt alta per la seva funcionalitat. També hi ha disponibles un pla de configuració personalitzada de 165 dòlars i un pla de configuració d’experts de 667 dòlars amb revisió de llocs web professional.
JCH Optimize
JCH Optimize ofereix un conjunt d’eines úniques per augmentar la velocitat de càrrega de la pàgina. Per exemple, pot reduir la mida de les pàgines i el nombre de sol·licituds HTTP necessàries per carregar pàgines web que tinguin l’efecte de disminuir la càrrega al servidor i reduir el requisit d’amplada de banda.
El Sprite Generator que converteix les imatges de fons en sprites de manera que la càrrega del navegador requereix menys sol·licituds HTTP. Tot i que als usuaris els agradarà la seva funcionalitat avançada, la forta corba d’aprenentatge pot ser un punt dolorós, tot i que hi ha disponible una documentació de suport adequada per garantir una instal·lació sense errors. Podeu començar fent servir la versió gratuïta; no obstant això, si voleu accedir a les funcions avançades, haureu de subscriure-us a un dels plans a partir de 29 $ durant sis mesos.
Elimineu els fitxers CSS JS no utilitzats de WordPress
Hi ha 4 capacitats fonamentals quan cal evacuar els registres CSS JS no utilitzats al frontal de WordPress:
- wp_deregister_script ($ handle)
- wp_dequeue_script ($ handle)
- wp_deregister_style ($ handle)
- wp_dequeue_style ($ handle)
// expulsa els controladors de contingut que no ens hem de molestar, cadascun amb les seves condicions
add_action ('wp_print_scripts', 'wra_filter_scripts', 100000);
add_action ('wp_print_footer_scripts', 'wra_filter_scripts', 100000);
funció wra_filter_scripts () {
#wp_deregister_script ($ handle);
#wp_dequeue_script ($ handle);
wp_deregister_script ('bbpress-editor');
wp_dequeue_script ('bbpress-editor');
// Suport de píxels de dispositiu
// això millora els objectius de Gravatars i les transferències de wordpress.com en programes d'alta resolució i amb zoom. Simplement tenim Gravatars, de manera que hauríem d’estar bé sense ell.
wp_deregister_script ('devicepx');
wp_dequeue_script ('devicepx');
if (! is_singular ('docs'))) {
wp_deregister_script ('toc-front');
wp_dequeue_script ('toc-front');
}
if (! is_singular (array ('docs', 'post')))) {
wp_deregister_script ('caixa de codis');
wp_dequeue_script ('caixa de codis');
}
}
// elimina els estils que no necessitem
add_action ('wp_print_styles', 'wra_filter_styles', 100000);
add_action ('wp_print_footer_scripts', 'wra_filter_styles', 100000);
funció wra_filter_styles () {
#wp_deregister_style ($ handle);
#wp_dequeue_style ($ handle);
// ja no hi ha estils bbpress.
wp_deregister_style ('bbp-default');
wp_dequeue_style ('bbp-default');
// el monitor de descàrrega no s'utilitza a la portada.
wp_deregister_style ('wp_dlmp_styles');
wp_dequeue_style ('wp_dlmp_styles');
if (! is_singular ('docs'))) {
// la llista de continguts s'utilitza a les pàgines de documentació tal com eren
wp_deregister_style ('toc-screen');
wp_dequeue_style ('toc-screen');
}
// això no hauria de ser així. Cal examinar-ho.
wp_deregister_style ('wppb_stylesheet');
wp_dequeue_style ('full d'estil wppb');
}
if (! is_singular (array ('docs', 'post')))) {
wp_deregister_style ('caixa de codis');
wp_dequeue_style ('caixa de codis');
}
}
El fet realment divertit de fer-ho així és que podeu utilitzar etiquetes restrictives de WordPress per centrar-vos en una pàgina específica o en tot un tipus de publicació personalitzada. Això ens proporciona l’adaptabilitat que tenim per apilar els nostres registres CSS / JS precisament allà on es requereixen.
Conclusió
És essencial que el vostre lloc web es carregui ràpidament per ser fàcil d’utilitzar i evitar que un elevat percentatge de rebots enfonsi el vostre rendiment SEO. Tot i que pot haver-hi molts motius pels quals el vostre lloc de WordPress no es carregui ràpidament, un motiu comú és la cua innecessària dels scripts JavaScript i CSS que bloquegen la renderització derivats de l’ús de connectors.
Per solucionar els problemes que fins i tot l’escriptura de codi net no pot solucionar, pot ser útil utilitzar un dels connectors especialitzats dissenyats per reduir el nombre d’escriptures JavaScript i CSS, així com assegurar-se que la formació innecessària de cues d’escriptures no endarrereix la càrrega del lloc.
