TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

2

Kevyet teemat, kuten Astra, GeneratePress ja Genesis, lataavat sivustolle vähemmän CSS -tiedostoja ja komentosarjoja. Tämä auttaa poistamaan käyttämättömät CSS- ja JavaScript -virheet Google PageSpeed ​​Insights -työkalussa ja nopeuttamaan nopeutta. Kuitenkin 99% kaupallisista WordPress -teemoista yhdistää useita ominaisuuksia ja lataa raskaita skriptejä ja CSS: ää. Käytät sitten kevyttä tai raskasta teemaa, tarvitset silti monia toimintoja laajennuksen kautta. Kun teema ja laajennukset yhdistetään, kokonaisnopeuspisteet vaikuttavat jokaiseen sivuston lähdetiedostoon. Tässä artikkelissa kerromme, miten poistetaan käyttämätön CSS ja JavaScript WordPressistä Google PageSpeed ​​Insights -pisteiden parantamiseksi.

Aiheeseen liittyviä: Lue yli 400 ilmaista WordPress -opetusohjelmaa.

Mikä on käyttämätön CSS ja JavaScript?

Selitämme tämän yksinkertaisella esimerkillä. Yhteydenottolomake 7 on yksi suosituista laajennuksista, joilla lisätään yhteydenottolomakkeita WordPress -sivustoille. Yleensä tarvitset yhteydenottolomakkeen Yhteystiedot -sivulla ja ehkä muutamilla muilla sivuilla. Et käytä yhteydenottolomaketta jokaisessa blogikirjoituksessa. Yhteydenottolomake 7 -laajennus lataa kuitenkin CSS: n ja JavaScriptin sivustosi jokaiselle sivulle ja blogiviestille. On suuri ongelma, kun sinulla on 1000 blogipostausta ja ne kaikki lataavat yhteydenottolomakkeen komentosarjan / CSS: n ilman tarvetta. Näitä tarpeettomia CSS -skriptejä kutsutaan käyttämättömiksi CSS -tiedostoiksi ja käyttämättömiksi.

Toinen hyvä esimerkki on WooCommerce -kauppa. Tarvitset WooCommerce -tyylejä ja -skriptejä vain sellaisilla sivuilla kuin tuotteet, tuotearkistot, ostoskori, kassat ja kaupat. Laajennuksella ei kuitenkaan ole mitään vaihtoehtoa estää tiedostojen lataamista blogiviesteihin tai -sivuille.

Miksi tämä on ongelma?

Valitettavasti lähes kaikki laajennukset lataavat resursseja kaikille sivustosi sivuille. Tämä vaikuttaa voimakkaasti sivun latausnopeuteen ja pienentää nopeustuloksia työkaluissa, kuten Google PageSpeed ​​Insights. Näet alla olevat virheet mahdollisuuksina testatessasi sivun URL -osoitetta PageSpeed ​​Insightsissa.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

PageSpeed ​​-virhe käyttämättömissä CSS- ja JS -tiedostoissa

Vaikka työkalu sanoo, että tämä ei vaikuta suoraan suorituskykypisteisiin, sillä on valtava vaikutus latausaikaan. Tässä vaiheessa 30%: n pistemäärä on estoajalle, ja käyttämättömät CSS / JS ja renderöinnin estoresurssit laskevat pisteet alas. Lisäksi jotkut hosting -yritykset veloittavat kaistanleveyden käytön perusteella. Tarpeettomien CSS / komentotiedostojen lataaminen sivustollesi lisää kaistanleveyden käyttöä moninkertaisesti. Siksi on tarpeen tunnistaa käyttämätön CSS ja JavaScript ja poistaa ne lataamasta kaikkia sivuja.

Kuinka tunnistaa käyttämätön CSS ja JavaScript?

Sinun on ymmärrettävä, mikä aiheuttaa käyttämättömien resurssien lataamisen sivuillesi. Kuten yllä selitettiin, sinun ei tarvitse ladata yhteydenottolomaketta, verkkokauppaa tai tarkistaa laajennuksia kaikilla sivuilla. Koko tehtävä on kuitenkin monimutkaisempi kuin luulet.

  • Tyhjennä ensin välimuisti ja poista välimuistin laajennus käytöstä sivustossasi. Siirry nyt Google PageSpeed ​​Insights -työkaluun ja tarkista nopeuspisteet.
  • Laajenna ne napsauttamalla Poista käyttämätön JavaScript- ja Poista käyttämättömät CSS -viestit. Google näyttää sinulle resurssiluettelon, jossa on siirron koko ja mahdolliset säästöt.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Näytä käyttämättömät resurssit PageSpeedissa

  • Ulkoinen koodi – Kuten yllä olevasta kuvakaappauksesta näet, "pagad2.googlesyndication.com" on peräisin Google AdSensesta. Et voi poistaa käyttämättömiä CSS- ja JavaScript-tiedostoja, jotka on ladattu kolmannen osapuolen verkkosivustoilta. Nämä komentosarjat ladataan sivustollesi mainosten, Analyticsin, YouTube -videoiden upottamisen tai sosiaalisen median jakamisen laajennuksilla. Sinun on siis ymmärrettävä, että nämä ulkoiset resurssit vaikuttavat sivun nopeuteen, etkä voi hallita sitä, ellet päätä poistaa niitä. lue artikkeli AdSensen sivunopeudesta ymmärtääksesi, että mainokset tuhoavat sivusi nopeuden.
  • Laajennus- ja teematiedostot – selitämme niiden poistamisen seuraavassa osassa.
  • Sisäinen CSS ja komentosarjat – Google PageSpeed ​​Insights -työkalu ei yleensä näytä niitä. Sinun on tunnistettava ja poistettava ne sivustostasi manuaalisesti. Jos laajennus lisää upotetun CSS/komentosarjan, poista laajennustiedostot käytöstä tai vältä mukautetun upotetun koodin lisäämistä. Muista, että on suuri ongelma raskaissa teemoissa, jotka käyttävät style.css tuhansia rivejä. Sinun on poistettava koodi manuaalisesti style.css -tiedoston sisältä koodin pienentämiseksi.

Yhteenvetona voidaan todeta, että käyttämättömät CSS ja JavaScript on helppo poistaa, jos ne ladataan erillisinä tiedostoina. Valtavan style.css -tiedoston tai upotetun CSS -tiedoston lataamista ei voida poistaa, ellet tarkista niitä manuaalisesti ja poista käyttämättömiä koodeja. Vaihtoehtoisesti sinun on ehkä löydettävä kevyt teema tai laajennus päästäksesi eroon ongelmasta. Kun olet löytänyt virheen syyn, voit ottaa välimuistilaajennuksen takaisin käyttöön sivustossasi.

Kuinka poistaa käyttämätön CSS ja JavaScript?

Voit poistaa käyttämättömät CSS- ja JS -tiedostot kahdella tavalla, kun sivu latautuu selaimessa. Ensimmäinen vaihtoehto on käyttää premium -laajennuksia, kuten WP Rocket, ja toinen vaihtoehto on käyttää ilmaista laajennusta. Selitämme molemmat menetelmät yksityiskohtaisesti, jotta voit tarkistaa ja valita itsellesi helpon.

Poista käyttämätön CSS WP Rocketilla

WP Rocket on WordPressin suosituin välimuistilaajennus, joka tarjoaa erittäin yksinkertaisen käyttöliittymän. Parantaaksesi sivun latausaikaa sinun on ostettava laajennus ja päivitettävä se uusimpaan versioon (edellä 3.9).

  • Siirry "Asetukset> WP Rocket" -valikkoon WordPress -hallintapaneelissasi.
  • Napsauta "Tiedoston optimointi" -välilehteä ja vieritä alas "CSS -tiedostot" -osiossa.
  • Ota käyttöön "Käyttämätön CSS (beta)" -vaihtoehto ja vahvista "Aktivoi Poista käyttämätön CSS" -vaihtoehto varoitusviestistä.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Poista käyttämätön CSS WP Rocketista

  • Laajennus aloittaa CSS: n käsittelyn sivustossasi, mikä voi kestää useita minuutteja.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Poista käyttämätön CSS on valmis

  • Kun olet valmis, näet onnistumisviestin "Poista käyttämätön CSS on valmis!".
  • Voit myös ottaa käyttöön Optimoi CSS -toimitus -vaihtoehdon, jotta voit luoda kriittisiä CSS -tiedostoja, jotta CSS -ongelmat eivät esty.
  • Napsauta "Tallenna muutokset" -painiketta sivun alareunassa, kun haluat tallentaa välimuistissa olevat tiedostot uudelleen.

Poista käyttämätön JavaScript WP Rocketilla

Toisin kuin CSS, JS: n poistaminen ei ole mahdollista WP Rocket -laajennuksella. Voit kuitenkin ottaa käyttöön "Lataa JavaScriptiä lykätty" ja "Viivästyttää JavaScriptin suorittamista" -vaihtoehdot "Tiedoston optimointi> JavaScript -tiedostot" -osiossa. Tämä viivästyttää sekä sisäisiä että ulkoisia koodeja ja poistaa renderöinnin estävät JavaScript -ongelmat.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Viivästyttää JavaScriptin suorittamista

Varmista, että sivustosi toimii hyvin, kun olet ottanut nämä vaihtoehdot käyttöön.

Käyttämättömän CSS: n ja JavaScriptin poistaminen Asset CleanUp -laajennuksen avulla

Kun olet ladannut paljon laajennus- ja teematiedostoja, poista ne seuraavilta ohjeilta sivuilta, joilla et niitä tarvitse.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Asenna ja aktivoi laajennus

  • Napsauta “Asenna nyt" -painiketta ja aktivoi sitten laajennus.
  • Laajennuksen aktivoinnin jälkeen suosittelemme, että luet näytetyt oppaat. Tämä on välttämätöntä, jotta laajennusta käytetään oikein.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Lue Aloitusoppaat

Laajennuksen asetukset

Laajennuksessa on lukuisia asetuksia, joita emme selitä tässä artikkelissa. Jos käytät sivustossasi välimuistilaajennusta, kuten WP Rocket, varmista, ettet käytä muita toimintoja kuin käyttämättömien komentosarjojen ja CSS: n poistaminen käytöstä. Siirry "Asset CleanUp> Settings" -valikkoon ja sitten "Plugin Usage Preferences" -välilehdelle. Täällä voit päättää, miten haluat tarkastella ja poistaa käytöstä käyttämättömät CSS / komentosarjat sivuillasi.

  • Hallitse hallintapaneelissa – ota tämä vaihtoehto käyttöön. Tämä auttaa sinua analysoimaan sivua viestieditorista järjestelmänvalvojan hallintapaneelissa.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Ota hallinta käyttöön hallintapaneelissa

  • Hallitse käyttöliittymässä-jos haluat analysoida sivun käyttöliittymästä, ota tämä vaihtoehto käyttöön. Muussa tapauksessa voit poistaa tämän käytöstä. Muista, että vain sisäänkirjautunut järjestelmänvalvoja voi tehdä käyttöliittymäanalyysin. Sivustollasi vierailevat käyttäjät eivät vaikuta tarkistuksen aikana.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Ota hallinta käyttöön tai poista se käytöstä käyttöliittymässä

  • Omaisuusluettelon asettelu – napsauta avattavaa valikkoa ja valitse "Kaikki tyylit ja komentosarjat> Ryhmitetyt sijainnin mukaan (teemat, laajennukset, ydin ja ulkoinen). Tämän avulla voit tarkastella eri luokkaan ryhmiteltyjä resurssitiedostoja.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Aseta näkymäasettelu

  • Piilotetaanko WordPress -ydintiedosto resurssiluettelosta? – ota tämä vaihtoehto käyttöön, jotta et sekoita WordPress -ydintiedostoihin.

Siirry nyt "Test Mode" -välilehdelle ja ota käyttöön "Enable Test Mode" -vaihtoehto. Tämä auttaa sinua tarkistamaan, että sivusto hajoaa skriptien ja CSS: n poistamisen jälkeen ennen julkistamista.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Ota testitila käyttöön

Ota muutokset käyttöön napsauttamalla "Päivitä kaikki asetukset" alareunassa.

Poista käyttämätön CSS ja JavaScript

Asetuksista riippuen voit joko analysoida sivua editorista tai käyttöliittymästä.

  • Skriptien ja CSS: n poistaminen käytöstä editorista – Muokkaa mitä tahansa olemassa olevaa viestiä siirtyäksesi viestieditoriin. Vieritä alaspäin nähdäksesi Asset CleanUp -laajennuksen metakentät. Näytä kaikki sivulle ladatut CSS -tiedostot ja komentosarjat ja poista käytöstä tarvitsemasi resurssit.
  • Skriptien ja CSS: n poistaminen käytöstä käyttöliittymästä-Jos olet ottanut hallinnan käyttöliittymän käyttöön, avaa mikä tahansa viestisi selaimen käyttöliittymässä. Muista, että sinun on oltava kirjautuneena WordPress -hallintapaneeliin toisella selaimen välilehdellä. Sivun alareunassa näet samankaltaiset meta -ruudut, jotka poistavat sivulle ladatut resurssit käytöstä.

Molemmissa tapauksissa näet kaikki sivulle ladatut CSS- ja JavaScript -tiedostot ryhmittelemällä asetuksesi mukaan.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Näytä ladatut resurssit ryhmässä

Laajenna kutakin ryhmää ja tarkista laajennusten ja teemojen lataamien tiedostojen tiedot. Jokaiselle CSS- ja JS -tiedostolle on useita vaihtoehtoja alla olevan kuvan mukaisesti.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Poista tai ota käyttöön CSS ja JS

  • Poista resurssi sivulta.
  • Poista tiedosto käytöstä koko sivustolta
  • Poista käytöstä kaikista viesteistä (se latautuu edelleen sivuille ja mukautetuille postityypeille ).
  • Harvat muut vaihtoehdot, kuten RegExin käyttö, ovat käytettävissä vain laajennuksen pro -versiossa.

Kun olet poistanut tiedostot käytöstä, päivitä viestisi, jotta muutokset tulevat voimaan sivustolla.

Käytöstä poistettujen tiedostojen tarkasteleminen ja testitilan poistaminen

  • Siirry kohtaan "Asset CleanUp> Bulk Changes".
  • Siirry "Viestit, sivut ja mukautetut postityypit" -välilehdelle ja valitse avattavasta valikosta "post".
  • Täällä voit tarkastella kaikkia sivustosi poistettuja tiedostoja.
  • Valitse "Poista joukkosääntö" -valintaruutu ja napsauta "Käytä muutoksia" -painiketta alareunassa, jotta tiedostojen lataaminen otetaan uudelleen käyttöön.
  • Vaihtoehtoisesti voit muokata mitä tahansa viestejä viestieditorissa ja muokata tiedostojen latauskäyttäytymistä.

Kuinka poistaa käyttämätön CSS ja JavaScript WordPressistä?

Tarkastele ja poista joukkotiedostoja

Tarkista sivustosi ja jos kaikki on kunnossa, palaa asetussivulle ja poista "Test Mode" -vaihtoehto käytöstä. Muutokset tulevat näkyviin kaikille verkkosivustollasi vieraileville käyttäjille. Voit myös poistaa CSS- ja JS -tiedostot käytöstä muokattujen postityyppien, -sivujen ja tuotesivujen kautta muokkaamalla niitä. Tarkista sivusi Google PageSpeed ​​Insights -työkalulla, onko virheet poistettu.

Lopulliset sanat

Toivomme, että artikkelista on hyötyä poistamaan käyttämättömät CSS- ja JavaScript -tiedostot sivustostasi ja parantamaan Google PageSpeed ​​-pisteitä. Suosittelemme WP Rocketin käyttöä, koska CSS on helppo poistaa ja ulkoinen JS viivästyy muutamalla napsautuksella. Jos käytät ilmaista Asset Cleanup -laajennusta, se auttaa sinua poistamaan CSS- ja JS -tiedoston lataamisen käytöstä laajennuksista ja teemoista. Sinun on vältettävä kolmannen osapuolen koodien käyttöä ja poistettava tarpeettomat koodit manuaalisesti main style.css -tiedostosta. Kun muokkaat tiedostoja manuaalisesti, muista päivittää tyylitaulukko aliteemalla, jotta et menetä muutoksia aina, kun teemaa päivität.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja