その他もろもろ

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 ]のサイトも参考になると思います。

関連記事

  1. その他もろもろ

    【新PCの設定②】各種ブラウザのインストール

    各種ブラウザのインストールですが、今はいろいろなブラウザを選択でき…

  2. その他もろもろ

    Google検索では、キーワードによってタイトルが変わってしまうの!?

    今日、弊社のお客様から連絡があり、とある検索キーワードを使ってGo…

  3. その他もろもろ

    チェックボックスのサイズ拡大が出来なくなった

    以前の古いバージョンのFirefoxであれば、&lt;input …

  4. FFFTP01

    その他もろもろ

    【新PCの設定⑤】FFFTPの設定

    次は、FFFTPの設定です。下記サイトよりFFFT…

  5. Java

    その他もろもろ

    Androidエミュレータが立ち上がらない

    Androidエミュレータを起動しようとすると、emulator:…

  6. SSL(HTTPS通信)

    その他もろもろ

    HTTPS通信(SSL化)することによるSEO上の効果を検証してみる!!

    昨年、GoogleがHTTPS通信(常時SSL通信)されたページをSE…

最近の記事

  1. PHP
  2. PHP
  3. 風邪予防
  4. WordPress(WP)
  5. PHP
  6. 宅建
  7. アンチWP
  8. 日本語ドメイン
  9. WordPress(WP)
  10. SSL(HTTPS通信)
PAGE TOP