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.
Foretrækker du at se videoversionen?
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:
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:
- Async
- 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:
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:
- Plugin – der er nogle gode gratis og premium WordPress-plugins til at udskyde JavaScript-parsing. Vi viser dig, hvordan du gør det med to populære plugins.
- Varvy-method – hvis du er teknisk erfaren, kan du redigere dit websteds kode direkte og bruge kodestykket fra Varvy.
- functions.php-fil – du kan tilføje et kodestykker til dit child themes features.php-fil for automatisk at udskyde scripts.
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:
- Async downloader JavaScript, mens du stadig analyserer HTML, men sætter derefter HTML-parsing på pause for at udføre JavaScript.
- Udskydelse downloader JavaScript, mens du stadig analyserer HTML og venter på at udføre det, indtil efter HTML-parsing er afsluttet.
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:
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.
Vi har taget vores viden om effektiv hjemmesidestyring i stor skala og forvandlet det til et e-bogs- og videokursus. Klik for at downloade guiden til at administrere 60+ WordPress-websteder!
Ligesom Async JavaScript-plugin, giver WP Rocket dig også mulighed for at ekskludere jQuery for at undgå problemer med dit websteds indhold:
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.
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:
- 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.
- 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!
Brian har en stor lidenskab for WordPress, har brugt det i over et årti og udvikler endda et par premium plugins. Brian kan lide blogging, film og vandreture. Opret forbindelse med Brian på Twitter.
Skriv et svar