Wilt u bestanden (CSS & JS) verwijderen die het laden van pagina's op WordPress blokkeren? Als u uw site test op Google Insights PageSpeed, ziet u waarschijnlijk een suggestie om scripts te verwijderen die het laden van pagina's blokkeren. In deze zelfstudie laten we u zien hoe u deze bestanden die het laden van uw pagina's blokkeren, kunt repareren om uw Google PageSpeed-score te verbeteren.
Wat blokkeert het laden van pagina's?
Elke WordPress-site heeft een thema en plug-ins die JavaScript en CSS-bestanden toevoegen aan het einde en voordat de pagina zichtbaar is in de browser. Deze scripts kunnen de laadtijd van de pagina van uw site verlengen en ze kunnen ook de weergave van de pagina blokkeren.
De browser van een gebruiker moet scripts en CSS laden voordat de pagina-inhoud wordt geladen. Dit betekent dat gebruikers met een langzamere verbinding nog een paar milliseconden moeten wachten om de pagina te bekijken.
Site-eigenaren die een goede Google PageSpeed-score proberen te behalen, moeten dit probleem oplossen.
1 - Hoe paginaweergave te corrigeren met Autoptimize
Deze methode is eenvoudiger en aanbevolen voor de meeste gebruikers.
Het eerste wat u hoeft te doen, is de plug-in installeren en activeren " Autoptimize ". Zie voor meer informatie onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in.
Na het activeren van de plug-in moet u " Instellingen> Autoptimize Om de plug-ininstellingen te configureren.
U kunt beginnen door het keuzevakje JavaScript en CSS aan te vinken en vervolgens op de knop "Wijzigingen opslaan" te klikken.
U kunt nu uw . testen Site web met behulp van de PageSpeed-tool. Als er nog steeds scripts zijn die paginaweergave blokkeren, moet u teruggaan naar de pagina met plug-ininstellingen en bovenaan op de knop "Geavanceerde instellingen weergeven" klikken.
Hier kunt u de plug-in toestaan ​​om JS inline op te nemen en scripts te verwijderen die standaard zijn uitgesloten, zoals "seal.js" of "jquery.js".
Scroll vervolgens naar beneden naar de CSS-optie en laat de plug-in alle CSS-bestanden combineren.
Klik op de knop "Wijzigingen opslaan en Cache leegmaken" om uw wijzigingen op te slaan en wis de cache van de plugin.
Als je klaar bent, ga je gang en controleer je Site web opnieuw met de PageSpeed-tool.
Zorg ervoor dat u uw site grondig test om te zien of alles goed werkt na het optimaliseren van uw JavaScript- of CSS-bestanden.
2 - Herstel de bestandsweergave met W3 Total Cache
Deze methode vereist wat meer werk en wordt aanbevolen voor degenen die al W3 Total Cache op hun computer hebben website.
Eerst moet u de W3 Total Cache-plug-in installeren en activeren. Als je hulp nodig hebt, zie onze complete gids over W3 Total Cache.
Ga dan naar "Prestaties> Algemene instellingen" en scrol omlaag naar het gedeelte "verkleinen".
Allereerst moet u het vakje "Inschakelen" aanvinken en vervolgens "Handmatig" selecteren voor de optie minificatiemodus.
Klik op de knop Bewaar alle instellingen Om uw instellingen op te slaan.
Vervolgens moet u de scripts en CSS toevoegen die u wilt krimpen.
U kunt de URL's krijgen van alle scripts en stylesheets die moeten worden gecombineerd volgens Google PageSpeed ​​Insights.
Onder de suggesties waar staat: ' Elimineer Render blokkeren Javascript en CSS ", Klik op" Laat zien hoe op te lossen ". Het toont u de lijst met scripts en stylesheets.
Beweeg uw muis over een script en het toont u de volledige URL. U kunt deze URL selecteren en vervolgens CTRL + C op uw toetsenbord gebruiken (Command + C op Mac) om de URL te kopiëren.
Ga nu naar je WordPress admin board en ga naar de " prestatie > minifier .
Eerst moet u JavaScript-bestanden toevoegen die u wilt comprimeren. Scrol omlaag naar de JS-sectie en vervolgens onder de set "bewerkingen in zones" van het type embed naar "niet blokkeren met 'async'" voor de sectie .
Dan moet je op de knop klikken Voeg een script toe En begin vervolgens script-URL's toe te voegen die u hebt gekopieerd van het hulpprogramma Google PageSpeed.
Als u klaar bent, scrolt u omlaag naar de CSS-sectie en klikt u op de knop "Stijlblad toevoegen". Begin nu met het toevoegen van de stylesheet-URL's die u met de Google PageSpeed-tool hebt gekopieerd.
Klik nu op de knop Instellingen opslaan en cache leegmaken Om uw instellingen op te slaan.
Bezoek de Google PageSpeed-tool en test uw website opnieuw.
Zorg ervoor dat u ook uw website zorgvuldig test om te zien dat alles goed werkt.
Dat is alles voor deze tutorial, ik hoop dat je hiermee de prestaties van je . kunt verbeteren WordPress blog.
