【Swell】PageSpeed Insightsで100点満点の神設定を公開

PageSpeed Insightsで100点満点の神設定を全部公開。
レンタルサーバ、Wordpressテーマの設定、
プラグイン構成など設定項目などを公開します。
使用テーマは「Swell」となります。

【Swell】PageSpeed Insightsで100点満点の神設定を公開
目次

現在のPageSpeedの点数

こちらはこのブログのトップページの現在の状況です。
3日間ほどこの状態を維持していますので、安定した100点が取れています。
左側がモバイル、右側がPCとなります。

こちらは記事のページです。
左側がモバイル、右側がPCとなります。
ともに100点が出ている状態です。
時々モバイルが99点になる時がありますが概ね100点となっています。
これ以上は難しいと判断して現状私の中での最高な設定を「神設定」として
記事で備忘録として保存しておきます。

WordPressの環境

WordPressの環境

レンタルサーバー Xserver スタンダードプラン
 CPU:AMD EPYC 7543( 2.80GHz ) x 2
 メモリ:1024GB
WordPress 6.0.2
テーマ SWELL 2.6.8.3 (Swell子テーマ使用)
PHP 7.4.28
CDN 未使用

プラグインの構成

Akismet Anti-Spam (v.5.0)
Autoptimize (v.3.1.1.1)
Broken Link Checker (v.1.11.18)
Contact Form 7 (v.5.6.3)
EWWW Image Optimizer (v.6.8.0)
Flying Scripts (v.1.2.3)
SEO SIMPLE PACK (v.2.5.1)
WP Multibyte Patch (v.2.9)
WP Revisions Control (v.1.4.3)
WP to Twitter (v.3.6.1)
XML Sitemap & Google News (v.5.3.3)
※ContactForm、WP to Twitter、Broken Link Checkerは必要な場合のみ

となっています。
一般的な構成だと思います。

Xserver レンタルサーバーの設定

XPageSpeed

【Swell】PageSpeed Insightsで100点満点の神設定を公開

XPageSpeedは使用していません。

Webフォント

【Swell】PageSpeed Insightsで100点満点の神設定を公開

Webフォントも未使用となっています。

WordPressセキュリティ設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

WordPressのセキュリティ項目は全てONにしており国外IPを全て弾いています。

Xアクセラレーター

【Swell】PageSpeed Insightsで100点満点の神設定を公開

XアクセラレーターはVer2を使用しています。

サーバーキャッシュ設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

サーバーキャッシュは未使用です。

ブラウザキャッシュ設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

ブラウザキャッシュ設定も未使用となっています。

SWELL テーマの設定項目

高速化 設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

高速化のキャッシュ機能ですが、トップページ以外は全てキャッシュしています。
トップページをキャッシュにすると新たに投稿した記事が新着記事に表示されない場合があり
トップページだけ無効にしています。
キャッシュ期間は32日にしています。

ファイルの読み込み

【Swell】PageSpeed Insightsで100点満点の神設定を公開

ファイルの読み込みは2つにチェックを入れています。

遅延読み込み機能

【Swell】PageSpeed Insightsで100点満点の神設定を公開

遅延読み込み機能ですが、記事下コンテンツ、フッターを遅延読み込みさせています。
画像のLazyloadはEWWW Image Optimizerのプラグインで行っている為に使用していません。
またスクリプトの遅延読み込みもFlying Scriptで行っている為に使用していません。

ページ遷移高速化

【Swell】PageSpeed Insightsで100点満点の神設定を公開

ページ遷移の高速化はPrefetchにしています。

JQueryの読み込み設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

JQueryの読み込み設定は全てチェックしています。

Font Awesomの読み込み

【Swell】PageSpeed Insightsで100点満点の神設定を公開

Font Awesomeは読み込まないにしています。

機能停止 SWELL機能

【Swell】PageSpeed Insightsで100点満点の神設定を公開

この変はそんなに影響は無いとは思いますが、私の場合はLPやブログパーツなど使わなかったので
機能を停止しています。

機能停止 WordPressの機能

【Swell】PageSpeed Insightsで100点満点の神設定を公開

WordPressの機能の方はたしかセルフピンバックだけ停止したと思います。

SWELL 子テーマの追加CSS

【Swell】PageSpeed Insightsで100点満点の神設定を公開

子テーマの追加CSSには各種読み込まれるフォントのswapさせるCSSと
ContactFormのreCaptchaのロゴが表示されるのを無効にしています。
また画像の縮小率の関係なのか時々画像の枠に青色の破線が表示されるのを無効にしています。

SWELL 子テーマのfunctions.php

【Swell】PageSpeed Insightsで100点満点の神設定を公開

・子テーマのfunctions.phpには、ブロックエディターでスペーサーで高さを
40px、30px、20pxへ変更できるブロックを追加する機能
・ContactForm7が必要なページのみで読み込まれるように設定しております。

WordPressプラグイン Autoptimizeの設定項目

JavaScriptオプション

【Swell】PageSpeed Insightsで100点満点の神設定を公開

JavaScriptコードの最適化を有効
連結しないで遅延を有効

CSSオプション

【Swell】PageSpeed Insightsで100点満点の神設定を公開

CSSコードを最適化を有効
CSSファイルを連結を有効
インラインのCSSも連結を有効
レンダリングブロックしているCSSを除去を有効
AutoptimizeからCSSを除外は標準設定にしています。

HTMLオプション

【Swell】PageSpeed Insightsで100点満点の神設定を公開

HTMLコードを最適化を有効

その他設定項目

【Swell】PageSpeed Insightsで100点満点の神設定を公開

こちらは標準のままだと思います。

Autoptimize 画像設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

Autoptimizeでの画像処理は一切使っていません。

追加設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

その他追加設定はそのままの状態です。
Googleフォントを削除にしても良いと思いますが、今後様子を見て削除したいと思います。

WordPressプラグイン Flying Scriptsの設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

Flying Scriptsの設定はjqueryやadsense関連、Analyticsなどを指定しています。
遅延タイムは5秒にしていますが、7秒などにすると広告の表示も遅くなるために5秒にしています。

WordPressプラグイン EWWW Image Optimizerの設定

基本設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開
【Swell】PageSpeed Insightsで100点満点の神設定を公開

WebP変換やhtaccessは適用済み、画像の最大幅やExif情報の削除
その他にCLS対策などの項目にチェックしています。

【Swell】PageSpeed Insightsで100点満点の神設定を公開

ローカル設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

ローカル設定はそのままにしています。

高度な設定

【Swell】PageSpeed Insightsで100点満点の神設定を公開

高度な設定ではJPGやWebPの品質を少し落としています。
その他に「リサイズ」「変換」項目は標準のまま使用しています。

あとがき

【Swell】PageSpeed Insightsで100点満点の神設定を公開

XServerの新サーバー移行と併せてWordpressのテーマを「SWELL」へと変更して
かなりサーチコンソールのグラフが乱高下しておりました。
安定するまで1か月近くかかり現在の状態になりました。
まだLCPやTBT、FCPなどモバイルでの数値は下げれそうな気もしますが、
PageInsightのスコアを見て調整、設定、スコアを見て設定などしながら
3日間放置したりしてやっとここまで来ました。
神設定と書いていますが、様々な環境でWordPressをご使用されていると思いますので
一概にこれだけをすれば全ての環境で100%になるわけではありませんが、

少なくとも私の環境では現時点で最高の設定になりました。
またこれからも調整していくので現時点で安定している設定を全て
備忘録として記録しようと記事にしてみました。
設定など間違いなど項目があれば教えて頂ければ幸いです。
皆様の環境でのご参考になればと思います。

よかったらシェアしてください!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次