数多くのメソッドが存在する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.お約束の高速化処理も忘れずに
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を無料で使いたい方はバージョンアップに注意!
<script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>閲覧中の画面サイズを持ったcookieを仕込むためのスクリプトです。設置場所は</head>の手前あたりに。
$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)
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php実装後の最初のリクエストで最適化された画像が作成され、次から初回で作られた画像が呼び出されるようになります。
■画質の調整について
Find Job ! Startupではメディア特性上画質を優先しやや高めの品質で書き出していますが、「画質にそこまでこだわらないよ!もっと速く!」という場合は以下の値を変更することで読み込みスピードと画質を調整できます。
- $jpg_quality
- $png_quality
ダウンロード:social_btn.js(zip:2kb)
<div id="socialBtn"></div>
<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へのパスは適宜書き換えてください。
ダウンロード:img-delay.js(zip:2kb)
<script src="/js/img-delay.js" type="text/javascript" defer ></script>※JSへのパスは適宜書き換えてください。
add_filter( 'the_content', 'add_delay_load_img', 99); add_filter( 'post_thumbnail_html', 'add_delay_load_img', 11);
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の設置環境により異なります。
■基本の高速化についての参考記事
スマートフォンサイトを驚くほど速くする!高速化9つのポイント
デザイナーができるWebサイト高速化!JavaScript/CSS圧縮ツール厳選10個