本ブログは、有料テーマ「ACTION / AFFINGER6」にいくつかのプラグインをインストールして運用しています。
SEO・アフィリエイトに強く多機能で人気の 「ACTION / AFFINGER6」は、WordPress関連の知識がいまひとつの筆者でも簡単にブログサイトを開設でき、「PageSpeed Insights」の結果はスマホ・デスクトップともに「SEO 91％」のスコアを出しています。
ただ、パフォーマンスのスコアは振るわず、中レベルのオレンジゾーン。
そこで本ブログの高速化を図るべく、プラグインを一から見直すことにしました。
速くて最低限のプラグインにするにはどうしたらよいのか？
早速、試していきましょう。
高速化を狙ったプラグインをすべて削除したら
本ブログで利用しているACTION / AFFINGER6は、スタンダード版の基本機能に加えて記事一覧をカード型デザインやスライドショーにできるなど、プラスαの機能が搭載した「AFFINGER6 EX」。
さらに、AFFINGER6 EXの機能をそのままに、トップページのレイアウトでGoogleのインフィード広告が自然に溶け込むように配置されるマガジン型子テーマ「JET2」との合わせ技で運用しています。
多くを考えず、インストール＆設定するだけで、マガジンスタイル1カラムのトップページが完成します。
そして本題のプラグインはかなり多めに入れていますが、今回の高速化への再挑戦を行うために関連するプラグインをすべて削除。
高速化狙いのプラグインを用途に合わせて１つずつ入れてスコアを計測。最善の方法を探っていきます。
運用系と表現系で気の利いたAFFINGER専用のプラグイン
・AFFINGERタグ管理マネージャー4：クリックに関する詳細情報を一括管理。
・PVモニター2：AFFINGERタグ管理マネージャー4と連携。アクセス数を計測。
・ABテスト：リンクなどを何日かおきに貼り替えて計測。CTRの高いものだけを残すことができる。
・Affinger Lazy Load：画像をスクロールに合わせて遅延させて読み込み、表示を高速化します。
・SUGOI MOKUJI PRO：見出しを目次化して自動表示。
・ブログカード外部URL対応プラグイン2：URLを指定するだけで外部リンクをブログカード風に作成。
・ステ子：よく使うコンテンツ / テンプレートを登録。時短で魅せる記事が完成。
記事編集の効率化やあると便利なプラグイン
・Better Delete Revision：古いリビジョンの削除やデータベースの最適化。
・Broken Link Checker：リンク切れや消えた画像をチェック。
・Category Order and Taxonomy Terms Order：カテゴリーの並べ替え。
・Classic Editor：公式の旧エディタ。
・Classic Widgets：旧来のウィジェット画面で操作可能。
・ConoHa WING コントロールパネルプラグイン：ConoHa WINGサーバーのWebに関する設定。
・ConoHa WING 自動キャッシュクリア：ConoHa WINGサーバのコンテンツキャッシュを自動でクリア。
・Contact Form 7：お問い合わせフォーム。
・Customizer Export/Import：設定のエクスポート / インポート。※
・EWWW Image Optimizer：画像を圧縮して最適化。
・Jetpack：パフォーマンスや案税制を強化。※
・LightStart - Maintenance Mode：メンテナンスモードにする。※
・Rinker：商品リンクを生成・管理。
・Search Regex：過去の記事内容を一括置換。※
・Simple Local Avatars：プロフィール画像を簡単に作成。※
・WebP Converter for Media：画像を「WebP」形式に変換、画像の容量を軽量化。
・WebSub (FKA. PubSubHubbub)：検索エンジンに素早くインデックス。
・Widget Logic：ウィジェットパーツに条件分岐を指定。
・WP Multibyte Patchr：マルチバイト機能拡張。
・WP Sitemap Page：サイトマップを自動生成。
・xili-tidy-tags：タグを分類して表示。
・XML Sitemap Generator for Google：XMLサイトマップを自動生成。
・Yoast Duplicate Post：投稿記事・固定ページを複製。
便利・快適になるならと、ネット上で見つけたプラグインを入れていたらこんなに増えてしまいました。
※印はそれほど活用していないので、必要時に入れるとして削除してよいかもしれませんが、「サイトヘルス」で深刻な状態はなく、おすすめの改善が3件。
レンタルサーバーは業界最速と謳われている「ConoHa WING」.
「ページキャッシュは検出されませんでしたが、サーバーのレスポンスは良好です」とサイトヘルスで表示されたのは、同社のプラグイン「ConoHa WING 自動キャッシュクリア」がある程度は功を奏しているのでしょうか？
とはいえ、PageSpeed Insightsのスコアは、スマホが49、デスクトップが73。
スマホはレッドゾーン、デスクトップはオレンジゾーン。何が課題となっているのか？
スマホ・デスクトップの共通した課題は、使用していないJavaScriptとCSSの削除、適切なサイズの画像。
画像最適化のプラグイン「EWWW Image Optimizer」を入れていますが、設定の問題なのか効果がありません。。
期待しすぎなのかもしれませんね。
JavaScript（JS）とCSSを削除するプラグインを検証
PageSpeed Insightsで調べると、使用していないJavaScriptは、Google Tag Managerに関連する２件だけ。
使用していないCSSは、使用テーマはAffingerに関連する2件、WordPressの関連が1件、Jetpackの関連が1件の計4件。
では、JavaScriptとCSSを削除するためには、どのプラグインを選べばよいのか？
これまでは"この高速化プラグインがおすすめ"と言われると重複してもぶつからない限り入れていましたが、それぞれの特徴を理解して無駄なく入れていかないと行けません。
Autoptimize
HTML・JavaScript・CSSのソースコードの圧縮、画像とGoogleフォントの最適化を図るプラグイン。
ググると機能や設定方法を解説するサイトがズラッと並び、人気と評価の高いことがわかります。
これまでも使用していましたが、設定項目が多いのが筆者にとっての課題。
同じテーマとレンタルサーバーでの設定を解説しているサイトを参考にするのがおすすめです。
実際にAutoptimizeを入れて以下のとおりに設定してみました。
・JavaScript オプション
JavaScript コードの最適化、連結しないで遅延、インライン JS も遅延にチェック。
・CSS オプション
CSS コードを最適化にチェック。
・HTML オプション
HTML コードを最適化にチェック
・その他オプション
すべてチェック
・追加の自動最適化
Google フォントの削除（未使用なので）、絵文字の削除にチェック。
使用中のレンタルサーバー「ConoHa WING」がHTTP/2通信に対応。
分割で読み込んだ方が速いそうなので、JavaScriptとCSS オプションの連結項目にはチェックを入れませんでした。
画像に関しては、Affinger Lazy Loadが読み込みを遅延してくれるのでチェックは外しています。
で、その結果をPageSpeed Insightsで計測すると、スマホが49→58、デスクトップが73→74。
あまりよい成績ではなく改善されたとまでは言えません。
使用していないJavaScriptの削除項目にあるGoogle Tag Managerはそのまま。
スマホの改善できる項目では、レンダリングを妨げるリソースの除外にAutoptimize関連が2件表示。
使用していないCSSの削除では、なぜかAutoptimize関連が2件登場。
なにがそうさせているのかわかりませんが、ほかのサイトで大好評のプラグインでも、本サイトではうまくいきません。
一旦、無効化すると、PageSpeed Insightsはスマホが48、デスクトップが73になりました。
Flying Scripts by WP Speed Matters
指定したJavaScriptを一旦読み飛ばす遅延プラグイン。
設定はInclude KeywordsにPageSpeed Insightsが使用していないJavaScriptと判断したURLをコピペして保存するだけ。
実際にGoogle Tag Managerを読み飛ばす項目に設定してみました。
PageSpeed Insightsで計測すると、スマホが48-→71、デスクトップが73→75。
でも、使用していなJavaScriptの削除項目は、デスクトップではなくなったものの、スマホではGoogle Tag Managerが表示されたまま。
なのにスマホの方が速度改善されているので、訳がわかりません。
わからないついでにAutoptimizeを有効化に戻してみました。
するとPageSpeed Insightsのスコアはスマホが71→72、デスクトップが75→75のまま。
使用していなJavaScriptｍの削除項目は、スマホ・デスクトップともに表示がなく、改善できる課題はレンダリングを妨げるリソースの除外がトップになりました。
こうなったら続けて試していきましょう。
Async JavaScript
Async JavaScriptはAutoptimizeと開発者が同じで、JavaScriptやjQueryの非同期や遅延読み込みができるプラグイン。
レンダリングを妨げるリソースの除外にも効果的なのだそうです。
Async JavaScriptを入れたPageSpeed Insightsのスコアはスマホが72→76、デスクトップが75→75のまま。
レンダリングを妨げるリソースの除外項目は、jQueryが1件なくなっただけ。
微増傾向が続いていますが、妨げているリソースもCSSなので、こちらをどうにかするしかありません。
Asset CleanUp: Page Speed Booster
必要のないJavaScriptとCSSをアンロード（読み込まない）するプラグイン。
トップページのみ、サイト全体、特定のURLを指定できるので、不要なJavaScriptとCSSはサイト全体でアンロード、お問い合わせのページに使っているContact Foam 7のJavaScriptとCSSをトップページやほかのページで読み込まないようにできます。
また、読み込む際もJavaScriptとCSSファイルを縮小しているので表示速度を改善してくれます。
ただし、すべてのJavaScript・CSSに対応させるには、有料のProバージョンが必要です。
実際にプラグインを有効化して設定を開始。
まず、設定中はサイト訪問者は設定を反映させないようにするテストモードを有効化。
余計なことをしてサイトが崩れてしまっては元も子もないので、テストモードで試して問題がなければ実行にします。なんて親切なんだ。
で、「CSS & JS MANAGER」タブで、PageSpeed Insightsに表示されるCSSをを読み込まないように試みましたが、課題のCSSは1つしか表示されず、トップページでアンロードに設定するとサイトの見た目が崩れてしまったため元に戻すことに。
Contact Foam 7のJavaScriptとCSSは、お問い合わせページのみで読み込む設定ができました。
とはいえ、PageSpeed Insightsのスコアはスマホが76→78、デスクトップが75→75のまま。
本サイトに限っては、このプラグインで効果を発揮することができませんでした。
いろいろ試してみましたが...
スマホの改善できる項目はまだまだあります。
・使用していないCSSの削除
・レンダリングを妨げるリソースの除外
・適切なサイズの画像
・CSSの最小化
デスクトップは高速化を目的にしたプラグインを入れる前と入れた後でおおきな変化はなし。
一方で、改善できる項目は、適切なサイズの画像のみとなりました。
逆に言えば、改善できることがないのにスコアが75というのはどうすればいいの？ といった感じもします。
そこで、前述のプラグインで※印にした5つのプラグインはすべて無効化→削除しました。
いくつかの高速化目的のプラグインを見直しましたが、結局はプラグインを積み重ねる方向に。
しかも、良い結果が得られることはなくオレンジゾーンからの脱出はできませんでした。
やはり一定以上の知識を持って対処しないとプラグイン頼みではダメなのかもしれませんね。
ということで今回はここまで。
いろいろ試してもダメなので、こうなったら有料の高速化プラグイン「WP Rocket」を導入するのが、お金はかかるけど手間なく安心なのかもしれませんね。
キャンペーンのディスカウント価格を狙ってみようかと思ったりしています。
