先日、クリニックのウェブサイトを多言語化（WPML）し、高速化プラグイン（WP Rocket）を導入してPageSpeed Insightsのスコアが95%以上に向上した！という記事を公開しました。これで一件落着…と、喜んでたのですが、世の中そんなに甘くはありませんでした。
西新のサザエさん商店街夢祭りの途中、近所の人とお話しながらふと自分のスマートフォン（iPhone）でクリニックのサイトを見てみると、あるべきはずのものが表示されていないことに気づきました。
埋め込んでいたはずのInstagramの投稿が、ごっそり消えていたのです。
PCのブラウザでは問題なく表示されるのに、なぜかモバイルだけ。クリニックのお知らせや日々の活動を伝えるために、サイト内の多くのページにInstagramを埋め込んでいたので、これには本当に焦りました！😱
今回は、この「高速化の副作用」とも言える問題との格闘の記録と、最終的に見つけ出した解決策を共有したいと思います。
なぜ？PCではOK、モバイルではNGの謎
まず最初に考えたのは、高速化プラグイン「WP Rocket」が悪さをしているのだろう、ということでした。特に、ページの表示速度を上げるためにJavaScriptの読み込みを後回しにする「JavaScriptを遅延実行（Delay JavaScript execution）」という機能が怪しい。
Instagramの埋め込みもJavaScriptを使って表示されているため、この機能がInstagramのスクリプトまで遅延させてしまい、結果として表示されなくなったのだろうと推測しました。
しかし、奇妙なのはPCでは問題なく表示される点です。これは、WP RocketがPC用とモバイル用に別々のキャッシュファイルを作成していることが原因でした。つまり、モバイル用のキャッシュファイルにだけ、Instagramの表示を妨げる何らかの設定が適用されてしまっていたのです。
犯人探しの長い道のり… 試行錯誤の泥沼へ
ここからが、長い長いトラブルシューティングの始まりでした。考えられる原因を一つずつ潰していく地道な作業です。
- 試行①：JavaScriptの除外設定
- 仮説： Instagramのスクリプトを「遅延実行」の対象から除外すれば直るはず。
- 結果：
instagramやembed.jsなどのキーワードを除外リストに追加。→ 効果なし。 iPhoneでは依然として表示されず。
- 試行②：CSSの最適化機能を疑う
- 仮説： 次に怪しいのはCSSの最適化機能、特に「未使用のCSSを削除（Remove Unused CSS）」。これがInstagramの表示に必要なCSSまで消してしまっているのでは？
- 結果： この機能をオフにすると… 表示された！ しかし、喜んだのも束の間、PageSpeed Insightsのスコアは45%まで急落。これでは本末転倒です。
- 試行③：パフォーマンスと表示の両立を目指して
- 「未使用のCSSを削除」をオンにしたまま、Instagram関連のCSSだけを保護する「セーフガード」機能を試す。→ ダメ。 スコアは54%まで落ち込み、解決せず。
- 設定を元に戻したり、あれこれいじっているうちに、どんどん状況は悪化。一時はスコアが30〜40%台まで落ち込むという泥沼状態に…。
ウェブサイトの専門家ではない私にとって、この一連の作業は本当に辛かった（がばきつかった）。「Instagramの埋め込みはやめようかな…」と思ったほどです。
最適解をみつけた！速度と表示を両立させた最終設定
しかし、粘り強く試行錯誤を続けた結果、ついにパフォーマンスを全く犠牲にすることなく、Instagramも正しく表示させるという、理想的な設定にたどり着くことができました。
原因は、私のサイト環境では「CSS配信を最適化（Optimize CSS delivery）」機能がInstagramの表示と深刻なコンフリクト（衝突）を起こしていたことでした。
以下が、私のサイトにおけるWP Rocketの最終的な設定です。
WP Rocket設定画面 > FILE OPTIMIZATION
- CSS Files
Optimize CSS deliveryをOFFにする。- これが今回の最重要ポイントです。この機能をオフにすることで、Instagramが表示されない問題が解決します。
- JavaScript Files
Delay JavaScript executionをONにする。- これはサイト高速化の心臓部なので、絶対にONにしておきます。
Excluded JavaScript Filesにwww.instagram.com/embed.jsを追加する。- 念のため、Instagramのスクリプトを遅延実行から除外しておく「保険」のような設定です。
この設定により、問題だったCSSの最適化は行わないものの、最も効果の高いJavaScriptの遅延実行は維持されます。結果として、PageSpeed Insightsのスコアは98%にV字回復し、もちろんiPhoneでもInstagramが完璧に表示されるようになりました！
まとめ：高速化は「バランス」が命
ウェブサイトの高速化は、ただ強力な機能をオンにすれば良いという単純なものではない、ということを痛感させられた一件でした。プラグインやテーマとの相性によっては、予期せぬ不具合が起きることがあります。
大切なのは、パフォーマンスとサイトの機能性との「バランス」を見極めること。そして、問題が起きた時に一つずつ原因を切り分け、粘り強く最適解を探していくことですね。これは日々の診療で、患者さん一人ひとりに合わせて治療計画を調整していく作業にも通じるものがあるなと感じました。
もし同じようにWP RocketとInstagramの表示で悩んでいる方がいらっしゃれば、この「CSS最適化をオフにする」という設定が解決の糸口になるかもしれません。長くなりましたが、私の失敗談がどなたかのお役に立てば幸いです。
