Slik flytter du JavaScripts til bunnen eller bunnteksten i WordPress

Nylig spurte en av våre lesere hvordan de kan flytte JavaScripts til bunnen i WordPress for å øke sin Google-hastighetspoengsum. Vi er glade for at de spurte, fordi vi ærlig ønsket å skrive om dette. Tidligere har vi snakket om hvordan du korrekt legger til JavaScripts og CSS-stiler i WordPress. I denne artikkelen vil vi vise deg hvordan du flytter JavaScripts nederst i WordPress, slik at du kan forbedre belastningstiden for nettstedet og din Google-hastighetskurs.

Fordeler med å flytte JavaScripts til bunnen

JavaScript er et programmeringsspråk for klientsiden. Den utføres og drives av en brukers nettleser og ikke av din webserver. Når du setter JavaScript øverst, kan nettlesere kjøre eller behandle JavaScript før du laster resten av siden din. Når JavaScripts flyttes til bunnen, vil webserveren raskt gjengi siden, og deretter vil brukerens nettleser utføre JavaScripts. Siden all server side rendering allerede er ferdig, vil JavaScript lastes i bakgrunnen, noe som gjør den totale lasten raskere.

Dette vil forbedre hastighetspoengene dine når du tester med Google sidehastighet eller Yslow. Google og andre søkemotorer vurderer nå sidens hastighet som en av ytelsesmatriser når de viser søkeresultatene. Dette betyr at nettsteder som laster raskere, vil vises mer fremtredende i søkeresultatene.

Den riktige måten å legge til skript i WordPress

WordPress har et kraftig enqueuing-system som tillater tema og plugin-utviklere å legge til sine skript i kø og laste dem etter behov. Enqueuing skript og stiler på riktig måte kan forbedre sidens lasthastighet betydelig.

For å vise deg et grunnleggende eksempel, legger vi til et lite JavaScript i et WordPress-tema. Lagre JavaScript i en .js filen og plasser det .js fil i temaet ditt js katalogen. Hvis temaet ditt ikke har en katalog for JavaScripts, må du opprette en. Etter å ha satt skriptfilen din, rediger du temaet ditt functions.php fil og legg til denne koden:

 funksjon wpb_adding_scripts () wp_register_script ('my-amazing-script', get_template_directory_uri (). '/js/my-amazing-script.js',",'1.1', true); wp_enqueue_script ('my amazing script' ); add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); 

I denne koden har vi brukt wp_register_script () funksjonen. Denne funksjonen har følgende parametere:

For å legge til skriptet i bunnteksten eller bunnen av en WordPress-side, er alt du trenger å gjøre satt til $ in_footer parameter til ekte.

Vi har også brukt en annen funksjon get_template_directory_uri () som returnerer nettadressen til malkatalogen. Denne funksjonen skal brukes til enqueuing og registrering av skript og stiler i WordPress-temaer. For plugins vil vi bruke plugins_url () funksjon.

Problemet:

Problemet er at noen ganger WordPress plugins legger til sin egen JavaScript på sider på innsiden eller på siden av siden. For å flytte disse skriptene til bunnen må du redigere pluginfilene dine og flytte skriptene på riktig måte til bunnen.

Finne JavaScript-kilden

Åpne nettstedet ditt i nettleseren og vis sidekilden. Du vil se koblingen til JavaScript-filen som angir plasseringen og opprinnelsen til filen. For eksempel forteller skjermbildet nedenfor at vårt skript tilhører et plugin kalt "test-plugin101". Skriptfilen er plassert i js katalog.

Noen ganger vil du se JavaScript lagt til direkte på siden og ikke koblet til via en egen .js-fil. I så fall må du deaktivere alle plugins en etter en. Oppdater siden etter å deaktivere hvert plugin til du finner den som legger til skriptet på sidene dine. Hvis JavaScript ikke forsvinner, selv etter at du deaktiverer alle pluginene, så prøv å bytte til et annet tema for å se om JavaScript er lagt til av temaet ditt.

Registrer og Enqueue Scripts

Når du har funnet plugin eller tema som legger til JavaScript i header-delen, er neste trinn å finne ut hvor plugin-enheten har en samtale for filen. I et av temaene eller pluginens PHP-filer vil du se et anrop til det aktuelle .js fil.

Hvis plugin eller tema allerede bruker enqueuing for å legge til JavaScript-fil, er alt du trenger å gjøre, endre wp_register_script-funksjonen i plugin eller tema og legg til sant for parameteren $ in_footer. Som dette:

 wp_register_script ('script-handle', plugins_url ('js / script.js', __FILE__), ',' 1.0 ', true); 

Vi antar at plugin eller tema er å legge til rå JavaScript i overskriften eller mellom innholdet. Finn den røde JavaScript-koden i plugin- eller temafiler, kopier JavaScript og lagre den i en .js fil. Bruk deretter wp_register_script () Funksjon som vist ovenfor, for å flytte JavaScript til bunnen.

Redaktørens notat: Det er viktig å forstå at når du gjør endringer i kjernefilene og oppdaterer pluginet, blir endringene dine ikke overskredet. En bedre måte å gjøre dette på er å avregistrere skriptet og omregistrere det fra temaets funksjoner.php-fil. Se denne opplæringen.

Bortsett fra å flytte skriptene til bunnteksten, bør du også vurdere å bruke en raskere sosiale medier-plugin og lat laste bilder. Sammen med det bør du også bruke W3 Total Cache og MaxCDN for å forbedre sidens hastighet.

Vi håper at denne artikkelen hjalp deg med å flytte JavaScripts nederst i WordPress og forbedre sidens hastighet. For spørsmål og tilbakemelding vennligst legg igjen en kommentar nedenfor.