たった5分。サイトの軽さを10倍に。PageSpeedInsightsの攻略。

2016年6月20日更新 view: 477 view
http://blogs.c.yimg.jp/res/blog-07-b8/nishikawa320/folder/1363073/18/25261818/img_0

サイトを軽くして、売り上げをアップ!

https://developers.google.com/speed/pagespeed/insights/?hl=ja

を使うとサイトやページの重さ、軽さを計測できる。
スマホがメインになった今、ページの軽さはとても重要。
ではどうやったら軽くできるのか。

gzipを有効に。

スポンサードリンク

.htaccess に以下を記述。

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/javascript "access plus 2 weekss"
ExpiresByType application/x-javascript "access plus 2 weeks"
ExpiresByType font/opentype "access plus 2 weeks"
ExpiresByType font/ttf "access plus 2 weeks"
ExpiresByType font/eot "access plus 2 weeks"
ExpiresByType font/otf "access plus 2 weeks"
</IfModule>

javascriptを非同期化

<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" async></script>

こんな感じで async をつけていく。
すると非同期で読み込むためサイトの表示が速くなる。

しかし、javascriptのバグの原因になるので、asyncをやったらきっちりデバッグを行うこと。

javascriptの圧縮版を読み込む

javascriptには、ほぼ必ず圧縮版が用意されている。
その圧縮版を使うようにする。

スポンサードリンク

関連記事

関連カテゴリ

まろにーちゃん

一位を目指して日々がんばっています!

ピックアップ

スマホ・携帯 ランキング

9月24日 ( 日 ) にアクセスが多かった記事はこちら!