WordPressの表示を劇的に速くする!jQuery/JavaScriptの高速化テクニック

    
2013/11/11
    


数多くのメソッドが存在するWordPressの高速化。エンジニアさんならともかく、ディレクターやWeb担当者、ブロガー等 がやるとなると「本当に速くなるの?」「バグらない?」と心配にもなりますよね?

そこで今回は、Find Job ! Startupで実際に実装しているWordPress高速化手法を大公開!ぜひ参考にしてみてください。

■Find Job ! Startupで実装しているWordPress高速化処理

  • 1.Quick Cacheプラグインで読込スピードUP
  • 2.Adaptive Imagesで画像読み込みスピードを向上
  • 3.SNSボタンを遅延読み込みさせ体感速度を改善
  • 4.ファーストビュー以下の画像読み込みを遅延させるjQueryプラグインで体感スピードUP
  • 5.HTML内でのJavaScript読み込み順最適化
  • 6.お約束の高速化処理も忘れずに


1.Quick Cacheプラグインで読込スピードUP


初回アクセス時にキャッシュデータを自動で作成し、WordPressの記事表示速度を静的ページ並みに高速化してくれるプラグイン「Quick Cache」をインストールします。

リンク先からダウンロードし /plugin/ ディレクトリにアップしてもOKですが、WordPress管理画面上から適用しても大丈夫です。

PC/スマホの表示切替が上手くいかない場合の対処

Any Mobile Theme Switcherなど、PCとスマホの表示切り替えをレスポンスの出しわけで行っている場合、「Quick Cache」導入後にUserAgentを判定して処理を切り替えるルールをサイト全体で統一する必要があります。

統一されていない場合、PCなのにスマホ版が表示されたり、スマホなのにPC版が表示されるバグになってしまいますので、以下の手順を参考に設定を追加してください。

  • 管理画面から「Quick Cache>Config option」をクリック
  • MD5 Version Salt:の欄に、「MD5_VERSION_SALT_NAME」と記入
  • wp-config.php に以下のコードを追加
$user_agent=$_SERVER['HTTP_USER_AGENT'];if(preg_match('/ipod/i',$user_agent)||preg_match('/iphone/i',$user_agent))
{define("MD5_VERSION_SALT_NAME","mobile")}else if(preg_match('/android/i',$user_agent)&&preg_match('/mobile/i',$user_agent))
{define("MD5_VERSION_SALT_NAME","mobile")}else if(preg_match('/opera mini/i',$user_agent)){define("MD5_VERSION_SALT_NAME","mobile")}else if(preg_match('/blackberry/i',$user_agent))
{define("MD5_VERSION_SALT_NAME","mobile")}else if(preg_match('/(iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile)/i',$user_agent))
{define("MD5_VERSION_SALT_NAME","mobile")}else{define("MD5_VERSION_SALT_NAME","others")}

記事公開後にスマホとPCでそれぞれ一回ずつ自分でアクセスしておけば、次にアクセスしたユーザーからかなりの高速読み込みが可能になります。

※現在のVer.ではPC/スマホの振り分けが機能Pro版のみになっているのでご注意ください。
 ⇒参照:Quick Cacheを無料で使いたい方はバージョンアップに注意!


2.Adaptive Imagesで画像読み込みスピードを向上


基本的には画面サイズによって最適化された画像を返すというPHPモジュールですが、これをちょっと改造することで記事の読み込み速度をかなり改善できます。

手順01:HTML側にスクリプトを追記

<script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
閲覧中の画面サイズを持ったcookieを仕込むためのスクリプトです。設置場所は</head>の手前あたりに。



手順02:adaptiveimages.phpをダウンロードしてちょっと改造

Adaptive Imagesの公式サイトから最新版のadaptiveimages.phpをダウンロードし、.zip内にある「adaptiveimages.php」のコードを若干改造します。

該当ファイルの15?20行目の部分を対象に、Find Job ! Startupでは以下のようなコードに書き換えて運用しています。
※利用される際には$cache_pathの値を「img」から実際のパスに書き換えてください。
$resolutions   = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)
$cache_path    = "img"; // where to store the generated re-sized images. Specify from your document root!
$jpg_quality   = 50; // the quality of any generated JPGs on a scale of 0 to 100
$png_quality   = 9;
$sharpen       = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache   = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)

参照:Adaptive Images 公式サイト



手順03:.htaccessにRewriteRuleを追記

サイト内で出てくる画像について、表示の処理を「adaptive-images.php」に任せる処理を.htaccessに追加します。
 RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
実装後の最初のリクエストで最適化された画像が作成され、次から初回で作られた画像が呼び出されるようになります。

Find Job ! Startupでは画像サイズの指定値を480pxで固定にし、一定サイズの圧縮された画像が表示されるようにして利用しています。
※スマートフォンに限る(PCは仕様通りにディスプレイサイズで判断してます)

■画質の調整について
Find Job ! Startupではメディア特性上画質を優先しやや高めの品質で書き出していますが、「画質にそこまでこだわらないよ!もっと速く!」という場合は以下の値を変更することで読み込みスピードと画質を調整できます。

  • $jpg_quality
  • $png_quality


3.SNSボタンを遅延読み込みさせ体感速度を改善


普通に実装するとSNSボタンの読み込みを待っている間、メインのコンテンツ表示が”待ち”状態となってしまいユーザーをかなりイラつかせてしまうので、これを「後回しにする」ことで体感的な読み込み時間を短縮しています。

手順01:専用JavaScriptをダウンロードしてアップ

まずは以下よりJavaScriptをダウンロードして、サーバー上の任意の場所にアップロードします。

ダウンロード:social_btn.js(zip:2kb)



手順02:表示用のコードを設置

以下のコードをSNSボタンセットを表示したい場所に設置します。
(※ content.php など)
<div id="socialBtn"></div>


手順03:表示制御用のコードを設置

以下のコードを</body>直前(※ footer.php 等)に設置して完了です。
<script src="/js/social_btn.js" type="text/javascript"></script>
<?php if(is_single()){?>
<script type="text/javascript">
<!--
show_social_btn('#socialBtn', '<?php echo rawurlencode(get_permalink())
?>', "<?php echo rawurlencode(the_title('','',0)) ?>", 500);
-->
</script>
<?php } ?>
※JSへのパスは適宜書き換えてください。



4.ファーストビュー以下の画像を遅延読み込みさせるjQueryプラグインで体感スピードUP


Find Job ! Startupでは「ファーストビュー領域のみ画像を先行して読み込み、それ以外の画像読み込みを後回しにする」というjQueryプラグインを作成し、実装しています。
これも使ってみると体感速度がかなり変わるのでオススメです。


手順01:専用JavaScriptをダウンロードしてアップ

まずは以下より該当JavaScriptをダウンロードして、サーバー上の任意の場所にアップロードします。

ダウンロード:img-delay.js(zip:2kb)



手順02:表示制御用のコードを設置

最後に以下のコードを</body>直前に設置します。
<script src="/js/img-delay.js" type="text/javascript" defer ></script>
※JSへのパスは適宜書き換えてください。


手順03:functions.phpにコードを追加

WordPress管理画面から「外観>テーマ編集」と進み、使用中のテーマを選択。テンプレートリストの中から「テーマのための関数(functions.php)」を選択し、最下段に以下のコードを追加します。
add_filter( 'the_content', 'add_delay_load_img', 99);
add_filter( 'post_thumbnail_html', 'add_delay_load_img', 11);



手順04:wp-config.phpにコードを追加

WordPress格納ディレクトリにある「wp-config.php」にも、以下を追記します。場所は同じく最下段でOKです。
function add_delay_load_img($content){
  $match_name = $_SERVER['HTTP_HOST'];
  $content = preg_replace( '#<img([^>]+?)src=[\'"]?(http(|s)://'. $match_name .'[^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="${2}"${3} notdelay>', '' ), $content, 3);
  $content = preg_replace( '#<img([^>]+?)src=[\'"]?(http(|s)://' . $match_name . '[^\'"\s>]+)[\'"]?([^>]*)([^(notdelay)])>#', sprintf( '<img${1}src="%s" data-delay-src="${2}"${3}><noscript><img${1}src="${2}"${3}></noscript>', '' ), $content );
  $content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)( notdelay)>#', sprintf( '<img${1}src="${2}"${3}>', '' ), $content, 3);
    return $content;
}
※wp-config.phpの格納場所はWordPressの設置環境により異なります。



5.HTML内でのJavaScript読み込み順最適化


ラストは非常にシンプルです。つまり「読み込みに時間がかかっているJavaScriptはHTML上でなるべく下に移動させる」と、それだけです。

Chromeの開発者ツールなどで見て「○m秒以上かかるものは…」といった絶対的な評価ではなく、相対的に見て遅いものは下に置くという判断で問題ありません。(※実行順序の関係上移動出来ないものは除く)


6.お約束の高速化処理も忘れずに

上記手順だけでなく、Find Job ! Startupでも度々紹介しているWebサイトの高速化処理の基本も忘れずにおさえておきましょう。

■基本の高速化についての参考記事
スマートフォンサイトを驚くほど速くする!高速化9つのポイント
デザイナーができるWebサイト高速化!JavaScript/CSS圧縮ツール厳選10個



高速化処理後の実測データについて

実は今回のWordPress高速化処理は、サーバーレスポンスの速度向上を狙ったものとなり、[YSlow]や[PageSpeed Insights]などの”フロントエンドが最適化されているかどうか”をメインでチェックするツールでは、あまりスコアに変化がありません。

が、実際の使用感としてはほぼ倍近く速く感じるはず。ぜひ参考にしてみていただければと思います。



(編集/執筆 中村健太)

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.