未使用の
GitHub - giakki/uncss: Remove unused styles from CSS
試しに
[TOC]
参考
使用する
現状、
コーディング
1.CSS、CSS を 使用する マークアップの 作成、 変更 アプリケーション側での
処理
1.GitHub - django-compressor/django-compressor を使って、 CSS を 圧縮、 結合
2.GitHub - martinblech/django-critical を使って、 Critical CSS 作成 と loadCSS で 1.のCSS の 読み込みを 行う。
この状況だと、読み<wbr>込んでいる CSS の<wbr>サイズが<wbr>大きいのでなんとかしろ の
このサイトに
CSS パフォーマンスツールを
削除可能な
CSSの 判定は 100%の 精度ではない。 動的に 挿入される CSSの 対応も サポートしているが、 エッジケースも 多いので 要注意。 必ず テストする こと。 「今の
ページで 必要な CSSだけ 使う。」 「他の ページで 使われている スタイルは 無視する。」よりも、 「サイト全体に 適用される CSSで、 どこでも 使われていない ものは どれか」と いう 考え方を すべき。
2点を
UnCSS で
CSS の 整理 1. URL ごとに UnCSS で 使用している CSS を 抽出
2.1.で抽出した CSS は Minify 状態なので、 見やすく 整形する 3. 2.で作成した CSS を マージして、 サイト全体で 適用されている CSS のみ 抽出 コーディング
1.CSS、CSS を 使用する マークアップの 作成、 変更 アプリケーション側での
処理
1.GitHub - django-compressor/django-compressor を使って、 CSS を 圧縮、 結合
2.GitHub - martinblech/django-critical を1. の
UnCSS で
以下の
0. 必要な
UnCSS を
インストール npm install -g uncsscssbeautify-cli を
インストール npm install -g cssbeautify-cli
1. URL ごとに
まず、
スクリプトは、
2. 1. で
1. の
uncss 'https://www.monotalk.xyz/blog/Set-anchor-text-of-Wicket-BookmarkableLink/' -t 5000 -s https://www.monotalk.xyz/static/CACHE/css/690a0d57c104.css | cssbeautify-cli -s > 'https:www.monotalk.xyzblogSet-anchor-text-of-Wicket-BookmarkableLink.css'
400ページ程度に
3. 2. で
【Mac】
さすがに
方針
normalize css 、
codehighlight.css は そのまま 使う。
normalize.cssと、コードハイライトに 使用している codehighlight.cssは、サイズも 大きくないので 定義の 削除は せずに そのまま 使用する ことにしました。
normalize.cssは、bootstrap.cssに含まれていたので、 改めて ダウンロードし、 サーバ上に 配置しました。 bootstrap.css、clean_blog.css、font-awesome.min.css、fonts.cssは整理の 対象に する。
このサイトは、 Clean Blog - Bootstrap Blog Theme - Start Bootstrap を ベースに 作っています。
テーマ関連のcss と、 サーバ上に 配置している font-awesome.min.css、fonts.cssを整理の 対象と しました。
UnCSS で
CSS の
5分の
*UnCSS 適用前 *
Content-Length:27718*UnCSS 適用後
* Content-Length:5914
Coach の
CSS のoptimalCssSize の
├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤ │ optimalCssSize │ https://www.monotalk.xyz/static/CACHE/css/690a0d57c1… │ 90 │ │ │ size is 27.7 kB (27718) and that is bigger than the │ │ │ │ limit of 14.5 kB. Try to make the CSS files fit into │ │ │ │ 14.5 kB. │ │ ├─────────────────────────┼───────────────────────────────────────────────────────┼──────────┤
UnCSS の
実際に
adsbygoogle.js で
UnCSS で
Error: Uncaught [TagError: adsbygoogle.push() error: No slot size for availableWidth=0] at reportException (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:58:24) at processJavaScript (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:130:7) at HTMLScriptElementImpl._eval (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:65:7) at /usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:31:22 at Object.check (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:89:11) at Object.check (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:92:23) at Object.check (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:92:23) at Object.check (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:92:23) at Object.check (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:92:23) at /usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:108:12 at wrappedEnqueued (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:255:16) at Request.request [as _callback] (/usr/local/lib/node_modules/uncss/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:203:9) at Request.self.callback (/usr/local/lib/node_modules/uncss/node_modules/request/request.js:186:22) at emitTwo (events.js:125:13) at Request.emit (events.js:213:7) at Request.<anonymous> (/usr/local/lib/node_modules/uncss/node_modules/request/request.js:1163:10) Q { message: 'adsbygoogle.push() error: No slot size for availableWidth=0', stack: 'TagError: adsbygoogle.push() error: No slot size for availableWidth=0\n at Rg (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:35360)\n at Sg (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:34287)\n at $h (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:57771)\n at fi (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:60958)\n at gi (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:60883)\n at Ai (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:66408)\n at Bi.c.client (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:64709)\n at Od (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:14673)\n at Xd (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:17244)\n at Object.Bi [as push] (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:64688)', name: 'TagError' }
UnCSS: no stylesheets found エラーに
このブログだと、Error: UnCSS: no stylesheets found で
loadCSS を
Error: UnCSS: no stylesheets found at processWithTextApi (/usr/local/lib/node_modules/uncss/src/uncss.js:134:15) at tryCatcher (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/util.js:16:23) at Promise._settlePromiseFromHandler (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise.js:509:35) at Promise._settlePromise (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise.js:569:18) at Promise._settlePromise0 (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise.js:614:10) at Promise._settlePromises (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise.js:693:18) at Promise._fulfill (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise.js:638:18) at PromiseArray._resolve (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise_array.js:126:19) at PromiseArray._promiseFulfilled (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise_array.js:144:14) at Promise._settlePromise (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise.js:574:26) at Promise._settlePromise0 (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise.js:614:10) at Promise._settlePromises (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/promise.js:693:18) at Async._drainQueue (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/async.js:133:16) at Async._drainQueues (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/async.js:143:10) at Immediate.Async.drainQueues (/usr/local/lib/node_modules/uncss/node_modules/bluebird/js/release/async.js:17:14) at runCallback (timers.js:781:20)
-s オプションでuncss 'https://www.monotalk.xyz/blog/strbuilder-%E3%81%8Capache-commons-lang-%E3%81%8B%E3%82%89-apache-commons-text-%E3%81%AB%E7%A7%BB%E5%8B%95%E3%81%97%E3%81%9F/' -s https://www.monotalk.xyz/static/CACHE/css/690a0d57c104.css
-t、
JS の-t 5000 で
DOM の
CssSyntaxError が
構文的にCssSyntaxError: uncss/node_modules/css: unable to parse undefined: と
調べた
構文的に
Ignore error · Issue #275 · giakki/uncss
まず、
まとめ
UnCSS を
以下まとめます。
重量級の
CSS ライブラリの 削減には 効果が ある。
CSS 容量は、5分の 1となりました。 ほとんど Bootstrap の CSS が 削除されたので、 効果は あるかと 思います。 ページパターンが
少なければ、 それほど 適用は 難しくない。 この ブログは、 ログイン状態、 未ログイン状態が 存在せず、 表示の 動的な 切り替えは 行っていないため、 適用は スムーズでした。 2
会員サイト等の場合、 UnCSS は ログイン機能は 持たないため、 未ログイン状態だけ 適用する 等の 工夫は 必要に 思いました。 歴史を
抱えた CSS の 整理に 使う。
長年メンテナンスしているサイトの 場合、 無駄に CSS が 肥大化している 場合が あります。
心機一転して、CSS を 作り直す 際に まず 適用するのは ありかと 思います。 重要な
ランディングページのみに 適用。
サイト全体のCSS に 適用するのが ベストですが、 リスクが あり、 コストが かかりすぎる 場合も あります。
重要なランディングページのみに 適用するのは、 理想の 使い 方からは 外れるかもしれないですが、 そちらの 方が ROI は 良さそうに 思いました。
以上です。
コメント