Kørte du dit WordPress-sted gennem et værktøj til testning af ydeevne, kun for at blive mødt med en instruktion til at udskyde parsing af JavaScript i WordPress?

Implementering af denne ændring kan have en positiv indvirkning på dit websteds sideindlæsningstider, især for mobile besøgende. Men advarslen kan være lidt vanskelig at forstå. Derfor vi vil forklare nøjagtigt, hvad det betyder at udskyde parsing af JavaScript, og hvordan du kan implementere denne ændring på dit WordPress-websted.

Dette er, hvad du lærer i denne artikel:

Hvis du bare vil springe direkte til selvstudiet, kan du klikke på det sidste link på listen ovenfor.

Hvad betyder det at udsætte parsing af JavaScript i WordPress?

Hvis du nogensinde har kørt dit WordPress-sted gennem Google PageSpeed ​​Insights, GTmetrix eller andre sidehastighed-testværktøjer, har du sandsynligvis stødt på forslaget om at udsætte parsing af JavaScript.

Men … hvad betyder det egentlig? Og hvorfor er det en vigtigt hensyn mhp. præstation?

Grundlæggende, når nogen besøger dit WordPress-site, leverer dit websteds server HTML-indholdet på dit websted til den besøgendes browser.

Besøgende browser starter derefter øverst og går gennem koden for at gengive dit websted. Hvis den bevæger sig fra top til bund, og finder JavaScript, stopper det med at gengive resten af ​​siden, indtil den kan hente og analysere JavaScript-filen.

Det vil gøre dette for hvert script, det finder, hvilket kan have en negativ indvirkning på dit websteds sideindlæsningstider, fordi besøgende vil blive mødt af en tom skærm, mens deres browser downloader og analyserer al JavaScript.

Hvis et bestemt script ikke er nødvendigt for dit websteds kernefunktion (i det mindste på den indledende sideindlæsning), skal du ikke have, at det kommer i vejen for at indlæse flere vigtige dele af dit websted, hvorfor denne page speed testing tool fortæller dig altid at udskyde parsing af JavaScript.

Så hvad betyder det at udskyde parsing af JavaScript?

I hovedsagen fortæller dit websted de besøgende browsere at vente med at downloade og / eller analysere JavaScript, indtil dit websteds hovedindhold allerede er færdig med indlæsning. På det tidspunkt kan besøgende allerede se og interagere med din side, så ventetiderne til at downloade og analysere at JavaScript ikke længere har så negativ en effekt.

Ved at fremskynde dit indholds belastningstider over folden gør du Google glad og skaber en bedre, hurtigere oplevelse for dine besøgende.

Sådan fortæller du, hvis du har brug for at udskyde parsing af JavaScript

For at teste, om dit WordPress-sted har brug for at udskyde parsing af JavaScript, kan du køre dit websted gennem GTmetrix.

GTmetrix giver dig en karakter og viser også specifikke scripts, der skal udsættes:

Udskyd parsing af JavaScript-test i GTmetrix

Udskyd parsing af JavaScript-test i GTmetrix

De forskellige metoder til at udskyde parsing af JavaScript

Der er et par forskellige måder at udskyde parsing af JavaScript. For det første er der to attributter, som du kan tilføje til dine scripts:

  1. Async
  2. Defer

Begge attributter lader besøgende ‘browsere downloade JavaScript uden at sætte HTML-parsing på pause. Forskellen er imidlertid, at mens async ikke sætter pausen på HTML for at hente scriptet (som standardopførselen ville gøre), stopper den HTML-parseren for at udføre scriptet, når det først er hentet.

Med udsættelse vil besøgende ‘browsere stadig downloade scripts, mens de analyserer HTML, men de vil vente med at analysere scriptet, indtil HTML-parsing er afsluttet.

Denne grafik fra Growing with the Internet gør et godt stykke arbejde med at forklare forskellen:

Grafisk forklaring af async vs udskydelse

Grafisk forklaring af async vs udskydelse

En anden mulighed, anbefalet af Patrick Sexton fra Varvy, bruger et script til at kalde en ekstern JavaScript-fil først, når den indledende sideindlæsning er færdig. Dette betyder, at besøgende ‘browsere ikke vil downloade eller udføre noget JavaScript, før den indledende sideindlæsning er færdig.

Endelig er en anden tilgang, som du ser, blot at flytte din JavaScript til bunden af ​​siden. Denne metode er dog ikke en fantastisk løsning, fordi selv om din side vil være synlig før, vil besøgendes browsere stadig vise siden som indlæsning, indtil alle scripts er færdige. Dette kan forhindre nogle besøgende i at interagere med din side, fordi de mener, at indholdet ikke er fuldt indlæst.

Sådan udsættes parsing af JavaScript i WordPress (4 metoder)

For at udskyde analysering af JavaScript i WordPress er der tre hovedruter, du kan tage:

Du kan klikke ovenfor for at springe direkte til din foretrukne metode eller læse alle teknikkerne for at finde den, der er bedst for dig.

1. Gratis Async JavaScript-plugin

Async JavaScript er et gratis WordPress-plugin fra Frank Goossens, den samme fyr bag det populære Autoptimize-plugin.

Det giver dig en enkel måde at udskyde parsing af JavaScript ved hjælp af enten async eller udsættelse.

For at komme i gang kan du installere og aktivere det gratis plugin fra WordPress.org. Gå derefter til Indstillinger → Async JavaScript for at konfigurere pluginet.

Øverst kan du aktivere plugins funktionalitet og vælge mellem async og udsættelse. Husk:

Sådan bruges Async JavaScript-plugin

Sådan bruges Async JavaScript-plugin

Længere nede kan du også vælge, hvordan du skal håndtere jQuery. En masse temaer og plugins er meget afhængige af jQuery, så hvis du prøver at udskyde parsing af jQuery-scripts, kan du muligvis ødelægge nogle af dit websteds kernefunktionalitet. Den sikreste metode er at ekskludere jQuery, men du kan eksperimentere med at udsætte det. Bare sørg for at teste dit websted grundigt.

Længere nede kan du også manuelt inkludere eller ekskludere specifikke scripts fra at blive udsat, herunder en dejlig brugervenlig funktion, så du kan målrette mod specifikke temaer eller plugins, der er aktive på dit websted:

Async JavaScript inkluderer / ekskluder regler

Async JavaScript inkluderer / ekskluder regler

2. Brug WP Rocket Plugin

Selvom vi ikke tillader de fleste cache-plugins på Kinsta, tillader vi WP Rocket-plugin, fordi det inkluderer en indbygget integration til at spille pæn med Kinsta’s cache-server på serverniveau.

Ud over en masse andre ydelsesoptimering teknikker kan WP Rocket hjælpe dig med at udskyde analysering af JavaScript i fanen Filoptimering på WP Rocket-dashboardet. Se efter indstillingen Indlæs JavaScript udskudt i afsnittet JavaScript-filer.

Træt af WordPress problemer og en langsom host? Vi tilbyder support i verdensklasse fra WordPress eksperter der er tilgængelige 24/7, samt lynhurtige servere. Tjek vores plane

Ligesom Async JavaScript-plugin, giver WP Rocket dig også mulighed for at ekskludere jQuery for at undgå problemer med dit websteds indhold:

Sådan udsættes analysering af JavaScript med WP Rocket

Sådan udsættes analysering af JavaScript med WP Rocket

3. Brug Varvys anbefalede metode (kode)

Tidligere nævnte vi, at Patrick Sexton fra Varvy anbefaler at bruge et kodestykke, der venter på at både downloade og udføre JavaScript, indtil efter at dit websted har afsluttet sin indledende sideindlæsning.

Du kan implementere denne metode ved at finjustere kodestykket, som Varvy leverer, og derefter tilføje scriptet til dit tema umiddelbart inden lukningen </body>.

Her er koden fra Varvy:


function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

Sørg for at erstatte “defer.js” med det faktiske filnavn / sti for den JavaScript-fil, du vil udskyde. Derefter kan du bruge wp_footer-krogen til at injicere koden via dit child themes features.php-fil.

Med denne tilgang vil du indpakke Varvys kode i noget lignende:

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

4. Udskyd JavaScript via features.php-fil

Endelig kan du også tilføje udskydningsattributten til dine JavaScript-filer uden behov for et plugin ved at tilføje følgende kodestykker til din features.php-fil:

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

I det væsentlige fortæller dette uddrag WordPress at tilføje udsættelsesattributten til alle dine JavaScript-filer undtagen jQuery.

Det er hurtigt og nemt, men det giver dig ikke det granulære kontrolniveau, som noget i retning af Async JavaScript-plugin tilbyder.

Får du meddelelsen *Defer Parsing of Javascript Warning*? Ingen bekymringer ... Løs det nu med disse 4 metoder! 🚀⏳Click to Tweet

Resumé

Det er en vigtig ydelse at overveje at analysere JavaScript på dit WordPress-sted.

Når du har brugt en af ​​metoderne ovenfor til at udskyde parsing af JavaScript i WordPress, vil vi anbefale at gøre to ting:

  1. Test dit sted for at sikre dig, at udsættelse af visse scripts ikke har brudt nøglen over indholdet over folden. Igen kan dette ofte ske med jQuery, hvorfor mange værktøjer lader dig ekskludere jQuery.js. Det kan dog også ske med andre scripts.
  2. Kør dit websted gennem GTmetrix igen for at sikre dig, at dit websted udsætter så mange scripts som muligt (du får muligvis ikke en perfekt score, hvis du udelukker jQuery – men din score burde være bedre).

Har du spørgsmål til, hvordan man udsætter parsing af JavaScript i WordPress? Spørg løs i kommentarerne!


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer