夫婦でしっかり子育てしたい、パパのための情報サイト

子育てライブラリ

AFFINGER5(WING)の表示速度を高速化する方法! オフスクリーン画像の遅延読み込み対策も

投稿日:

このブログでは「AFFINGER 5(WING )」という有料のテーマを使用しているのですが、いかんせんデフォルトのままだと表示速度が遅い。

そこで同じテーマを使っている方のために、無料でできる表示速度改善方法を紹介したいと思います!

オフスクリーン画像の遅延読み込みに悩まされている方にも効果がある方法なので、参考にしてみてください。

どうして表示速度なんて気にするんだろう?

まず最初に、どうして表示速度なんて気にするんだろう? と思う方がいるかも知れませんが、WEBサイトの表示速度はグーグル検索の検索順位に大きな影響を与え、1秒から5秒に落ちるだけで直帰率が90%程度上昇します。

つまり、まったく同じ評価のサイトであれば、表示速度が早いほうが検索上位に表示され収益率があがるというわけ。

今まで自分のサイトの表示速度なんか計測したことがないって方は、一度 PageSpeed Insights で計測してみましょう!

プラグインで表示速度を高速化

「WordPress 高速化」や「アフィンガー 高速化」などで検索をかけると、プラグインを導入する方法が数多く出てきます。

プラグインを入れると重くなるから……と考えている方がいるかもしれませんが、それは導入するプラグイン次第ということ。

で、AFFINGER5(WING)に導入すると表示速度を改善することのできるプラグインですが、2つだけ入れておけばいいです。

Autoptimize EWWW Image Optimize ですね。

Autoptimize はHTMLやCSS・JavaScriptなどの最適化が行えるプラグインで、EWWW Image Optimize は画像の圧縮が行えるプラグイン。

EWWW Image Optimize は一括最適化をすればいいだけなので説明は省くとして、Autoptimize の設定方法はこんな感じです。

すべてのCSSをインライン化にチェックを入れると、サイトによっては表示速度があがりますので、好みでチェックをつけるようにしましょう。

Autoptimize を使用することで表示が崩れる場合があります。
表示が崩れた場合は、Autoptimize の使用を中止しましょう。

オフスクリーン画像の遅延読み込み

AFFINGER5(WING)には、公式のプラグインとして「LasyLoadSEO」というものがあるのですが……こんなもの使う必要はありません。

アフィリエイトをするのであれば、タグ管理マネージャーやABテストプラグインは購入する価値はありますが、たかだか LasyLoad の機能ぐらいパパっと実装してしまいましょう。

使用するのは「lazysizes」というプラグインで、WordPressの管理画面から導入できるものとは違います。

さらに function.php を編集したり、小テーマにフォルダを追加する必要があるので若干難易度が高め。

ですが lazysizes を導入すれば、LasyLoadSEO でできることはだいたい出来るうえ AFFINGER5(WING)以外のテーマにも流用可能!!

導入方法を覚えておいて損はありませんので、WordPressをカスタムする勉強だと思ってやっていきましょう。

lazysizes をダウンロードする

まず最初にやらなければいけないのは、lazysizes をダウンロードすることです。

どこからダウンロードできるのかというと、Github というサイト。

自分でWEB制作を行っている方ならお世話になっているはずですし、そうじゃない方はこういうサイトがあることを覚えておくといいでしょう。

ダウンロードの方法も簡単で、

右側にある緑の「Clone or download」をクリックし、その後は「Download ZIP」をクリックしてファイルをダウンロードするだけ。

lazysizes-gh-pages というフォルダの中に、今回使用する lazysizes.min.js が入っていますので、別の場所に同名のフォルダを作り、その中に lazysizes.min.js を入れておきましょう。

小テーマにフォルダを追加する

lazysizes がダウンロードできたら、次は小テーマにフォルダを追加します。

追加するフォルダは「plugins」と「lib」の2つ。

plugins には先程ダウンロードして作った lazysizes-gh-pages フォルダを放り込み、lib の中には func-plugins.php というファイルを作っておきます(ファイル名は自分で好きなものをつけて構いません)。

これらをFTPソフトを使って、affinger5-child の直下にアップロードします。

余計なものをアップロードしていなければ、こんな感じの構成になっているはずです。

ダミー画像を用意する

次にやることは、小テーマの中にある images フォルダの中に、LasyLoad で画像を読み込む際に使用するダミー画像を放り込みます。

縦横1pxで作っておけばどんなものでもいいのですが、今回は img-dammy という名前のPNG画像にしておきましょう。

func-plugins.php を変更する

先程小テーマに放り込んだ lib フォルダの中にある func-plugins.php ですが、まだなんの記述もしていない状態です。

何も記述がなければ作った意味がないので、次のコードを記述しましょう。

<?php
if ( !defined( 'ABSPATH' ) ) exit;
//▼ jsの読み込み
function register_script() { //読み込むjsを登録する
	wp_register_script('lazysizes', get_stylesheet_directory_uri().'/plugins/lazysizes-gh-pages/lazysizes.min.js');
}
function add_script() { //登録したjsを以下の順番で読み込む
	register_script();
	wp_enqueue_script('lazysizes', '', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'add_script');

//▼ lasysize用の設定 function lazysizes_img($content) { //ダミー画像の読み込み $img_dammy = esc_attr(get_stylesheet_directory_uri()).'/images/img-dammy.png'; $li_content = $content; $li_content = preg_replace('/(<img[^>]*)\s+class="([^"]*)"/', '$1 class="$2 lazyload"', $li_content); $li_content = preg_replace('/(<img[^>]*)\s+src=/', '$1 src="'.$img_dammy.'" data-src=', $li_content); return $li_content; } add_filter('the_content','lazysizes_img'); //▼ アイキャッチの無駄な出力を削除 add_filter('wp_calculate_image_srcset_meta', '__return_null'); //▼ アイキャッチの出力設定 add_filter( 'post_thumbnail_html', 'custom_attribute' ); function custom_attribute( $html ){ $img_dammy = esc_attr(get_stylesheet_directory_uri()).'/images/img-dammy.png'; $html = preg_replace('/(<img[^>]*)\s+class="([^"]*)"/', '$1 class="$2 lazyload"', $html); $html = preg_replace('/(<img[^>]*)\s+src=/', '$1 src="'.$img_dammy.'" data-src=', $html);
return $html; }
?>

これで</body>直前に lazysizes のjsを読み込み、アイキャッチと投稿記事内の画像を遅延読み込みする下準備が完了しました。

画像を読み込むまではダミー画像が配置されているので、src の値が空になることもありません。

最後は function.php を編集するだけです。

function.phpを編集する

WordPressに慣れていない方がもっとも編集したくない function.php ですが、最近は多少ミスしても巻き戻してくれるのでそこまでビビる必要はありません。

さらに書き込む記述も、

require_once ('lib/func-plugins.php');

たったのこれだけ。

これで先程 func-plugins.php に記述した内容を読み込んでくれるので、function.php がごちゃごちゃせずにすみます。

万が一のため、function.php は必ずバックアップを取っておきましょう!

使用方法

アイキャッチや記事に画像を挿入するだけで、アイキャッチと投稿記事内の画像が遅延読込されます。

超簡単ですね!

どれぐらいの表示速度がでるのか計測してみた

表示速度を早く出来ると言っても、今の基準じゃそこまで早くならないんじゃないの? と思うでしょうが、この記事の内容だけでここまで速度が上がります。

これはAdSenseを使用していない状態ですが、どうでしょう? クッソ早いと思いませんか?

AdSenseを、リンクユニットとディスプレイ広告の合わせて4つ使用しても、こんな感じ。

十分すぎますね。

使用しているサーバーによっても速度は変わってきますが、これで表示速度を気にする必要はなくなりました。

表示速度が遅くて仕方ない方は一度試してみてはいかがでしょう?

-カスタム

Copyright© 子育てライブラリ , 2019 All Rights Reserved.