Google Chromeでローカルにあるcssファイルを直接編集し保存する
cssファイルを編集するときに Google Chromeのデベロッパーツールで値を変更した後、 エディターにその値を持って行きエディターを使って保存したりしてないでしょうか？
そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。（最新のChromeでは使えなくなりました。代替方法は一番下）
以下の方法でGoogle Chromeを使ってローカルにあるcssファイルを直接編集して保存してみましょう。
● ローカルのフォルダをGoogleChromeに読み込ませる（ Chrome Version 62 の場合 ）
1. Google Chromeを立ち上げる
2. 右クリックし「検証」を選択する
デベロッパーツールのウィンドウが画面下表示されます
3. デベロッパーツール内メニューの「Sources」を選択する。
4. 右クリックして「Add folder to workspace」を選択する
5. 編集したいcssファイルが入っているフォルダを選択する
● 読み込んだローカルのフォルダ内の css をリンクさせる
6. 直接編集したい ローカルのhtmlファイル をgooglechromeで開く
7. googlechromeで直接編集したいファイルを右クリックし「Map to network resource...」を選択すると
現在ブラウザで開いている同盟のcssファイル一覧が表示されるのでその中からリンクさせたいファイルを選択する
これで準備はokです。 後は自由に編集しその後に「Command+s」（Macの場合）を押すと保存されリロードしてもその状態がリセットされず残っています。
● Finchを使用して変更したCSSの差分を抽出する
ローカルのファイルでは動作しませんので node.js や php などでローカルサーバを立てるといいでしょう。
https://chrome.google.com/webstore/detail/finch-developer-tools/phgdjnidddpccdkbedmfifceiljljgdo
作成したWEBページの表示速度がどれくらい早いかをチェックする
同じ見た目のWEBページでも画像の作成方法やHTML・CSS・JavaScriptのコーディングによって速度が変わります。 そこで作成したWEBページの表示速度がどれくらい早いかをチェックして改善しましょう。
● Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
PC向け、モバイル向けのそれぞれの最適化アドバイスが表示されます。
● Web PageTest
サイトの読み込みやレンダリング開始までの時間を細かく表示してくれます。
・『Start Render』までがHTML,CSS,JavaScript読み込みなどレンダリング開始までの時間
・『On Load』までがレンダリング終了までの時間
なのでこれらを見比べて、「外部css・Javascript」を最適化するべきか「HTMLコンテンツ（画像ファイル等）」を最適化するべきかの指標にするといいでしょう。
● GT metrix
http://gtmetrix.com/ アクセスして 自分のサイトURL を入力すると測定してくれます。（JavaScriptの遅延読み込みは対応していない模様。）
ちなみにこのページの結果は
となりました。
JavaScriptを最適化する必要があるということがわかりますね。
){kind=link}