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

数多くのメソッドが存在する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

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で画像読み込みスピードを向上

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

<script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

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

$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を追記

　RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

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

• $jpg_quality
• $png_quality

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

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

ダウンロード：social_btn.js（zip：2kb）

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

<div id="socialBtn"></div>

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

<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 } ?>

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

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

ダウンロード：img-delay.js（zip：2kb）

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

<script src="/js/img-delay.js" type="text/javascript" defer ></script>

手順03：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にコードを追加

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;
}

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

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

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

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