WordPressやHTMLでPageSpeed insightsのスコアを大幅に向上させ検索順位を上げる魔法みたいなプラグイン

どうも皆さんこんにちは kamata4649 と申します。

今回はPageSpeed insightsを見ながらスコアを大幅に上げる方法を紹介します。スコアだけ見ても点数を改善することはできません

※テーマによっては不具合が発生したり、サイトが閲覧できない状況になったりなど、様々な問題が発生する場合があります。不安がありましたら専門の人に依頼をするのをおススメします。

レンダリングを妨げるリソースの除外 「プラグイン使用版」

レンダリングを妨げるリソースとは主に<head>~~</head>の中にある非同期読み込み(Async処理)をしていないJSやLoadCSSなどで非同期化していないCSSなどを指します。

この問題を改善するにはJSやCSSを<footer> ~~ </footer>などコンテンツの一番下に設置することで読み込み速度を向上することが可能です。

HTMLでの高速化をしたい場合はheadにあるJS,CSSファイルをfooterで処理(もしくは</body>の手前で処理させる)方法をとることで改善をすることができます。

私は Fast Velocity Minify というプラグインをお勧めします。操作が簡単で不具合の発生が少ないです。Autoptimizeより高速化が期待できます。

このように レンダリングを妨げるリソースにかかっている時間をある程度抑えることが可能です。これはデザインに凝っているサイトには有効的だと思われます。

レンダリングを妨げるリソースの除外 「プラグイン不使用」

// Custom Scripting to Move JavaScript from the Head to the Footer
// このコードは Headで読み込むJSを削除しfooterへコピーして移行するコードです
function remove_head_scripts() {
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_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
}
add_action( ‘wp_enqueue_scripts’, ‘remove_head_scripts’ );

// END Custom Scripting to Move JavaScript 

これを外観→テーマの編集→functions.phpから編集し<?php ~~ ?>内に入れることで高速化が可能です。

jQueryはheadで読み込むと速度の低下を招く可能性があります。このfooterで読み込む方法は速度の改善へとつながるでしょう

次世代フォーマットでの画像の配信

この改善はGoogle Chromeなどにしか対応していませんがGoogle ChromeなどにてGoogle社が開発した新しい画像フォーマット方法 WebPを使用して高速化をいたします。「通常の圧縮とは違いjpeg,pngとは違いすべてのデバイスでは使用できません」

EWWW Image Optimizerを使用します。WordPressでの画像圧縮系で最も有名とされているプラグインである。これを使ってまず WebPに圧縮されるようにする

EWWW の設定から WebPの項目をすべてOnにして保存してください。

これだけだとまだWebPでの表示に対応していないのでCache Enablerを使用します

Cache Enablerの設定のWebPの項目をOnにし保存してください

これでWebPへの対応が完了しました。

どうでしょうか?ある程度はスコアが上がりましたでしょうか?これでも上がらなければアニメーションをOffにしてみたり、Google Fontを利用するのをやめるだけでスコアの向上に期待できます。

コメント