WEB制作 PR

CSS、JSファイルの圧縮によるサイトの速度改善!!

CSS、JSファイルの圧縮によるサイトの速度改善!!
記事内に商品プロモーションを含む場合があります

CSS、JSファイルの圧縮によるサイトの速度改善!!

今日は、WordPressで組んだあるブログの速度改善を少し行っていました。

 

速度改善の際には、私はまず状況を把握する為に[ GTmetrix ]を使ってWEBサイトの評価をを判定します。

結果はこんな感じです。
ブログ速度改善
Google(左側)が「C」、Yahoo(右側)が「B」

 

WordPressを使用しているので、まずは高速化を行ってくれるプラグインをいくつか試してみたのですが、評価はほぼ変わらず。。。。

そこで、CSSやJavascriptの圧縮を行うことにしました。

 

まず、CSSとJavascriptのコードを圧縮します。
http://refresh-sf.com/yui/#output
のサイトで簡単に圧縮できます。
※圧縮前のファイルのバックアップも忘れずに!!

圧縮が完了すれば、次は各ファイルをgzip形式(拡張子は「.gz」)で圧縮します。
※例えば、「style.css」「common.js」というファイルであれば、圧縮後には「style.css.gz」「common.js.gz」というファイルが完成していると思います。

圧縮後のファイルをサーバー上にアップして、「.htaccess」に以下の記述を追記してやります。

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
<FilesMatch “\.css\.gz$”>
ForceType text/css
AddEncoding x-gzip .gz
</FilesMatch>
<FilesMatch “\.js\.gz$”>
ForceType application/x-javascript
AddEncoding x-gzip .gz
</FilesMatch>

これで、設定は完了です!!

 

で、もう一度[ GTmetrix ]で評価判定をしてみました。

結果は、
Google(左側)は「C」から「B」へ改善、
Yahoo(右側)は「B」のままですが「73%」から「78%」へと
微妙な改善結果でした。。。

ですが、少しでも改善されればそれば良しとします。

 

あとは、画像の圧縮とキャッシュの設定を行って、もう少しいろいろ粘ってみる事にします。

因みに、WEBサイトの改善点の把握には、
[ PageSpeed Insights ]も参考になると思います。