Google PageSpeed ​​verhelpen JavaScript en CSS in inhoud boven de vouw die het weergeven blokkeren, beëindigen

Los render-blokkering van JavaScript en CSS op

De test van  Google PageSpeed   ​​[1] Schakel JavaScript en CSS voor renderen uit in inhoud boven de vouw die u moet blokkeren stelt u voor om de JS- en CSS-bestanden van uw site te leveren nadat de HTML volledig is geladen - en pauzeer daarom uw HTML-laden niet om ze te downloaden.

Scriptdefinitie die de weergave blokkeert: Scripts die worden geladen voordat de volledige HTML DOM is geparseerd. Bijvoorbeeld scripts die zijn opgenomen in de koptekst of in de inhoud, zonder enige specifieke instructie voor browsers om het laden van scripts uit te stellen tot na HTML-verf.

Elimineer JavaScript en CSS die het weergeven blokkeren in content boven de vouw: laat zien hoe u dit kunt oplossen

1. Laat een extern systeem uw website voor u optimaliseren
   
2. Gebruik een CDN dat alle mogelijke optimalisaties namens u uitvoert, inclusief de drie volgende optimalisaties die nodig zijn om het elimineren van bronnen voor het blokkeren van weergave te verhelpen:
   
3. Stel het laden van Javascript-bestanden uit
   
4. Laad CSS nadat HTML is geladen
   
5. Gebruik een WordPress-plug-in
   

Er zijn veel optimalisaties nodig om het elimineren van renderblokkerende bronnen te verhelpen en het kan vervelend zijn om ze zelf te implementeren - plus, je zult constant moeten uitkijken naar nieuwe tests die zijn opgenomen in Chrome LightHouse en Google PageSpeed, naast andere paginasnelheidstests.

Er is geen bestaande oplossing om renderblokkerende bronnen in htaccess-code te elimineren, aangezien het probleem verband houdt met DOM, dat wil zeggen de website-inhoud en de volgorde waarin de opgenomen bronnen zijn geladen, zoals Javascript en CSS, maar niet alleen. Deze kunnen niet worden geactiveerd in Htaccess, maar alleen in de HTML DOM-inhoud.

Als u deze problemen voor desktop oplost, elimineert u tegelijkertijd bronnen voor het blokkeren van weergaven voor mobiel, aangezien beide precies hetzelfde zijn!

Did you know that you can even have all these steps executed automatically for you by using an external  Site Speed ​​Accelerator   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!

Stel Javascript-bestanden laden uit

Om de belasting van uw JS-bestanden uit te stellen [2], kunt u de asynchrone of uitstelinstructie toevoegen aan uw scriptlinks. Async kan niet garanderen dat ze in dezelfde reeks worden geladen. Als u dus meerdere scripts hebt die achter elkaar moeten worden uitgevoerd, verdient uitstel de voorkeur om de reeks te garanderen:

Laad CSS nadat HTML is geladen

Om de CSS te laden nadat de volledige HTML is verzonden, stelt Google [3] voor om dit codefragment aan het einde van uw HTML toe te voegen, bijvoorbeeld na het sluiten van voettags en vóór bodyslot-tag:

Om uw website te optimaliseren, is het ook een goed idee om ongebruikte CSS-code te verwijderen, een bewerking die tedious kan zijn als u geen kennis hebt in webdesign. Als u uw website-thema zelf niet hebt gemaakt, is het misschien wijzer om een ​​extern systeem te gebruiken om ongebruikte CSS-code op uw pagina's namens u te verwijderen, zoals Ezoic Leap, zoals de nieuwe (en volledig gratis) versie van hun geweldige site Snelheidsaccelerator.

Slaag voor de snelheidstest van de Google-site!

Hierdoor kon ik de  Google PageSpeed   ​​[1] -test doorstaan ​​JavaScript en CSS in content boven de vouw die weergeven achter de schermen blokkeren (samen met Leverage browsercaching [4]) op een website, met een score van 51 op mobiel ( Fig. 1) tot 72 (Fig. 2) en van 59 (Fig. 3) tot 79 op het bureaublad (Fig. 4).

Hoe render-blokkerende bronnen in WordPress worden verwijderd

Om middelen voor het blokkeren van renderen in WordPress te verwijderen, is het noodzakelijk om een ​​plug-in zoals JetPack te installeren.

Ga vervolgens naar de opties waarvoor u een beheerder moet zijn en ga naar JetPack-opties> Schrijven> Prestaties en snelheid> schakel Site-accelerator inschakelen in, versnellende laadtijd van afbeeldingen, statische laadtijd van bestanden versnellen en lui laden inschakelen voor afbeeldingen.

Leer SEO Basics: Schrijf vandaag nog in!

Verhoog de zichtbaarheid en het verkeer van uw website door de basisprincipes van SEO te beheersen met onze eenvoudig te volgen basiscursus.

Begin met het leren van SEO

Hiermee worden bronnen voor weergaveblokkering in WordPress verwijderd en worden pagina's sneller geladen doordat JetPack uw afbeeldingen kan optimaliseren en uw afbeeldingen en statische bestanden (zoals CSS en JavaScript) vanuit hun wereldwijde netwerk van servers kan bedienen.

Vergeet ook niet om het laden van afbeeldingen off-scherm uit te stellen met behulp van een luie laadfunctie. Hoewel het moeilijk was en een externe bibliotheek nodig had om het laden van afbeeldingen buiten het scherm te plaatsen, is het nu mogelijk in native in HTML5!

Om luie laden van afbeeldingen op uw websites te implementeren, voegt u eenvoudig de waarden Lazy toe aan het laden van attributen van uw website-afbeeldingen en zullen de recente browsers begrijpen dat deze afbeeldingen alleen moeten worden aangevraagd en geladen als ze worden weergegeven, wat betekent dat de gebruiker wordt weergegeven de beeldaanduidingen.

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

Bovendien werkt Lazy-laden ook met IFRAMES, en is een belangrijke implementatie om renningsbronnen uit uw webpagina's te elimineren.

Nadat de weergaveblokkeringsbronnen instructies zullen hebben om na de hoofdinhoud te laden, wat betekent dat de HTML DOM, u al veel punten verdient op de Google Lighthouse-test, de pagina Snelheidsinslagen, of de Google Core Web Vitals.

Laat een extern systeem uw website voor u optimaliseren

Weet u dat u alle Google PageSpeed-problemen in uw naam zou kunnen oplossen zonder veel moeite van uw site - behalve u te registreren voor een gratis proefperiode en uw DNS te wijzigen?

Met behulp van de Ezoic-platform Site Speed ​​Accelerator-technologie worden alle gebruikelijke Google PageSpeed-problemen opgelost door hun systeem, dat de tussenpersoon zal zijn tussen uw website en de bezoekers. Ze zullen de webpagina voor u optimaliseren voordat ze aan uw bezoeker worden getoond.

Word groen door u simpelweg te registreren voor een gratis proefperiode op het Ezoic-platform en probeer het zelf - ze zullen ervoor zorgen dat uw website binnen enkele dagen de hoogste standaarden voor optimalisatie van paginasnelheid bereikt: render webp-afbeeldingen van de volgende generatie, optimaliseer CSS en JavaScript door ongebruikte CSS te verwijderen en JS, afbeeldingen lui laden, afbeeldingen vergroten of verkleinen, uw sitepagina's cachen, lettertypen optimaliseren, vooraf verbinding maken met al uw inbegrepen sites en nog veel meer.

Geen creditcard nodig - u hoeft zich alleen maar gratis te registreren en het te proberen. Bovendien, als uw website geld verdient met display-advertenties, en uw website veel sneller maakt, kunnen ze u ook meerdere keren meer geld opleveren dan met Google AdSense door uw advertenties te optimaliseren met machine learning en geavanceerde kunstmatige intelligentie.

Veelgestelde Vragen

Hoe elimineer je render-blokkerende JavaScript en CSS in boven-de-voudige inhoud?

Om render-blokkerende JavaScript en CSS voor boven-de-voudige inhoud te elimineren, moet u ervoor zorgen dat de JS- en CSS-bestanden van uw site worden geladen nadat de HTML volledig is geladen. Dit betekent dat het HTML -laadproces niet wordt gepauzeerd om deze bestanden te downloaden. U kunt JavaScript -bestanden uitstellen met het ASYNC- of UITSTERKENT -kenmerk, en voor CSS kunt u specifieke code gebruiken om het na de HTML te laden. Een extern optimalisatiesysteem zoals Ezoic kan dit ook automatisch aan.

Hoe kunnen webontwikkelaars de aanbeveling van Google PageSpeed ​​aanpakken om render-blokkerende JavaScript en CSS te elimineren?

Webontwikkelaars kunnen hun site optimaliseren door JavaScript- en CSS-bestanden te minificeren, met behulp van asynchrone lading voor JavaScript, kritieke CSS rechtstreeks in de HTML in te zetten en het laden van niet-kritieke CSS- en JavaScript-bestanden uit te stellen. Het implementeren van deze strategieën kan de laadtijden en paginaspeed -scores aanzienlijk verbeteren.

Perfect Chrome Lighthouse Score: Wat gebeurt er?