Модулі для аптымізацыі фронтенда сайта на Drupal

  1. ўласныя сродкі
  2. Advanced CSS / JS Aggregation
  3. Magic Module

Думаю, што варта пачаць з таго, што Drupal першапачаткова дае нам пэўны інструментарый па кіраванні аптымізацыяй фронтенда, якога няма першапачаткова ў іншых сістэмах кіравання кантэнтам. Некаторыя рэчы бачныя адразу ў адиминке, а для некаторых ёсць функцыі і хуки, якія можна выкарыстоўваць як на ўзроўні модуля, такі на ўзроўні тэмы Drupal. У гэтым аглядзе мы разгледзім базавыя магчымасці аптымізацыі фронтенда сайта на Drupal, а таксама спецыяльныя модулі, якія дазволяць пашырыць даступны стандартны арсенал.

ўласныя сродкі

Самае першае, што мы можам зрабіць для паляпшэння прадукцыйнасці нашага сайта на Drupal - гэта звернецца да адмінку і ў раздзеле налад прадукцыйнасці (admin / config / development / performance) ўключыць агрэгацыю CSS і JavaScript.

Гэта вядома ж, не так шмат, але ўсё-ткі сёе-тое. А далей, як раяць нам базавыя прынцыпы прадукцыйнасці фронтента, нам пажадана перанесьці ўсе JavaScripts ў ніжнюю частку старонкі, перад тэгам «body», або як мага бліжэй да яго.

Advanced CSS / JS Aggregation

Модуль, які значна пашырае вашыя магчымасці аптымізацыі прадукцыйнасці фронтенда Drupal. Такім чынам, што ж ён умее?

  • Агрэгацыя CSS / JS па патрабаванні.
  • Абароны ад паўторнай CSS / JS агрэгацыі. Выкарыстанне блакавання, так што некалькі запытаў да аднаго і таго ж файлу будуць спыняцца.
  • Можна дадаць JS ў любы рэгіён тэмы і пры гэтым файлы ў рэгіёне таксама будуць агрэгаваную.
  • Камбінацыі CSS-файлаў з дапамогай медыя-запытаў.
  • Абмяжоўвае якія збіраюцца CSS файлы менш чым 4095 CSS селектар (прадухіляе абмежаванне IE 6-9).
  • Gzip падтрымка. Усе агрэгаваныя файлы могуць быць папярэдне сціснутыя ў .gz файлы і аддавацца Apache. Гэта хутчэй, чым сціскаць кожны файл на кожны запыт.
  • Bundler Submodule. Дазваляе групаваць файлы па іх прыналежнасці адзін да аднаго.
  • Modifier Submodule. Дадае смачныя «плюшкі».
    • Препроцессинг для ўсіх CSS / JS;
    • Змяшчаць JS ўніз старонкі;
    • дадаць defer атрыбут для ўсіх JS;
    • Ўбудоўваць CSS / JS инлайн для зададзеных шляхоў;
    • выдаліць невыкарыстоўваныя тэгі JavaScript, калі гэта магчыма, у дадзеным выпадку будуць сканаваць ўсе ўключаюцца файлы JS на прадмет сувязі выкарыстання JQuery і Drupal, калі яны не знойдзены, то JavaScript будзе адыдуць са старонкі па змаўчанні;
    • убудаваная падтрымка для асінхроннай загрузкі JavaScript;
  • CSS / JS Compress Submodules. Можа мінімізаваць файлы і ўбудаваны CSS / JS.
  • CSS / JS Validator Submodule. Валидирует ўсе файлы CSS, выкарыстоўваючы jigsaw.w3.org. Правярае ўсе файлы CSS з CSSLint. Правярае ўсе файлы JS з JSHint.

Magic Module

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

Многія папулярныя базавыя тэмы прадастаўляюць карысныя інструменты для дапамогі ў аптымізацыі фронтенда.
Гэты модуль аб'ядноўвае шэраг гэтых карысных інструментаў у адным месцы.

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

Вось што мы маем на сённяшні дзень:

  • Паляпшэнні ў CSS агрэгацыі
  • Магчымасць відавочна выключыць CSS і JS файлы
  • Перамясціць JavaScript у ніжнюю частку старонкі
  • Rebuild Тэма рэестра на перазагрузкі старонкі
  • Адлюстроўваць індыкатар шырыні для Viewport
  • Бяспечна партаваць JavaScript пад Drupal 8 у звароце (прэзентацыі Watch Тэадор Biadala ў DrupalCon Празе пра абнаўленне JS у Drupal 8 для папярэдні прагляд)

Модуль таксама дасць магчымасць экспартаваць набор уласных налад для кожнай з вашых тэм. Наведайце старонку «Настройкі» вашай тэмы для прыкладу (напрыклад, / admin / appearance / settings / bartik).

Такім чынам, што ж ён умее?