Cum să minimizezi CSS, HTML și JavaScript ale site-ului tău WordPress
Publicat: 2023-02-28Minificarea este un concept simplu care este adesea recomandat ca un pas către accelerarea site-ului dvs. Dar realitatea este că îi frustrează pe mulți proprietari de site-uri când încearcă să-și minimizeze fișierele și ajung să-și spargă site-ul.
Deci ce dă?
Minificarea necesită adesea multă experimentare. Deși există multe soluții disponibile, modul în care acestea se comportă va varia de la un site la altul, în funcție de tema și pluginurile pe care le utilizați.
În această postare, vom explora ce este minificarea, beneficiile acesteia și unele dintre cele mai populare soluții de minificare disponibile – atât manuale, cât și pluginuri – pentru a vă ajuta să vă îndrumați către soluția potrivită pentru site-ul dvs.
Ce este Minificarea?
Site-urile web sunt formate dintr-o mulțime de fișiere diferite. Dacă vă testați viteza site-ului cu Google PageSpeed Insights, este posibil să primiți recomandarea de a reduce fișierele HTML, CSS și JavaScript.
Problema? Ca oameni, scriem codul conținut în aceste fișiere ca să le putem citi, dar computerelor nu le pasă de caractere precum comentarii, formatare, spații albe și linii noi. Deci, atunci când întâlnesc aceste caractere inutile în fișierele site-ului, le ignoră.
Acolo intră în imagine minificarea. Minificarea este un termen de programare care înseamnă, practic, eliminarea oricăror caractere inutile care nu sunt necesare pentru executarea codului. Minificarea funcționează prin analizarea și rescrierea codului pentru a reduce dimensiunea totală a fișierelor dvs., reducând astfel dimensiunea totală a site-ului dvs., astfel încât să se încarce mai repede în browserul utilizatorului.
De exemplu, iată câteva CSS pe care le puteți găsi într-o foaie de stil:
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: rebeccapurple;
}
a:active {
color: teal;
}
Și iată o versiune redusă a exemplului CSS de mai sus:
a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}
Vezi cât de mult mai comprimat este codul?
Minificarea este efectuată pe un server web înainte ca răspunsul să fie trimis. După minificare, serverul web folosește fișierele minime mai mici – și mult mai rapide – în locul celor originale, rezultând o lățime de bandă mai mică fără a sacrifica funcționalitatea.
După cum explică expertul SEO Yoast, reducerea fișierelor poate economisi până la 30-40%, sau chiar 50% din dimensiunea fișierului în unele cazuri.
De ce ar trebui să reduceți fișierele HTML, CSS și JavaScript
Având un site web rapid nu numai că face Google fericit - și ajută site-ul dvs. să se claseze mai sus în căutare - dar oferă o experiență de utilizator mai bună pentru vizitatorii site-ului dvs.
Minificarea are multe beneficii:
- Fișierele mai mici înseamnă că dimensiunea totală de descărcare a site-ului dvs. este redusă,
- Vizitatorii site-ului vor putea să încarce și să acceseze paginile dvs. mai rapid,
- Vizitatorii site-ului vor avea o experiență de utilizator identică fără a fi nevoiți să descarce fișiere mai mari și
- Proprietarii de site-uri vor primi costuri mai mici pentru lățimea de bandă, deoarece se transmit mai puține date prin rețea.
Cum să reduceți fișierele HTML, CSS și JavaScript
Înainte de a reduce fișierele site-ului dvs., este o idee bună să executați o copie de rezervă. Mai bine, reduceți fișierele pe un site de pregătire, astfel încât să puteți verifica totul în stare de funcționare înainte de a face modificări site-ului dvs. live.
De asemenea, este important să comparați viteza paginii înainte și după reducerea fișierelor, astfel încât să puteți compara rezultatele și să vedeți dacă minimizarea a avut vreun impact.
Site-ul meu preferat de testare a vitezei este GTmetrix. Acesta analizează performanța vitezei paginii dvs. folosind atât Google PageSpeed Insights, cât și YSlow, un instrument de testare a performanței cu sursă deschisă. Apoi generează scoruri și oferă recomandări pentru îmbunătățirea optimizării site-ului.
Alte instrumente excelente de testare a vitezei pe care le pot recomanda includ Pingdom Website Speed Test și WebPageTest și Testează-ți viteza mobilă.
Minimizarea manuală a fișierelor
Minimizarea manuală a fișierelor necesită o cantitate considerabilă de timp și efort. Adică, cine are timp să elimine spațiile albe individuale, liniile și codul inutil din fișiere? Plictisitor! De asemenea, permite mai mult spațiu pentru erorile umane. Așa că nu aș recomanda această metodă pentru minimizarea fișierelor.
Din fericire, există multe instrumente gratuite de minificare online care vă permit să copiați și să inserați cod de pe și în site-ul dvs. Iată o listă scurtă de instrumente și vă încurajez să căutați alte opțiuni care ar putea funcționa mai bine pentru site-ul dvs.
1. Minificatorul HTML al lui Will Peavy
HTML Minifier este un instrument online gratuit pentru minimizarea HTML, construit cu PHP. Pentru a utiliza instrumentul, pur și simplu inserați codul HTML în zona de text, inclusiv orice CSS de JavaScript din marcaj și faceți clic pe butonul „Minify”. Pentru a vă asigura că scripturile dvs. funcționează după minimizare, se recomandă să terminați instrucțiunile JavaScript cu punct și virgulă și să utilizați sintaxa* *pentru comentarii.
2. CSS Minifier
Un alt instrument gratuit, CSS Minifier funcționează prin reducerea CSS pe care îl copiați și lipiți în zona de text „Introducere CSS”. Există opțiuni pentru descărcarea rezultatului minimizat ca fișier. Pentru dezvoltatori, acest instrument oferă și un API.
3. JSCompress
JSCompress este un compresor JavaScript online care vă permite să comprimați și să micșorați fișierele dvs. JS cu până la 80% din dimensiunea lor originală. Pentru a-l folosi, copiați și inserați codul sau încărcați și combinați mai multe fișiere și apoi faceți clic pe „Comprimați JavaScript”. Acest instrument se bazează pe UgliifyJS 3 și babili-standalone.
Instrumente manuale de minimizare pentru dezvoltatori
Pentru dezvoltatorii care caută opțiuni mai avansate, Google recomandă aceste resurse de minimizare HTML, CSS și JavaScript:
- HTMLMinifier – Un compresor/minifier HTML bazat pe Javascript (cu suport Node.js).
- CSSNano – Un minificator modular, construit pe deasupra ecosistemului PostCSS.
- csso – Un minificator CSS cu optimizări structurale.
- UglifyJS – Un parser JavaScript, mangler, compresor și un set de instrumente pentru „înfrumusețare”.
Closure Compiler de la Google este un instrument de optimizare pentru JavaScript. În loc să compileze dintr-un limbaj sursă în codul mașinii, se compilează din JavaScript pentru a face JavaScript mai bun. Îți analizează codul, îl analizează, elimină codul mort și rescrie și minimizează ceea ce a mai rămas. Acest instrument verifică, de asemenea, sintaxa, referințele variabilelor și tipurile și avertizează despre capcanele JavaScript comune.
Minimizarea fișierelor cu pluginuri
Există câteva plugin-uri grozave disponibile, atât gratuite, cât și premium, care vă pot reduce fișierele fără a fi necesar să efectuați pași manuali.
Notă: pentru această listă, am inclus doar pluginuri gratuite care sunt disponibile în Depozitul de pluginuri WordPress care sunt actualizate și testatecompatibile cu cele mai recente versiuni de WordPress. Pentru opțiuni premium, derulați în jos./
1. Minimizarea HTML
Acest plugin simplu, ușor și fără probleme vă permite să minimizați rezultatul HTML al site-ului dvs. Pentru a-l folosi, tot ce trebuie să faceți este să instalați și să activați pluginul, iar acesta vă va reduce automat marcajul fără a fi nevoie să configurați nicio setare.
2. Minimizează HTML
Îmi place descrierea WordPress.org pentru acest plugin: „V-ați uitat vreodată la marcajul HTML al site-ului dvs. și ați observat cât de neglijent și amator arată?” Acest plugin curăță și minimizează marcajul neglijent.
Spre deosebire de pluginul HTML Minify, acest instrument oferă mai multe opțiuni. Include minimizarea opțională pentru JavaScript și CSS, deși nu se încurcă cu zonele de text sau cu textul preformatat. Există, de asemenea, opțiuni pentru eliminarea comentariilor HTML, CSS și JavaScript (lăsând comentariile condiționate MSIE), eliminarea etichetelor de închidere XHTML inutile din elementele HTML5 void și eliminarea schemelor și domeniilor relative inutile din linkuri.
3. Merge + Minify + Refresh — Pluginuri WordPress
Acest plugin face mai mult decât să vă minimizeze codul. Acesta combină fișierele dvs. CSS și JavaScript șiapoireduce fișierele generate folosind Minify (pentru CSS) și Google Closure (pentru JavaScript). Minificarea se realizează prin WP-Cron, astfel încât să nu afecteze viteza site-ului dvs.
Când conținutul fișierelor dvs. CSS sau JS se modifică, ele sunt reprocesate, astfel încât nu este nevoie să vă goliți memoria cache. Utilizatorii multisite vor fi bucuroși să afle că acest plugin funcționează bine în rețele.
4. JCH Optimize
JCH Optimize are o mulțime de caracteristici frumoase pentru un plugin gratuit: combină și minimizează CSS și JavaScript, minimizează HTML, există compresie GZip pentru fișiere combinate, generare de sprite pentru imagini de fundal și poți exclude anumite fișiere de la combinare pentru a rezolva conflictele.
Există o versiune pro disponibilă cu mai multe funcții de optimizare, inclusiv încărcarea JavaScript asincron, optimizarea livrării CSS pentru a elimina blocarea randării, suport pentru domeniile CDN/fără cookie-uri și încărcare leneră și optimizare pentru imagini.
5. Minimizare CSS
Minimizarea CSS-ului cu acest plugin nu ar putea fi mai ușoară – instalați, activați, accesațiSetări > Minimizare CSSpentru a activa o singură opțiune: Optimizați și reduceți codul CSS.
Codul din acest plugin a fost bifurcat de la popularul plugin Autoptimize (mai multe despre acest plugin mai jos). Autorul pluginului, Peter Pfeiffer, are un plugin similar disponibil pentru JavaScript, Minify JavaScript.
6. Minimizare rapidă a vitezei
Cu peste 20.000 de instalări active și o evaluare de cinci stele, aceasta este una dintre cele mai populare opțiuni disponibile pentru reducerea fișierelor. Pentru a-l folosi, instalați și activați pluginul și accesațiSetări > Minimizare rapidă a vitezei. Acolo, veți găsi un teanc de opțiuni pentru configurarea pluginului, inclusiv opțiuni avansate pentru dezvoltatori JavaScript și excepții CSS, opțiuni CDN, precum și informații despre server. Cu toate acestea, setările implicite funcționează foarte bine pentru majoritatea site-urilor.
Pluginul efectuează minificarea în timp real pe front-end și numai în timpul primei solicitări necache. Odată ce prima solicitare este procesată, orice alte pagini care necesită același set de CSS și JavaScript vor primi același fișier cache static.
7. Optimizare automată
Cu peste 400.000 de instalări active, Autoptimize este cu ușurință cel mai popular instrument de minimizare din arhiva de pluginuri WordPress.
Autoptimize poate agrega, reduce și stoca în cache scripturi și stiluri, poate injecta CSS în antetul paginii în mod implicit și, de asemenea, poate muta și amâna scripturile la subsol. Există o mulțime de opțiuni avansate pentru dezvoltatori și un API extins disponibil, astfel încât să puteți personaliza Autoptimize pentru a satisface nevoile specifice ale site-ului dvs.
8. Optimizarea vitezei paginii Hummingbird
Hummingbird este un plugin relativ nou pentru WordPress Plugin Repository, care a început ca un plugin premium. Versiunea gratuită oferă o colecție grozavă de instrumente de optimizare a site-ului, inclusiv minimizarea, permițându-vă să micșorați, să poziționați și să combinați fișierele pentru performanțe de top.
Există, de asemenea, o funcție excelentă de scanare care vă permite să testați performanța site-ului dvs. și să obțineți recomandări utile pentru îmbunătățirea site-ului dvs., chiar din cadrul pluginului.
Minimizarea ca caracteristică în pluginurile de cache WordPress
Minificarea este, în general, o caracteristică standard pe care o veți găsi în pluginurile de cache. Iată pluginurile pe care le-am testat și pe care le pot recomanda:
- WP Rocket
- Cache total W3
- WP Super Cache
Concluzie
Sper că acest articol a demistificat minificarea pentru tine și a oferit o înțelegere solidă a ceea ce este și cum o poți aplica pe site-ul tău.
Este important să rețineți că minimizarea este mai degrabă un pas de reglare fină – este posibil să observați o mică îmbunătățire a vitezei site-ului dvs., dar nu va fi semnificativă. Acestea fiind spuse, este cea mai bună practică care merită implementată pe lângă alte tehnici de performanță și optimizare, cum ar fi combinarea fișierelor.
De asemenea, asigurați-vă că configurați, testați, reconfigurați, retestați, modificați și verificați ce funcționează cel mai bine pentru site-ul dvs. atunci când vă reduceți fișierele, deoarece fiecare site web este diferit.
Dacă ți-a plăcut această postare, consultați 6 cele mai bune pluginuri de caching WordPress comparate pentru mai multe sfaturi despre cum să vă accelerați site-ul.
Ați încercat să micșorați codul? Ce alte metode pentru a vă face site-ul mai rapid ați folosit? Spune-ne în secțiunea de comentarii de mai jos!