【WordPress】表示が重い！（３）ページ表示速度が14秒→0.5秒まで回復！

やっとまともな速度になったよ！

苦節数日…。
複合的な要因で重かった当サイトも、劇的に軽くなりました！

では、いったいなにが原因だったかを見て行きましょう！

RSSウィジェットが重かった

Debug Barというプラグインを入れて挙動を調べたところ、RSSウィジェットを表示するために爆発的に時間を割いている事がわかりました。

※今は特に問題なさそうなので表示しています。

RSSのウィジェットを一度非表示にして、再びページをプロファイルしてみたところ、表示が早くなりました！
良かった！これが原因だったのか。

…と安心したのも束の間、まだ重いぞ…。

そう、原因は他にもあったのです。

Amazon Linkが重かった

最初の記事で疑ったAmazon Linkですが、やっぱりこれが怪しい。

プラグインの検証ができるプラグイン、P3 (Plugin Performance Profiler)でスキャンしてみると、こんなにAmazon Linkが占める割合が大きかった…。
（↓プラグインの表示にかかる時間の内訳）

「Detailed Timeline」タブでよくよく調べてみると、特定のページが重い様子。
（○にカーソルをポイントすると、どのページか表示されます。）

どうも、この記事↓が重いようです。

【アメリカ】意外にも、公共図書館で電子書籍を借りるひとは「よく買うひと」でもある（OverDrive社の調査による）

この記事では、最近発売された電子書籍リーダーを、Amazon Linkを使って一覧表示しています。

なるほど、これが重いのか。

でもどうして重いんだろう。これまでも1ページ内に何個もAmazon Linkを貼った記事を書いてきましたが、なぜこのページだけ重いのか。

他のページでやっていないのに、このページでだけやっていることは何かを考えました。すると、商品の表示形式がこのページだけ違う事に気づきました。

Amazon Linkの表示形式には、いくつか種類があります。
画像のみのimageや、ボックスで表示するiframeなど。

今回使っていたのが

Multinational

という表示方法でした。

これは、世界各国のAmazonに対応するものらしい。日本にしかない商品を紹介していると、世界各国のAmazonにアクセスしてもエラーで返ってきます。その情報がキャッシュされないため、毎回読み込む度に情報を取りに行ってしまい、重くなっていました。

単に表示形式が良かったので選んだテンプレートでしたが、これが怪しい。試しに、iframeでのシンプルな表示に切り替えました。

（iframeで表示した場合）

すると、一気にページ表示速度が14秒から0.5秒へ！！

やはりAmazon Linkでしたか！

というわけで、もしAmazon Linkを利用される場合は、なるべくmultinational以外の表示形式を選びましょう。

表示速度との飽くなき戦いは、これからも続く…

今回はなんとか表示速度を早くすることに成功しましたが、これからも様々な要因で速度が落ちる事が想定されます。

定期的にP3 (Plugin Performance Profiler)でプラグインのパフォーマンスチェックをし、Debug Barでサイト全体の表示速度を確認していきたいと思います。

ちなみに、Debug Barは、有効にしておくとそれだけ時間がかさみます。

いったん検証が終わったら、無効化しておくほうがページ速度の高速化に繋がりそうです。

Webと本の人 Webooker （ウェブッカー）

フリーランス Webデザイナー・グラフィックデザイナー

2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。