重い Jetpack やめた

クソ重いJetpackをやめてSiteGuard WP Plugin、ContactForm7、reCAPTCHA(v3)を導入した #Weekly小噺

2022-12-27

大抵の場合、Jetpackは不要かも。

テック製品に関する僕の最近の出来事や興味、不満をSEO/起承転結/需要を全無視で、思うことを思うがままブラザー(読者)にぶちまける不定期連載「Weekly小噺」ですが、今回はWordPressのプラグイン「Jetpack(ジェットパック)」をやめたお話です。

これまではJetpackの機能を利用してTwitterに自動共有したり、コンタクトフォームを設置していたのですが、Jetpackってまぁまぁ重くて。

最近は下書きを作成したり、記事の公開後にすぐダッシュボードに戻れなくなるなど、ちょこちょこ微妙な動作もあったので、もうサヨナラや!となったわけなのです。

(ほんと1年くらい『JetPackやめたいけど…いろいろと面倒くせぇ』ってなってた)

新しいプラグインの導入で重視したのは「動作が軽い」「更新が定期的に行われている」「信頼性が高い」の3つ。色々と探してみたところ、「SiteGuard WP Plugin」と「Contact Form7」が良い感じだったので、設定方法やJetpackをやめるために行ったことについてシェアです。

※SiteGuard WP PluginはJetpackよりかは全然軽いですが、セキュリティ系は総じて重めなので…そのあたりはご注意を。Contactform7も重めなプラグインですが、ほかに良さそうなプラグインがなかった。

SiteGuard WP Plugin – WordPress

Contact Form7 – WordPress

Jetpackをやめて「SiteGuard WP Plugin」と「Contact Form7」を導入した

Jetpackは多機能なプラグインですが、ほとんどの機能を使ってなかった。

それじゃ、まずはJetpackで利用していた機能を代替えするプラグインについてみていきましょう。Jetpackをやめた大きな理由は「動作が重くて余計なリソースを食う」こと。

ちょこちょこJetpackが原因と思われる不具合や不安定な挙動&動作もあったので気になってはいたのですが、丸1年くらい面倒くさくてそのまま使ってたので……ついにJetPackとさよならです。

(Jetpackに関連する機能として"Akismet"とかいうクソ重いスパム対策プラグインもありますが、ついでにグッバイした)

Jetpackで利用していた機能を代替えするプラグインは、

上記のとおり。

これまではJetpackの"パブリサイズ共有"を利用してTwitterに自動共有していたのですが、手動で説明を入れたり、ちょっとした補足を入れたほうがユーザーエンゲージメントは"圧倒的に"高かったため、この機会に完全手動に切り替え。

最近は自動で共有された投稿をいったん消して、自分で説明を入れて投稿……みたいな流れも多かったので、Twitterの投稿だけアナログ化しました。

SiteGuard WP PluginとContact Form7は、いずれも国産のプラグインというのも導入を決めた大きな理由で、いずれも一足先にサブのゲームブログ"gg(ジージー)“のほうで試験的に導入していたのですが、もうほんと良くて。

Jetpackをやめた恩恵で明らかに軽くなって、投稿ページのレスポンスも改善。reCAPTCHA(v3)でお問い合わせやセキュリティ、スパム対策に関しても問題ないと判断し、メインのガジェットブログ"iyusuke.net“でも導入したため、手順や方法について、いくつかのステップに分けてご紹介していきます。

JetPackやめるぜってブラザーは参考にどうぞ。

Step1, Jetpackの連携を解除して削除

まずは、JetPackの連携を解除してプラグインを削除するところから。

Jetpackのダッシュボードに移動してブログやサイトとの連携を解除しましょう。連携の下に小さく表示されている「管理」をクリックです。

そしたら「Jetpack 連携を解除」を選択。

連携を解除してもよいですか? と表示されたら「接続解除」をクリック。

「Jetpackは正常に連携を解除されました」と表示されたら「サイトに戻る」からプラグインを削除しましょう。

プラグインを削除する前に、Akismetの連携を解除しておくのもお忘れなく。

Akismetは便利なスパム対策プラグインではありますが、まじで重いので……後述のreCAPTCHA(v3)に切り替えるのがおすすめです。

ワードプレスの「ダッシュボード > プラグイン > インストール済みのプラグイン」から「Jetpack」と「Akismet Anti-Spam」を削除すればJetpackのアンインストールは完了です。

Step2, SiteGuard WP Pluginをインストール

お次はセキュリティを大幅に強化できる国産プラグイン「SiteGuard WP Plugin」をワードプレスにインストール。

プラグイン > 新規追加から「SiteGuard WP Plugin」と入力すれば見つけられるほか、インストールが完了するとセキュリティ強化のためにログインページのURLが変更されるため、新しくブックマークしておきましょう。

ログイン画面の画像認証で不正ログイン対策もばっちり。

SiteGuard WP Pluginは、セキュリティ対策に関連する機能はデフォルトでONになっているため、特に設定する必要はありません。

SiteGuard WP Pluginについては開発しているJP Secureががっつり解説してくれているので、気になるブラザーはこちらもあわせてどうぞ。

#Tips
セキュリティ対策のプラグインとして「IP Geo Block」を紹介しているブログやサイトも多いですが、最後の更新は4年前となっており、いくら安定していても信頼性には欠けるため今回はスルー。対して、「SiteGuard WP Plugin」は最新の更新が1か月前。国産のプラグインなので信頼できます。セキュリティ対策も一通り揃っていて超強い。

Step3, Contact Form7をインストールし、設定する

お次は、コンタクトフォーム(お問い合わせ)を追加できる国産プラグイン「Contact Form 7」をインストール。プラグイン > 新規追加から「Contact form7」と入力してインストールしましょう。

インストールしたら「お問い合わせ > コンタクトフォーム」から"コンタクトフォーム1″の編集を開きます。

こちらも特に設定は変更しなくてOK。

Contact Form 7はCSSでデザインを変更したり、ドロップダウンメニューを追加したり、チェックボックスを追加することもできますが、ここでは長くなるので割愛です。

※あらかじめ氏名、メールアドレス、タイトルは入力必須。メッセージ本文は任意に設定されています。

コンタクトフォームを保存すると"ショートコード"が表示されるのでコピー。

そしたら、先ほどコピーしたショートコードを設置したい固定ページ(記事)に張り付けましょう。

コンタクトフォームが正常に設定できているか確認し、このタイミングで動作テストもしておくといいかも。

Step4, スパム対策にreCAPTCHA(v3)を設定する

非常に便利なCotact Form7ですが、このままだとスパム対策ができてない状態なので、Google reCAPTCHA(v3)も導入、設定しておきます。

#Tips
reCAPTCHA(リキャプチャ)とは、Googleが開発するセキュリティシステム。botによるスパムコメントを簡単に、かつ強力に防ぐことができます。「reCAPTCHA(v2)」と「reCAPTCHA(v3)」の2バージョン存在し、v2はチェックボックスにチェックを入れてユーザー自らで認証。v3はAIが自動でbotかどうか判断してくれるので、ユーザーに余計な負担をかけません。v3には画面右下にバッジが表示される。

Contact Form 7のreCAPTCHA設定は「お問い合わせ > インテグレーション > インテグレーションのセットアップ」から。

reCAPTCHA(v3)の"サイトキー"と"シークレットキー"を入力すればContactForm7の設定は完了です。

reCAPTCHA(v3)がONになっている記事は右下にバッジが表示される。

reCAPTCHAってなに? どうやって登録するんや?ってブラザーは後述の登録方法も参考にどうぞ。

reCAPTCHA(v3)を登録する

reCAPTCHAの登録は赤線の"v3 Admin Console"から。

せっかくなので、reCAPTCHA(v3)の登録方法についても簡単にご紹介。僕はかなり前にreCAPTCHAを取得しているので、サブアカウントで実際に作成方法を解説していきます。

reCAPTCHAのページに移動したら、画面右上にある「v3 Admin Console」をクリック。

そしたら、ラベルの作成ページに遷移するので、ラベルに"分かりやすい名前"を入力し、reCAPTCHAタイプを"reCAPTCHA v3″、ドメインは使用するブログやサイトのドメインを入力しましょう。ドメインは複数追加可能です。

reCAPTCHAの利用条件に同意し、「送信」をクリックすると"キー(鍵)"が表示されます。

「サイトキー」と「シークレットキー」が表示されたらコピーして、前述のContactForm7に張り付けて終わり。

reCAPTCHAのサイトキーとシークレットキーは「v3 Admin Console > 設定 > reCAPTCHAのキー」からいつでも確認可能ですが、メモ帳なんかに張り付けて保存しておくと便利でおすすめです。

reCAPTCHA(v3)のバッジを非表示にする方法

さて、reCAPTCHA(v3)を設定したはいいものの……何もしないでいるとブログやサイトの右下に常にreCAPTCHAのバッジが表示されてしまうので、表示しないように設定しておきましょう。

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

ユーザーの目に留まるようにreCAPTCHA ブランディングを含めた場合、バッジを非表示にすることができます。次のテキストを含めてください。

reCAPTCHA

reCAPTCHA公式によれば、ユーザーの目に留まるところにreCAPTCHAブランディングを含めた場合はバッジを非表示にできるとのことなので、このあたりもダダっと設定していきます。

reCAPTCHAのブランディングはCotactForm7に追加するのがおすすめ。

まずは、Contact Form7にreCAPTHAのブランディングを表示するように対応です。

Contact Form7の編集画面を開いたら「This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.」を最下部に追加。

※このサイトは reCAPTCHA と Google によって保護されています。<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a> 。

英文のままだとちょっと微妙なので、日本語に変換するとこんな感じ。上記をそのまま"ContactForm7編集画面の最下部"にコピペしちゃいましょう。

あとは、バッジを非表示にするCSS「.grecaptcha-badge { visibility: hidden; }」をスタイルシートに追記すれば、ブログやサイトの下部にreCAPTCHA(v3)のバッジが表示されなくなります。

.grecaptcha-badge { visibility: hidden; }

ワードプレスの場合、「子テーマの編集 > スタイルシート(style.css)」や「外観 > カスタマイズ > 追加CSS」から追記すればOKです。

なんのCSSか分かるように「 /*reCAPTCHAバッジの非表示*/ .grecaptcha-badge { visibility: hidden; } 」みたいな感じでコメントアウトして記述するのもおすすめ。

Twitterへの共有は手動ですることにした

最後に、Jetpackのパブリサイズ共有を活用していたTwitterへの自動共有ですが……こちらは手動でツイートする方向で安定。

Twitterのユーザーエンゲージメントは手動で説明を入れたり、ちょっとした補足を入れたほうが"圧倒的に"高かったので、しばらくは手動更新でいってみます。

そんなこんなで、完全に"脱Jetpack"を果たしたわけですが、今のところはガチでノーストレス。ワードプレスのダッシュボードは明らかにレスポンスが良くなりましたし、最近発生していた「下書きや記事の公開後に離れようとすると『このサイトを離れますか?行った変更が保存されない可能性があります』と表示される問題」も解決。

Jetpackの機能そんな使って無いなぁってブラザーは無いほうが幸せになれることもあるので、この機会にすぱっとやめちゃってもいいかも。