高速(スピード)

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

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

 

速度改善の際には、

私はまず状況を把握する為に

[ GTmetrix ]のサイトでいつもサイトの評価をを判定します。

 

結果はこんな感じです↓
ブログ速度改善

Google(左側)が「C」、Yahoo(右側)が「B」

 

WPを使用しているので、まずは高速化を行ってくれるプラグインをいくつか試してみたのですが、

評価はほぼ変わらず。。。。

 

そこで、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%」へと

微妙な改善結果でした。。。

 

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

 

あとは、

画像の圧縮とキャッシュの設定を行って、

もう少しいろいろ粘ってみる事にします。

 

因みに、

サイトの改善点の把握には、

[ PageSpeed Insights ]のサイトも参考になると思います。

 

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. ドメインについて
  2. WP:WordPress(ワードプレス)
  3. URL設計(URLデザイン)
  4. URL「ディレクトリ名」と文字アンダースコア(_)とハイフン(-)
  5. SEO対策(外部ファイルの読み込み)
  6. URL リダイレクト
  7. インデックスされない
  8. 内部対策は必要?
  9. CMS(シーエムエス)
  10. SEO業者は必要?

アーカイブ

PAGE TOP