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

eyecatch-wordpress-performance

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

本記事ではLighthousを活用して、お金をかけずにパーフォーマンスチューニングした記録になります。

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

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

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

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

すでに導入していたこと

  • 無駄なプラグインを減らす
  • 画像を圧縮する、WebPを採用する
  • 画像のLazyLoad
  • JsとCSSコードをインラインにする(Minifyできるプラグイン)
  • キャッシュプラグインを入れてコンテンツキャッシュをかける
  • サーバー側でブラウザキャッシュを入れる
  • プリロード(WP Rocket使用)
  • 非同期読み込み等の設定(WP Rocket使用)

まだ試してないこと

  • Lighthouseの指摘箇所の改善
  • CDNのCloudFlare(無料)を導入する
  • CloudFlareのRocket Loader を導入する
  • 高価な有料サーバーにする。おすすめはConoha Reserved 2GB
  • AMPにする、またはNginxをいれるとか

事項では主に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 」のそれぞれの観点から改善すべき点をあげてくれます。

参考 lighthouse-performancewev.dev ※興味のある人は公式サイトを見ておきましょう。

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

Opportunitiesの16項目

  • レンダリングをブロックするリソースを排除する
  • 適切なサイズの画像
  • オフスクリーン画像を延期する
  • CSSを縮小
  • JavaScriptを縮小
  • 未使用のCSSを削除する
  • 画像を効率的にエンコード
  • 次世代フォーマットで画像を提供
  • テキスト圧縮を有効にする
  • 必要なオリジンに事前接続
  • サーバー応答時間(TTFB)を削減する
  • 複数のページリダイレクトを回避する
  • キーの事前要求
  • アニメーションコンテンツにビデオ形式を使用する
  • サードパーティのコードの影響を軽減する
  • 非合成アニメーションを避ける

Diagnosticsの9項目

  • 巨大なネットワークペイロードを回避する
  • 効率的なキャッシュポリシーで静的アセットを提供する
  • 過度のDOMサイズを回避する
  • 重要なリクエストのチェーンを回避する
  • ユーザータイミングマークと対策
  • JavaScriptの実行時間を短縮する
  • メインスレッドの作業を最小限に抑える
  • ウェブフォントの読み込み中にテキストが表示されたままであることを確認します
  • リクエスト数を少なくし、転送サイズを小さくする

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

Eliminate render-blocking resourcesの改善

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

参考 Eliminate render-blocking resourceswev.dev
  • 使用していたGoogle Font
  • 複数バージョンにわたるfontawesomeのCSS
  • 複数バージョンにわたるjquery.js

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

最終的には突き詰めると

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

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

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

PHP
function register_googlefonts() {
     wp_deregister_style('sng-googlefonts');//初期設定を解除
}
add_action('wp_enqueue_scripts', 'register_googlefonts');
CSS
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」を読み込みます。

PHP
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などウェブフォントの表示が重いので改善します。

参考 Ensure text remains visible during webfont loadwev.dev
  1. カスタマイズからFontAwesome 4.7にチェック
  2. テーマからフォントを読み込まない

  3. FontAwesome 4.7のフォントを読み込む
    &lt;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"/&gt;
    

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

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

CSS
@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の改善

参考 Serve images in next-gen formatswev.dev

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

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

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

Serve static assets with an efficient cache policyの改善

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

参考 Serve static assets with an efficient cache policywev.dev

Properly size imagesの改善

参考 Properly size imageswev.dev

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

PC
– アイキャッチ 700×401(940×539) ’large’ ※sangoはthumb-940
– 記事画像 623×316 (940×478) POPUP ’large’
– 関連記事 200×115 (520×300) ’thumb-520′
– ブログカード 258×148(680×390)’thumb-520′
– 同カテゴリー人気記事 75×75 (150×150) ‘thumb-160’
– 次の記事 84×84 (150×150) ‘thumb-160′

モバイル
– アイキャッチ 414×237(1200×688) ’large’ ※sangoはthumb-940
– 記事画像 384×195(940×478)  ’large’
– ブログカード 364×209(680×390)’thumb-520′
– 関連記事 184×115 (520×300) ‘thumb-520′
– 同カテゴリー人気記事 76×76 (384×384) ’thumb-160′
– 次の記事 85×85 (384×384) ’thumb-160′

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

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

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

  • アイキャッチの画像サイズ変更(entry-header.php)
PHP
the_post_thumbnail('medium_large');
  • ヘッダーの画像サイズもPCとモバイルで変更(featured-header.php)

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

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

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

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

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

JetPackの余計な設定を切る

下記の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' );
});

参考 必要なページのみCSSとJSを読み込むAgoHack

FontAwesomeのサブセット化

  1. 下記のサイトからアカウントを作成
    参考 icomoonicomoon
  2. 必要な物を調べつつ、アイコンを選択する
    参考 Font Awesome4.7フォント一覧WEB MANABU

  3. 下の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はなんとかグリーンスコアになったものの、モバイルはいまだイエロースコアと厳しい状態です。

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

すいみん

ちなみにPerformance以外のスコアは確実に100点を目指せる目処が立っているのでどこまで記載しようと思います
  • Accessibility
  • Best Practices
  • SEO

以上、すいみん(@cg_method)でした!