WEB制作(html・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

添付ファイル

高速化