TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

26

Lette temaer som Astra, GeneratePress og Genesis laster veldig mindre CSS og skript på nettstedet. Dette hjelper til med å fjerne ubrukte CSS- og JavaScript -feil i Google PageSpeed ​​Insights -verktøyet og skyte fartshastigheten. Imidlertid kombinerer 99% av kommersielle WordPress -temaer flere funksjoner og laster inn tunge skript og CSS. Enten du bruker lett eller tungt tema, trenger du fortsatt mange funksjoner gjennom plugin. Ved å kombinere tema og plugins vil den totale hastighetspoengsummen ha innvirkning på hver eneste kildefil på nettstedet. I denne artikkelen vil vi forklare hvordan du fjerner ubrukt CSS og JavaScript i WordPress for å forbedre poengsummen for Google PageSpeed ​​Insights.

Relatert: Les 400+ gratis WordPress -opplæringsprogrammer.

Hva er ubrukt CSS og JavaScript?

La oss forklare dette med et enkelt eksempel. Kontaktskjema 7 er en av de populære pluginene for å legge til kontaktskjemaer på WordPress -nettsteder. Vanligvis trenger du kontaktskjema på "Kontakt" -siden og kanskje på få andre sider. Du vil ikke bruke kontaktskjema på hvert blogginnlegg. Imidlertid vil kontaktskjema 7 -plugin laste CSS og JavaScript på hver side og blogginnlegg på nettstedet ditt. Det er et stort problem når du har 1000 blogginnlegg og alle laster inn kontaktskjema / CSS uten behov. Disse unødvendige CSS og skript kalles ubrukt CSS og ubrukt script.

Et annet godt eksempel er en WooCommerce -butikk. Du trenger bare WooCommerce -stiler og skript på sider som produkter, produktarkiver, handlekurv, kassa og butikk. Programtillegget har imidlertid ikke noe alternativ for å forhindre lasting av filer på blogginnlegg eller sider.

Hvorfor er dette et problem?

Dessverre vil nesten alle plugins laste inn ressurser på alle sidene på nettstedet ditt. Dette vil påvirke sidehastigheten kraftig og redusere hastighetspoengene i verktøy som Google PageSpeed ​​Insights. Du vil se feilene som nedenfor som muligheter når du tester sidens URL i PageSpeed ​​Insights.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

PageSpeed ​​-feil for ubrukt CSS og JS

Selv om verktøyet sier at dette ikke vil påvirke resultatpoengene direkte, har det stor innvirkning på lastetiden. På dette tidspunktet er 30% poengsum for blokkeringstiden, og å ha ubrukt CSS / JS og blokkeringsressurser for gjengivelse vil trekke poengsummen ned til bunn. I tillegg vil noen hosting -selskaper ta betalt basert på båndbreddebruken. Hvis du laster unødvendige CSS / script -filer på nettstedet ditt, øker båndbredden flere ganger. Derfor er det nødvendig å identifisere ubrukt CSS og JavaScript og fjerne dem fra lasting på alle sider.

Hvordan identifisere ubrukt CSS og JavaScript?

Du må forstå hva som forårsaker at ubrukte ressurser lastes inn på sidene dine. Som forklart ovenfor trenger du ikke laste inn kontaktskjema, nettbutikk eller gjennomgå plugins på alle sidene. Hele oppgaven er imidlertid mer komplisert enn du tror.

  • Først må du tømme hurtigbufringen og deaktivere hurtigbufremodulet på nettstedet ditt. Gå nå til Google PageSpeed ​​Insights -verktøyet og sjekk hastighetspoengene.
  • Klikk på meldingene "Fjern ubrukt JavaScript" og "Fjern ubrukt CSS" for å utvide dem. Google viser deg en liste over ressurser med overføringsstørrelse og potensielle besparelser.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Se ubrukte ressurser i PageSpeed

  • Ekstern kode – Som du kan se på skjermbildet ovenfor, er "pagad2.googlesyndication.com" fra Google AdSense. Du kan ikke fjerne ubrukt CSS og JavaScript lastet fra tredjeparts nettsteder. Disse skriptene lastes inn på nettstedet ditt med reklame, Analytics, YouTube -innebygd video eller plugins for sosial deling. Så du må forstå at disse eksterne ressursene vil påvirke sidehastigheten, og du har ingen kontroll over det med mindre du bestemmer deg for å fjerne dem. sjekk artikkelen om AdSense mot sidehastighet for å forstå at annonser vil drepe sidehastigheten din.
  • Plugin og temafiler – vi vil forklare hvordan du fjerner dem i neste avsnitt.
  • Innebygd CSS og skript – Google PageSpeed ​​Insights -verktøyet viser dem vanligvis ikke. Du må manuelt identifisere og fjerne dem fra nettstedet ditt. Hvis en plugin setter inn innebygd CSS/script, må du deaktivere pluginfilene eller unngå å legge til egendefinert innebygd kode. Husk at det er et stort problem med tunge temaer som bruker style.css med tusenvis av linjer. Du må manuelt fjerne koden inne i filen style.css for å redusere størrelsen.

Oppsummert er det enkelt å fjerne ubrukt CSS og JavaScript hvis de lastes som separate filer. Laster inn enorm style.css -fil eller innebygd CSS kan ikke fjernes med mindre du manuelt gjennomgår dem og sletter ubrukte koder. Alternativt må du kanskje finne et lett tema eller en plugin for å bli kvitt problemet. Etter at du har funnet hva som forårsaker feilen, kan du aktivere hurtigbufret plugin på nettstedet ditt.

Hvordan fjerne ubrukt CSS og JavaScript?

Det er to måter du kan bruke til å fjerne ubrukte CSS- og JS -filer når siden lastes inn i nettleseren. Det første alternativet er å bruke premium -plugins som WP Rocket, og det andre alternativet er å bruke gratis plugin. Vi vil forklare begge metodene i detalj, slik at du kan sjekke og velge den enkle for deg.

Fjern ubrukt CSS med WP Rocket

WP Rocket er det mest populære hurtigbuffer -pluginet for WordPress som tilbyr et superenkelt brukergrensesnitt. For å forbedre sidens lastetid må du kjøpe pluginen og oppdatere den til den nyeste versjonen (over 3.9).

  • Gå til "Innstillinger> WP Rocket" -menyen i WordPress -administrasjonspanelet.
  • Klikk på "Filoptimalisering" -fanen og rull ned til bunnen av "CSS Files" -delen.
  • Aktiver alternativet “Unused CSS (Beta)" og bekreft alternativet “Activate Remove Unused CSS” fra advarselen.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Fjern ubrukt CSS i WP Rocket

  • Programtillegget begynner å behandle CSS på nettstedet ditt, som kan ta flere minutter å fullføre.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Fjern ubrukt CSS er fullført

  • Etter at du er ferdig, vil du se en suksessmelding "Fjern ubrukt CSS er fullført!".
  • Du kan også aktivere alternativet "Optimaliser CSS -levering" for å generere kritisk CSS for å unngå gjengivelse av CSS -problemer.
  • Klikk på "Lagre endringer" -knappen nederst på siden for å regenerere de bufrede filene.

Fjern ubrukt JavaScript med WP Rocket

I motsetning til CSS er det ikke mulig å fjerne JS med WP Rocket -plugin. Du kan imidlertid aktivere alternativene "Last inn JavaScript utsatt" og "Utsett JavaScript -kjøring" under "Filoptimalisering> JavaScript -filer". Dette forsinker både interne og eksterne koder og eliminerer gjengivelsesblokkerende JavaScript -problemer.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Forsink kjøring av JavaScript

Sørg for å teste at nettstedet ditt fungerer fint etter at du har aktivert disse alternativene.

Bruke Asset CleanUp -plugin for å fjerne ubrukt CSS og JavaScript

Når du har masse plugin og temafiler lastet, følger du instruksjonene nedenfor for å fjerne dem på sidene der du ikke trenger dem.

  • Logg deg på WordPress admin -dashbordet og naviger til delen "Plugins> Add New".
  • Skriv "opprydding av eiendeler" i søkefeltet, og finn pluginet "Asset CleanUp: Page Speed ​​Booster".

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Installer og aktiver plugin

  • Klikk på "Installer nå" -knappen og aktiver deretter programtillegget.
  • Etter at du har aktivert programtillegget, anbefaler vi deg å lese dokumentasjonen som vises. Dette er nødvendig for å bruke pluginet på riktig måte.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Les Komme i gang -guider

Plugin -innstillinger

Programtillegget har mange innstillinger som vi ikke vil forklare denne artikkelen. Hvis du bruker hurtigbuffer -plugin som WP Rocket på nettstedet ditt, må du sørge for å ikke bruke andre funksjoner enn å deaktivere ubrukte skript og CSS. Gå til "Asset CleanUp> Settings" -menyen og deretter til "Preferanser for pluginbruk". Her kan du bestemme hvordan du vil se og deaktivere ubrukte CSS / skript på sidene dine.

  • Administrer i oversikten – aktiver dette alternativet. Dette vil hjelpe deg med å analysere siden fra innleggsredigereren i administrasjonspanelet.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Aktiver Administrer på oversikten

  • Administrer i grensesnittet- hvis du vil analysere siden fra grensesnittet, aktiverer du dette alternativet. Ellers kan du deaktivere dette. Husk at front-end analyse bare kan utføres av den påloggede adminbrukeren. Brukere som besøker nettstedet ditt, vil ikke bli påvirket under kontrollen.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Aktiver eller deaktiver Administrer i frontend

  • Aktivitetslisteoppsett – klikk på rullegardinmenyen og velg "Alle stiler og skript> Gruppert etter sted (temaer, plugins, kjerne og eksternt). Dette vil hjelpe deg med å se ressursfilene gruppert i forskjellige kategorier.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Sett visningsoppsett

  • Vil du skjule WordPress -kjernefilen fra aktivalisten? – aktiver dette alternativet slik at du ikke roter med kjerne -WordPress -filer.

Gå nå til fanen "Testmodus" og aktiver alternativet "Aktiver testmodus". Dette vil hjelpe deg med å kontrollere at nettstedet går i stykker etter at du har deaktivert skriptene og CSS før du gjør det offentlig.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Aktiver testmodus

Klikk på "Oppdater alle innstillinger" nederst for å bruke endringene.

Fjern ubrukt CSS og JavaScript

Avhengig av innstillingene kan du enten analysere siden fra redaktøren eller fra front-end.

  • Deaktivering av skript og CSS fra editor – Rediger et av de eksisterende innleggene for å gå til innleggsredigereren. Rull ned til bunnen for å se metaboksene fra Asset CleanUp -pluginet. Se alle CSS og skript som er lastet på den siden, og deaktiver ressursene du ikke trenger.
  • Deaktivering av skript og CSS fra Frontend -Hvis du har aktivert "Administrer i front-end" -alternativet, åpner du et av innleggene dine i nettleserens grensesnitt. Husk at du bør være logget på WordPress -administrasjonspanelet i en annen nettleserfane. Nederst på siden ser du lignende metabokser som deaktiverer ressursene som er lastet inn på siden.

I begge tilfeller vil du se alle CSS- og JavaScript -filene lastet på siden gruppert i henhold til innstillingene dine.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Se lastede ressurser i gruppe

Utvid hver gruppe og se detaljene for filene som er lastet inn av plugins og temaer. For hver CSS- og JS -fil har du flere alternativer som vist på bildet nedenfor.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Deaktiver eller aktiver CSS og JS

  • Last ut ressursen på siden.
  • Deaktiver filen på hele siden
  • Deaktiver på alle innlegg (det vil fortsette å lastes på sider og egendefinerte innleggstyper ).
  • Noen andre alternativer som å bruke RegEx er bare tilgjengelig i pro -versjonen av pluginet.

Etter at du har deaktivert filene, oppdaterer du innlegget ditt for at endringene skal være effektive på nettstedet.

Visning av deaktiverte filer og fjerning av testmodus

  • Gå til delen "Opprydding av eiendeler> Masseendringer".
  • Naviger til kategorien "Innlegg, sider og egendefinerte innleggstyper", og velg "innlegg" fra rullegardinmenyen.
  • Her kan du se alle deaktiverte filer på nettstedet ditt.
  • Merk av for Fjern masse -regel, og klikk på "Bruk endringer" -knappen nederst for å aktivere innlasting av filer igjen.
  • Alternativt kan du redigere alle innlegg i innleggsredigereren og endre lasteadferd for filene.

Hvordan fjerne ubrukt CSS og JavaScript i WordPress?

Se og fjern massefiler

Sjekk nettstedet ditt, og hvis alt er bra, gå tilbake til innstillingssiden og deaktiver alternativet "Testmodus". Dette vil gjøre endringene live for alle brukere som besøker nettstedet ditt. På samme måte kan du deaktivere CSS- og JS -filene på egendefinerte innleggstyper, sider og produktsider ved å redigere dem. Sjekk sidene dine med Google PageSpeed ​​Insights -verktøyet for å se om feilene er fjernet.

Siste ord

Vi håper artikkelen er nyttig for å fjerne ubrukte CSS- og JavaScript -filer fra nettstedet ditt og forbedre Google PageSpeed ​​-poengsummen. Vi anbefaler å bruke WP Rocket da det er enkelt å fjerne CSS og forsinke ekstern JS med få klikk. Hvis du bruker den gratis Asset Cleanup -pluginen, vil den bare hjelpe deg med å deaktivere lasting av CSS- og JS -filer fra plugins og temaer. Du må unngå å bruke tredjepartskoder og manuelt fjerne unødvendige koder i main style.css-filen. Når du redigerer filer manuelt, må du sørge for at du bruker barnetema for å oppdatere stilarket slik at du ikke mister endringene når du oppdaterer temaet.

Opptakskilde: www.webnots.com

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon