TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

29

Lätta teman som Astra, GeneratePress och Genesis laddar mycket mindre CSS och skript på webbplatsen. Detta hjälper till att ta bort oanvända CSS- och JavaScript -fel i Google PageSpeed ​​Insights -verktyget och höjer hastighetspoängen. Men 99% av kommersiella WordPress -teman kombinerar flera funktioner och laddar tunga skript och CSS. Oavsett om du använder lätt eller tungt tema behöver du fortfarande massor av funktioner via plugin. Genom att kombinera tema och plugins kommer den totala hastighetspoängen att påverka varje källfil på webbplatsen. I den här artikeln kommer vi att förklara hur du tar bort oanvänd CSS och JavaScript i WordPress för att förbättra poängen för Google PageSpeed ​​Insights.

Relaterat: Läs 400+ gratis WordPress -självstudier.

Vad är oanvänd CSS och JavaScript?

Låt oss förklara detta med ett enkelt exempel. Kontaktformulär 7 är en av de populära pluginsna för att lägga till kontaktformulär på WordPress -webbplatser. I allmänhet behöver du kontaktformulär på sidan "Kontakt" och kanske på några andra sidor. Du kommer inte att använda kontaktformulär på varje blogginlägg. Kontaktformuläret 7 -plugin laddar dock CSS och JavaScript på varje sida och blogginlägg på din webbplats. Det är ett stort problem när du har 1000 blogginlägg och alla läser in kontaktformulärskript / CSS utan att behöva. Dessa onödiga CSS och skript kallas oanvända CSS och oanvända skript.

Ett annat bra exempel är en WooCommerce -butik. Du behöver endast WooCommerce -stilar och skript på sidor som produkter, produktarkiv, kundvagn, kassa och butik. Insticksprogrammet har dock inget alternativ för att förhindra att filer laddas till blogginlägg eller sidor.

Varför är detta ett problem?

Tyvärr kommer nästan alla plugins att ladda resurser på alla sidor på din webbplats. Detta kommer att påverka sidans laddningshastighet kraftigt och minska hastighetspoängen i verktyg som Google PageSpeed ​​Insights. Du kommer att se felen som nedan som möjligheter när du testar sidans webbadress i PageSpeed ​​Insights.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Sidhastighetsfel för oanvänd CSS och JS

Även om verktyget säger att detta inte direkt kommer att påverka prestandapoänget, har det stor inverkan på laddningstiden. Vid denna tidpunkt är 30% poäng för blockeringstiden och att ha oanvända CSS / JS och renderingsblockeringsresurser kommer att dra ner poängen till botten. Dessutom kommer vissa värdföretag att debitera baserat på bandbreddsanvändningen. Om du läser in onödiga CSS / script -filer på din webbplats ökar bandbreddsanvändningen mångfaldig. Därför är det nödvändigt att identifiera oanvänd CSS och JavaScript och ta bort dem från att ladda på alla sidor.

Hur identifierar jag oanvänd CSS och JavaScript?

Du måste förstå vad som orsakar att oanvända resurser laddas på dina sidor. Som förklarats ovan behöver du inte ladda kontaktformulär, webbutik eller granska plugins på alla sidor. Hela uppgiften är dock mer komplicerad än du tror.

  • Rensa först cachelagringen och inaktivera cacheminnet på din webbplats. Gå nu till Google PageSpeed ​​Insights -verktyget och kontrollera hastighetspoängen.
  • Klicka på meddelandena "Ta bort oanvänd JavaScript" och "Ta bort oanvänd CSS" för att expandera dem. Google visar dig en lista över resurser med överföringsstorlek och potentiella besparingar.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Visa oanvända resurser i PageSpeed

  • Extern kod – Som du kan se på skärmdumpen ovan är "pagad2.googlesyndication.com" från Google AdSense. Du kan inte ta bort oanvänd CSS och JavaScript från tredje parts webbplatser. Dessa skript laddas på din webbplats med reklam, Analytics, YouTube -inbäddning av video eller plugins för social delning. Så du måste förstå att dessa externa resurser kommer att påverka sidhastigheten och du har ingen kontroll över det om du inte bestämmer dig för att ta bort dem. kolla in artikeln om AdSense mot sidhastighet för att förstå att annonser kommer att döda din sidhastighet.
  • Plugin- och temafiler – vi kommer att förklara hur du tar bort dem i nästa avsnitt.
  • Inline CSS och skript – Google PageSpeed ​​Insights -verktyget visar dem i allmänhet inte. Du måste manuellt identifiera och ta bort dem från din webbplats. Om ett plugin infogar inline CSS/script, inaktivera plugin -filerna eller undvik att lägga till anpassad inline -kod. Kom ihåg att det finns ett stort problem med tunga teman som använder style.css med tusentals rader. Du måste ta bort koden manuellt i filen style.css för att minska storleken.

Sammanfattningsvis är det enkelt att ta bort oanvänd CSS och JavaScript om de laddas som separata filer. Att ladda enorma style.css -filer eller inbyggd CSS kan inte tas bort om du inte manuellt granskar dem och tar bort oanvända koder. Alternativt kan du behöva hitta ett lätt tema eller ett plugin för att bli av med problemet. När du har hittat vad som orsakar felet kan du aktivera caching -plugin på din webbplats.

Hur tar jag bort oanvänd CSS och JavaScript?

Det finns två sätt du kan använda för att ta bort oanvända CSS- och JS -filer när sidan laddas i webbläsaren. Första alternativet är att använda premium -plugins som WP Rocket och det andra alternativet är att använda gratis plugin. Vi kommer att förklara båda metoderna i detalj, så att du kan kontrollera och välja den enkla för dig.

Ta bort oanvänd CSS med WP Rocket

WP Rocket är det mest populära caching -plugin för WordPress som erbjuder ett superenkelt användargränssnitt. För att förbättra sidladdningstiden måste du köpa pluginet och uppdatera det till den senaste versionen (ovan 3.9).

  • Gå till menyn "Inställningar> WP Rocket" i din WordPress -administratörspanel.
  • Klicka på fliken "Filoptimering" och rulla ner till "CSS -filer" längst ned.
  • Aktivera alternativet "oanvänd CSS (beta)" och bekräfta alternativet "Aktivera ta bort oanvänd CSS" från varningsmeddelandet.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Ta bort oanvänd CSS i WP Rocket

  • Insticksprogrammet börjar bearbeta CSS på din webbplats som kan ta flera minuter att slutföra.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Ta bort oanvänd CSS är klar

  • Efter avslutad ser du ett framgångsmeddelande "Ta bort oanvänd CSS är klar!".
  • Du kan också aktivera alternativet "Optimera CSS -leverans" för att generera kritisk CSS för att undvika att CSS -problem blockeras.
  • Klicka på knappen "Spara ändringar" längst ned på sidan för att återskapa de cachade filerna.

Ta bort oanvänd JavaScript med WP Rocket

Till skillnad från CSS är det inte möjligt att ta bort JS med WP Rocket -plugin. Du kan dock aktivera alternativen "Ladda JavaScript försenad" och "Fördröj JavaScript -körning" under avsnittet "Filoptimering> JavaScript -filer". Detta fördröjer både interna och externa koder och eliminerar renderingsblockerande JavaScript -problem.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Fördröj JavaScript -körning

Se till att din webbplats fungerar bra efter att du har aktiverat dessa alternativ.

Använda Asset CleanUp Plugin för att ta bort oanvänd CSS och JavaScript

När du har massor av plugin- och temafiler laddade följer du instruktionerna nedan för att ta bort dem på sidorna där du inte behöver dem.

  • Logga in på din WordPress admin -instrumentpanel och navigera till avsnittet "Insticksprogram> Lägg till nytt".
  • Skriv "sanering av tillgångar" i sökrutan och leta reda på pluginet "Asset CleanUp: Page Speed ​​Booster".

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Installera och aktivera plugin

  • Klicka på knappen "Installera nu" och aktivera sedan tillägget.
  • Efter att du har aktiverat pluginet rekommenderar vi att du läser dokumentationen som visas. Detta är nödvändigt för att använda pluginet korrekt.

Läs Komma igång guider

Insticksprogram

Insticksprogrammet har många inställningar som vi inte kommer att förklara den här artikeln. Om du använder caching -plugin som WP Rocket på din webbplats, se till att inte använda andra funktioner än att inaktivera oanvända skript och CSS. Öppna menyn "Tillgångsrensning> Inställningar" och sedan till fliken "Inställningar för pluginanvändning". Här kan du bestämma hur du vill se och inaktivera oanvända CSS / skript på dina sidor.

  • Hantera i instrumentpanelen – aktivera det här alternativet. Detta hjälper dig att analysera sidan från inläggsredigeraren i administratörspanelen.

Aktivera Hantera i instrumentpanelen

  • Hantera i front-end- om du vill analysera sidan från front-end-webbläsaren, aktivera det här alternativet. Annars kan du inaktivera detta. Kom ihåg att front-end-analys kan endast göras av den inloggade administratörsanvändaren. Användare som besöker din webbplats påverkas inte under din kontroll.

Aktivera eller inaktivera Hantera i frontend

  • Tillgångslistlayout – klicka på rullgardinsmenyn och välj "Alla stilar och skript> Grupperade efter plats (teman, plugins, core och extern). Detta hjälper dig att se resursfilerna grupperade i olika kategorier.

Ange vylayout

  • Dölj WordPress Core -fil från tillgångslistan? – aktivera det här alternativet så att du inte krånglar med kärn WordPress -filer.

Gå nu till fliken "Testläge" och aktivera alternativet "Aktivera testläge". Detta hjälper dig att kontrollera att webbplatsen går sönder efter att du har inaktiverat skript och CSS innan du gör den offentlig.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Aktivera testläge

Klicka på "Uppdatera alla inställningar" längst ner för att tillämpa dina ändringar.

Ta bort oanvänd CSS och JavaScript

Beroende på inställningarna kan du antingen analysera sidan från redigeraren eller från front-end.

  • Inaktivera skript och CSS från Editor – Redigera något av det befintliga inlägget för att gå till inläggsredigeraren. Rulla ner till botten för att se metaboxarna från plugin för tillgångsrensning. Visa alla CSS och skript som laddats på den sidan och inaktivera de resurser du inte behöver.
  • Inaktivera skript och CSS från Frontend- Om du har aktiverat alternativet "Hantera i front-end" öppnar du något av ditt inlägg i webbläsarens front-end. Kom ihåg att du bör vara inloggad på din WordPress -adminpanel på en annan webbläsarflik. Längst ner på sidan ser du liknande metaboxar som inaktiverar resurserna som laddas på sidan.

I båda fallen kommer du att se alla CSS- och JavaScript -filer laddade på sidan grupperade enligt dina inställningar.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Visa laddade resurser i grupp

Expandera varje grupp och se detaljerna för filerna som laddas av dina plugins och teman. För varje CSS- och JS -fil har du flera alternativ som visas i bilden nedan.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Inaktivera eller aktivera CSS och JS

  • Ta bort resursen på sidan.
  • Inaktivera filen för hela webbplatsen
  • Inaktivera alla inlägg (det fortsätter att laddas på sidor och anpassade inläggstyper ).
  • Några andra alternativ som att använda RegEx är endast tillgängligt i proversionen av plugin -programmet.

När du har inaktiverat filerna uppdaterar du ditt inlägg för att ändringarna ska bli effektiva på webbplatsen.

Visa inaktiverade filer och ta bort testläge

  • Gå till avsnittet "Tillgångsrensning> Bulkändringar".
  • Navigera till fliken "Inlägg, sidor och anpassade inläggstyper" och välj "inlägg" från rullgardinsmenyn.
  • Här kan du se alla inaktiverade filer på din webbplats.
  • Markera kryssrutan "Ta bort bulkregel" och klicka på "Tillämpa ändringar" -knappen längst ned för att aktivera filen igen.
  • Alternativt kan du redigera alla inlägg i inläggsredigeraren och ändra filernas laddningsbeteende.

Hur tar jag bort oanvänd CSS och JavaScript i WordPress?

Visa och ta bort massfiler

Kontrollera din webbplats och om allt är bra, gå tillbaka till inställningssidan och inaktivera alternativet "Testläge". Detta kommer att göra ändringarna live för alla användare som besöker din webbplats. På samma sätt kan du inaktivera CSS- och JS -filerna på anpassade inläggstyper, sidor och produktsidor genom att redigera dem. Kontrollera dina sidor med Google PageSpeed ​​Insights -verktyget för att se om felen tas bort.

Slutliga ord

Vi hoppas att artikeln är användbar för att ta bort oanvända CSS- och JavaScript -filer från din webbplats och förbättra Googles PageSpeed ​​-poäng. Vi rekommenderar att du använder WP Rocket eftersom det är enkelt att ta bort CSS och fördröja extern JS med några klick. Om du använder det kostnadsfria pluginet för tillgångsrensning hjälper det dig bara att inaktivera laddning av CSS- och JS -fil från plugins och teman. Du måste undvika att använda tredjepartskoder och ta bort onödiga koder manuellt i huvudstilen style.css manuellt. När du redigerar filer manuellt, se till att du använder underordnat tema för att uppdatera formatmallen så att du inte förlorar ändringarna när du uppdaterar temat.

Inspelningskälla: www.webnots.com
Leave A Reply

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