Pienennä / Yhdistä WordPress CSS + Javascript-tiedostot = Nopeampi sivusto

WordPress minimoi JS- ja CSS-tiedostot

Yksi parhaista asioista, jotka olemme oppineet tutkimalla artikkeliamme kuinka saada Joomla-verkkosivusto latautumaan nopeasti (tarkalleen 1.29 sekuntia), löysimme suuren työkalun helmen. 

Kuten monet ihmiset tekevät tehdessään verkkosivuston latautumista nopeammin, he viittaavat Google PageSpeed ​​-suositussivusto, ja aivan oikein, koska jos Google antaa lausunnon, se kannattaa yleensä kuunnella. Joskus on kuitenkin melko sotkuista tehdä kaikki optimoinnit, eikä sinulla ehkä ole taitoja suorittaa näitä muutoksia.

Sisällys[show]

Kuten ehkä tiedät, kun teet WordPress-sivustostasi nopeamman, sinun on tehtävä joukko optimointeja. Yksi heistä on tieto siitä, kuinka käyttää selaimen välimuistia WordPressissä oikein, jotain mikä CollectiveRay täällä on loistava artikkeli.  

Mutta se ei ole läheskään tarpeeksi, jos CSS- ja Javascript-tiedostot ovat melko suuria. Siitä minimointi on kyse. 

Mikä on pienentäminen? (ja miten siitä voi olla hyötyä sivustollesi)

Pienentäminen on toiminto, joka ottaa koodauksen ja poistaa kaikki merkit (kuten välilyönnit, rivinvaihdot, välilehdet ja muut), joilla ei ole mitään merkitystä, paitsi tekstin luettavuuden parantamiseksi. Pienennetyt WordPress-tiedostot toimivat samaan tapaan kuin alkuperäinen koodi, ainoa ero on, että ne vievät vähän less tilaa, koska ne poistavat lisätietoja. Tästä syystä tiedosto pienenee ladattavaksi, mikä nopeuttaa verkkosivustoa kokonaisuudessaan.

Pienentäminen on erityisen tärkeää ja hyödyllistä skripteille (kuten Javascript-tiedostot), CSS-tyylitaulukoille ja muille vastaaville verkkosivustokomponenteille.

Lue lisää: Kuinka palkata (SUURIA) Javascript-kehittäjiä - Top 5 sivustoa, klikkaa tästä - https://www.collectiveray.com/hire-javascript-developer

Ensisijainen syy tähän ja sivustosi edut ovat:

  • Latausaikojen lyhentäminen ja verkkosivustosi nopeuttaminen. Ottaen huomioon, että useimmat verkkosivustot käyttävät useita komentosarjoja ja tyylitaulukotiedostoja, mikä tuottaa paljon ylimääräistä tilaa. Vaikka saatat ajatella, että välilyöntien poistaminen ei aiheuta paljon muutoksia, WordPress-asennuksen kaikkien tiedostojen täydellinen pienentämisprosessi voi tuottaa merkittävän edun.
  • Hämärtää koodia satunnaisilta lukijoilta. Vaikka tuloksena oleva pienentäminen ei piilota sivustosi koodia (eli tämä eroaa koodin hämärtymisestä), mutta se tekee tavallisille käyttäjille melko vaikeampaa ymmärtää, jos se koskee sinua. 

Vaikka koodisi pienentäminen ei todennäköisesti tee a valtava ero sivustosi latausaikoihin, koska se nähdään osana täydellistä optimointistrategiaa, se olisi yksi monista asioista, jotka sinun pitäisi tehdä. Se voi lyhentää sivusi latausaikoja muutamalla prosenttiyksiköllä, mikä tekee siitä hyvän taktiikan toteuttaa eiless.

Mitä tapahtuu pienennysprosessin aikana?

Pohjimmiltaan pienentämisprosessi käy läpi tällaisia ​​tekstitiedostoja ja poistaa kaiken, mikä on tarkoitettu vain ihmisravinnoksi, koska loppujen lopuksi kone, joka jäsentää tiedostoa, ei ole tiedosto ihmisille luettavissa. WordPress-pienennysprosessi poistaa kaikki asiat, kuten ylimääräisen tyhjät tilat (välilyönnit, uudet viivat, välilehdet), kommentit tai minkä tahansa muun tekstin, joka lisää tiedoston kokoa vähentämättä selaimen tiedoston "semantiikkaa". Merkitys on edelleen olemassa, tiedostot ovat vain pienempiä.

Esimerkiksi normaali CSS-tiedosto näyttäisi tältä:

vartalo {
marginaali: 30px;
täyte: 30px;
väri: #FFFFFF;
tausta: # f7f7f7;
}
h1 {
font-size: 12px;
väri # 222222;
margin-bottom: 5px;
}

Vaikka tämän koodin pienennetty versio näyttäisi tältä:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Voit nähdä, että tekstitiedot ovat täsmälleen samat, ne on vain riisuttu tavaroista, jotka ovat siellä luettavuuden vuoksi. Sama käsite koskee Javascript-tiedostoja.

Laajennusten tai keinojen käytön Javascript WordPressin minimoimiseksi lopputulos olisi, että HTML-ulostulo yhdessä verkkosivustosi ja sen laajennusten käyttämien CSS- ja JS-tiedostojen kanssa näyttäisi tältä:

pienennetty koodi

Vaikka tämä saattaa näyttää kasan roskaa, itse asiassa kaikki merkitykset ovat edelleen olemassa - se on juuri "pienennetty" tarpeettomien tavaroiden poistamiseksi, jotka paisuttavat sen kokoa.

On paljon laajennuksia, jotka voivat auttaa sinua saavuttamaan tämän prosessin, joka mainitaan alla.

Minimoi Javascript WordPress

Prosessi Javascript WordPressin minimoimiseksi on melko yksinkertainen. Sinun tarvitsee vain asentaa yksi alla olevista laajennuksista. Saatat myös haluta huomata, että WordPress-Javascript-ydintiedostot on jo oletusarvoisesti pienennetty.

Itse asiassa, jos katsot WordPress-verkkosivustosi lähdekoodia, näet .min.js-laajennuksen, joka osoittaa, että todelliset tiedostot on jo pienennetty.

ydin pienentää javascript wordpress-tiedostoja

Tämä ei välttämättä koske kolmansien osapuolten laajennuksia ja teemoja.

Haluat ehkä myös ottaa ylimääräisen vaiheen poistamalla kaikki lisäosat ja luomalla komentosarjoja, joita et ehkä tarvitse.

Jos suorituskyky on ehdottomasti sidottu, voit myös luoda Javascript-tiedostoista versiot, jotka sisältävät VAIN verkkosivustosi käyttämän komentosarjan. Katso oletusarvoisesti, että useimmilla komentotiedostoilla on ylimääräinen koodi, joka sisältyy "vain siinä tapauksessa", että sitä tarvitaan.

Haluat ehkä oppia miten tämä tehdään täällä.

Minimoi CSS WordPress

Jälleen kerran Minify CSS WordPress -prosessi on yksinkertainen. Voit vain asentaa laajennuksen, jolloin CSS-tiedostot pienennetään automaattisesti. Vaikka suurimmalla osalla WordPress-ydintiedostoista on pienennetty versio CSS-tiedostoista, tämä ei välttämättä koske kaikkia laajennuksia ja teemoja.

Jälleen kerran suosittelemme myös suorittamaan CSS-koodin peiteharjoituksen ylimääräisen CSS-koodin poistamiseksi, joka on yksinkertaisesti kuollut.

Seuraavassa alla olevassa osiossa mainitaan useita laajennuksia, jotka minimoivat CSS WordPressin. 

5 parasta WordPress Minify -laajennusta

Keskustelemme sekä geneerisistä tuotteista, joita yleensä käytetään verkkosivustosi nopeuttamiseen minimoimalla, että erityisistä laajennuksista, joiden ainoa ominaisuus on minimointiprosessi.

1. WP Rocket

Tämä on ylivoimaisesti suosikkilaajennuksemme.

Syy on yksinkertainen, tämä on ylivoimaisesti paras tuote, joka pystyy suorittamaan useita nopeuden optimointitehtäviä todella yksinkertaisella tavalla, mutta erinomaisella tuloksella verkkosivustosi nopeuttamisesta, mukaan lukien CSS- ja Javascript WordPress -tiedostojen pienentäminen.

Todella ja todellakin, se on vain yksi asioista, joita tämä laajennus tekee, mutta kun asennat sen, huomaat, että sinun ei tarvitse tehdä mitään muuta.

Kuten alla voit nähdä, tämä pienentäminen on yksi optimoinnin perusvaihtoehdoista. Tämän avulla näet ketjutuksen, tämä on toissijainen optimointiprosessi, joka luo yhden tiedoston kaikista CSS- ja JS-tiedostoista (koska tämä myös nopeuttaa tiedostojen lataamista)

minimoi javascript css wordpress -laajennus

Laajennus ei ole ilmainen, mutta hinta on erittäin halpa vain 49 dollaria. Kun otetaan huomioon säästämäsi aika ja tulos siitä, että verkkosivustosi latautuu nopeammin, kirjaimellisesti muutamassa minuutissa, suosittelemme, että valitset tämän.

WP Rocket suositus

Asennamme tämän laajennuksen jokaiselle perustamallemme WordPress-verkkosivustolle yksinkertaisesti siksi, että se säästää meille niin paljon optimointiaikaa.

Napsauta tästä saadaksesi alimman hinnan WP Rocketista

2. JCH Optimoi

 

Tässä on pieni temppu, joka auttaa sinua todella paljon - käytä JCH Optimize -ohjelmaa - tämä on työkalu, joka toimii useilla alustoilla, kuten WordPress, Joomla, Drupal ja Magento.

JCH Optimizen hieno asia on, että se toteuttaa valtavan määrän Google PageSpeed ja muita suosituksia, jotta verkkosivustosi latautuu mahdollisimman nopeasti.

Se on hienoa, koska se vaatii lähes nolla kokoonpanoa ja käyttäjän toimia.

Jos etsit nopeaa isännöintipalvelua, tutustu isäntäämme, olemme tarkistaneet ne kokonaan täällä: https://www.collectiveray.com/inmotion-hosting-review

JCH optimoida

Ja sinun ei tarvitse sotkea minkään koodin kanssa, kaikki tämä tapahtuu laajennuksen avulla - se säilyttää kaikki alkuperäiset koodauksesi, joten et riko mitään häiritsemällä. Lisäksi se tekee yleensä ne optimoinnit, jotka ovat yleensä vaikeimpia suorittaa. Muutamia mainitakseni, nämä ovat hyvin tehtyjä

  • Yhdistää CSS-tiedostot kaikista malleista, moduuleista ja laajennuksista yhteen tiedostoon, mikä vähentää verkkosivustollesi lähetettyjen pyyntöjen määrää
  • Yhdistää Javascript-tiedostot, joita on yleensä todella vaikea yhdistää rikkomatta sivustoa
  • Vetää CSS: n ja Javascriptin niin, että ne pienenevät ja siirtoaika lyhenee
  • Minimoi Javascriptin ja CSS: n, jotta se olisi kompakti ja pienentäisi sen kokoa entisestään (vähentää ylimääräisiä tyhjiä tiloja, kommentteja jne.)
  • Lisää DEFER-tagin siten, että sivusi latautuu ensin, ja suorittaa Javascriptin sivun latautumisen jälkeen, mikä tekee sivustosta snappier-latautuvan. Ottaen huomioon, että tämä erityinen toteutus on kriittinen nopealle verkkosivustolle, olemme käsitelleet tätä laajasti täällä: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Luo IMAGE Sprites - tämä vähentää myös verkkosivustollesi lähetettyjen pyyntöjen määrää erittäin suurella määrällä ja on yksi vaikeimmista optimoinnista manuaalisesti

Sen avulla voit myös säätää joitain lisäasetuksia, kuten sulkea pois tiettyjä tiedostoja varmistaaksesi, että jos jokin laajennus ei toimi sen jälkeen, kun se on suoritettu JCH Optimizen kautta, tämä toimii joka tapauksessa.

- PRO-versio, joka on saatavana hintaan 29 dollaria, antaa sinulle pääsyn useisiin muihin optimointivaihtoehtoihin, kuten upotettu CSS ja Javascript sekä lataaminen Javascript asynkronisesti, jotta estetään sivuston lataaminen.

Ota sanani, asenna laajennus, ota se käyttöön ja tarkista tulokset ennen ja jälkeen. Jos et saa parannusta hyvällä summalla, tule takaisin tänne ja valittaa, mutta olen melko varma, ettet tule takaisin :)

Napsauta tätä ladataksesi JCH Optimize

3. W3 Total Cache

Tämä on toinen laajennus, jonka näet olevan yleinen ohjelmisto, joka tekee joukon asioita, jotka liittyvät WordPressin nopeaan tekemiseen, mukaan lukien CSS-, JS- ja HTML-tiedostojen minimointi.

Vaikka huomaat, että tämä mainitaan hyvin usein tällaisten laajennusten yhteydessä, on huomattava, että tämä tuote ei ole ehdottomasti hyvä idea ihmisille, jotka eivät ole teknisiä.

Sivun välimuistiasetukset W3-välimuistissa

Sen tiedetään aiheuttavan merkittäviä ongelmia, ja joitain virheitä on jäljellä myös ohjelmiston poistamisen ja poistamisen jälkeen verkkosivustolta.

Itse klo CollectiveRay olemme yrittäneet käyttää tätä laajennusta useita kertoja, mutta tässä vaiheessa ja nykyisessä tilassa emme enää suosittele, että sitä käytetään minimointitarkoituksiin tai verkkosivustojen nopeuttamiseen.less tiedät tarkalleen mitä olet tekemässä.

4. WP Super Minify

Tämä laajennus käyttää Pienennä PHP-kehystä ja sen käyttö yhdistää, pienentää ja tallentaa välimuistiin tarvittavat JavaScript- ja CSS-tiedostot sivun lataamisen nopeuttamiseksi.

Aktivoimalla tämä kytkeä, HTML: n, inline JavaScriptin ja CSS: n lähde on nyt irrotettu ylimääräisistä asioista, jolloin niiden koko on pienempi.

Erilainen kuin muut tässä mainitut laajennukset, on se, että tämä laajennus AINOASTAAN suorittaa minimointiprosessin eikä muita optimointeja, mikä on loistava valinta niille, jotka haluavat suorittaa vain tämän toiminnon eikä mitään muuta mistään syystä.

5. Nopeuden pienentäminen 

Vaikka on olemassa monia muita WordPress-pienennä laajennuksia, joita voimme suositella, tämä on viimeinen, jonka mainitsemme täällä. 

Fast Velocity -laajennus yhdistää kaikki CSS- ja JavaScript-tiedostot siten, että verkkopalvelimen on käsiteltävä vähemmän pyyntöjä. Samanaikaisesti se myös minimoi tiedostot ja luo välimuistissa olevat kopiot nopeampaa latausaikaa varten.

Tämä laajennus sallii HTML-, JavaScript- ja CSS-tiedostojen minimoinnin automaattisesti, mutta sinä voida Poista yksi tai useampi niistä käytöstä manuaalisesti siirtymällä Asetukset → Nopea nopeuden minimointi Tab.

Voit jättää tietyt tiedostot minimoimattomiksi, jos jokin laajennuksista rikkoutuu, kun olet ottanut tämän käyttöön.

 

Nopea nopeus minimoi

Käärimistä 

Vaikka pienentämisprosessi ei ole uraauurtava toiminto, se tulisi toteuttaa yhtenä monista tehtävistä, jotta WordPressisi olisi nopeampi, ja suosittelemme, että asennat jonkin yllä mainituista tuotteista.

Lataa luettelo 101 WordPress-temppusta, jonka jokaisen bloggaajan tulisi tietää

101 WordPress-temppua

Napsauta tätä ja lataa nyt

 

kirjailijasta
David Attard
David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...