Kuinka poistaa käyttämätön CSS ja JS WordPressissä (erittäin helppoa)

Paljon käyttämätöntä CSS:ää voi hidastaa sivustoasi. Jos testaat verkkosivustoasi Google PageSpeed ​​Insightilla, saatat saada varoituksen poistaa käyttämätön CSS. Se on helppo tapa tehdä ilman koodausta ja teknisyyttä.

Jos verkkosivustollasi on paljon käyttämättömiä CSS- ja JS-tiedostoja, se voi lyhentää verkkosivustosi latausaikaa. Jos käytät verkkosivustoasi a nopeuden testaustyökalut kuten Google PageSpeed ​​Insight, saatat saada varoituksen poistaa käyttämätön CSS.

Onneksi on olemassa erittäin helppo tapa tehdä se. Sinulla ei tarvitse olla erityistä teknistä tietämystä voidaksesi poistaa käyttämättömät CSS- ja JS-tiedostot WordPress-sivustoltasi.

Tämä johtuu hämmästyttävästä laajennuksesta, joka tunnetaan nimellä Asset CleanUp: Sivun nopeuden tehostin. Tämän laajennuksen avulla käyttämättömän CSS:n poistaminen on yhtä helppoa kuin muutaman painikkeen napsauttaminen. Vaihtoehtoisesti, jos et välitä kuluttaa muutama taala vuodessa, kanssa WP Rocket, siellä on poistettu käyttämätön CSS-painike. Aktivoi se ja laajennus poistaa kaikki käyttämättömät CSS-painikkeet automaattisesti.

Checkout: 7 parasta hallinnoitua Google Cloud WordPress -isännöintiä

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

Käyttämätön CSS on CSS-tiedosto, joka on sivulla, mutta jota ei yleensä tarvita sivun latautumiseen. Kun vierailija avaa verkkosivuston, selaimen on yleensä ladattava, jäsenneltävä ja käsiteltävä kaikki vieraillun sivun ulkoiset tyylisivut, ennen kuin se voi näyttää sivun sisällön vierailijalle. Jos sellaisella sivulla on CSS, jota ei käytetä sivulla, selain tuhlaa aikaansa siihen.

Klassinen esimerkki tästä on useimmat käytetyt yhteydenottolomakelaajennukset. Vaikka näitä laajennuksia käytetään enimmäkseen vain Ota yhteyttä -sivulla, lataa sen CSS koko verkkosivustolle. Sillä ei ole väliä, jos se on kotisivu, jolla sitä ei käytetä, CSS latautuu.

Jos on liian monta CSS:ää, joita ei tarvita, mutta jotka latautuvat ja hidastavat selaimen aikaa lukea ja näyttää sivua, siitä voi tulla ongelma.

Laajennusten lisäksi teeman kehittäjät kirjoittavat style.css-tiedostoon paljon asioita, joita enimmäkseen ei tarvita. Mutta tarvittiin tai ei, ne latautuvat aina, kun sivustosi ladataan!

Yksi käyttämätön CSS ei välttämättä ole ongelma, mutta monet käyttämättömät CSS:t voivat vaikuttaa verkkosivustosi latausaikaan.

Checkout: Top 10 nopeinta ja parasta WordPress-teemaa 

Käyttämättömän CSS:n tunnistaminen

Käyttämättömien CSS:n ja JS:n löytäminen on erittäin helppoa. Suosittelen kahta lähestymistapaa.

Yksi on analysoida verkkosivustosi Google PageSpeed ​​Insightin avulla. Tarkista, onko verkkosivustollasi käyttämätön CSS-ongelma. Napsauta sitä ja voit tunnistaa siitä vastuussa olevan sivustosi osan.

Unused CSS

Ylhäältä näet, että yksi käyttämätön CSS-tapaus on tallennettu. Näen käyttämättömän CSS:n laajennuksen ja sijainnin katsomalla tätä.

Toinen vaihtoehto on saada tarkempi analyysi. Voit saavuttaa tämän käyttämällä Chrome Dev -työkaluja.

Avaa Chrome Dev -työkalut Chrome-selaimella ja siirry kattavuuteen. Napsauta sitten peittoalueen sisällä olevaa latauspainiketta. Löydät a kattava opas tämän tekemiseen Google Developers -työkalussa.

Toinen vaihtoehto on käyttää jitbit etsimään käyttämättömiä CSS-valitsimia. Voit myös käyttää Puhdista CSS löytääksesi käyttämättömän CSS:n

Kuinka poistaa käyttämätön CSS

Poista käyttämätön CSS WordPressistä seuraavasti:

1. Asenna Asset CleanUp

Siirry laajennukseen ja sitten Lisää uusi. Kirjoita sitten "Asset CleanUp" Lisää uusi laajennus -sivun hakukenttään. Asenna ja aktivoi laajennus.

2. Siirry laajennusasetuksiin

Pääset liitännäisasetuksiin napsauttamalla WordPress-hallintapaneelissa asetuksia ja valitsemalla Asset CleanUp.

3. Poista ei-toivotut CSS- ja JS-tiedostot

Liitännäisasetuksissa saatat joutua hyväksymään, että tiedät, miten laajennus toimii rasvanpoiston alla ennen kuin aloitat.

Pura CSS ja JS napsauttamalla CSS ja JSS manager. Sieltä voit poistaa kaikki CSS- ja JS-tiedostot, joita et tarvitse. Voit poistaa sen vain etusivulta, koko sivustolta tai tietystä URL-osoitteesta. Voit myös poistaa viestejä, sivuja tai luokkia.

Esimerkkinä on poistaa kaikki yhteydenottolomakkeet latautumasta koko sivuston osalta yhteydenottosivua lukuun ottamatta

Unload CSS

Ota aikaa ja pura kaikki CSS- ja JS-tiedostot, joita et tiedä tarpeellisiksi. Varmista, että testaat sivustosi valmistumisen jälkeen varmistaaksesi, että kaikki on kunnossa.

Poista käyttämättömät CSS WordPress -laajennukset

Tässä on joitain laajennuksia, joilla voit poistaa käyttämättömän CSS:n WordpPressistä:

1. Asset CleanUp: Sivun nopeuden tehostin

Asset CleanUp

Asset CleanUp: Sivun nopeuden tehostin helpottaa käyttämättömien CSS:n ja JSin WordPressin poistamista jopa aloittelijoille. Sinun tarvitsee vain deaktivoida tietty CSS, jota ei tarvita tietyllä sivulla.

Voit myös poistaa käytöstä yksittäisiä viestejä varten. Premium-versiossa voit poistaa käyttämättömän CSS/JS:n käytöstä laajennuksilla.

Tämä laajennus on täydellinen suorituskykylaajennus, jossa on monia muita vaihtoehtoja WordPressin nopeuttamiseksi. Käyttämättömän CSS/JS:n poistaminen on vain osa sitä.

Tässä viestissä käytin tätä laajennusta on opas.

2. WP-raketti

WP Rocket on ykkönen WordPressin premium-suorituskykyinen laajennus. Jos olet noob, tarkoitan, että jos et ole kokenut tai tyytyväinen WordPressiin, WP Rocket on helpoin tapa poistaa käyttämätön CSS.

Sinun on ostettava laajennus. Kun olet tehnyt sen, voit ladata sen tililtäsi tai tarkistaa sähköpostistasi latauslinkin.

Asenna laajennus valitsemalla Dashboard> plugins> Add new> Upload.

Siirry vain WP Rocket -asetuksiin ja napsauta sitten "Tiedoston optimointi" -välilehteä. Vieritä sitten alas ja näet "Poista käyttämätön CSS", valitse valintaruutu, tallenna ja tyhjennä välimuisti.

Remove Unused CSS WP Rocket

3. Perfmatters

Perfmatters

Perfmatterit on Brian Jacksonin ja hänen veljensä Brett Jacksonin kehittämä premium-laajennus. Tämä laajennus voi auttaa poistamaan käyttämättömät CSS-syötteet erittäin helposti.

Ensin sinun on ostettava laajennus. Asenna se sitten. Aktivoi lisenssi. Kun siirryt asetuksiin, ota komentosarjanhallinta käyttöön.

Mene vain mille tahansa verkkosivustosi sivulle tai viestiin, näet komentosarjan hallintakuvakkeen kojelaudan valikossa, napsauta sitä. Voit poistaa käyttämättömät CSS- ja JS-tiedostot sivulta tai maailmanlaajuisesti.

Tämä laajennus on suorituskykylaajennus, joka sisältää monia muita vaihtoehtoja WordPressin nopeuttamiseksi. Käyttämättömän CSS/JS:n poistaminen on osa sitä.

4. CSS JS Manager

CSS-JS-Manager

CSS JS Manager voi erityisesti poistaa CSS:n tai JS:n mobiilista tai työpöydästä. Riippuen siitä, mitä haluat saavuttaa.

Tämä laajennus voi myös lykätä CSS- tai JS-tiedostojen lataamista.

Yhteenveto

Jos sinulla on paljon käyttämättömiä CSS- ja JS-tiedostoja, huomaat suuren parannuksen nopeudessa ja suorituskyvyssä.

Kaikkia käyttämättömiä CSS-tiedostoja voi olla mahdotonta poistaa, mutta voit minimoida ne. Käytän Asset CleanUpia poistaakseni käyttämättömän CSS:n TargetTrend.

Muista optimoida, mutta älä ole siihen liian pakkomielle, ellet halua sivustosi näyttävän maailman nopein sivusto.

Lue myös:

Kuinka poistaa renderöinnin estävät resurssit WordPressissä

Kuinka tehdä WordPressistä erittäin nopea

Kuinka saada liikennettä blogiisi

Mfon Abel Ekene

Mfon Abel Ekene

Nautin hyödyllisen sisällön luomisesta. Intohimoni on auttaa Internet-väestöä löytämään tarvitsemansa ohjaamalla heitä oikeaan suuntaan. Sitä rakastan tehdä, ja teen useita tunteja tutkimusta ja testausta varmistaakseni, että teen juuri sen TargetTrendin sisällön kautta.

Artikkelit: 48

Vastaanota teknisiä tavaroita

Tekniset trendit, startup-trendit, arvostelut, online-tulot, verkkotyökalut ja markkinointi kerran tai kahdesti kuukaudessa

3 Kommentit

  1. Hyvä lista. Omaisuuden puhdistaminen ei ole tarpeeksi hyvä useimmille teemoille, koska en voi poistaa CSS-päätiedostoa. Yleensä CSS-päätiedosto on myös erittäin suuri.

    Ainoa ilmainen laajennus, joka tekee sen ilman ulkoista palvelutilausta, on Debloat. Voit harkita sitä: https://wordpress.org/plugins/debloat/

Jätä vastaus

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *