Аптымізацыя JS і CSS кода сайта онлайн - падрабязнае кіраўніцтва

Надрукаваць · Время на чтение: 8мін · па · Апублікавана · Абноўлены

прайграцьПраслухаць артыкул

Аптымізацыя JS і CSS кода.

Аптымізацыя JS і CSS кода сайта, з'яўляецца адным з найбольш значных аспектаў тэхнічнай аптымізацыі сайта. Прычына гэтаму - вызваленне большай колькасці рэсурсаў сайта, дзякуючы памяншэнню зваротаў да базы дадзеных і палепшанай чытэльнасці самой структуры кода.

Як правіла, аптымізацыя JavaScript і CSS кода сур'ёзна павялічвае хуткасць водгуку сайта. Такім чынам сайт працуе хутчэй і нагружае серверную частку менш сур'ёзна.

JS і CSS код сайта - што гэта?

Як аптымізаваць JS і CSS.

JavaScript і CSS - Гэта распаўсюджаныя мовы праграмавання, кожны з якіх прыўносіць пэўны функцыянал на сайт. Дзякуючы выкарыстанню асноўных моў вэб праграмавання HTML, JS, CSS - дасягаецца ідэальнае ўзаемадзеянне карыстальніка з сайтам.

JavaScript - распаўсюджаная мова праграмавання. Дазваляе ствараць разнастайныя скрыпты. Большасць такіх скрыптоў выконваюцца ў браўзэры карыстальніка. JavaScript павялічвае ўзаемадзеянне карыстальніка з сайтам. Выносячы пэўны набор інфармацыі з дапамогай міні прыкладанняў (скрыптоў) на сайце. Візуалізацыя і выснова скрыптоў JS, адбываецца метадам падлучэння апошніх у HTML кодзе старонкі. Практычна ўсе сайты выкарыстоўваюць JS (JavaScript) у сваім складзе.

CSS — адносіцца да адной з асноўных моў праграмавання сайта. CSS (файл стыляў) - нясе ў сабе інфармацыю аб знешнім выглядзе практычна любога элемента сайта. Ад колеру і размяшчэння да праславутай анімацыі вызначанага элемента старонкі.

Аптымізацыя JS і CSS кода - навошта патрэбна?

JS і CSS – самі па сабе маюць дастаткова вялікі важкі код, які мае шмат лішняга. Браўзэру складана прачытаць у дзель секунду велізарнае палатно з кодаў. Такім чынам запавольваецца загрузка старонкі і ўсяго сайта ў цэлым. Аптымізацыя гэтых файлаў накіравана на памяншэнне памеру кода, адбываецца адсячэнне ўсяго лішняга. Гэта датычыцца:

  • Невыкарыстоўваныя і лішнія знакі;
  • Прабелы;
  • Ня скончаныя і не апорныя функцый радка кода.
Сам працэс падобны на сціск звычайнага файла. Вага і памер апошняга становіцца значна меншым. Але, тым не менш, код становіцца зусім не чытэльным для чалавека. А вось пошукавыя робаты і браўзэры выдатна абыходзяць і разумеюць усю структуру файла. Час затрачваецца на абыход скарачаецца ў некалькі разоў. Дзякуючы такому сціску, павялічваецца хуткасць загрузкі і паляпшаецца агульны водгук.

Модуль Gzip для Apache, Nginx і Node.js

Gzip - гэта дзіўная тэхналогія, створаная ў тыя часы, калі Інтэрнэт не быў такім высакахуткасным, як сёння. Архіватары былі папулярнай тэхналогіяй (з тых часоў іх папулярнасць знізілася, паколькі флэш-назапашвальнікі USB могуць падаваць да 1 ТБ памяці).

Ідэя складалася ў тым, каб выкарыстоўваць архіватары для вэб-трафіку ў Інтэрнэце (аналагічна стварэнню файлаў вэб-сайтаў), таму gzip быў распрацаваны для сціску файлаў на вэб-серверах, сціскаючы статычныя (тэкставыя) файлы да 99% іх зыходнага памеру. Паколькі JavaScript - гэта тэкставы файл, gzip можна выкарыстоўваць для сціску файлаў JavaScript, а таксама для памяншэння часу загрузкі старонкі.

Аптымізуйце Javascript з дапамогай мініфікацыі

Аптымізацыя - гэта асаблівы тып мініфікацыі JavaScript. Такія мінімізатары не толькі выдаляюць непатрэбныя прабелы, коскі, каментары і т. д., але і дапамагаюць пазбегнуць "мёртвага кода":

  • Кампілятар закрыцця Google
  • UglifyJS
  • Мініфікатар Microsoft AJAX

CSS аптымізацыя выкарыстання вэб-шрыфтоў

Google Fonts і аналагічныя вытворцы шрыфтоў зрабілі рэвалюцыю ў вэб-шрыфтах, але некалькі радкоў кода шрыфта могуць займаць сотні кілабайт прапускной здольнасці.

  1. Загружайце толькі тыя шрыфты, якія вам патрэбныя: выдаліце шрыфты, якія не выкарыстоўваюцца, і праверце, ці патрэбныя новыя шрыфты.
  2. Загружайце толькі тыя вагі і стылі, якія вам патрэбныя: большасць вытворцаў шрыфтоў могуць абмяжоўваць загрузку пэўнымі наборамі сімвалаў (напрыклад, толькі лацінкай), вагамі (таўшчынёй) і курсівам (нахілам). Браўзэры могуць аўтаматычна адлюстроўваць адсутныя стылі, хаця вынікі могуць быць дрэннымі.
  3. Абмяжуйце колькасць неабходных сімвалаў: Рэдка выкарыстоўваныя шрыфты могуць быць абмежаваныя пэўнымі сімваламі. Напрыклад, загаловак «Падручнік CSS» у Open Sans можна вызначыць, дадаўшы & text=параметр у радок запыту шрыфтоў Google: fonts.googleapis.com/css? family=Open+Sans& text=CStuorial
  4. Разгледзім варыятыўныя шрыфты: варыятыўныя шрыфты вызначаюць вялікую разнастайнасць стыляў, насычанасці і курсіва з выкарыстаннем вектарнай інтэрпаляцыі. Файл шрыфта крыху больш, але вам патрэбен толькі адзін, а не некалькі. Рэкурсіўны шрыфт дэманструе гнуткасць варыятыўных шрыфтоў.
  5. Загружайце шрыфты з вашага лакальнага сервера. Самастойнае размяшчэнне шрыфтоў больш эфектыўна. Патрабуецца менш DNS-запытаў, і вы можаце абмежаваць загрузку WOFF2, які падтрымліваюць усе сучасныя браўзэры. Старыя браўзэры (IE) могуць вярнуцца да шрыфта АС.
  6. Разгледзім шрыфты АС: гэты вэб-шрыфт памерам 500 КБ можа выглядаць пышна, але ці заўважыць хто-небудзь, калі вы пераключыцеся на агульнадаступныя Helvetica, Arial, Georgia ці Verdana? Бяспечныя для АС або вэб-шрыфты - гэта просты спосаб павысіць прадукцыйнасць.

Выкарыстанне прыдатнага варыянту загрузкі шрыфта

Загрузка і апрацоўка вэб-шрыфтоў можа заняць некалькі секунд. Вам неабходна:

  1. Паказаць выбліск нетылізаванага тэксту (FOUT): спачатку выкарыстоўваецца першы даступны рэзервовы шрыфт, але ён замяняецца, калі вэб-шрыфт гатовы.
  2. Паказаць успышку нябачнага тэксту (FOIT): тэкст не адлюстроўваецца, пакуль вэб-шрыфт не будзе гатовы. Гэта працэс па змаўчанні ў сучасных браўзэрах, якія звычайна чакаюць тры секунды, перш чым вярнуцца да рэзервовага шрыфта.
    Ні тое, ні іншае не ідэальна.
Уласцівасць CSS font-display і параметр Google Font & display = могуць абраць альтэрнатыўны варыянт:
  • auto: паводзіны браўзэра па змаўчанні (звычайна FOIT).
  • block: Эфектыўна FOIT. Тэкст нябачны да трох секунд. Там няма замены шрыфта, але тэкст можа з'явіцца праз некаторы час.
  • swap: Эфектыўна FOUT. Першы запасны варыянт выкарыстоўваецца да таго часу, пакуль не будзе даступны вэб-шрыфт. Тэкст адразу чытаецца, але эфект замены шрыфта можа раздражняць. Font Style Matcher можна выкарыстоўваць для вызначэння рэзервовага варыянту аналагічнага памеру.
  • fallback: кампраміс паміж FOIT і FOUT. Тэкст нябачны на працягу кароткага перыяду часу (звычайна 100 мс), затым выкарыстоўваецца першы запасны варыянт, пакуль не стане даступны вэб-шрыфт.
  • optional: аналагічна рэзервоваму варыянту, за выключэннем таго, што замена шрыфта не адбываецца. Вэб-шрыфт будзе выкарыстоўвацца толькі ў тым выпадку, калі ён даступны на працягу пачатковага перыяду. Пры праглядзе першай старонкі, хутчэй за ўсё, будзе адлюстроўвацца рэзервовы шрыфт, а пры наступных праглядах будзе выкарыстоўвацца загружаны і кэшаваны вэб-шрыфт.

Выкарыстанне свопінгу, рэзервовага капіявання або апцыянальнага варыянту можа забяспечыць прыкметнае павышэнне прадукцыйнасці.

Аптымізацыя JS і CSS кода онлайн

У сетцы інтэрнэт, маецца дастаткова вялікая колькасць анлайн-сэрвісаў. Якія за пару хвілін, здольныя выканаць усю руцінную працу па сціску JavaScript і стылявых файлаў. Усе яны маюць свае ўласныя алгарытмы працы з кодам. На фоне такой разнастайнасці, можна вылучыць два найболей істотных сэрвісу. Ступень эфектыўнага парога сціску ў іх значна вышэй, чым у падобных канкуруючых анлайн інструментаў. Разгледзім больш падрабязна гэтыя два вэб-інструменты:

Cssresizer.com
Эфектыўнасць сціску 84% у параўнанні з набліжанымі канкурэнтамі. Захоўваецца валіднасць кода, нават пры значным сціску. Такім чынам можна атрымаць выдатны аптымізаваны код. Праца з гэтай прыладай інтуітыўна зразумелая і ёсць некалькі метадаў сціску:

  • Максімальнае;
  • Хуткае;
  • Дэкампрэсія;

Правесці сціск можна па:

  • URL - адрасу;
  • Загрузцы файла;
  • Прамым уводам кода;

CSSResizer - Прафесійны сціск CSS.

Refresh-sf.com

Яшчэ адзін, але не менш магутны вэб-інтэрфейс для мінімізацыі JavaScript, CSS і HTML. Інструмент выкарыстоўвае для працы UglifyJS 2, Clean-CSS і HTML Minifier. Эфектыўнасць сціску пры гэтым дасягае 85%, без бачных парушэнняў валіднасці кода. Правесці сціск можна з дапамогай прамога ўводу кода ў акне прылады.

Refresh-SF - анлайн-кампрэсар JavaScript і CSS.

Мінімізацыя JS і CSS з дапамогай плагінаў на CMS Wordpress

Як нам усім вядома, мае значнае распаўсюджванне па ўсім свеце. Па дадзеных на 2018 год, гэтая cms займае лідзіруючае пазіцыі. Разгледзім пару запатрабаваных убудоў аптымізацыі менавіта для WordPress:

Убудова Autoptimize

Убудова аптымізацыі HTML, JS і CSS. З'яўляецца адным з самых запатрабаваных убудоў для паскарэння сайтаў на CMS Wordpress. Мае просты і функцыянальны інтэрфейс наладкі. Працэс сціску адбываецца на лета.

  • Аптымізацыя (HTML, JS, CSS) і настройка CDN.
  • Выдаленне emojis, Google шрыфтоў, радкоў запытаў са статычных рэсурсаў.
  • Магчымасць аптымізаваць выявы.

Autoptimize – убудова сціскае стылі/скрыпты/HTML.

Убудова Webcraftic Clearfy

Не такі стары як папярэдні плягін. Але таксама запатрабаваны і папулярны сярод падобных канкурэнтаў. Webcraftic Clearfy – мае дастаткова мудрагелісты інтэрфейс наладкі. Складаецца з аб'яднанай камбінацыі плагінаў, для найлепшага выніку.

Старонкі з настройкамі падзелены на раздзелы меню. Такім чынам можна праводзіць аптымізацыю пэўных частак сайта да прыкладу HTML. Што можа гэтая плягін?

  • Аптымізацыя (малюнкаў, JS, CSS, HTML і скрыптоў);
  • Транслітарацыя кірыліцы і выдаленне дубляў. Праца з атрыбутамі alt і стварэнне правільнага robots.txt. Праца з загалоўкамі серверам і іх адказаў.
  • Выдаленне незапатрабаваных віджэтаў WordPress.
  • Утойванне версіі WordPress і выдаленне зменных запыту з статычных запытаў. Утойванне лагіна аўтара і старонкі ўваходу ў адмінку.
  • Глабальнае выдаленне або ачыстка каментароў. Кантроль над спасам у каментарах.
  • Настройка пульсацыі WordPress і верхняй адмін панэлі.
  • Кантроль над кампанентамі плагіна.

Webcraftic Clearfy - бясплатная плягін аптымізацыі.

У заключэнне можна зрабіць пэўную выснову. Зыходзячы з напісанага вышэй, правядзенне сціску js і css, не такая ўжо і складаная справа. Дзякуючы гэтым дзеянням, значна павялічыцца хуткасць водгуку Вашага праекту.

Дзякуй, што чытаеш Nicola Top

Наколькі публікацыя карысная?

Націсніце на смайлік, каб ацаніць!

Сярэдняя адзнака 5 / 5. Колькасць адзнак: 14

Ацэнак пакуль няма. Пастаўце адзнаку першым.

Вам таксама можа спадабацца...

Пакінуць адказ

Ваш адрас электроннай пошты не будзе апублікаваны. Неабходныя палі пазначаны як *

семнаццаць − 2 =