Elementor 標準の Hello テーマはいかがなものでしょう、ということで Hello 切り替えついでに、当サイトにも Elementor を導入してみました。Hello はほぼスケルトンなので、導入直後はさすがに高速でしたが、ヘッダーを Elementor で導入した途端、スコア急落。困った、ということで急遽パフォーマンス調査。
前回までの施策は以下の記事を参考に。
とにかく Web Font が重てぇ
格好いい文字組を実現するためのフォントですが、日本語だとそんなに使わないですよね……。そもそも Font set 自体が欧文と比較して圧倒的に多い。そして Elementor などで標準的に読み込むフォントは大体英文用です。
Google Fonts の読み込みを無効化する
Hello には子テーマが用意されているので、GitHubからダウンロードし、functions.phpに以下を追記します。
add_action('wp_footer', 'foot_adsense', 99);
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Elementor の設定から Google Fonts の読み込み方式を選択できますが、いずれを選択してもパフォーマンス（というか PageSpeed のスコア）に影響が出なかったので思い切って無効化します（Elementor のサイト設定から、標準フォントを全て Robot から標準に戻します。またテンプレートを使う場合にはフォントの確認を行うようにします）。
使うフォントを決めたら自分のサーバーにアップロードして使うといいと思います。Astra Pro は Google Fonts をカスタマイザーからキャッシュできたので、 Astra Pro を使う場合はそれでいいと思います。
woff2 その他のブラウザキャッシュを有効にする
何故かフォント系のファイルにブラウザキャッシュが効いていなかったので修正。以下が筆者に追加した .htaccess関係
<IfModule mod_mime.c>
AddType font/woff2 .woff2
AddType font/woff .woff
AddType font/otf .otf
AddType font/ttf .ttf
AddType image/webp .webp
AddType audio/webm .weba
AddType video/webm .webm
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 30 days"
ExpiresByType text/javascript "access plus 30 days"
ExpiresByType application/javascript "access plus 180 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/svg+xml "access plus 30 days"
ExpiresByType image/webp "access plus 30 days"
ExpiresByType image/bmp "access plus 30 days"
ExpiresByType video/3gpp "access plus 30 days"
ExpiresByType video/3gpp2 "access plus 30 days"
ExpiresByType video/mp2t "access plus 30 days"
ExpiresByType video/mpeg "access plus 30 days"
ExpiresByType video/webm "access plus 30 days"
ExpiresByType video/x-msvideo "access plus 30 days"
ExpiresByType audio/midi "access plus 30 days"
ExpiresByType audio/x-midi "access plus 30 days"
ExpiresByType audio/mpeg "access plus 30 days"
ExpiresByType font/woff "access plus 1 years"
ExpiresByType font/woff2 "access plus 1 years"
ExpiresByType font/ttf "access plus 1 years"
ExpiresByType font/otf "access plus 1 years"
ExpiresByType font/vnd.ms-fontobject "access plus 1 years"
</IfModule>楽介も使っている、ブロガーに人気の ConoHaWING
の場合、管理画面から上記を貼り付けるだけで大体動作すると思います。
最初に woff や woff2 のキャッシュ設定が動かなかったのは、 mod_mime により mime type が定義されていませんでした。それから、 mod_mime.c です。 mime_module.c ではないです。
eicons.woff2 を swap 化する
eicons は elementor のアイコン用フォントだと思います。これが、テキストのレンダリング中にロードされると pagespeed に文句を言われます。そんなこと言われても、ヘッダーメニューのハンバーガーに使われている場合、どうしようもないです。従って、以下に示す対応をしても PageSpeed Insights のスコアが上がるだけで、実際のユーザーエクスペリエンスには影響がほぼないと思われます。
functions.php に
function preLoadingFonts(){
echo <<< EOL
<link rel="preload" href="https://example.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.16.0" as="font" type="font/woff2" crossorigin="anonymous">
EOL;
}
add_action('wp_head', 'preLoadingFonts');
?>として eicons.woff2 を Preload するように指示します。が、これはほぼ効果がないと思います（スコアにも影響がありませんでした）。
仕方がないので、 plugins/elementor/lib/eicons/elementor-icons.css をダウンロードして開きます。
先頭に woff2 を読み込んでいる箇所があるので
@font-face {
font-family: 'eicons';
src: url("../fonts/eicons.eot?5.16.0");
src: url("../fonts/eicons.eot?5.16.0#iefix") format("embedded-opentype"), url("../fonts/eicons.woff2?5.16.0") format("woff2"), url("../fonts/eicons.woff?5.16.0") format("woff"), url("../fonts/eicons.ttf?5.16.0") format("truetype"), url("../fonts/eicons.svg?5.16.0#eicon") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;}のようにして、 font-display: swap; を追記します。
このままだと、 minify されたcss が作成されていないので、修正されたCSSを minifier でminify し、同じディレクトリにある /elementor-icons.min.css に上書きします。minifier は以下をお借りしました。
クリティカル Path CSS を使ってみる
Autoptimize にクリティカル CSS という機能があるので、フォント関連読み込みが早くなればいいなぁという気持ちで使ってみます。そもそも、 Autoptimize 自体に似たような機能がついているので、あんまり関係ないとは思いますが……。
CSS ファイルを連結、などのチェックを外して設定を保存します。また、サーバーのキャッシュやキャッシュプラグインを使っている場合にはキャッシュを削除します（Autoptimize以外のキャッシュも全て）。
- URL=https://www.sitelocity.com/critical-path-css-generator
上記のCritical Path CSS Generator に Webサイトのドメインを入力し、Critical Path CSS を作成します。ページレイアウトが大幅に異なるLPなどを使っている場合は、各ページで行います。また、丁寧に行う場合は、アーカイブページや投稿ページ、固定ページなどのページ種別ごとに作るとなおいいでしょう。
MINIFIED CRITICAL CSS FILEをクリックし、CSS ファイルをダウンロードします。
ダウンロードしたCSS ファイルは、 Autoptimize の
クリティカル CSS タブにある「標準ルールの CSS を編集」ボタンをクリックして、開いた編集画面にコピー＆ペーストします。 LP ごとや、アーカイブページごとなどのより詳細なクリティカル CSS は、隣の新規ルールを追加ボタンをクリックして、ルールと一緒に追加します。
最後に、クリティカル CSS の入力が終わったら CSS ファイルの連結などの設定を戻しておきます。
また、テーマを変更した場合は、クリティカル CSS 設定をやり直すことを忘れないようにしましょう。
終わりに
Astra Pro から Hello にしようかなぁと思った理由が、トップページでの LCP スコアが改善しなかったからです。これは、アイキャッチ画像のサイズ・表示方式の問題もあり（アイキャッチ画像をしっかり作ればいいんですが）、であれば Hello でもいいかなぁという感じです。
ただ、 Hello にしたらしたで、ヘッダーやサイドメニューを Elementor で組まなければならず、そうするとどうしても Elementor 特有のリソースを使うことになります。それに加えて、 Google Fonts のロードの問題も出て来ます。
ということで対応を行ったのですが……、この対策を施した Astra Pro の子テーマにして、トップページやアーカイブページを Elementor Pro で作った方が、総合的にはよくなるような気がします（まあ、 WP-Rocket などの有料プラグインに頼ればいいのですが、趣味ブログではちょっとお高いです）。
お金をかけすぎない割には、充分に高速でストレスの少ない環境に近づいていると思うので、ひとまずは満足です。
楽介でした。
