【SANGO】高速化！Performanceで90点以上にするために試した事［WordPress］

サイトの高速化は以前から、ネットで検索して上位にでてきる記事の内容はすでに導入ずみで、イエロースコア（70点台）でした。

本記事では、WordPressテーマ｢SANGO｣の環境で、Lighthousを活用してお金をかけずに最適化した記録になります。

結果としてはぎりぎりグリーンスコアになりました（90点）そのまとめになります。

サイト表示高速化の基礎まとめ

高速化するためによく言われていることを洗い出してみました。

すでに導入していたこと

まだ試してないこと

事項では主にLighthouseの指摘箇所の改善をすることで、パーフォーマンススコアを上げた内容を記載いたしました。

Lighthouseを使ってのサイトページのパーフォーマンス計測方法

Googleの「Lighthouse」を使って、実際のサイトページのパーフォーマンスを計測します。

拡張機能もあるのですが、古いバージョンになってしまうので、最新の採点方式ができる「検証」メニューから実行しましょう！

1. 検証したいページをChromeのシークレットモードで開く
2. 右クリック＞検証
3. 上部メニューのタブから「Lighthouse」を選択
4. 「Generate report」ボタンを押す
   ※「Mobile」か「PC」どちらかを選択しておきましょう。
   以上で検証が開始されます。
5. 検証結果がでます。
   
6. 最後に右上のスリードットメニューから「Save as HTML」を押してレポートを保存しておきましょう。
   　※あとで比較用にも使えます。
   　※ダウンロードしたHTMLを開いて日本語翻訳で見ると分析しやすいです。

Lighthouseの「Performance」の値を改善できる項目まとめ

Google（Lighthouse）が「Opportunities」と「Diagnostics 」のそれぞれの観点から改善すべき点をあげてくれます。

※興味のある人は公式サイトを見ておきましょう。

しかしながらパフォーマンススコアに直接影響しませんと書いてあるので、改善したからといってかならずしも点数があがるとはかぎりません。

Opportunitiesの16項目

Diagnosticsの9項目

全部の項目は紹介しませんが、実際に試してみた施策をいくつか紹介します。

Eliminate render-blocking resourcesの改善

レンダリングブロック、画面を描画する際に障害になるものがピックアップされます。

• 使用していたGoogle Font
• 複数バージョンにわたるfontawesomeのCSS
• 複数バージョンにわたるjquery.js

などを排除したり、非同期にしてブロックを取り除きました。

最終的には突き詰めると

• 使用しているfontawesomeのCSS
• WordPressのテーマのCSS

の２つまで減らすことが可能だったのを確認してます。

Google fontを除外してモリサワのBIZ UDゴシックに変更

function register_googlefonts() {
     wp_deregister_style('sng-googlefonts');//初期設定を解除
}
add_action('wp_enqueue_scripts', 'register_googlefonts');

html body {
   font-family: "Helvetica", "Arial", "BIZ UDGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

body .dfont {
   font-family: "Helvetica", "Arial", "BIZ UDGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

FontAwesomeyのバージョンを一つに絞る

SANGOの子テーマ「Poripu」のprp_customizer.phpで読み込まれている「5.2.0」のFontAwesome5の記述を削除

<link rel="stylesheet" id="prp-fontawesome5-all" href="//use.fontawesome.com/releases/v5.2.0/css/all.css" type="text/css" media="all">
<link rel="stylesheet" id="prp-fontawesome5-v4-shims" href="//use.fontawesome.com/releases/v5.2.0/css/v4-shims.css" type="text/css" media="all">

SANGO＞カスタマイズ＞詳細設定からFontAwesome5のバージョン番号を「5.11.2」に指定。

jQueryのバージョンを一つに絞る

WordPress5.5でバージョン上がりましたが、最適化された同バージョンの「jquery-3.5.1.min.js」を読み込みます。

function setup_cdn_jquery() {
  wp_deregister_script('jquery');
  wp_enqueue_script(
    'jquery',
    'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', 
    array(),
    '',
    false
  );
}
add_action( 'wp_enqueue_scripts', 'setup_cdn_jquery', 100 );

レンダリングブロックしているCSSを非同期で読み込む

たとえば、ぽんひろさんの「ヘッダー固定、スクロールヒントを表示させるテーブル」のCSSとか下記の様にheader.phpに記述

Ensure text remains visible during webfont loadの改善

FontAwesomeなどウェブフォントの表示が重いので改善します。

Fontawesomeの5系ってall.cssだと3つのフォントが読み込まれてかなり重いのですが4系だと1フォントでコンパクトにまとまってて、5よりもかなり軽量！

ただし記述がちょっと違うから直す必要ありです。

— すいみん💤@CGブロガー (@cg_method) August 21, 2020

1. カスタマイズからFontAwesome 4.7にチェック
2. テーマからフォントを読み込まない
3. FontAwesome 4.7のフォントを読み込む <link rel="stylesheet preload prefetch" as="style" href="https:////maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" crossorigin="anonymous"/>

FontAwesomeなどウェブフォントの表示が重いので改善します。

とはいえ記号などは代替ができないので限界があります。

@font-face { 
    font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-weight: 400;
     src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2") format("woff2");
     font-display: swap;
 }

@font-face {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-weight: 900;
     src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2") format("woff2");
     font-display: swap;
 }

@font-face {
     font-family: 'Font Awesome 5 Brands';
     font-style: normal;
     font-weight: 400;
     src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2") format("woff2");
     font-display: swap;
 }

Serve images in next-gen formatsの改善

WebPにしましょう。EWWW Image OptimizerでWebPを設定するのが1番メジャーなやり方です。

やり方は割愛。調べればたくさんできてきます。

ちなみに「Compressor.io 」などで最適化されPNGのほうが軽いので、WebPを使わない人も多いです。

Serve static assets with an efficient cache policyの改善

Conohaのブラウザキャッシュなど使いましょう。もう調整しない時点でONにするのが良いです。

Properly size imagesの改善

まず各場所の画像設定を調べました。（SANGO PORIPU）
※実際の表示サイズ（使われている画像サイズ）

あとはそれぞれ、ぎりぎりまで攻めた画像サイズにすればよいのですが2倍サイズのRetinaなのことも考慮するとあまり解像度下げるのは良くないのと、再生性するのは避けたかったので記事ページのアイキャッチとヘッダーの画像設定だけ変更します。

SANGOのPORIPUだとアイキャッチの初期設定は’large’メディアの設定をいじってなければ1000px以上の画像が表示されていました。

それを’medium_large’ 幅768px固定に変更しています。※SANGOのアイキャッチは幅700pxがベストなので近しいサイズのものをアサイン。

• アイキャッチの画像サイズ変更（entry-header.php）

the_post_thumbnail('medium_large');

• ヘッダーの画像サイズもPCとモバイルで変更（featured-header.php）

そして記事に張っている画像ももしフルサイズで貼っているのであれば、全て’medium_large’ にしてしまいましょう※リンク先設定はメディアに。

下記のコードでmedium_large をプルダウンの選択肢に追加することができます。

これでかなり読み込み速度が改善されます。

他に高速化のためにやったこと

基本的は余計なプラグインを切る方向で整理しました。

JetPackの余計な設定を切る

Jetpackプラグインの全設定一覧。

https://自分のドメイン/wp-admin/admin.php?page=jetpack_modules

で見れます。

Markdown使いたくて入れているけど、よけいなもの多いっす。。。 pic.twitter.com/1Z6W5ZcdHM

— すいみん💤@CGブロガー (@cg_method) August 21, 2020

下記のURLから全機能一覧画面が表示されます。

https://自分のドメイン/wp-admin/admin.php?page=jetpack_modules

Contact Form 7をお問い合わせページ以外読み込みOFF
余計なJSとCSSの読み込みをOFFにします。

1. FTP直下のwp-config.phpにコードを追加

Contact Form 7のプラグインは読み込みしない

/** The Database Collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );
//Contact Form 7 の読み込み停止
define ('WPCF7_LOAD_JS', false);
define ('WPCF7_LOAD_CSS', false);

1. functions.phpにコードを追加

contactというスラッグのページにだけプラグインを読み込む

add_action( 'wp', function() {
if ( is_page( 'contact' ) ) return;
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
});

FontAwesomeのサブセット化

1. 下記のサイトからアカウントを作成
   [sanko href=”https://icomoon.io/” title=”icomoon” site=”icomoon” target=”_blank” rel=”nofollow”]
2. 必要な物を調べつつ、アイコンを選択する
   

下のFontメニューへ
Preferenceで下記を変更

• fa-
• Baseline Height 15 あと下記のアイコン名も変更
• fa-facebook-f

1. 出力したフォルダをテーマ直下に格納

\wp-content\themes\sango-theme-poripu\icomoon

header.phpで記述を追加

<link rel="stylesheet" href="https://www.cg-method.com/wp-content/themes/sango-theme-poripu/icomoon/style.css">

CSSも変更

読み込みを2秒は短縮できました。

高速化！Performanceでグリーンスコアにするために試した事まとめ

結果としてはPCはなんとかグリーンスコアになったものの、モバイルはいまだイエロースコアと厳しい状態です。

まだ改善の余地はあるものの、安定的にグリーンスコアを目指すのであれば、サーバー等にお金をかけるのがベストだと思います。

• Accessibility
• Best Practices
• SEO