Godiosをカスタマイズしてさらに高速化を試みてみた【レンダリングブロック要素削除】

中々カスタマイズの情報が出回らないGodios。

今までどれだけGoogleに改善しろと怒られても、「他のテーマと比べると速いから…」と我慢して使ってきましたが、最近になってようやく重い腰を上げました。

GODモードは素晴らしいですが、その性能を発揮するのはユーザーが2ページ目に移ってくれた時だけ。
僕のブログのように、離脱率が85%OVERだと「速い！！」って感じる前に殆どの人は帰っちゃうんですよね。

Godiosを導入しただけで、特にカスタマイズしてない方は、TOPページ以外、個別の記事をPageSpeed Insightsで分析してみてください。本当に速いですか？

僕はクッッッッソ遅かったです。

PCは速いですが、モバイルは50点台。調子が良くてもMARCHの偏差値程度で、東大理3には及びません。

ってわけで、以下、備忘録を兼ねた高速化のカスタマイズです。

~~ブログカード~~・プロフィール画像を遅延読み込みできる
レンダリングブロック要素を改善出来る

GodiosによるLazyload(画像遅延読み込み)の適用
1. プロフィール画像を遅延読み込みさせる
2. ブログカードの画像を遅延読み込みさせたい
レンダリングブロックを避ける
1. プラグインのCSS読み込みを最適化させる
2. その他のCSSを圧縮する
最後に

GodiosによるLazyload(画像遅延読み込み)の適用

ページを速く表示させるには、画像遅延読み込みは必須。

GodiosはLazyload機能を兼ねてはいますが、標準で働いてくれるのは関連記事とTOPページのサムネイルくらいです。

記事に貼り付けた画像は、classに”lazyload”を付与し、正規のsrc属性をsrcに直し、ダミー画像を指定しなければいけません。

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="画像URL" class="lazyload" title="" alt="" />

↑こんな感じ

過去の記事でもSearch Regex等のプラグインを使えば書き換えは可能ですが、検索演算子の使用がちょいとややこしいです。

僕がよく分からなくて諦めていたのは、ブログカードとサイドバーに表示される画像の遅延読み込みの二つ。
どちらもPageSpeed Insightsで怒られていましたが、ずっと放置してきました。

プロフィール画像を遅延読み込みさせる

サイドバーで表示出来るGodios標準のプロフィールウィジェットは、なぜかデフォルトでは遅延読み込みされません。

スマホだと下の方に押しやられて気付き難いですが、サイドバーは基本的に全てのページに表示されるため、そのまま放置しておくと「オフスクリーン画像の遅延読み込み」で怒られます。

画像ファイルを圧縮して読込み量を減らしてもいいですが、僕の場合はそれでも怒られてしまったので、親テーマで直すことにしました。

編集ファイル

Godios親テーマ内 > Inc > profile-widget.php

編集するのは、39行目辺りにあるif文内の出力。

if ( '' !== $img_url ) {
echo '<img src="'.$img_url.'" alt="プロフィール画像" />';
}

↓

if ( '' !== $img_url ) {
echo '<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="'.$img_url.'" class="lazyload" alt="プロフィール画像" />';
}

やってる事は、記事内のlazyloadと全く同じ。

ダミー画像を先に表示させ、後から読み込ませるようにします。

ブログカードの画像を遅延読み込みさせたい

Godiosは【blogcard id=””】と、idに記事番号を指定する事で、ブログカードの表示が可能です。

サムネイル画像とタイトルといった簡易的なものですが、シンプルなので僕は結構多用しています。

が、なぜかこちらの画像も遅延読み込みの対象外です。

そして、方法もイマイチ分かりません。誰か教えてください。

編集するとしたら

Godios親テーマ内 > Inc > shortcodes.php

編集するとしたら、shortcodes.phpの85行目辺り。

if ( has_post_thumbnail( $id ) ) {
$img = get_the_post_thumbnail( $id, 'square-large' );
}

get_the_post_thumbnailを使用すると、src-setで吐き出してしまい、上手くいきません。

こちらのブログでは、内部リンクにはGodiosのブログカードを使用していますが、外部リンクでは『はてなブログ』っぽいブログカードを使用しています。なので、いっその事Godios本来のブログカードを捨て去るのも手かも。

function.phpに追記させ、エディタにサイトのURLを貼り付けるだけでブログカードを表示させる例のカスタマイズですが、こちらもiframeを使用しているため、デフォルトの記述ではlazyloadしてくれません。

なので、下記のように書き換えて遅延読み込みを対応させます。

編集ファイル

function.php ※カスタマイズしている人のみ

//本文中のURLをはてなブログカードタグに変更する
function url_to_hatena_blog_card($the_content) {
  if ( is_singular() ) {
    $res = preg_match_all('/^(<p>)?(<a.+?>)?https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im', $the_content,$m);
    foreach ($m[0] as $match) {
      $url = strip_tags($match);
      $tag = '<iframe class="hatenablogcard lazyload" src="https://hatenablog-parts.com/embed?url='.$url.'" frameborder="0" scrolling="no"></iframe>';
      $the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','url_to_hatena_blog_card');//

iframeはclassに”lazyload”を指定するだけで遅延読み込みしてくれるようなので、簡単です。

レンダリングブロックを避ける

次に対策するのは、プラグインやCSS等のレンダリングブロック。

Godiosが速いテーマであっても、カスタマイズを続けていると確実にサイトは重くなります。

PageSpeed Insightsで注意されたCSSやJSファイルなどは、後から読み込むように設定してあげましょう。

なお、以下のコードは他サイトで紹介されているコードを引っ張ってきたモノもありますが、どのサイトから拾ってきたか全く覚えていません()
「オレが書いた！」と自信を持って主張出来る方は、お声掛けください。

プラグインのCSS読み込みを最適化させる

プラグインは便利ですが、導入すれば高確率でサイトが重くなる諸刃の剣です。

特に記事そのもののデザインに影響を変えるプラグインや、アクセス解析を行うプラグインは単記事閲覧毎に読み込まれてしまうため、Godiosとの相性は最悪。

重くなるプラグイン例

JetPack
Contact Form 7
Syntax Highlight系プラグイン

無闇にプラグインを入れず、削除してしまう事が一番の解決策ですが、どうしても使いたいプラグインは有効化しておきたいところ。

ってわけで、function.phpに以下のコードを追記し、該当のプラグインが読み込ませているCSSを後から読み込ませる様にします。
僕の場合、アプリ紹介時に使用している『WP Applink』とコード文をそれっぽくデザインしてくれる『Prism For WP』が対象。

function my_dequeue_plugin_files(){
  wp_dequeue_style('wpal');
  wp_dequeue_style('prism');
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_plugin_files', 9999);
add_action('wp_head', 'my_dequeue_plugin_files', 9999);
function my_enqueue_plugin_files(){
  wp_enqueue_style('wpal');
  wp_enqueue_style('prism');
}
add_action('wp_footer', 'my_enqueue_plugin_files');

赤字部分には、該当するプラグインIDを適用します。

プラグインIDは、GoogleChromeの設定から『その他のツール』→『デベロッパーツール』で見ると分かりやすいです。

上記のように、読み込んでいるstyle.cssに”wpal-css”が確認できます。
IDは、”-css”を省いた”wpal”になります。WP Applinkが読み込んでいるCSSですね。

なお、こちらの作業を行なうと、プラグインによってはデザイン崩れが出てきてしまいます。

僕の場合、Prism For WPのCSSは後から読み込むと上手く機能しませんでした。
その場合、速さを取るか、デザインを取るか決めなければなりません。

また、僕の場合レンダリングブロックをしている要素に『ContactForm 7』が含まれていました。

個人的には必須なので、以下のコードをfunction.phpに追記し、個別記事には読み込ませず、固定ページにだけContact form 7のCSSとJSを読み込ませるように対応させます。

function my_remove_cf7_js_css() {
    add_filter( 'wpcf7_load_js', '__return_false' );
    add_filter( 'wpcf7_load_css', '__return_false' );
}
add_action( 'after_setup_theme', 'my_remove_cf7_js_css' );
function my_enable_cf7_js_css() {
    if( is_page( 'contact' )  ) {
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
        if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
            wpcf7_enqueue_styles();
        }
    }
}