Arregla Google PageSpeed ​​Elimina el bloqueig de representació de JavaScript i CSS en el contingut superior

Resol el bloqueig de renderitzacions Javascript i CSS

La prova de  Google PageSpeed   ​​[1] elimina el bloqueig de representació de JavaScript i CSS en el contingut de la part superior del contingut. Li proposem que lliuri els fitxers JS i CSS del vostre lloc després d'haver carregat completament l'HTML i, per tant, no detingueu la vostra càrrega HTML per descarregar-los.

Definició de scripts de bloqueig de renderització: scripts que es carreguen abans que s'hagi analitzat el DOM HTML complet. Per exemple, scripts inclosos a la capçalera o al contingut, sense cap instrucció específica perquè els navegadors retardin la càrrega dels scripts fins després de la pintura HTML.

Elimineu JavaScript i CSS que bloquegen la representació del contingut que es troba a la part superior: mostra com solucionar-lo

1. Feu que un sistema extern optimitzi el vostre lloc web
   
2. Utilitzeu un CDN que realitzi totes les optimitzacions possibles en nom vostre, incloses les tres següents optimitzacions necessàries per solucionar els recursos de bloqueig de renderització:
   
3. Ajornar la càrrega dels fitxers Javascript
   
4. Carregueu CSS després de carregar HTML
   
5. Utilitzeu un connector de WordPress
   

Hi ha moltes optimitzacions necessàries per solucionar els recursos que bloquegen la renderització i pot ser tediós implementar-los vosaltres mateixos; a més, haureu de buscar constantment les proves noves incloses a Chrome LightHouse i Google PageSpeed, entre altres proves de velocitat de pàgina.

No hi ha cap solució existent per eliminar els recursos de bloqueig de representació al codi htaccess, ja que el problema està relacionat amb DOM, és a dir, el contingut del lloc web i l’ordre en què es carreguen els recursos inclosos, com Javascript i CSS, però no només. No es poden activar a Htaccess, sinó només al contingut HTML DOM.

Si solucioneu aquests problemes per a ordinadors, al mateix temps eliminareu els recursos de bloqueig de representació per a mòbils, ja que tots dos són exactament iguals.

Did you know that you can even have all these steps executed automatically for you by using an external  Accelerador de velocitat del lloc   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Diferir la càrrega dels fitxers Javascript

Per tal d'ajornar la càrrega dels vostres fitxers JS [2], podeu afegir les instruccions asínc o diferir als enllaços de les seqüències d'ordres. Async no garanteix que estiguin carregats en la mateixa seqüència, per tant, si teniu diverses seqüències d'ordres que s'han d'executar un després de l'altre, és preferible garantir la difusió de la seqüència:

Carregueu CSS després de la càrrega HTML

Perquè es carregui el CSS després que es transmeti l'HTML complet, Google proposa [3] aquesta peça de codi per afegir al final del vostre codi HTML, per exemple, després de l'etiqueta de tancament del peu i abans de l'etiqueta de tancament del cos:

Per tal d'optimitzar el vostre lloc web, també és una bona idea eliminar el codi CSS no utilitzat, una operació que pot ser tediós si no teniu coneixements en disseny web. Si no heu creat el tema del vostre lloc web, pot ser que sigui més intel·ligent utilitzar un sistema extern per eliminar el codi CSS no utilitzat a les vostres pàgines en nom vostre, com ara el salt Ezoic, per exemple, la nova versió (i totalment gratuïta) del seu lloc increïble Accelerador de velocitat.

Supeu la prova de velocitat del lloc de Google.

Això em va permetre passar la prova de  Google PageSpeed   ​​[1] Eliminar el Javascript i el CSS de representació de bloqueig en un contingut superior (juntament amb Leverage browser caching [4]) en un lloc web, pujant des d'una puntuació de 51 en mòbils ( Fig 1) a 72 (Fig 2) i fins a 59 (Fig 3) a 79 a l'escriptori (Fig 4).

Com eliminar recursos que bloquegen el rendiment a WordPress

Per eliminar recursos de bloqueig de representacions a WordPress, és necessari instal·lar un connector com JetPack.

A continuació, aneu a les opcions per a les quals heu de ser administrador i aneu a les opcions de JetPack> Escriptura> Rendiment i velocitat> comprovar Habilita l’accelerador de lloc, accelerar els temps de càrrega d’imatges, accelerar els temps de càrrega de fitxers estàtics i activar la càrrega per imatges.

Creació de llocs web mestres: inscriviu -vos ara!

Transformeu la vostra presència digital amb el nostre complet curs de creació de llocs web: comenceu el vostre viatge a convertir -vos en expert en web avui!

Inscriviu -vos aquí

Això eliminarà els recursos que bloquegen el rendiment a WordPress i carregaran les pàgines més ràpidament, permetent a JetPack optimitzar les vostres imatges i servir les vostres imatges i fitxers estàtics (com CSS i JavaScript) de la seva xarxa global de servidors.

A més, no us oblideu de posposar la càrrega d'imatges fora de pantalla mitjançant una funció de càrrega mandrosa. Tot i que abans era difícil i necessita una biblioteca externa per posposar la càrrega d'imatges fora de pantalla, ara és possible de forma nativa en HTML5!

Per implementar la càrrega mandrosa d'imatges als vostres llocs web, simplement afegiu els valors mandrosos als atributs que carreguen les imatges del vostre lloc web i els navegadors recents entendran que aquestes imatges només haurien de ser sol·licitades i carregades si es mostren, vol dir que l'usuari es desplaça cap avall Els espais reservats de la imatge.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

A més, la càrrega mandrosa també funciona amb els iframes, i és una implementació important per eliminar els recursos de bloqueig de renderització de les vostres pàgines web.

Una vegada que els recursos de bloqueig de representació tindran instruccions per carregar-se després del contingut principal, que significa el HTML Dom, ja obtindreu molts punts a la prova de Lighthouse de Google, la prova de velocitat de velocitat de la pàgina, o la web de Google Core Web.

Que un sistema extern optimitzi el vostre lloc web per a vosaltres

Sabeu que realment podríeu resoldre tots els problemes de  Google PageSpeed   ​​en nom vostre, sense gaire esforç des del vostre lloc, tret de registrar-vos per a un judici gratuït i canviar el DNS?

Mitjançant la tecnologia Ezoic Site Speed ​​Accelerator de la plataforma Ezoic, tots els problemes habituals de  Google PageSpeed   ​​seran resolts pel seu sistema, que serà el intermediari entre el vostre lloc web i els visitants. Optimitzaran la pàgina web abans de mostrar-la al vostre visitant.

Fes-te ecològic només registrant-te per a una prova gratuïta a la plataforma Ezoic i prova-ho per tu mateix: faran que el teu lloc web assoleixi els màxims estàndards d’optimització de la velocitat de la pàgina en pocs dies: mostrar imatges webp de propera generació, optimitzar CSS i JavaScript eliminant CSS no utilitzats. i JS, carreguen imatges de mandra, redimensionen imatges, emmagatzemen la memòria cau a les pàgines del vostre lloc, optimitzen tipus de lletra, connecteu-vos prèviament a tots els llocs inclosos i molt més.

No cal la targeta de crèdit: només cal registrar-se gratuïtament i provar-ho. A més, si el vostre lloc web guanya diners amb anuncis de visualització, a més de guanyar el vostre lloc web molt més ràpid, també us poden permetre guanyar diverses vegades més diners que els que feu amb Google AdSense, optimitzant els vostres anuncis amb aprenentatge automàtic i intensitat artificial avançada.

Preguntes Més Freqüents

Com eliminar Javascript i CSS que bloquegen Render en contingut superior a la part superior?

Per eliminar Javascript i CSS que bloquegen Render per al contingut superior a la part superior, heu d’assegurar-vos que els fitxers JS i CSS del vostre lloc es carreguen després que l’HTML estigui completament carregat. Això significa no fer una pausa del procés de càrrega HTML per descarregar aquests fitxers. Podeu ajornar els fitxers JavaScript amb l’atribut ASYNC o ajornar, i per a CSS, podeu utilitzar codi específic per carregar -lo després de l’HTML. Un sistema d’optimització extern com Ezoic també pot gestionar -ho automàticament.

Com poden els desenvolupadors web abordar la recomanació de Google Pavespeed per eliminar Javascript i CSS que bloquegen render?

Els desenvolupadors web poden optimitzar el seu lloc minificant els fitxers JavaScript i CSS, mitjançant la càrrega asíncrona per a JavaScript, incrustant CSS crítics directament a l’HTML i ajornant la càrrega de fitxers CSS i JavaScript no crítics. La implementació d’aquestes estratègies pot millorar significativament els temps de càrrega i les puntuacions de la velocitat.

Puntuació del far de Chrome perfecte: què passa?