Želite li komprimirati svoje CSS, HTML i javascript datoteke na WordPress-u?
Kada komprimirate CSS, HTML i Javascript datoteke svoje web lokacije, možete uštedjeti dragocjeno vrijeme na brzini učitavanja stranice vaše web stranice. Sada ne govorimo o smanjenju brzine učitavanja stranice na pola ili o nečemu drugom, ali kada je u pitanju brzina web stranice, bilo koje malo je važno.
Brzina učitavanja vaše web stranice nije važna samo za nove posjetitelje, već i za rangiranje na pretraživačima.
Termin "umanjitiU programskom jeziku opisuje postupak uklanjanja nepotrebnih znakova iz izvornog koda. Ovi znakovi uključuju razmake, prelome redaka, manje komentara i blokirati razgraničivače koji su korisni za nas ljude, ali beskorisni za mašine.
Umanjujemo datoteke web stranice koje sadrže CSS, HTML i JavaScript kôd tako da ih vaš web preglednik može brže čitati.
Pročitajte i naš članak o 10 WordPress dodatke za poboljšanje brzine vašeg blog-a
Evo primjera minifikacije CSS-a.
CSS pre minifikacije
/ * Primer CSS datoteke ---------------------------------- * / .user-profile-card { margin: 0px; pozadina: #33E43} .user-profile-description {granica: 0; položaj: apsolutni; širina: auto; margin-top: 20px; }
CSS nakon minifikacije
.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}
Očito je da je ovo samo mali primjer korištenja CSS isječka, ali možete zamisliti koliko bi prostora uštedio smanjujući hiljade redaka koda.
Kako povećati vrijeme provedeno na svom WordPress blogu? Doznajte savjetovanjem u ovom članku.
Dakle, ako to želite ručno, tehnički možete. Ali riskirat ćete visok rizik i nepotrebno gubiti dragocjeno vrijeme!
Slijedite ove savjete i koristite alate koji su vam na raspolaganju.
Neki alati za izvođenje kompresije
Srećom, ne morate nužno biti programer ili znati jedan od programskih jezika da biste smanjili veličine datoteka svoje web stranice. Minifikacija je postala uobičajena praksa u svijetu web dizajna. Stoga se ne biste trebali iznenaditi kad saznate da postoji mnogo prekrasnih (i besplatnih) alata koji će posao obaviti umjesto vas.
Pogledajte i naše 6 WordPress dodataka koji će udahnuti novi život vašim člancima
Evo popisa korisnih alata za početak. Budući da mnogi od njih mogu minimizirati više vrsta koda, u zagrade sam uključio opcije tipa koda.
-
- cssminifier.com et javascript-minifier.com (CSS i JS) - Ova dva minifigera Andrewa Chiltona jednostavna su za upotrebu. Samo trebate zalijepiti svoj kôd, a zatim kliknite gumb umanjiti za prikaz komprimiranog koda. Možete čak i preuzeti izlazni kôd kao datoteku radi praktičnosti.
- htmlcompressor.com (HTML, CSS i JS) - Ovaj mrežni alat za kompresiju / minifikaciju podržava vrste HTML, CSS i JS kodova. Čak podržava različite kombinacije tipova koda kao što su CSS + PHP i JavaScript + PHP. Možete čak i provjeriti komprimirani kôd za pogreške.
-
- csscompressor.net (Samo CSS) - Ovaj mrežni CSS kompresor je brz, jednostavan i besplatan za upotrebu.
-
- jscompress.com (Samo JS) - Ovaj JavaScript alat za kompresiju omogućava vam komprimiranje JavaScript koda kopiranjem i lijepljenjem, ali istovremeno možete preuzeti i više JavaScript datoteka. Ovo je idealno za kombiniranje JavaScript datoteka u jednu datoteku radi veće brzine učitavanja stranice.
- Dan's Tools - Dan's Tools predlaže un umanji CSS i minify JavaScript . Oba alata imaju zaista čisto i jednostavno za upotrebu korisničko sučelje. Ne nude napredne opcije, ali su izvrsne za uobičajene svrhe minifikacije.
-
- refresh-sf.com (HTML, CSS i JS) - Ovaj kompresor će smanjiti tipove JavaScript, CSS i HTML koda. Također uključuje sve mogućnosti kompresije za svaku vrstu koda ako su vam potrebne.
- Zatvaranje kompajler (Samo JS) - Kompajler za zatvaranje je dio Alati za zatvaranje , paket alata od Google Developers. Omogućava vam da minimizirate svoj JavaScript zajedno s drugim korisnim optimizacijama. Možete koristiti svoj Javascript kod tako što ćete unijeti URL lokacije js datoteke, a zatim odabrati kako želite da se kod optimizira i formatira.
Na primjer, odlučite optimizirati svoj kôd da biste uklonili samo praznine ako želite. Jednom kada kliknete na tipku za kompajliranje, smanjit će vam kôd (ili ga kompilirati).
-
- minifycode.com (HTML, CSS i JS) - Ova web stranica nudi minifirere za JavaScript , CSS et HTML s jednostavnim i čistim korisničkim sučeljem koje komprimira vaš kôd jednim klikom. Također nudi alat za uljepšavanje kako bi se dekomprimirani kôd učinio čitljivijim (suprotno od smanjenja).
Ako tražite izvanmrežne alate za smanjivanje lokalnog CSS-a ili JavaScript HTML-a, evo nekoliko opcija:
- phpied.com/cssmin-js/ (Samo CSS)
- yui.github.io/yuicompressor (JS i CSS)
Kako smanjiti veličinu HTML-a, CSS-a i JavaScript-a pomoću mrežnog alata
Mnogi od ovih mrežnih alata imaju sličan postupak koji uključuje sljedeće korake:
- Zalijepite svoj izvorni kôd ili preuzmite datoteku izvornog koda.
- Optimizirajte postavke za određeni izlaz (ako su dostupne opcije)
- Kliknite gumb za komprimiranje koda.
- Kopirajte rezultat minificiranog koda ili preuzmite datoteku sa izmenjenim kodom.
Za ovaj primjer, koristit ću alate minify iz minifycode.com.
Vidi takođe: Kako dodati CSS sigurno na WordPress savjetujući ovu vezu.
Prvo pronađite CSS datoteku (uobičajeno zvanu style.css) u datotekama vaše web stranice i otvorite je pomoću uređivača stranica. Zatim kopirajte sav CSS kôd u međuspremnik.
Idite minifycode.com i kliknite na karticu CSS minifier. Zatim zalijepite CSS kôd u okvir za unos i kliknite gumb Smanjite CSS.
Jednom kada se generira novi minificirani kôd, kopirajte ga.
Zatim se vratite na CSS datoteku vaše web lokacije i zamijenite kôd novom pojednostavljenom verzijom.
To je sve!
Ponovite isti postupak da biste umanjili i JavaScript i HTML datoteke na vašem web mjestu.
Kako minimizirati HTML, CSS i JavaScript u WordPressu pomoću dodataka
Najlakši način da umanjite HTML, CSS i JavaScript u WordPressu je upotreba dodatka. To vam omogućava automatsku optimizaciju datoteka WordPress web stranica kako biste smanjili vrijeme učitavanja stranice sa samo nekoliko klikova na gumb.
Postoji mnogo dodataka koji će završiti posao, ali ukratko ću spomenuti nekoliko primjera.
Automatski optimizirajte (BESPLATNO)
Autoptimize je vjerovatno WordPress dodatak od najpopularnijih minijatura. Popularan je jer je jednostavan za korištenje i prepun moćnih funkcija. Može spajati (kombinirati skripte), minimizirati i keširati vaš kod. Kao bonus, imate dodatne opcije za optimizaciju Google fontova, slika itd.
Da biste koristili Automatsko optimiziranje, možete preuzeti, instalirati i aktivirati dodatak s nadzorne ploče WordPressa ispod Dodatak> Dodaj novi.
Za više informacija pogledajte naš vodič na: Kako instalirati plugin u WordPress
Nakon što se dodatak aktivira, idite na Postavke> Automatska optimizacija. Zatim na kartici Glavni parametri označite kod koji želite optimizirati (HTML, CSS i / ili JavaScript) i kliknite na Espremite promjene.
Možete kliknuti i na dugme Prikaži napredne postavke na vrhu stranice za daljnju prilagodbu optimizacije koda.
To je manje-više to! Prilično jednostavno i moćno.
W3 Total cache (BESPLATNI)
W3 Ukupno Cache je odličan dodatak za predmemoriranje koji nudi mogućnost minimiziranja vaših HTML, JS i CSS datoteka.
WP najbrži predmemorija (BESPLATNO)
WP Najbrži Cache - Ovaj dodatak WordPress keširanje je izuzetno popularno sa visokim kritikama. Obavlja različite optimizacije performansi, uključujući kombiniranje i smanjenje HTML CSS-a i JavaScript-a za bolje performanse.
Pročitajte i naš članak o 8 WordPress dodatke za dodavanje živog chat-a na svoj blog
Jednom kada je dodatak instaliran, jednostavno kliknite na karticu WP Najbrži Cache na bočnoj traci nadzorne ploče programa WordPress. Ispod kartice Postavke, naći ćete mogućnosti za kombiniranje i smanjenje HTML i CSS datoteka. Iako je minimiziranje JavaScript dostupno samo u pro verziji.
Da sumiram
Ako želite svoj blog učiniti bržim i imati bolje performanse, morate smanjiti veličinu HTML, CSS i JavaScript datoteka. Pomoću svih dostupnih mrežnih alata možete lako smanjiti kod bilo koje web stranice.
9 WordPress plugins za sakrivanje sadržaja vašeg bloga da se apsolutno otkrije
Za one koji koriste WordPress, na raspolaganju su vam moćni dodaci za automatsko minimiziranje ovih datoteka s nekoliko klikova.
Otkrijte i neke premium WordPress dodatke
Možete koristiti druge WordPress plugins da date moderan izgled i da optimizujete rukovanje vašim blogom ili web sajtom.
Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.
1. Stranica sa greškom 404 Preusmeravanje na početnu ili prilagođenu stranicu
Evo jednog od najboljih načina da lako dodate stranicu s pogreškom 404 koja će posjetitelja preusmjeriti na početnu stranicu ili personaliziranu stranicu nakon aktiviranja ovog dodatka. WordPress premium.
Sve 404 stranice grešaka preusmjerit će se na početnu stranicu ili na prilagođeni URL. Koristeći ovo WordPress dodatak, dozvolit ćete Googleu da smanji rang vaše web stranice ako ima mnogo stranica s greškom 404.
Otkrijte i vi Kako popraviti 413 grešku na WordPressu
Ce WordPress dodatak ne samo da radi preusmjeravanje, već može biti i prikladno rješenje za poboljšanje rangiranja vaše web stranice u rezultatima tražilice.
download | Demo | web hosting
2. Borlabs Cache
WordPress je platforma koju pokreće baza podataka koja dinamički generira sadržaj. Što više sadržaja i dodataka imate, to se više upita upita baze podataka. To može usporiti performanse vaše web stranice, posebno ako se vaša baza podataka nalazi na drugom poslužitelju.
Dodatak WordPress Borlabs Cache sprema dinamički generirani sadržaj kao statičku datoteku u memoriji vašeg servera. Kada se stranica zatraži, ova se statička datoteka učitava i šalje posjetitelju, što je znatno brže od uobičajenih upita baze podataka. Ali to nije sve.
Pogledajte i naše 5 WordPress plugins za čišćenje baze podataka vaše web stranice
Vaše stranice sadrže puno nepotrebnog bijelog prostora ili HTML komentara, što povećava ukupnu veličinu stranice. Borlabs cache uklanja ih sve i koristi GZIP za komprimiranje vaših stranica.
Discover Kako prikazati sve svoje WordPress publikacije na jednoj stranici
Mnogi dodaci imaju svoje JavaScript i CSS datoteke, što rezultira s više zahtjeva na vašem poslužitelju. Borlabs Cache kombinira sve te JavaScript i CSS datoteke tako da u najboljim slučajevima vaš posjetitelj mora učitati samo jednu JavaScript datoteku i jednu CSS datoteku.
download | Demo | web hosting
3. Multilingual Press
Multilingual Press radi sa instalacijom WordPress-a na više lokacija i omogućava vam povezivanje prijevoda. Dodatak dolazi sa 174 jezika ugrađenih u menadžer jezika i podržava neograničen broj web stranica, tako da možete kreirati i povezati onoliko prijevoda koliko želite.
Ovo je dobro za SEO jer će vam to omogućiti da svoje jezike zadržite na zasebnim objavama i stranicama, a ako ikada odlučite koristiti drugačiji prijevod dodatka, vaš sadržaj ostaje netaknut (čak i nakon onemogućavanja ili uklanjanja dodatka Multilingual Press). Pored toga, možete dodati vidžet za prevođenje kako biste lako prebacivali prevode.
Discover Kako dodati isječak koda pomoću Gutenberga na WordPressu
Multilingual Press je odlična besplatna opcija za dodavanje prijevoda na vašu WordPress stranicu putem višestrana. Pored toga, ako ikad ustanovite da vam trebaju dodatne mogućnosti, možete se odlučiti za pro verziju koja košta 75 dolara.
download | Demo | web hosting
Ostali preporučeni resursi
Također vas pozivamo da se konzultirate sa resursima u nastavku kako biste otišli dalje u nadzor i kontrolu vaše web stranice i bloga.
- Kako dodati naslov slici na Gutenbergu
- 6 WordPress dodatke za začinjanje vaših bočnih traka
- 10 WordPress dodataka za dodavanje upravitelja preuzimanja
- Šta razumjeti DDoS napade na WordPress
Moguće korištenje JS kompreso https://www.jsonformatting.com/js-minify/