WP DS FAQ Plusは相当重いプラグインだったので、jQueryでFAQを作りました
みなさん、こん**は。気がつけば師走で、
もう1年終わるのかと焦りきっている@latexcatsuitです。
性懲りもなくまた高速化にチャレンジしようかと、
現在いれているプラグインの見直し&置換え、
または別方法で実装というのをやっているのですが、
そのなかで意外なものが足を引っ張っていることに気が付きました。
結論から言いますと、
用語集やFAQを作るプラグインWP DS FAQ Plus、
これがかなり大きなインパクトを与えていました。
高速化をするために、まずプラグインが与える影響を調べます。
WordPressプラグインP3 (Plugin Performance Profiler)をインストール。
パフォーマンスを計測してみると、このような結果が。
ん?なにこれ???
いやいや、おかしいだろこれ
そうなんです、
WP DS FAQ Plusは非常に大きな負荷をかけるプラグイン
だったのです。
よしわかった、WP DS FAQ Plusを使うのをやめればいいんだなということで、これを使用中止にすることとしました。
さて使用を中止するとして、コンテンツの1つとしているFAQをどうするか。
jQueryでトグルorアコーディオンを実装しておけばFAQの構築が楽なんじゃね?
ってことで、早速jQueryを使用して実装開始。
まずはJS部分。よくあるものなので、ちゃっちゃとやっつけます。
もちろんjQuery本体を別途ロードする必要があるので、お忘れなく。
これで動かない場合はjQueryが動かない場合にまず試してみるべき有効な対処法をお試しください。
<script type="text/javascript"> $('.faq dt').click(function(event) { $(this).next().slideToggle(); $(this).toggleClass("active"); //ここでタイトルにactiveというクラスを付与しています }); </script>
つぎにCSS部分。FAQを開いたときにタイトル部分の画像を入れ替えるようにしています。
<style> .faq dt { cursor: pointer; text-decoration: underline; font-weight:bold; color:#ab0609; text-indent:15px; padding-bottom:5px; background:url(images/list-style-faqs-closed.png) no-repeat left 6px; } .faq dt.active { cursor: pointer; text-decoration: underline; font-weight:bold; color:#ab0609; text-indent:15px; padding-bottom:5px; background:url(images/list-style-faqs-open.png) no-repeat left 6px; } .faq dd { display: none; } </style>
そしてHTML部分。簡単ですw
<dl class="faq"> <dt>よくある質問</dt> <dd class="no-title-box-text"> それに対する答え </dd> </dl>
なぁんだ、簡単!FAQを作るのにプラグインに頼るまでのことは無かったじゃん!
ってことでWP DS FAQ Plusプラグインを外して、再度P3でパフォーマンスを計測。
どれ
ほぉほぉ
綺麗さっぱりWP DS FAQ Plusプラグインによる影響を消し去ることができました。
実際どの程度かわったのかといいますと、このような感じです。
ロード時間にして1秒(約17%)改善、
プラグインのインパクトが20%改善、
となり、非常に大きな効果がありました。
※データベースへのクエリは増えていますが、これについては別の原因があるかと思うので一旦目をつむりますw
というわけで、何でもかんでも便利だからとプラグインに頼るのはいかんなぁというのを再認識した夜でした。
御参考になれば幸いです。
なおこの方法で実現したFAQはこちらのページです。