カレンダープラグインでブログが超重くなった→Googleカレンダーをiframeで表示させた

アイハーブブログにセール情報カレンダーを設置したらサーバーが大変なことになった問題が解決したっぽく、喜ばしい気分の櫻田こずえです、皆さまごきげんよう!

このページ↓です。

今使えるアイハーブのクーポン/コードまとめ&解説★

スポンサーリンク




今回のトラブル〜解決までの流れ

・セール情報カレンダーを「All In One Event Calendar」プラグインで表示させてご満悦♪
・しかしこの頃からサーバーエラー多発
・重いプラグインだったかも→泣く泣く削除
・Googleカレンダーを表示する「Simple Calendar」プラグインなら重くない情報
・でもなるべくプラグイン増やしたくないな
・Googleカレンダーを直接<iframe>表示すりゃよくね?
・スマホだと見切れる→レスポンシブ対応
・カレンダダーが縦にどんどん伸びる問題は半分解決した時点で、とりあえず解決したことにした←今ココ

ということで、これまでの経緯を振り返ってみます。

「セールカレンダー」を導入したものの、サーバー負荷が大きく削除

アイハーブって、いっつも何かセールやってて、今買うのがいいのか、ちょっと待った方がいいのか、いろいろ悩むので、昔カレンダーをエクセルで作ったことがあったので、今回は正式にセールカレンダーを作ってみました。

#ちなみにこのサイトを参考にして選び、設定しました。
【WordPress/イベントカレンダープラグイン】どれがいい?上位8件を徹底比較しました

我ながらいい出来だとニヤニヤしていたら、その頃からサーバーエラーが多発。アイハーブブログだけではなく、櫻田の全ブログにおいて、ブログが表示されないエラーが多くなりました。

オカシイなと思っていろいろ調べたところ、このカレンダーを表示するプラグイン「All In One Event Calendar」がダダをこねている=処理に時間がかかっていることが判明。(他にも沢山原因があったが)

何これ↓ひどい。

#アイハーブブログで使っているプラグインのうち、どのプラグインの処理に時間がかかっているのか、で、ぶっちぎり一位、という図です。

P3は何度かやってみた方がよろし。たまたまタイミングが悪いこともあるみたい。

で、仕方なく「All In One Event Calendar」を削除したところ、サーバーのレスポンスタイムが改善したのは良かったのですが、カレンダーはつけたいんだよな・・・

「カレンダー付き」って書いちゃったしさ。

Googleカレンダーを表示させるプラグインを導入しようか・・

ググってみたら、
「Googleカレンダーをプラグインでブログに表示させることができるよ!」
「公開用のカレンダーを作れば、プライベートとゴッチャにならないわ!

とすすめてくるので、Googleカレンダーをワードプレスに表示するプラグイン「Simple Calendar – Google Calendar Plugin」の導入を検討しました。

【ゆうそうとITブログ】Googleカレンダーをサイトに貼り付ける方法 

結局プラグインに頼らなきゃいけないけど、データの処理自体は、ブログのあるサーバー側ではなく、Googleのカレンダー内で行われるのだから、こちらのサーバー処理はずっと軽いはずだ!と。

でも正直、もうこれ以上プラグイン入れたくないんですよね。何かとトラブルの元だし、サイトが少しでも重くなるのは事実だし。

Goolge カレンダーを<iframe>で表示させればいい!

で、さらに調べていたら

「Googleカレンダーを<iframe>で表示させれば、プラグインいらないじゃないよ!」

そうか、Youtubeの埋め込みとか、amazonの広告みたいものね!そのテがあったか!と表示させたら・・・

衝撃のレスポンシブ対応してない!?

しかしこれもググったら、iframeは基本レスポンシブ対応はしていないという、基本的なことらしく、レスポンシブ表示させるCSSを書いて下さっている方々が沢山。早速実装。

【Web Design Leaves】 Google カレンダーをレスポンシブ対応に

しかし今度は、iPhoneで見ると、どんどん縦方向にカレンダーが伸びて行くという怪奇現象が起き、これもググったら・・・・対応が↑の記事の後半に書いてあり、CSSを書直したりして解決しました。

ただ、iPhoneだと横にして横幅を大きく取ると、なぜか引き続き縦方向にカレンダーが伸びて行く現象は起こるのですが、リロードするとなくなるし、Androidは同じ現象は出ないと言うし、普通iPhoneは縦で見るし、いいかな・・・と、ここで解決!と致しました。

今使えるアイハーブのクーポン/コードまとめ&解説★

<iframe>でデータをGoogleカレンダーから取って来るので、表示に多少時間はかかるのは難点ですが、プラグインと違って、他のページには一切影響を与えないのがいい!

Googleカレンダー上で設定した、スケジュールの色が、ブログ上に<iframe>表示されないなど、細かな不満はありますが、プラグインを増やすよりいいし、何よりカレンダーが無事に表示されたので、今の所満足しています。

時間を見つけてバージョンアップを試みたいと思います、問題が起きなければ、ですが・・・。

スポンサーリンク




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク