WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「高速化」での検索

Google Chromeでローカルにあるcssファイルを直接編集し保存する

cssファイルを編集するときに Google Chromeのデベロッパーツールで値を変更した後、 エディターにその値を持って行きエディターを使って保存したりしてないでしょうか?

そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。

Google Chromeでローカルにあるcssファイルを直接編集し保存する。(編集作業の高速化)

● ローカルのフォルダをGoogleChromeに読み込ませる

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の場合)を押すと保存されリロードしてもその状態がリセットされず残っています。

No.1164
09/18 09:14

edit

css
高速化

Google PageSpeed Insights の速度アップ修正に対応する

■ Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=ja
URLを入力するとサイトがどれくらい早いか計測してくれます。 ここにサイトのURLを入れて計測し、結果を表示させます。

● 結果の「圧縮を有効にする」に対応する

圧縮を有効にするにはWEBサーバによって方法が異なります、

Apache: mod_deflate
Nginx: HttpGzipModule
IIS: HTTP 圧縮

専用サーバやクラウド等のバーチャルマシンの場合は適宜設定しましょう。

レンタルサーバの場合は Apache が多いので、 レンタルサーバのmod_deflate が有効かどうかを調べます。

エックスサーバ : ○
ロリポップ : ○
さくら : ○
ヘテムル : ○

圧縮を有効にするには サイトのトップに .htaccess を設置し以下のように記述します。

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
  SetEnvIfNoCase Request_URI\.(?:gif|jpe?g|png)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
</IfModule>

● 結果の「ブラウザのキャッシュを活用する」に対応する

.htaccess に以下のように記述します。

<Files ~ ".(gif|jpe?g|png|ico|js|css|swf|woff)$">
Header set Cache-Control "max-age=604800"
</Files>

max-age の値は次のように(秒)で指定します。

7日 : 604800
30日 : 2592000
1年 : 31536000
No.1027
05/05 15:43

edit

高速化

作成したWEBページの表示速度がどれくらい早いかをチェックする

同じ見た目のWEBページでも画像の作成方法やHTML・CSS・JavaScriptのコーディングによって速度が変わります。

そこで作成したWEBページの表示速度がどれくらい早いかをチェックして改善しましょう。

■ Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

PC向け、モバイル向けのそれぞれの最適化アドバイスが表示されます。


■ Web PageTest

http://www.webpagetest.org/

サイトの読み込みやレンダリング開始までの時間を細かく表示してくれます。

・『Start Render』までがHTML,CSS,JavaScript読み込みなどレンダリング開始までの時間
・『On Load』までがレンダリング終了までの時間

なのでこれらを見比べて、「外部css・Javascript」を最適化するべきか「HTMLコンテンツ(画像ファイル等)」を最適化するべきかの指標にするといいでしょう。


■ GT metrix

http://gtmetrix.com/

アクセスして 自分のサイトURL を入力すると測定してくれます。(JavaScriptの遅延読み込みは対応していない模様。)

ちなみにこのページの結果は

<a href="/data/filedir/923_1.png" target="_blank"><img src="/data/filedir/923_1.png"></a>

となりました。

JavaScriptを最適化する必要があるということがわかりますね。


その他: http://tools.pingdom.com/fpt/

添付ファイル1
No.923
02/29 15:05

edit

添付ファイル

高速化