どうもおはようポテト(@ohayoupoteto22)です。
SANGOを使ってる我がサイトをもっと速くしたい…
「SANGO使ってるけどサイトをもっと高速化したい」
「SANGOのテーマ設定以外で他に高速化する術ってあんの?」
という方に向けてSANGOを利用しているウチのサイトで「高速化するために行ったカスタマイズ7選」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
SANGOを高速化するために行ったカスタマイズ7選
レンダリングを妨げるリソースの除外
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広告が原因だと思われます。
//AdSense遅延読込み
<script>
(function(window, document) {
function main() {
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
}
var lazyLoad = false;
function onLazyLoad() {
if (lazyLoad === false) {
lazyLoad = true;
window.removeEventListener('scroll', onLazyLoad);
window.removeEventListener('mousemove', onLazyLoad);
window.removeEventListener('mousedown', onLazyLoad);
window.removeEventListener('touchstart', onLazyLoad);
window.removeEventListener('keydown', onLazyLoad);
main();
}
}
window.addEventListener('scroll', onLazyLoad);
window.addEventListener('mousemove', onLazyLoad);
window.addEventListener('mousedown', onLazyLoad);
window.addEventListener('touchstart', onLazyLoad);
window.addEventListener('keydown', onLazyLoad);
window.addEventListener('load', function() {
if (window.pageYOffset) {
onLazyLoad();
}
});
})(window, document);
</script>そこでそのアドセンス広告を遅延読み込みさせることで、最初の読み込み速度の改善を図りました。
最初はこの遅延読み込みによるクリック数の減少などを懸念してましたが、目に見えて「げっ…減ってる」みたいなことは一切ありませんでした。
ブログ主
アイキャッチ画像のサイズを調整する
テーマによって画像の推奨サイズが異なる場合が多く、自分の場合はCocoonからSANGOに移行してきた身分のため、アイキャッチ画像が大きいことで怒られることがありました。
そこで、推奨されている680×390pxの1.5倍の1020×585pxにサイズを移行したところ、綺麗に警告は消えました。
参考 SANGOアイキャッチ画像の推奨サイズPORIPU画像を最適化する
EWWW Image Optimizer
画像最適化プラグインでは有名な「EWWW Image Optimizer」を使います。
設定の「WebPに変換する」を選択しておくことで、「次世代フォーマットでの画像の配信」の項目をクリアできるのでそこも忘れないようにしたいところ。
TinyPNGで画像を圧縮
画像をめちゃくちゃ綺麗に質を下げずに圧縮してくれることで有名な、オンライン上の「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にして綺麗に&軽くしちゃった方がいいかもしれません。
キャッシュ系プラグインを使う
高速化のためにはキャッシュ系プラグインは必須レベルですが、中でもオススメなのは「WP Fastest Cache」。
インストールして有効化するだけでよく、難しい設定は不要なのでそこもGood。
高速化カスタマイズの結果
上で挙げたカスタマイズを行ったところ、ウチのサイトの(モバイルの)点数は49点→82点になりました。
速度にこだわりすぎるのもアレですが、これくらい点数取れていれば十分かなと。
くるみ
まとめ
以上、SANGOを利用しているウチのサイトで「高速化するために行ったカスタマイズ7選」でした。「デザインの方もカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。
【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
