godios

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

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

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

 

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

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

 

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

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

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

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

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

godios

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

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

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

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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==" data-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();
        }
    }
}

その他のCSSを圧縮する

こちらのブログではGodiosを使用していますが、もちろん子テーマを利用しています。

当時の私はまだ若く、Wordpressの編集画面から追加でCSSを設定できるなんて知りませんでした。

そのため、追加のデザイン要素は子テーマ内のCSSにゴリゴリ書いているんですが、案の定PageSpeed Insightsで「ファイルがデカイ」と怒られてしまいます。

なので、CSSファイルそのものを圧縮させてしまいます。

上記のWEBツールにCSSのコードを貼り付け、縮小後のCSSに変えた後、再度Wordpressにアップロード。これで子テーマで利用しているstyle.cssが怒られる事はなくなりました。

 

また、当ブログではfont-awesomeを利用しています。

テキストだらけのサイトを可愛らしくしてくれる素晴らしいツールですが、仕様上どうしても重くなります。

外部から読み込むのがダメそう、と思ってダウンロードして整形していたんですが、使用していない無駄なセレクタが多すぎて、却って重くなってしまいました。
これはいかん、という訳で、使用しているセレクタのみ利用するように、必要のないCSSコードを削っていく作業を実行

しようと思ったんですが、プラグインのCSSなどは基本的に圧縮(難読)化されているため、ズラーっと一列に記述されていて、めちゃくちゃ見難いです。

そんな時には上記のWEBツール。

all.min.cssなど、圧縮されているCSS,JSファイルなどを分かりやすくコード整形してくれるツールです。
こちらを利用し、いらないと感じたセレクタを片っ端から削っていきます。

最後に

全ての作業が終わったら、キャッシュをリセットして確認を行いましょう。

 

あ、上記の作業による上で起こった不具合には、一切責任を持ちません(今更)
くれぐれも、自己責任でお願いします

function.phpをいじると真っ白になったりするので、必ずバックアップを取ってから行いましょうね。

 

さて、これらの作業を行なった現在のサイトスピードですが……

site-speed-test

超微妙wwww

 

まぁ、個別記事で分析するとモバイルスコアはこんなもんでしょう。

悔しくて何度か繰り返しましたが、60点以下を下回るような事は無くなったので僕は満足してます。というかこれ以上やりたくない

ちなみに、PageSpeed Insightsで改善できる項目は『次世代フォーマットでの画像の配信』のみになりました。出る時と出ない時がありますが。
KUSANAGI & ConohaVPSなら画像アップロード時に自動で圧縮してくれる機能があるので、今はこれで許してくれていると信じています。

90点以上の点数を叩き出すには、どうしたら良いか、答えは分かっています。Adsenseの廃止です。

もちろん、やるつもりは、ないです。

関連記事