Ako minifikovať HTML, CSS a JavaScript pomocou automatického doplnku

Google a ďalšie vyhľadávače dávajú vašim webom hodnotu, ak sa načítajú tak rýchlo. Pretože žiadny z divákov nemá veľa pacientov, aby dlho čakali na prezeranie vášho obsahu, stačí len 1,5 sekundy, aby ste upútali svoju pozornosť. Ak sa otvorenie vášho webu trvá dlho, zvyčajne prídete o svojich divákov. Preto je nevyhnutné zrýchliť vaše webové stránky. Existuje niekoľko spôsobov, ako môžete optimalizovať svoje stránky. Ale jednou z najdôležitejších častí je Minimalizujte HTML, CSS a JavaScript.


Ak ste niekedy urobili test rýchlosti Google PageSpeed alebo GTmetrix, pravdepodobne vidíte túto možnosť.

Každý obsah webovej stránky s množstvom súborov obsahuje HTML, CSS a JavaScript. A väčšina súborov obsahuje veľa miesta, komentáre, oddeľovače blokov atď. Takže správne načítanie trvá omnoho dlhšie.

Závisí to aj od kvality témy. Napríklad prémiová téma kvality vždy lepšia ako téma zadarmo. Prémiové témy sú dobre kódované a vytvorené vysoko kvalifikovanými vývojármi. Všetky témy však nie sú rovnaké a majú iný typ funkcií. Takže, podľa zmenšenie tieto súbory HTML, CSS a JavaScript, môžete strategicky zvýšiť rýchlosť svojich stránok a spríjemniť návštevníkom.

Čo je to Minify a prečo je to prospešné?

Minification je programovací jazyk, ktorý zo zdrojového kódu odstraňuje všetky nepotrebné znaky bez zmeny jeho funkcie. Tieto nepotrebné znaky zvyčajne obsahujú „znaky medzery, nové riadkové znaky, komentáre, a oddeľovače blokov “. 

Pred minifikáciou a po minifikácii

Používajú sa na zvýšenie čitateľnosti kódu, ale nevyžadujú sa na jeho vykonanie. Týmto spôsobom sa zníži množstvo kódu, ktorý sa musí preniesť cez web, a ušetrí sa tak šírka pásma. Takže tým minimalizovanie HTML, CSS a JavaScript, môžete ľahko odstrániť tieto zbytočné znaky z vášho webu a výrazne zvýšiť rýchlosť vášho webu. 

Ako minifikovať HTML, CSS a JavaScript

Existujú dva spôsoby, ako môžete minifikovať HTML, CSS & JavaScript. Môžete to urobiť úpravou kódu témy alebo môžete použiť doplnok WordPress s názvom Autoptimize. V tomto článku vám ukážeme oba procesy Ako minifikovať HTML, CSS a JavaScript.

Ak chcete poznať presný súbor HTML, CSS alebo JavaScript, ktorý spôsobuje problém, musíte ho skontrolovať na ľubovoľnom nástroji na testovanie rýchlosti stránok, ako je napríklad Nástroj Google PageSpeed alebo GTmetrix. Pretože nie všetky vaše súbory obsahujú tieto typy nepotrebných znakov.

Po skontrolovaní výsledku svojej stránky ju získate. Nižšie uvádzam obrázok, ktorý posudzujem stanovenie CSS a JavaScript.

Miniatúra Css, JavaScript

Znižuje to kvalitu vašej témy. Takže sa nemusíte báť, ak uvidíte, že obaja sú povedaní Minify a je lepšie získať prémiovú tému.

Existuje niekoľko online nástrojov, pomocou ktorých môžete minifikovať kód HTML, CSS a JavaScript. 

Pred vykonaním akýchkoľvek zmien si vytvorte zálohu tohto súboru.

# 1 Kód minifikácie:

Nástroj na zmenšenie kódu

Kód minifikácie je nástroj All in One minifying. Môže minifikovať vaše kódy JavaScript, CSS a HTML. Všetko, čo potrebujete, skopírujte kód HTML alebo CSS alebo JavaScript a vložte ho sem. Potom kliknite na Minifikovat Option. Tento nástroj automaticky minifikuje váš kód. Potom skopírujte kód Minifikovaný do tohto súboru.

Pomocou tohto nástroja môžete tiež zmenšiť kód CSS a JavaScript, napríklad HTML kód.

# 2 Willpeavy:

Willpeavy

Willpeavy je ďalší skvelý nástroj Minifikujte HTML kódy. Tento nástroj funguje rovnako ako kód minifikácie. Minifikuje HTML a všetky CSS alebo JS, ktoré sú súčasťou vašej značky. Ak chcete použiť tento nástroj, musíte skopírovať kód tu a kliknite na tlačidlo Minifikovať.

Minifikujte pomocou doplnku automatického optimalizovania

Autoptimize

Ak nie ste oboznámení s takýmto kódovaním, je lepšie použiť doplnok a odporúčaný pre začiatočníkov. Takže tu je Automatické dopĺňanie doplnku pre WordPress užívatelia.

Automatická optimalizácia zreťazí všetky skripty a kódy štýlov a zmenší ich tak, aby sa načítali tak rýchlo. Minimalizuje všetky HTML, CSS & Samotný Javascript kód a vaša stránka sú skutočne ľahké. Vďaka minifikácii tento doplnok pridá hlavičky stránky vyprší hlavičky a presunie štýly a dokáže presúvať skripty do päty.

Automatické nastavenie odporúčaní

Všetky nastavenia môžete ľahko robiť z nastavení doplnku. Po aktivácii tohto doplnku prejdite na stránku nastavenie> Autoptimize.  Kliknite na tlačidlo „Zobraziť rozšírené nastavenia“.

V HTML v sekcii „Optimalizovať kód HTML“ a „Zachovať komentáre HTML“, aby ste dosiahli vyšší výkon.

Automatické optimalizovanie možností HTML

V JavaScript v sekcii „Optimalizovať kód JavaScript“. Môžete tiež povoliť „Vynútiť JavaScript“, aby načítal JS čoskoro a znížil pravdepodobnosť chýb JS. V prípade, že vaše skripty JS porušujú skripty, môžete povoliť „Pridať zalomenie try-catch“.
Automatické optimalizovanie možností jazyka JavaScript

v CSS v sekcii „Optimalizovať kód CSS“, „Tiež agregovať vložené CSS“. Ak ste minifikovali CSS, môžete tiež povoliť funkciu „Inline and Defer CSS“. Vyskúšajte tento nástroj na zmenšenie CSS a prilepte ho do poľa.

Automatické optimalizovanie možností CSS

Zadajte svoje CDN URL v poli „Základná adresa URL CDN“. Napríklad „//cdn.example.com/“.

A nakoniec povoľte „Uložiť agregovaný skript / css ako statický súbor“. Váš webový server však dokáže správne zvládnuť kompresiu a vypršanie platnosti.

Automatické optimalizovanie možností CDN

Po minifikácii kódu nezabudnite znova skontrolovať rýchlosť svojich stránok. Potom to porovnajte s predchádzajúcimi výsledkami. Ak sa na vašom webe vyskytne problém alebo sa nezobrazuje správne, môžete skúsiť vyčistiť cache

záver

Minimalizácia kódu HTML, CSS a JS je prospešný pre vaše stránky. Odstráni nepotrebné znaky kódu a zmenší ich tak, aby vyhovovali prehliadaču. Týmto spôsobom môžete zvýšiť rýchlosť načítania stránok.

Ak tento návod pomáha pri minifikácii HTML, CSS a JavaScript, zdieľajte tento článok Facebook, cvrlikání, Google+.

Súvisiace články,

  • Ako využiť vyrovnávaciu pamäť prehliadača na WordPress
  • Ako optimalizovať databázu WordPress pomocou WP-Sweep
  • 7 najlepších optimalizátorov obrázkov pre WordPress 2017
  • Ako ľahko povoliť kompresiu gzip v WordPress pre rýchlejšie načítanie
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map