Kindle 9周年キャンペーンで最大70%OFF!ブログ関連本セール中詳しく見る

【SANGO】高速化!Performanceで90点以上にするために試した事[WordPress]

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

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

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

目次

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

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

すでに導入していたこと

  • 無駄なプラグインを減らす
  • 画像を圧縮する、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 」のそれぞれの観点から改善すべき点をあげてくれます。


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

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

Opportunitiesの16項目

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

Diagnosticsの9項目

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

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

Eliminate render-blocking resourcesの改善

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

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

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

最終的には突き詰めると

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

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

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

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

@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)
※実際の表示サイズ(使われている画像サイズ)

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

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

すいみん

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

  • Accessibility
  • Best Practices
  • SEO

SANGOのカスタマイズ

すいみん

SANGOの時のカスタマイズをまとめました。

【WordPress】はてなブログからワードプレスへの移行ポイントまとめ

目次
閉じる