ワードプレスの高速化を考えたBase64エンコードによるサムネイル表示の方法
ワードプレスにサムネイルを表示させる一般的な方法は、add_theme_support を使いサムネイルを有効化する方法です。
ただ、この方法ではサムネイル画像の最適化をすることが出来ず、サムネイルを表示することがページ表示の低速化につながります。
一般的なワードプレスでのサムネイル表示方法については「ワードプレス サムネイル」等で検索してもらえれば、たくさん記事が出てくるので検索してみてください。
ここでは、サムネイル表示をしてもページ表示スピードに影響をほぼ与えず、高速にトップページやアーカイブページ等をサムネイル画像付きで表示する方法を書きたいと思います。
自動化はほぼせず手動での処理をします。そのため、かなり面倒くさいです！いろんなプラグインを使えば自動化出来ないこともない処理なのですが、プラグインを使うことは結局低速化につながりますので、プラグインを使わずワードプレス製の関数のみを用いてサムネイルを表示してみます。
サムネイル画像の作成
サムネイル画像は通常アイキャッチ画像や記事内の画像を縮小させて表示しますが、ここでは専用のサムネイル画像を作成します。と言ってもアイキャッチ画像などを縮小、トリミングすればいいだけなので、お使いの画像ソフトで加工をしてください。この際、サムネイル画像は表示サイズぴったりの大きさに調整します。
サムネイルは固定サイズになることが多いと思いますので、その固定サイズで画像を作成します。
今回は下の画像をサムネイルにします。大きさは370×206です。
TinyPNG で圧縮
サムネイル専用画像を作ったら次は画像の圧縮をします。色々な方法がありますが、オススメは「TinyPNG」です。
参考：TinyPNG
有名なサイトなので知っている方も多いと思います。PNG、JPG を圧縮することが出来、70％近くの圧縮で最適化することが出来ます。
ドラッグアンドドロップで簡単に出来るのもいいですね！
今回は20KB ⇒ 7KBに圧縮することが出来ました。
サムネイル表示場所を作成
サムネイルは通常 index.php で表示する事が多いと思いますので、そこに表示する方法を書きます。
アーカイブや他の場所に設置したい場合はその都度対応してください。
index.php
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
・・・
<!-- ループ内に以下を記述 -->
<?php
$thumbmeta = get_post_meta( $post->ID, 'thumb', true );
if ($thumbmeta):
?>
<img class="thumb" width="370" height="206" src="<?php echo $thumbmeta; ?>" alt="<?php the_title(); ?>" />
<?php
endif;
?>
<!-- 記述ここまで -->
・・・
<?php
endwhile;
endif;
?>
ループ内でサムネイルを表示したい場所に上記コードを記載します。width と height はサムネイル表示サイズにします。
もし、記事でサムネイルを設定していない場合はサムネイル表示場所も HTML 上に出ないコードとなってます。
この方法はカスタムフィールドを使いサムネイルを表示します。
サムネイルには「thumb」のクラスネームがつきますので CSS で装飾してみてください。
CSS
.thumb {
/*サムネイル画像用CSS*/
}
画像の Base64 エンコード
サムネイル画像はサイズが小さい画像であることが多いので、 Base64 エンコードして表示することにします。
Base64 エンコードについて詳しくは書きませんので「画像 base64 エンコード」等で検索してみてください。画像を文字列表記するみたいなイメージです。
base64 エンコードするサイトも色々あるのですがオススメは「duri.me」です。
参考：duri.me
ここも画像をドラッグアンドドロップですぐにエンコード出来ますので便利なサイトです。
画像を選択すると上記の様なページになりますので、右の赤枠で囲った部分をクリックしてコピーをします。クリックだけでコピーできるのでとても便利です。
コピーされたものは data:image/～ から始まる形の文字の羅列です。
画像の大きさ、細かさにもよりますが、370✕207の画像であれば圧縮後、base64 エンコードで10000文字ぐらいの文字数となります。
カスタムフィールドでサムネイル表示
サムネイルを表示したい記事の編集画面を出します。
既にカスタムフィールドを使っている場合は大丈夫ですが、始めて使う場合は以下の設定をします。
記事編集場面で「表示オプション」⇒「カスタムフィールドにチェック」をします。
上記の設定をすると、記事編集ページの下の方に「カスタムフィールド」と呼ばれる場所ができますので、画像のように記載します。
名前は「thumb」、値には先程 duri.me でコピーしたものをペーストします。
これでサムネイルを表示することが出来ます。
まとめ
簡単に整理すると
① サムネイル用の画像を表示サイズで作成
② サムネイル用の画像を圧縮
③ サムネイル画像を Base64 エンコードをコピー
④ index.php にコードを記載
⑤ カスタムフィールドに「名前」⇒「thumb」、「値」⇒「エンコード値をペースト」
となります。
①、②、③、⑤ に関してはサムネイルを表示したい記事ごとに個別に処理、設定しなくてはなりません。④ は一度設定すれば大丈夫です。
記事を書くごとに画像を作り編集しなくてはいけないのでとてつもなく面倒くさいのですが、この方法でサムネイルを表示すると PageSpeed Insights での評価を下げることなくサムネイル表示をすることが出来ます。
無事99点でサムネイルを表示しても下がってません。