【スコア90点越え】SANGOを高速化するためのカスタマイズ9選

くるみ

ページ速度改善はやってみたけど、その他にSANGOを使っているからこそ改善したほうがいいことってある？

ということで今回は

SANGO使ってるけどサイトの速度が気になる
テーマ設定以外で他に高速化する術ってあんの?

という方に向けてSANGOを利用している当サイトで「高速化するために行ったカスタマイズ9選」をまとめました。

本記事を参考にすれば、PageSpeed Insightsで指摘される内容を解消し大幅にスコアを上げることができます。

お品書き

SANGOを高速化するために行ったカスタマイズ9選
高速化カスタマイズの結果
まとめ

SANGOを高速化するために行ったカスタマイズ9選

レンダリングを妨げるリソースの除外

PageSpeed Insightsで頻出の「レンダリングを妨げるリソースの除外」という項目。

要約すると「余分なJSとかCSSは遅延読み込みしてね」ということです。これに対してとった対処法は主に2つ。

Autoptimizeで最適化する

みんな大好きなプラグイン「Autoptimize」を使ってコードを最適化しました。

HTML・CSS・JavaScriptを最適化するだけでなく…

「追加」からGoogleフォントの削除が設定できるので、これもやっておくと良さげかもしれません。

その他の難しい設定に関しては触らないほうが吉かも

くるみ

CSSとJSをフッターで読み込む

function move_js_footer(){
        remove_action('wp_head', 'wp_print_scripts');
        remove_action('wp_head', 'wp_print_head_scripts', 9);
        remove_action('wp_head', 'wp_enqueue_scripts', 1);
        add_action('wp_footer', 'wp_print_scripts', 5);
        add_action('wp_footer', 'wp_print_head_scripts', 5);
        add_action('wp_footer', 'wp_enqueue_scripts', 5);
    }
 add_action('wp_enqueue_scripts', 'move_js_footer');

上のようにfunctions.phpに追記し、ヘッダーで読み込まれていたJSをフッターに移動させました。

function my_dequeue_plugin_files(){
        wp_dequeue_style('sng-fontawesome');
    }
    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('sng-fontawesome');
    }
 add_action('wp_footer', 'my_enqueue_plugin_files');

更に一部のCSSもフッターに移動します。

自分はfontawesomeのCSSの読み込みに時間がかかってると出たので、その部分だけを移動しました。

参考 WordPress : レンダリングをブロックしているJavaScript/CSSへの対策HACK note

第三者コードの影響を抑える

これまたPageSpeed Insightsで頻出の「第三者コードの影響を抑えてください」。

Twitterを埋め込んだり外部のサービスを利用してる場合に出やすいですが、多くの方はGoogleのAdSence広告が原因だと思われます。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

まず広告作成時に発行されるコードの1行目のscriptタグを削除します。サイト内に複数広告を貼っている場合はその分削除する必要があります。

//アドセンスの遅延読み込み
let lazyloadads = false;
window.addEventListener('scroll', function () {
  if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
    let ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    ad.crossorigin = 'anonymous';
    let scAd = document.getElementsByTagName('script')[0];
    scAd.parentNode.insertBefore(ad, scAd);
    lazyloadads = true;
}

そして上のコードをjsファイルに記述すればOK。

最初はこの遅延読み込みによるクリック数の減少などを懸念してましたが、目に見えて「げっ…減ってる」みたいなことは一切ありませんでした。

内容をかなり省いてしまったので、詳細な手順は以下の記事を参考にしてください。
【コピペで解決】「第三者コードの影響を抑えてください」の改善方法

Font Awesomeをローカルで読み込む

テーマ側でCDNとして読み込んでいるFont Awesomeをローカルで読み込むようにします。

// FontAwesome
function sng_font_awesome_cdn_url() {
  if (get_option('use_fontawesome4')) return 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
  $fontawesome5_ver = get_option('fontawesome5_ver_num') ? preg_replace("/( |　)/", "", get_option('fontawesome5_ver_num') ) : '5.11.2';
  return '/wp-content/themes/sango-theme-poripu/css/all.min.css'; //変更
}

これで速度が上がるだけでなく、PageSpeed Insightsで頻出の「ウェブフォントの読み込み」も改善することができます。

SANGOでは改善しづらかったやつだ！

くるみ

詳しい方法については以下の記事を参考にしてください。
【脱CDN】Font Awesomeをローカルにダウンロードして読み込む方法

スクロールパフォーマンスを高める

これまたPageSpeed Insightsで表示されがちな「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」という項目。

I.addEventListener("touchstart", l, { passive: true })

(n = d[o]).addEventListener("touchstart", a, { passive: true })

これに対してはwp-includes/js/comment-reply-min.jsにて、上のようにそれぞれ第三引数に「{ passive: true }」を追加してあげます。

詳しくは以下の記事をご参照ください。
【解決】「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」の対処法

アイキャッチ画像のサイズを調整する

テーマによって画像の推奨サイズが異なる場合が多く、自分の場合はCocoonからSANGOに移行してきた身分のため、アイキャッチ画像が大きいことで怒られることがありました。

そこで、推奨されている680×390pxの1.5倍の1020×585pxにサイズを移行したところ、綺麗に警告は消えました。

参考 SANGOアイキャッチ画像の推奨サイズPORIPU

画像を最適化する

EWWW Image Optimizer

画像最適化プラグインでは有名な「EWWW Image Optimizer」を使います。

設定の「WebPに変換する」を選択しておくことで、「次世代フォーマットでの画像の配信」の項目をクリアできるのでそこも忘れないようにしたいところ。

TinyPNGで画像を圧縮する

画像をめちゃくちゃ綺麗に質を下げずに圧縮してくれることで有名な、オンライン上の「TinyPNG」を利用するが圧倒的におすすめです。

画像を毎回アップロードする手間はありますが、驚くほど綺麗に圧縮してくれるので手間を惜しまずやる価値は十分にあるかと思います。

EWWW Imgage Optimizer×TinyPNG=最強。

くるみ

画像を遅延読み込みさせる

ウィジェット編

SANGOは「外観」＞「カスタマイズ」＞「高速」からメインコンテンツ外の画像の遅延読み込みを設定できますが、「カスタムHTML」などで挿入したものに関しては遅延読み込みしてくれません。

<img src="..." loading="lazy">

例えばSANGOユーザーの殆どはウィジェットの「カスタムHTML」を用いてプロフィール欄を挿入していると思いますが、その中の画像は上のように「loading=”lazy”」を加えてあげたほうが良さげです。

吹き出しの画像編

吹き出しの画像もウィジェットの画像同様に、設定からだと遅延読み込み出来ないようなので、以下のようにJavaScriptでloadingという属性にlazyを指定してあげて遅延読み込みさせました。

//吹き出し画像の遅延読み込み
$(".say .faceicon img").attr("loading", "lazy");

かなり細かいことですが各記事のスコアも上げたい場合には有効です。

吹き出しの画像をSVGにする

上で吹き出しの画像を遅延読み込みする云々の話がありましたが、そもそも画像自体の形式をSVGにして軽くする、という方法もあります。

SVGはベクター画像の形式で、拡大しても画質が劣化しなくPNGやJPEGよりも軽いのが特徴です。

あたしもSVG!

くるみ

SVG画像を生成する方法としては、イラレで書き出す方法もありますが、PNGやJPEGを変換してくれるオンラインのサービス「Online Image Vectorizer」もあります。
よほど繊細な画像でない限り、SVGにして綺麗に&軽くしちゃった方がいいかもしれません。

キャッシュ系プラグインを使う

高速化のためにはキャッシュ系プラグインは必須レベルですが、中でもオススメなのは「WP Fastest Cache」。

インストールして有効化するだけでよく、難しい設定は不要なのでそこもGood。

高速化カスタマイズの結果

上で挙げたカスタマイズを行ったところ、ウチのサイトの(モバイルの)点数は49点から90点台になりました。

速度にこだわりすぎるのもアレですが、点数が緑色で表示されるとやはり嬉しいものですね。

及第点!

くるみ

まとめ

以上、SANGOを利用しているウチのサイトで「高速化するために行ったカスタマイズ9選」でした。

「デザインの方もカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝