Lækkaðu / sameina WordPress CSS + Javascript skrár = hraðari vefsíðu

WordPress minify JS og CSS skrár

Eitt það besta sem við lærðum þegar við rannsökuðum fyrir grein okkar um hvernig á að láta Joomla vefsíðu hlaða hratt (1.29 sekúndur til að vera nákvæm), við uppgötvuðum mikla perlu tóls. 

Eins og margir gera þegar þeir reyna að láta vefsíðu hlaða hraðar, vísa þeir til Google PageSpeed ​​tillögur síða, og með réttu, því ef Google gefur yfirlýsingu, þá er það venjulega þess virði að hlusta á það. Hins vegar er stundum mjög sóðalegt að gera allar hagræðingar og þú gætir ekki haft færni til að framkvæma þessar breytingar.

Efnisyfirlit[Sýna]

Eins og þú kannski veist, þegar þú gerir WordPress síðuna þína hraðari, þá er fullt af hagræðingum sem þú þarft að gera. Ein þeirra er að vita hvernig á að nýta skyndiminni vafra á WordPress rétt, eitthvað sem CollectiveRay hefur fengið frábæra grein um hér.  

En það er ekki nærri nóg ef CSS og Javascript skrárnar eru nokkuð stórar. Það er það sem smækkun snýst um. 

Hvað er smækkun? (og hvernig það getur gagnast vefnum þínum)

Smávægileg er sú aðgerð að taka stykki af kóðun og fjarlægja einhverja stafi úr henni (svo sem bil, línubil, flipa og annað) sem miðla engri merkingu, nema að gera textann læsilegri. Lítilsháttar WordPress skrár framkvæma á sama hátt sem upprunalega kóðinn, þar sem munurinn er aðeins sá að þeir taka lítið upp less pláss vegna þess að þeir skera út auka upplýsingar. Af þessum sökum verður skránni minni til niðurhals, sem leiðir til hraðari vefsíðu í heildina.

Lækkun er sérstaklega mikilvæg og gagnleg fyrir forskriftir (svo sem Javascript skrár), CSS stílblöð og aðra svipaða vefsíðuíhluti.

Lestu meira: Hvernig á að ráða (GREAT) Javascript forritara - Topp 5 síður, smelltu hér - https://www.collectiveray.com/hire-javascript-developer

Aðalástæðan fyrir því að gera þetta og ávinningur vefsins er:

  • Fækkar hleðslutímum og gerir vefsíðu þína hraðari í heildina. Í ljósi þess að flestar vefsíður nota nokkrar forskriftir og stílblaðaskrár, sem skilar MIKIÐ aukarými. Þó að þú gætir haldið að fjarlæging rýma muni ekki leiða til mikilla breytinga, þá getur heildar smækkunarferlið á öllum skrám WordPress uppsetningar aukið verulegan ávinning.
  • Að hylja kóðann frá frjálslegum lesendum. Þó að smækkunin sem myndast leynir ekki kóða vefsvæðis þíns (þ.e. þetta er frábrugðið kóðaþvotti), en gerir það töluvert erfiðara fyrir venjulega notendur að skilja, ef það er eitthvað sem varðar þig. 

Þó að minify kóða þinn er ólíklegt að gera a gríðarstór munur á hleðslutíma síðunnar þinnar, sem hluti af fullkominni hagræðingarstefnu, væri það eitt af mörgum hlutum sem þú ættir að gera. Það getur stytt hleðslutíma síðunnar þinna um nokkur prósentustig, sem gerir það að verkum að það er góð aðferð til að innleiða þaðless.

Hvað gerist meðan á minify ferli stendur?

Í meginatriðum fer smækkunarferlið í gegnum slíkar textaskrár og fjarlægir allt sem aðeins er ætlað til manneldis, því þegar öllu er á botninn hvolft er vélin sem er að skrá skránna ekki skráin mannlæsileg. WordPress minify ferlið fjarlægir efni eins og auka hvítt rými (bil, nýjar línur, flipa), athugasemdir eða annan texta sem eykur stærð skráarinnar án þess að draga úr „merkingarfræði“ skráar fyrir vafrann. Merkingin er enn til staðar, skrárnar eru bara minni.

Til dæmis er þetta hvernig venjuleg CSS skrá myndi líta út:

líkami {
framlegð: 30px;
padding: 30px;
litur: #FFFFFF;
bakgrunnur: # f7f7f7;
}
h1 {
font-size: 12px;
litur # 222222;
framlegð-botn: 5px;
}

Þó að smækkaða útgáfan af þessum kóða myndi líta svona út:

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

Þú getur séð að textaupplýsingarnar eru nákvæmlega þær sömu, þær eru bara sviptir efni sem er til í læsileikanum. Sama hugtak á við um Javascript skrár.

Lokaniðurstaðan af því að nota viðbætur eða aðferðir til að minnka Javascript WordPress væri að HTML framleiðslan, ásamt CSS skrám og JS skrám sem vefsíðan þín notar og viðbætur hennar myndu líta svona út:

smávægilegur kóði

Þó að þetta geti litið út eins og fullt af rusli, þá er í raun öll merkingin til staðar - það hefur bara verið „smækkað“ til að fjarlægja óþarfa efni sem eru uppblásin af stærð sinni.

Það eru fullt af viðbætur sem geta hjálpað þér að ná þessu ferli, sem verður getið hér að neðan.

Lækkaðu Javascript WordPress

Ferlið við að gera Javascript WordPress minni er einfaldur. Þú þarft einfaldlega að setja eitt af viðbótunum hér að neðan. Þú gætir líka viljað hafa í huga að algerar WordPress Javascript skrár eru þegar sjálfgefnar.

Reyndar, ef þú lítur á kóðann á WordPress vefsíðu þinni, þá sérðu .min.js viðbótina, sem sýnir að raunverulegu skrárnar eru þegar smækkaðar.

algerlega minify javascript wordpress skrár

Þetta á ekki endilega við um viðbætur og þemu frá 3. aðila.

Þú gætir líka viljað taka viðbótarskrefið við að fjarlægja viðbætur sem eru auka og búa til handrit sem þú gætir ekki þurft.

Ef þú ert algerlega fastur í frammistöðu geturðu líka valið að búa til útgáfur af Javascript-skrám sem EINGÖNGU innihalda handritið sem vefsíðan þín notar. Sjáðu sjálfgefið að flestar handritaskrár eru með auka kóða sem er innifalinn „bara ef“ ef þörf er á.

Þú gætir viljað fræðast um hvernig á að gera þetta hér.

Lækkaðu CSS WordPress

Enn og aftur er ferlið við Minify CSS WordPress einfalt. Þú getur bara sett upp tappi og þetta mun framkvæma smækkun CSS skrár sjálfkrafa. Þó að flestar helstu WordPress skrár séu með minni útgáfu af CSS skrám, þá á þetta ekki endilega við um öll viðbætur og þemu.

Enn og aftur munum við einnig mæla með því að framkvæma CSS kóða umfjöllun til að fjarlægja óþarfa CSS kóða sem er einfaldlega dauður.

Við munum nefna fjölda viðbóta sem gera lítið úr CSS WordPress í næsta kafla hér að neðan. 

5 bestu WordPress Minify viðbætur

Við munum ræða bæði almennar vörur sem eru almennt notaðar til að gera vefsíðuna þína hraðari með smávægingu og sérstakar viðbætur sem eini eiginleiki er smækkunarferlið.

1. WP Rocket

Þetta er lang uppáhalds viðbótin okkar.

Ástæðan er einföld, þetta er lang besta vöran sem getur framkvæmt nokkur hraðabótunarverkefni, á virkilega einfaldan hátt, en með frábærum árangri af því að gera vefsíðuna þína hraðari, þar á meðal að framkvæma smámynd af CSS og Javascript WordPress skrám.

Sannarlega og sannarlega er það bara eitt af því sem þessi viðbætur gera, en þegar þú hefur sett það upp, kemstu að því að þú þarft ekki að gera neitt annað.

Eins og sjá má hér að neðan er þessi smækkun einn af grunnvalkostunum til hagræðingar. Með því sérðu að það er samtenging, þetta er aukaferli hagræðingar, sem býr til eina skrá úr öllum CSS og JS skrám (vegna þess að þetta gerir það líka fljótlegra að hlaða niður skrám)

minify javascript css wordpress viðbót

Tappinn er ekki ókeypis en verðið er mjög ódýrt á aðeins $ 49. Miðað við þann tíma sem það sparar þér og afleiðingin af því að vefsvæðið þitt hleðst hraðar, bókstaflega á nokkrum mínútum, mælum við eindregið með því að velja þetta.

WP Rocket vitnisburður

Við setjum þetta tappi upp á hverri WordPress vefsíðu sem við setjum upp, einfaldlega vegna þess að það sparar okkur svo mikinn hagræðingartíma.

Smelltu hér til að fá lægsta verð á WP Rocket

2. JCH hagræða

 

Hér er smá bragð til að hjálpa þér raunverulega mikið - notaðu JCH Optimize - þetta er tæki sem virkar á mörgum kerfum eins og WordPress, Joomla, Drupal og Magento.

The mikill hlutur óður í JCH Optimize er að það útfærir a gríðarstór tala af Google PageSpeed og aðrar ráðleggingar til að hlaða vefsíðu þína eins hratt og mögulegt er.

Það er frábært vegna þess að það þarf næstum núll stillingar og íhlutun frá notanda.

Ef þú ert að leita að hraðri hýsingarþjónustu skaltu líta á gestgjafann okkar, við höfum farið yfir þær hér að fullu: https://www.collectiveray.com/inmotion-hosting-review

JCH hagræðing

Og þú þarft ekki að skipta þér af neinum kóða, allt þetta er gert með viðbótinni - það varðveitir alla upprunalegu kóðunina þína, svo þú munt ekki brjóta neitt með því að klúðra. Einnig gerir það venjulega þær hagræðingar sem oftast er erfiðast að framkvæma. Til að nefna nokkur eru þetta þau sem eru gerð vel

  • Sameinar CSS skrár úr öllum sniðmátunum þínum, einingum og viðbótum í eina skrá og fækkar þannig beiðnum sem sendar eru á vefsíðuna þína
  • Sameinar Javascript skrár, sem venjulega er mjög erfitt að sameina án þess að brjóta síðuna
  • Rennilás á CSS og Javascript þannig að þau verða minni og flutningstíminn styttist
  • Lækkar Javascript og CSS, til að gera það þéttara og minnka stærð þess enn frekar (dregur úr aukahlutum, athugasemdum osfrv.)
  • Bætir við DEFER tagi, þannig að síðan þín hlaðist fyrst, og framkvæmir Javascript eftir að síðan hefur hlaðist, sem gerir síðuna sneggri til að hlaða. Í ljósi þess að þessi sérstaka útfærsla er mikilvæg fyrir hraðvirka vefsíðu höfum við fjallað mikið um þetta hér: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Býr til IMAGE Sprites - þetta fækkar einnig fjölda beiðna sem sendar eru á vefsíðuna þína um mjög mikið magn og er ein erfiðasta hagræðingin sem hægt er að ná handvirkt

Það gerir þér einnig kleift að fínstilla nokkra háþróaða valkosti eins og að útiloka tilteknar skrár til að tryggja að ef einhver viðbót virkar ekki eftir að hafa keyrt hana í gegnum JCH Optimize þá virkar þetta engu að síður.

The PRO útgáfa, sem er fáanlegur á fádæma $ 29, gefur þér aðgang að nokkrum öðrum hagræðingarvalkostum eins og að innihalda innbyggt CSS og Javascript og hlaða inn Javascript ósamstillt að hindra ekki hleðslu síðunnar.

Taktu orð mín fyrir það, settu viðbótina upp, gerðu það kleift og skoðaðu árangur þinn fyrir og eftir. Ef þú færð ekki bætta umtalsvert magn skaltu koma hingað aftur og kvarta en ég er nokkuð viss um að þú kemur ekki aftur :)

Smelltu hér til að hlaða niður JCH Optimize

3. W3 Samtals Cache

Þetta er annar viðbót sem þú munt sjá er almennur hugbúnaður sem gerir fullt af hlutum sem tengjast því að gera WordPress hratt, þar á meðal að minnka CSS, JS og HTML skrár.

Þó að þú komist að því að þetta er nefnt mjög oft þegar kemur að slíkum viðbótum, þá skal tekið fram að þessi vara er algerlega ekki góð hugmynd fyrir fólk sem er ekki tæknilegt.

Stillingar skyndiminnis í W3 samtals skyndiminni

Það hefur verið vitað að það skapar veruleg vandamál, þar sem einhverjar villur eru eftir jafnvel eftir að hugbúnaðinum hefur verið fjarlægður og þeim eytt af vefsíðunni.

Okkar sjálf kl CollectiveRay ég hef reynt að nota þessa tappi nokkrum sinnum, en á þessum tímapunkti og í núverandi ástandi mælum við ekki lengur með því að þetta sé notað í minnkunartilgangi eða til að gera vefsíður hraðari, unless þú veist nákvæmlega hvað þú ert að gera.

4. WP Super Minify

Þetta tappi notar Lækkaðu PHP Framework og að nota það sameinar, minnkar og skyndir skyndiminni JavaScript og CSS skrár eftir þörfum til að flýta fyrir blaðamagni.

Með því að virkja þetta stinga inn, uppruni HTML, innbyggða JavaScript og CSS er nú sviptur viðbótarefni, sem leiðir til þess að stærð þeirra er minni.

Það sem er frábrugðið öðrum viðbótum sem hér eru nefndar er að þetta viðbætur framkvæma AÐEINS smækkunarferlið og engar aðrar hagræðingar, sem er frábært val fyrir þá sem vilja aðeins framkvæma þessa aðgerð og ekkert annað af neinum ástæðum.

5. Fljótur hraði minnka 

Þó að það séu mörg önnur WordPress minify viðbætur sem við getum mælt með, þá mun þetta vera sú síðasta sem við nefnum hér. 

The Fast Velocity tappi sameinar allar CSS og JavaScript skrár þannig að vefþjónninn þarf að takast á við færri beiðnir. Á sama tíma minnkar það einnig skrárnar og býr til afrit í skyndiminni fyrir hraðari hleðslutíma.

Þetta tappi gerir sjálfkrafa möguleika til að gera HTML, JavaScript og CSS minni, en þú getur slökktu á einum eða fleiri þeirra handvirkt með því að fara í Stillingar → Hraðhraðalækkun Flipi.

Þú getur valið að útiloka að tilteknar skrár séu smækkaðar ef einhver viðbótin þín bilar eftir að þú hefur virkjað þetta.

 

Hraði hraði minnka

Umbúðir Up 

Þó að smækkunarferlið sé ekki tímamótaaðgerð, ætti það að vera útfært sem eitt af nokkrum verkefnum til að gera WordPress þinn hraðari og við mælum eindregið með því að þú framkvæmir eina af vörunum sem nefndar eru hér að ofan.

Sæktu listann yfir 101 WordPress bragðaref sem allir bloggarar ættu að kunna

101 WordPress bragðarefur

Smelltu hér til að hlaða niður núna

 

Um höfundinn
David Attard
David hefur starfað í eða við net- / stafræna iðnaðinn síðustu 18 ár. Hann hefur mikla reynslu af hugbúnaðar- og vefhönnunargeiranum með því að nota WordPress, Joomla og veggskot í kringum þau. Sem stafrænn ráðgjafi er áhersla hans lögð á að hjálpa fyrirtækjum að ná samkeppnisforskoti með því að nota sambland af vefsíðu þeirra og stafrænum kerfum sem eru í boði í dag.

Eitt í viðbót... Vissir þú að fólk sem deilir gagnlegu efni á borð við þessa færslu lítur ótrúlega líka út? ;-)
vinsamlegast yfirgefa a gagnlegt skrifaðu athugasemdir við hugsanir þínar, deildu þessu síðan á Facebook hópinn þinn / hverjum sem myndu finnast þetta gagnlegt og við skulum uppskera ávinninginn saman. Takk fyrir að deila og vera fín!

Birting: Þessi síða getur innihaldið tengla á ytri vefsíður fyrir vörur sem við elskum og mælum af heilum hug. Ef þú kaupir vörur sem við leggjum til gætum við unnið okkur inn tilvísunargjald. Slík gjöld hafa ekki áhrif á ráðleggingar okkar og við tökum ekki við greiðslum fyrir jákvæða dóma.

Höfundur (ar) Valin þann:  Merki tímarits Inc   Sitepoint merki   CSS bragðarefur merki    vefhönnunarpottamerki   WPMU DEV merki   og margir fleiri ...