Doriți să vă comprimați fișierele CSS, HTML și javascript pe WordPress?
Când comprimați fișierele CSS, HTML și Javascript ale site-ului dvs. web, puteți economisi timp prețios pe viteza de încărcare a paginii site-ului dvs. web. Acum, nu vorbim despre reducerea vitezei de încărcare a paginii în jumătate sau nimic, dar când vine vorba de viteza site-ului dvs. web, orice contează.
Viteza de încărcare a site-ului dvs. web este importantă nu numai pentru vizitatorii noi, ci și pentru clasamentele motoarelor de căutare.
Termenul "miniÎn limbajul de programare se descrie procesul de eliminare a caracterelor inutile din codul sursă. Aceste caractere includ spații, întreruperi de linie, comentariile și blochează delimitatoarele care sunt utile pentru noi oamenii, dar inutile pentru mașini.
Micșorăm fișierele unui site web care conțin cod CSS, HTML și JavaScript, astfel încât browserul dvs. web să le poată citi mai repede.
Citiți și articolul nostru pe plugin-uri WordPress 10 pentru a îmbunătăți viteza de blog-ul dvs.
Iată un exemplu de minificare CSS.
CSS înainte de minificare
/ * Un exemplu de fișier CSS ---------------------------------- * / .user-profile-card { Marja: 0px; background: #33E43} .user-profil-descriere {margine: 0; poziția: absolută; lățime: auto; margin-top: 20px; }
CSS după minificare
.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}
Evident, acesta este doar un mic exemplu folosind un fragment CSS, dar vă puteți imagina cât spațiu ar economisi atunci când micșorați mii de linii de cod.
Cum să crești timpul petrecut pe blogul tău WordPress? Aflați consultând acest articol.
Deci, dacă doriți să o faceți manual, din punct de vedere tehnic puteți. Dar vei risca un risc mare de eroare și îți vei pierde timpul prețios inutil!
Urmați aceste sfaturi și folosiți instrumentele la dispoziție.
Unele instrumente pentru a efectua compresia
Din fericire, nu trebuie neapărat să fii dezvoltator sau să cunoști unul dintre limbajele de programare pentru a reduce dimensiunile fișierelor site-ului tău web. Minificarea a devenit o practică obișnuită în lumea designului web. Deci, nu ar trebui să fiți surprinși să aflați că există multe instrumente minunate (și gratuite) acolo pentru a face treaba pentru dvs.
Vezi și nostru 6 plugin-uri WordPress pentru a da o viață nouă articolelor tale
Iată o listă de instrumente utile pentru a începe. Deoarece multe dintre acestea pot minimiza mai multe tipuri de cod, am inclus opțiunile de tip cod între paranteze.
-
- cssminifier.com et javascript-minifier.com (CSS și JS) - Aceste două minifiere de Andrew Chilton sunt ușor de utilizat. Trebuie doar să lipiți codul, apoi să faceți clic pe buton Maxify pentru a afișa codul comprimat. Puteți descărca chiar și codul de ieșire ca fișier pentru comoditate.
- htmlcompressor.com (HTML, CSS și JS) - Acest instrument de compresie / minimizare online acceptă tipuri de cod HTML, CSS și JS. Suportă chiar și diferite combinații de tipuri de coduri, cum ar fi CSS + PHP și JavaScript + PHP. Și puteți verifica chiar și codul comprimat pentru erori.
-
- csscompressor.net (Numai CSS) - Acest compresor CSS online este rapid, ușor și gratuit de utilizat.
-
- jscompress.com (Numai JS) - Acest instrument de compresie JavaScript vă permite să comprimați codul JavaScript prin copiere și lipire, dar puteți descărca mai multe fișiere JavaScript simultan. Acest lucru este ideal pentru combinarea fișierelor JavaScript într-un singur fișier pentru o viteză mai mare de încărcare a paginii.
- Uneltele lui Dan - Uneltele lui Dan propune ONU miniaturizarea CSS și minify JavaScript . Ambele instrumente au o interfață de utilizator foarte curată și ușor de utilizat. Nu oferă opțiuni avansate, dar sunt excelente în scopuri obișnuite de reducere.
-
- refresh-sf.com (HTML, CSS și JS) - Acest compresor va reduce tipurile de cod JavaScript, CSS și HTML. De asemenea, include toate opțiunile de compresie pentru fiecare tip de cod, dacă aveți nevoie de ele.
- Închidere compilator (Doar JS) - Compilatorul de închidere face parte din Instrumente de închidere , o suită de instrumente de la Google Developers. Vă permite să reduceți JavaScript împreună cu alte optimizări utile. Puteți utiliza codul Javascript introducând adresa URL a locației fișierului js și apoi alegeți cum doriți să fie optimizat și formatat codul.
De exemplu, alegeți să vă optimizați codul pentru a elimina semifabricatele numai dacă doriți. După ce ați făcut clic pe butonul de compilare, acesta va reduce codul (sau îl va compila) pentru dvs.
-
- minifycode.com (HTML, CSS și JS) - Acest site web oferă minifiere pentru JavaScript , CSS et HTML cu o interfață de utilizator simplă și curată care comprima codul dvs. cu un singur clic. De asemenea, oferă un instrument de „înfrumusețare” pentru a decomprima codul minificat pentru a-l face mai lizibil (opusul minificării).
Dacă sunteți în căutarea unor instrumente offline pentru a minimaliza CSS-ul sau JavaScript-ul HTML local, iată câteva opțiuni:
- phpied.com/cssmin-js/ (Numai CSS)
- yui.github.io/yuicompressor (JS și CSS)
Cum să reduceți dimensiunea HTML, CSS și JavaScript folosind un instrument online
Multe dintre aceste instrumente online au un proces similar care implică următorii pași:
- Lipiți codul sursă sau descărcați fișierul cod sursă.
- Optimizați setările pentru o anumită ieșire (dacă sunt disponibile opțiuni)
- Faceți clic pe un buton pentru a comprima codul.
- Copiați rezultatul codului minificat sau descărcați fișierul codificat.
Pentru acest exemplu, voi folosi instrumentele minify din minifycode.com.
Vezi și: Cum de a adăuga un cod CSS în condiții de siguranță pe WordPress consultând acest link.
Mai întâi, localizați fișierul CSS (cunoscut în mod obișnuit ca style.css) în fișierele site-ului dvs. și deschideți-l folosind un editor de pagini. Apoi copiați tot codul CSS în clipboard.
du-te la minifycode.com și faceți clic pe fila CSS minifier. Apoi lipiți codul CSS în caseta de introducere și faceți clic pe buton Minimizează CSS.
Odată ce noul cod minificat este generat, copiați-l.
Apoi reveniți la fișierul CSS al site-ului dvs. web și înlocuiți codul cu noua versiune simplificată.
Asta este!
Repetați același proces pentru a reduce, de asemenea, fișierele JavaScript și HTML ale site-ului dvs. web.
Cum să minimalizați HTML, CSS și JavaScript în WordPress folosind pluginuri
Cel mai simplu mod de a vă minimiza HTML, CSS și JavaScript în WordPress este să utilizați un plugin. Acest lucru vă permite să optimizați automat fișierele site-ului dvs. WordPress pentru a reduce timpul de încărcare a paginii cu doar câteva clicuri pe butoane.
Există o mulțime de pluginuri care vor face treaba, dar voi menționa pe scurt câteva exemple.
Autoptimize (GRATUIT)
Autoptimize este probabil WordPress plug-in dintre cele mai populare minify. Este popular deoarece este ușor de utilizat și este dotat cu funcții puternice. Poate combina (combina scripturi), reduce și poate stoca în cache codul. Ca bonus, aveți opțiuni suplimentare pentru a optimiza fonturile Google, imaginile etc.
Pentru a utiliza Autoptimize, puteți descărca, instala și activa pluginul din tabloul de bord WordPress de mai jos Plugin> Adaugă nou.
Pentru mai multe informații, consultați ghidul nostru despre: Cum se instalează un plug-in WordPress
După ce pluginul este activat, accesați Setări> Optimizare automată. Apoi, sub fila Parametri principali, verificați codul pe care doriți să-l optimizați (HTML, CSS și / sau JavaScript) și faceți clic pe Esalvați modificările.
De asemenea, puteți da clic pe buton Afișați setări avansate în partea de sus a paginii pentru a vă personaliza în continuare optimizarea codului.
Este mai mult sau mai puțin asta! Destul de simplu și puternic.
Cache totală W3 (GRATUIT)
W3 total Cache este un plugin excelent de memorie în cache care oferă posibilitatea de a reduce fișierele HTML, JS și CSS.
Cache cel mai rapid WP (GRATUIT)
Cel mai rapid WP Cache - Acest plugin WordPress cache este extrem de popular cu recenzii mari. Realizează diferite optimizări ale performanței, inclusiv combinarea și reducerea HTML CSS și JavaScript pentru o performanță mai bună.
Citiți și articolul nostru pe plugin-uri WordPress 8 pentru a adăuga un live chat pe blog
După instalarea pluginului, faceți pur și simplu clic pe filă Cel mai rapid WP Cache în bara laterală a tabloului de bord WordPress. Sub filă setări cont, veți găsi opțiuni pentru combinarea și reducerea fișierelor HTML și CSS. Deși minarea JavaScript este disponibilă numai în versiunea pro.
Pentru a rezuma
Dacă doriți să vă faceți blogul mai rapid și să aveți o performanță mai bună, trebuie să reduceți dimensiunea fișierelor HTML, CSS și JavaScript. Cu toate instrumentele online disponibile, puteți reduce cu ușurință codul oricărui site web.
9 pluginurile WordPress pentru a ascunde conținutul blogului tău a descoperi absolut
Pentru cei care folosesc WordPress, aveți la dispoziție plugin-uri puternice pentru a minimiza aceste fișiere în mod automat cu câteva clicuri.
Descoperiți și câteva plugin-uri premium WordPress
Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.
Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.
1. Pagină de eroare 404 Redirecționați către pagina de pornire sau pagina personalizată
Iată una dintre cele mai bune metode de a adăuga cu ușurință o pagină de eroare 404, care va redirecționa vizitatorul către pagina principală sau pagina personalizată, după activarea acestui plugin. WordPress premium.
Toate cele 404 de pagini de eroare vor fi redirecționate către pagina de pornire sau către o adresă URL personalizată. Folosind aceasta WordPress plug-in, veți permite Google să reducă pagerank-ul site-ului dvs. dacă are multe pagini de eroare 404.
Descoperă și tu Cum să remediați eroarea 413 pe WordPress
Ce WordPress plug-in nu face doar redirecționare, ci poate fi și o soluție potrivită pentru a îmbunătăți clasarea site-ului dvs. în rezultatele motoarelor de căutare.
Descarca | Demo | web hosting
2. Borlabs Cache
WordPress este o platformă alimentată de o bază de date care generează conținut dinamic. Cu cât aveți mai mult conținut și pluginuri, cu atât mai multe interogări în baza de date sunt executate. Acest lucru poate încetini performanța site-ului dvs. web, în special atunci când baza de date se află pe un server diferit.
Pluginul Cache Borlabs WordPress salvează conținut generat dinamic ca fișier static în memoria serverului. Când pagina este solicitată, acest fișier static este încărcat și trimis vizitatorului, ceea ce este mult mai rapid decât interogările obișnuite ale bazelor de date. Dar asta nu este totul.
Vezi și nostru 5 WordPress plugin-uri pentru a vă curăța baza de date a site-ului dvs
Paginile dvs. conțin o mulțime de spații albe inutile sau comentarii HTML, ceea ce crește dimensiunea generală a paginii. Borlabs Cache le elimină pe toate și folosește GZIP pentru a comprima paginile.
Descopera Cum să afișați toate mesajele dvs. WordPress pe o singură pagină
Multe plugin-uri au propriile fișiere JavaScript și CSS, ceea ce duce la mai multe solicitări pe serverul dvs. Borlabs Cache combină toate aceste fișiere JavaScript și CSS, astfel încât, în cel mai bun caz, vizitatorul dvs. trebuie să încarce doar un fișier JavaScript și un singur CSS.
Descarca | Demo | web hosting
3. Presă multilingvă
Multilingual Press funcționează cu o instalare multisite de WordPress și vă permite să conectați traduceri. Pluginul vine cu 174 de limbi încorporate în managerul de limbi și acceptă un număr nelimitat de site-uri web, astfel încât să puteți crea și lega câte traduceri doriți.
Acest lucru este bun pentru SEO deoarece acest lucru vă va permite să vă păstrați limbile pe postări și pagini separate și, dacă decideți vreodată să utilizați o traducere diferită a pluginului, conținutul dvs. rămâne intact (chiar și după dezactivarea sau eliminarea pluginului Multilingual Press). În plus, puteți adăuga un widget de traducere pentru a comuta ușor între traduceri.
Descopera Cum să adăugați un fragment de cod folosind Gutenberg pe WordPress
Multilingual Press este o opțiune gratuită excelentă pentru a adăuga traduceri pe site-ul dvs. WordPress prin intermediul multilocație. În plus, dacă descoperiți că aveți nevoie de mai multe opțiuni, puteți opta pentru versiunea pro, care costă 75 USD.
Descarca | Demo | web hosting
Alte resurse recomandate
De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.
- Cum să adăugați o legendă la o imagine de pe Gutenberg
- plugin-uri WordPress 6 condimenta barele laterale
- 10 plugin-uri WordPress pentru a adăuga un manager de descărcare
- Ce să înțelegem atacurile DDoS asupra WordPress
Este posibil să utilizăm JS compresso https://www.jsonformatting.com/js-minify/