✅ WEB- och WordPress -nyheter, teman, plugins. Här delar vi tips och bästa webbplatslösningar.

Hur man skjuter upp Javascript med WordPress för snabbare laddningstider

19

Vill du skjuta upp Javascript på din webbplats?

Om du inte är en utvecklare själv kan detta verka som en oöverstiglig uppgift.

Att skjuta upp Javascript är inte svårt om du byggde webbplatsen från grunden, men med WordPress har du förmodligen ett tema och 6-10 plugins som alla laddar sina egna Javascript-filer.

Att hitta "hakarna" du behöver för att ändra hur varje JS-fil laddas skulle ta en evighet!

Lyckligtvis finns det ett mycket enklare sätt.

Allt du behöver är rätt verktyg.

Varför du bör skjuta upp JS-filer

Låt oss se till att vi är på samma sida.

Webbläsare laddar normalt Javascript-filer innan de försöker rendera din webbplats. Detta innebär att besökare inte kommer att kunna se din webbplats förrän alla Javascript- (och CSS-filer) är helt laddade.

Om du skjuter upp en Javascript-fil kan HTML-dokumentet laddas innan Javascript-filen är klar. JS-filen kan laddas samtidigt, men den körs inte förrän HTML-dokumentet är helt laddat.

Med andra ord, om du skjuter upp dina Javascript-filer kommer HTML-dokumentet att laddas snabbare vilket innebär att din webbplats kommer att synas tidigare. Detta gör att din webbplats visas snabbare för besökarna, vilket i slutändan är det viktigaste.

Med det ur vägen, låt oss komma till den otroligt enkla metoden som är tillgänglig för att skjuta upp Javascript på din webbplats.

Hur man skjuter upp Javascript-filer

Istället för att manuellt försöka hitta och skjuta upp skript, kan du använda en plugin för att göra det automatiskt åt dig.

Det finns två olika metoder jag rekommenderar.

Defer med Async Javascript

För det första finns det gratis och lättanvända Async Javascript- plugin.

Hur man skjuter upp Javascript med WordPress för snabbare laddningstider

Enkelt och populärt, Async Javascript är ett bra val för att skjuta upp JS-skript.

När du installerar detta prestandaplugin kommer du att hitta följande nya inställningsmeny som lagts till på din webbplats:

Hur man skjuter upp Javascript med WordPress för snabbare laddningstider

Om du vill få igång saker och ting snabbt kan du asynkronisera eller skjuta upp alla dina Javascript-filer på en gång med någon av dessa inställningar:

Hur man skjuter upp Javascript med WordPress för snabbare laddningstider

Du kan tillämpa uppskjuten laddningsmetod på alla filer, se till att rensa cacheminnet och testa sedan din webbplats noggrant. Det finns en chans att vissa funktioner på din webbplats kan gå sönder, till exempel mobilmenyn eller interaktiva sökfält.

Om du märker att någon funktionalitet på din webbplats inte längre fungerar, byt till en av versionerna som utesluter jQuery och troligen kommer detta att lösa eventuella problem.

Annars kan du manuellt lägga till skript för asynkronisering eller skjuta upp så att du noggrant kan testa en fil i taget.

Hur man skjuter upp Javascript med WordPress för snabbare laddningstider

En sak med detta tillvägagångssätt är att du måste ha lite teknisk kunskap för att hitta de skripthandtag som behövs för att identifiera vilka filer som ska skjutas upp.

Sammantaget är Async Javascript ett bra plugin och det är gratis!

Om du vill ha ett prestandaplugin som är lika enkelt men mer robust, fortsätt att läsa.

Hur man skjuter upp JS med WP Rocket

Det plugin jag använder på competethemes.com och rekommenderar för de flesta prestandaoptimering är WP Rocket.

Hur man skjuter upp Javascript med WordPress för snabbare laddningstider

WP Rocket ger ett enkelt gränssnitt fullt av prestandaoptimeringsfunktioner. Du kan vända på en switch för att förminska och sammanfoga filer, aktivera avancerad cachelagring, lata inläsning av bilder och mer.

Även om detta plugin är komplext under huven, kräver inställningspanelen ingen teknisk kunskap. Detta gäller även för att skjuta upp Javascript-filer.

I WP Rocket-instrumentpanelen hittar du en filoptimeringssektion.

Hur man skjuter upp Javascript med WordPress för snabbare laddningstider

Det finns massor av fantastiska optimeringsverktyg här, och JS uppskjutningsfunktionen finns längst ner på sidan. Om du aktiverar uppskjutning kommer en andra kryssruta att visas med inställningen "Safe Mode" automatiskt aktiverad.

Hur man skjuter upp Javascript med WordPress för snabbare laddningstider

Som jag redan nämnt, leder uppskjutning av jQuery mycket ofta till trasiga funktioner på din webbplats. Även om du kan försöka stänga av felsäkert läge, borde du förmodligen inte göra det.

Och det är allt som finns egentligen! Markera bara en enda ruta och dina Javascript-filer kommer att skjutas upp.

Om du vill utforska några fler prestandaalternativ kan du besöka WP Rocket här eller granska vår WP Rocket-handledning.

Javascript uppskjuten

Med dina Javascript-filer uppskjutna kommer din webbplats HTML-dokument att laddas snabbare och få din webbplats att visas mycket snabbare.

För de flesta WordPress-webbplatser är detta en enkel och betydande prestandavinst. Ännu bättre, det kräver ingen teknisk kunskap för att applicera på din webbplats.

Om du har några återstående frågor om hur du skjuter upp Javascript med WordPress, lämna en kommentar nedan.

Inspelningskälla: www.competethemes.com

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer