WordPressのAIプラグイン・AI Engineを使って自分のブログを学習させてみた

じゃんくはっく
じゃんくはっく

WordPressのコンテンツをAIに学習させて有効に使う方法がないか調査したよ

今回は、ちょっと長い記事です。WordPressを使って自分のブログの内容を学習したAIを実装する方法はどのような手法があるかいろいろ考えてみました。ブログの内容をAIに学習させて便利に使う方法を模索したいと思います。

何をしたいのか?

普段は、ChatGPTやGoogleのGeminiとかにお世話になっています。GPTsが出たことで、自分用にカスタム学習したAIを作ることは簡単にできるようになりました。 しかし、自分のブログを自動的に学習させて、その内容を加味した回答をAIがしてくれる、そんな執事のようなAIはどうやったら作れるのか? まだ試してはいませんが、GPTsのAPIを使えばそれも可能だと思います。  今回の記事は、そういう自分用にカスタムしたAIをWordPressに連携するお話です。

結論から先に

今、ブログの右下についているボットがありますが、これはDocsBotという仕組みを利用しています。

これは、AI Engineとは関係ないDocsBotというサービスで、以下で提供されています。

DocsBot

URL:https://docsbot.ai/

例えば、「ベトナムでおすすめの料理は?」と聞くと学習してあるブログ記事の内容を加味した答えが返ってきます。

このブログは、WordPressで管理していますが公開するときは静的ファイルを出力しています。ですので、AI Engineは常時WordPressを稼働させないといけない関係上、今は利用せず、DocsBotのサービスを利用しています。有料のサービスですが、なかなか出来が良いので今は使っています。

AI Engine Pro版を使うメリットは?

読者の中には、他のサービスではなく自前のブログ(WEBアプリ)や、WordPressのプラグインで学習済みのAIを連携するような仕組みを作りたいという要望があるかもしれません。自分もWordPressで似たようなことができたらいいなと思っていました。もし、そういうことが出来たら、いろいろと応用が効きそうです。

 調べてみると、Ai EngineのPro版を使うとできそうなことがわかったので、実際に使ってみました。

Ai Engine Pro (WordPressのプラグイン)
無料版のWordPress公式https://wordpress.org/plugins/ai-engine/
プロ版https://meowapps.com/products/ai-engine-pro/

プロ版は買取のライセンスもありますが、まずは様子を見たいのでスタンダードの年間ライセンスを購入してみました。5つのWEBサイトに適用できて年間69USDです。

AI Engineとは何か?

WordPressのAI系プラグインは、AIにコンテンツやタイトル・SEO系のワードを書いてもらう補助をするツールが多いです。ブログを書くときに、WordPressのUI画面から直接、ChatGPTのAPIを通して利用できるメリットがあります。

紹介するAI Engineもこういう機能はありますが、他のプラグインには無い機能としては、Embeddignsからベクターデータベースを指定でき、自分のブログの記事や独自の学習内容を覚えさせることができます。

画像では、すでに1つの記事(以下)を覚えさせた状態です。

Surface ProのHackintoshが欲しい!(LINK
投稿日: 2024年2月2日 更新日:2024年2月6日

ChatGPTには、質問として「Surface Proの記事は?」と聞いています。答えは

Surface ProをHackintosh化してmacOSを楽しむプロジェクトについて興味があるんだね。この種のプロジェクトでは、特にSurface Pro7や7+のような高性能モデルが推奨されていることが多いけど、予算の都合でSurface Pro5や6で試すのも一つの方法だっちゃ。中古市場での価格は機種や状態によって大きく異なるけれど、正常な状態のSurface Proはだいたい1万円から5万円程度で手に入るみたいだっちゃ。Hackintosh化は技術的な挑戦が多いけど、macOSのタッチ操作体験やその他の利点を探究する価値は確かにあるね。詳細な情報は専門のサイトで確認するといいだっちゃ。

と回答するようになりました。素晴らしいですね!!

AI Engineで使えるベクターデータベースは?

設定から、Environments for Embeddings でベクターDBの設定が可能です。今は、PineconeQdrant が使えます。この両者のメリット・デメリットはまだよく調べていませんが、どちらも無料枠があります。本格的に利用したい場合は、課金したほうがよいかもです。

このベクターデータベースとはmysqlとかと違っていて面白い仕組みなんですが、また違う記事で取り上げてみたいなと思います。

自分のWordPressのAPIから使ってみる

他の利用例として、自分のWordPressからAPIを提供できるようです。設定Advancedから、Public API にチェックすれば利用できます。

マニュアル(LINK)によると、以下のように利用できるようです。

REST APIhttps://domains.com/wp-json/mwai/v1/{function_name}

認証は、Bearer Token が使えるようです。例えば、「おはよう。あなたについて教えて」とAPI経由で投げる場合は、

curl --location --request POST 'https://hack.gpl.jp/wp-json/mwai/v1/simpleChatbotQuery?prompt={URLエンコードした質問文}&botId={チャットボットのID}' \
--header 'Authorization: Bearer {トークン}'

と聞くと以下のようにJsonが返ってきます。

{
    "success": true,
    "data": "おはよう!私はぴーで、25歳の元気な女性だよ。いちごが大好きなんだっちゃ!"
}

カスタム学習した内容で回答が返っていますね。JavaScriptからもこれで使えますね。

OpenRouter経由でGemini proも使える

設定のEnvironments for AIでは Typeとして OpenRouterAzure(OpenAI)も選べます。これにより、例えば、Gemini pro なども利用できます。

まとめ

今回、なんとなくわかったのは以下となります。

  • AI EngineのPro版は、ベクターデータベースとも連携できる
  • Pinecone Qdrant が現在使える
  • WordPressの記事を上記のインポートできる機能がある
  • つまり、学習させることが可能
  • 学習させた内容を回答させることが可能
  • APIは、WordPressのREST APIを通して使える
  • 認証はBearer Tokenが使える
  • 外部のAPIは、OpenRouter経由で、Gemini proも使える

あとがき

応用すればいろいろと使えそうです。たとえば、自社のナレッジシステムを学習させた自社内AI チャットGPTとか。あとは、3Dオブジェクトと組み合わせて、音声でキャラクターとお話、会話できるものとか。アプリに組み込んで、ヘルプのやり取りをさせたりとか。

もっと機能を限定してシンプルなWordPressのプラグインとか作りたいですね。

著者にメッセージ

間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合はこちらからどうぞ。お返事が遅くなるときもありますが、ご了承を。

音声認識のやることリストで遊んでみた

じゃんくはっく
じゃんくはっく

音声認識ってやったことなかったなー!

WEB技術だけで出来るみたいですね!

ぴー
ぴー
じゃんくはっく
じゃんくはっく

そうみたい。最近のブラウザは賢いですね

実用的なサンプルをお願いします〜

ぴー
ぴー

最近の音声認識って、どんな感じなんだろう? と思ったのでリサーチしてみました。きっと誰かが作っているだろうと思うので調査開始です。いくつか見つかりましたが、今日は、ブラウザが標準で持っている音声認識の機能を使って遊んでみようかなと思います。

さっそくデモです

さて、まずはデモを実際に触ってみてもらったほうが速いかと思います。PCでChromeブラウザであれば動作すると思います。Safariでも動作しました。

Artyom.js – A Sticky Notes Demo

https://take-i.github.io/artyom-todo/

このような付箋紙のToDoリストが音声認識で追加・削除できるものです。メモの追加は、以下のように喋れば追加できます。

  • ソースコードレビューをする メモ作成

削除したい場合は、

  • 1番目のメモを削除

とすれば、消えます。また、付箋紙をクリックすれば、その内容を喋ってくれます。なお、English USAや、English Great Britain にすると英語の発音じゃないと登録、削除できません。英語の発音練習とかよいのかもしれませんね。

ソースコード

元ネタは、以下となります。

github : Artyom.js

https://github.com/sdkcarlos/artyom.js

このToDoリストのサンプルアプリの元ソースのGITは不明でしたが、日本語化してあるのが自分のgithub リポジトリにコミットしておきました。

artyom.js – todo list

https://github.com/take-i/artyom-todo

どうやって動作しているのか?

とりあえず、サンプルを日本語化して日本語の音声で話せ、認識できるということがわかりました。さて、これはどういう仕組みで動作しているのでしょうか? どこぞやのAPIを叩いているのかと思っていたのですが、ソースをみるとそうではないようでした。

 はい、これはWeb Speech APIというようで、つまりはHTML5 対応のブラウザに実装されている仕様ということでした。ほとんどの主要ブラウザーではサポートしているようです。

注意するのは、IEとAndroid版のOperaブラウザー、そしてAndroidのWebViewではまだ動作しないって書いてありますね。PWA化したWEBアプリなら大丈夫そうです。

 音声をしゃべらせる部分が、SpeechSynthesisUtterance というようです。意味としては、音声発話ということですね。

 そして、音声を認識する部分は、SpeechRecognitionということのようです。こちらのブラウザ対応状況は

こちらは、AndroidのWebViewもいけるようですが、Firefoxや、Operaはだめなようです。ChromeやSafariはPC、スマホは大丈夫なようですね。

まとめ

今回、なんとなくわかったのは以下となります。

・最近のブラウザは賢くなって音声発話や音声認識もできる
・ChromeやSafarriやEdgeは問題なく使えそう。
・スマホは発話が、AndroidのWebViewでは使えないので注意が必要。
・httpsのSSL通信でないと、ブラウザからマイクへの許可許諾のダイアログがアクセスするごとに出る
・デモ版のJSはVerが0.9.6と最新1.0.6と比べて少し低いので、最新も使ってみたい

あとがき

音声認識や、音声合成は利用用途によって使えるので何か案件が来た時には積極的に使っていきたいですね。声フォントとか使えば、自然な喋りが実現できるし、キーボード入力が苦手な方は音声入力のようが良いですしね。

著者にメッセージ

間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合はこちらからどうぞ。お返事が遅くなるときもありますが、ご了承を。

WordPressをhtmlファイルに出してGitHub Pagesで運用するスタイルが最高

じゃんくはっく
じゃんくはっく

スマホサイトでWordPressも納得したしなー!

あ〜、例の記事をネタにするんですね!

ぴー
ぴー
じゃんくはっく
じゃんくはっく

やっぱり運用が楽なのがいいしね!

率直な感想なんかを聞いてみたいわ。

ぴー
ぴー

長らく、スマホ上でWordPress環境を作って、自家サーバで動かしていましたがSLAも納得の数値を出せたのでそろそろ違う環境にしようかなと、考えていました。

 今日のお話は、WordPressから静的なHTMLファイルを書き出してそれをGitHub Pages やNETLIFYで、独自ドメインを使って動かしてみた感想なんかを書きたいなと思います。具体的な手順なんかは記載していませんので、要望があれば別ネタにしたいなと思います。

WordPressでの編集から記事公開までの概略

全体の流れは、基本的に以下の3ステップです。

 (1) ローカル環境のWordPressで記事を書く

 (2) Simply Staticプラグインで、「静的ファイルを生成する」ボタンを押す

 (3) 上記でできたファイルを展開して、Github Pages のリポジトリへコミットする

Github Pages の設定をしておけば、こんな感じですね。(2) のファイル生成時間は、動作速度、記事数や画像数などにもよって変わりますが、自分の場合は1時間弱くらいでした。

WordPressのデータをどうやって、静的ファイルにするの?

これは非常によくできたプラグインがあります。それを使うだけ。いろいろ検討しましたが以下のが一押しです。

Simply Static
HTTPS://JA.WORDPRESS.ORG/PLUGINS/SIMPLY-STATIC/

これは、Pro 版と無償版があります。今使っているのは、無償版ですが、Pro版も検討しています。とりあえずは、無償版でも十分な機能を持っています。以下のように「相対 URL を使用する」でファイルを書き出す設定をしておきます。なぜ相対URLにしているかといえば、ミラーサイトにも公開しているからです。このブログの場合、以下のように複数のリポジトリへコミットしているからです。

 メインサイト:https://hack.gpl.jp/

 エイリアス:https://junkhack.gpl.jp/

 ミラーサイト:https://jh.gpl.jp/

あとは、「静的ファイルを生成する」でOKです。このブログの場合、583個の記事を1時間弱で書き出せました。

書き出したあとはどうするの?

無事に静的ファイルが描き出せたら、圧縮ファイルを展開してGithub Pages のリポジトリにコミットするだけです。自分は、Sourcetree を使っています。

自動化するならスクリプトを作ってコミットもできると思います。そのうち、やってみたいなと思っています。ちなみに、Simply StaticのPro版はGitHub連携も出来るので一手間減ります。

環境づくりで、注意する点

WordPress の環境作りでは、以下の点に気を付ける必要があります。

  • 書き出されるのは静的なHTMLとjsとcss と画像ファイルなのでコメントやメールフォームや検索など動的に動かすことができない
  • なので、コメントは全部閉じる
  • メールフォームなど、自分の場合はコンタクトフォーム 7を使わないようにした
  • 検索はGoogleのカスタム検索をWordPressのウィジェットに貼り付ける(https://programmablesearchengine.google.com/cse/
  • WordPressのスラグは全部英文字にしておく(日本語は使わない)
  • ローカル環境のPHP設定でメモリ関連の設定を上げておく

といったところでしょうか。静的化してもコメントやメールフォームを動かす別の方法もありますが、現時点ではまだ導入していません。そもそも、コメントやメールフォームは無くても良いかなと。あればコミュニケーションができますが、仕事の依頼系はメールでも十分かなと感じています。わざわざ、メールフォームにしておく必要性もないのが実際のところです。コメントについては、このブログの場合、ほとんど書き込みがないので無くても問題はありません。どうしても、コンタクト撮りたい場合は、メールしてもらえれば良いかなと現時点では思っています。

現時点で使っているプラグインは?

静的ファイルを書き出すSimply Staticを使っても、ちゃんと動作しているWordPressのプラグインは以下です。表示系ではない関係ないプラグインもありますが、表示系に関連するのは動いていることを確認しています。

+-------------------------------------------+----------+-----------+-------------+
| name                                      | status   | update    | version     |
+-------------------------------------------+----------+-----------+-------------+
| acf-quickedit-fields                      | active   | available | 3.1.6       |
| advanced-custom-fields                    | active   | none      | 5.11.4      |
| akismet                                   | active   | none      | 4.2.1       |
| autoptimize                               | active   | none      | 2.9.5       |
| backwpup                                  | active   | none      | 3.10.0      |
| bulk-media-register                       | active   | none      | 1.25        |
| admin-featured-image                      | active   | none      | 1.2         |
| export-all-urls                           | active   | none      | 4.1         |
| google-sitemap-generator                  | active   | none      | 4.1.1       |
| jquery-manager                            | active   | none      | 1.10.6      |
| list-urls                                 | active   | none      | 0.2         |
| luckywp-table-of-contents                 | active   | none      | 2.1.4       |
| multiple-domain-mapping-on-single-site    | active   | none      | 1.0.5       |
| permalink-manager                         | active   | available | 2.2.14      |
| search-regex                              | active   | none      | 2.4.1       |
| shortcoder                                | active   | none      | 5.6         |
| simply-static                             | active   | available | 2.1.5.2     |
| google-site-kit                           | active   | none      | 1.48.1      |
| ultimate-addons-for-gutenberg             | active   | none      | 1.25.2      |
| word-balloon                              | active   | none      | 4.18.4      |
| wordpress-importer                        | active   | none      | 0.7         |
| wp-external-links                         | active   | none      | 2.50        |
| wpfront-scroll-top                        | active   | none      | 2.0.7.08086 |
| wp-multibyte-patch                        | active   | none      | 2.9         |
| duplicate-post                            | active   | none      | 4.3         |
+-------------------------------------------+----------+-----------+-------------+

意外だったのは、目次を作っている「luckywp-table-of-contents」や吹き出し表示の「word-balloon」もちゃんと動作しています。

まとめ

今回、なんとなくわかったのは以下となります。

・運用コストが下がるので、今後はコンテンツネタに力を入れていきたい

・やっぱり静的ファイルは読み込みが速い!

・WordPressとは今後もローカル環境で付き合っていきます

あとがき

かなり前から、WordPress運用環境を変えたいなと検討していました。やっぱりシンプルが一番です。まだ切り替えたばかりなので、少し記事を書いてからまた感想などを書きたいなと思います。

著者にメッセージ

間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合はこちらからどうぞ。お返事が遅くなるときもありますが、ご了承を。

ジェットパックプラグインは死活監視サービスがあるのか!

今回引越しをやっていて、気が付いたことがいくつかあります。その1つに、ジェットパックプラグインには、WEBがちゃんと動いているかどうかをチェックしてくれるサービスが無料でありました。

じゃんくはっく
じゃんくはっく

Jetpackプラグインって機能いっぱいあるな!

使い切れるのかしら?

ぴー
ぴー

とにかく、たくさん機能があるんですよね。最近は、このジェットパックに有料機能をつける戦略のようで、バックアップとかSEOとかあるようです。今回は無料の機能で死活監視機能がどんなものか試してみました。

サーバが動いてないとき

こんな表示のメールが届きます。

サーバが再び動き出したとき

こんな表示のメールがきます。

ログには?

ちょうどこの時は、何か作業していてWEBを止めていたんだと思います。ログには以下のように出力されていました。

192.0.101.226 - - [15/Sep/2020:00:46:13 +0900] "HEAD / HTTP/1.1" 403 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:00:54:50 +0900] "HEAD / HTTP/1.1" 403 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:02:42 +0900] "HEAD / HTTP/1.1" 302 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:02:44 +0900] "HEAD /wp-admin/setup-config.php HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:11:53 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:18:32 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - [15/Sep/2020:01:26:37 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"

何をしていたのかは忘れましたが、ログを見るとおそらく、ジェットパッックプラグインの再セットアップでもやっていたのでしょう。

無料でやってくれるなら、使ってみてもいいかなと。現在は、とりあえずこの機能を使うかどうか検討中なので一旦停止しています。

他の無料の外部から監視するサービスは?

お仕事では、Mackerel(マカレル)というサービスを使っていますが、これ無料では監視ができないんですよね。

Mackerel(マカレル) 料金

https://mackerel.io/ja/pricing/

すごく使いやすくて、警告をLineとかに飛ばしたりできるんで重宝(迷惑かも?w)しています。

無料のこれ系のサービスは今まで調査したことがないので、この機会に少し調べてみようと思います。これ系の検索ワードは、日本語では、外形監視 無料 とか。英語だとなんていうんでしょうかね? APM (Application Performance Monitoring) とかかな?

なんとなく、良さそうなものをピックアップしてみます。

New Relic

https://newrelic.co.jp/pricing

Site24x7

https://www.site24x7.jp/url-monitoring.html

StatusCake

https://www.statuscake.com/pricing

Freshworks Inc.

https://www.freshworks.com/website-monitoring/pricing/

あとがき

比較表を今作る元気はないので、とりあえずメモしておきます。Site24x7とかは、スピードテストとかでお世話になったことがあり知っていますが他は知りませんでした。結構、無料でもやれるんですね。今度、どれか採用してレポートしたいなと思います。

このブログは、スマートフォンの中に引越ししました!

えっ? と思われた方もいるかもしれませんが、このジャンクハックブログは引越ししました。それもスマートフォンの中にいます!

なんで、引越しをしたの?

はい、結論から言いますと今まで使っていたWordPress.comのパーソナルプランの料金が上がったからです。月額400円から500円で年間一括6000円となります。まぁ、100円くらい良いんですがなんとなく、年間で6000円かーと思いましてね。

今から2年ほど前、 WordPress.com 上のパーソナルプランっていうところを使い始めていました。

Linuxエンジニアがサーバを作らず結局、WordPress.com の有料プランに入ることにしたよ

https://hack.gpl.jp/2018/10/17/20181017/

レンタルサーバはたくさんあるんですが、WordPressのオートマチック(Automattic Inc.)がやっているサービスです。ビジネスプランまで契約しようかと当初は思っていましたが、このブログがそんな人気が出るわけでもなくチマチマとパーソナルプラン(当初月額400円)でやっていました。

更新期限が10月中旬ということもあって、2、3ヵ月前から自宅サーバを検討していました。ご興味があるかたは、以下から検索してね。(検索システムも速くしてあります)

Termuxとか、自宅サーバ関連

https://hack.gpl.jp/?s=Termux+自宅サーバ

月に500円、年間6000円支払うなら電気代に払って自宅サーバでブログを楽しみたいな! と思ったのであります。

スマホの中に引越しとは?

 はい、このブログはスマホの中から今見ているみなさんに提供しているんです。信じられませんよね!w

これは、Termux というAndroidアプリがありまして、それがつまりは Linuxなんですよね。正確にいえば、Android自体がLinux Kernelを採用したOSなんで、その上でLinux環境を構築するアプリなんです。

で、その環境にWEBサーバやら、データベースサーバやらを作り、WordPressを動作させているんです。回線は、普通のNTTの光回線に InterLinkのIP固定サービスでやっております。いわゆる自宅サーバというやつですね。

あとがき

これで、Pluginもテーマファイルもやりたい放題です。

ぴー
ぴー

やっぱりWordPressはカスタマイズしたいよね!

とりあず、今日は引越ししたよ! というネタをあげたかったので以上にします。またねー。

スマホ上に作った自宅サーバのWordPressで、テスト評価がほぼオールAになった!

はい、ただ今引っ越し準備中でして、このブログをスマートフォン上に作ったWordPressサーバに引っ越しします。9月末か10月頭予定で各種チューニングをやっていましたが、ついにスピードテスト系の評価サイトでほぼオールAを取ることに成功しました。

いくつかある評価サイトの中では、ここが一番好きです。ここの計測サイトは東京リージョンもあり、また各種グラフが見やすくビデオプレビューまで付いて来ます。

WEBPAGETEST

https://www.webpagetest.org/

主な評価観点は、左から以下のようになっています。

  1. セキュリティ
  2. 初期アクセスまでの時間
  3. Keep-alive通信がONか?
  4. 圧縮転送されているか?
  5. イメージの圧縮はどうか?
  6. 静的コンテンツがキャッシュされているか?
  7. CDNを使っているか?

7番のCDNは一部、WordPressのをつかっていますが、全部は使っていないので、x になっています。これはどうするかまだ迷っています。一度、国内のCDNをテストで使ってみようと思ったのですがうまく動作せずでした。まだ原因がわかっていません。

 難易度的には、簡単なものから3・4・5・6・2・1・7で難しかったです。今回は、自分なりの考えをメモりつつ、1つづつ紹介していきたいなと思います。必ず正解っていう部分はないところでもあるので、あくまで自分はこんな対策と対応をしたよっていう感じです。いろいろツッコミどころはあるとは思いますが、何かあればコメントでお気軽にどうぞ。

難易度G・Keep-alive通信がONか?

これは apache を使おうが、nginx を使おうが最初からデフォルトONになっているので意識せずともAになると思います。今回は、最終的に nginx を使うことにしましたので、nginx.conf に以下を設定しています。タイムアウト時間は短いほうが良いと思います。でも、ここは突き詰めると難しい部分です。興味がある方は、以下などを一読されると良いかなと思います。

ぜんぶTIME_WAITのせいだ!

https://qiita.com/kuni-nakaji/items/c07004c7d9e5bb683bc2
http {
::(省略)
    keepalive_requests 100;
    keepalive_timeout  3;
::(省略)

termux 上の android OSでは、一般的なLinuxと違ってKernelパラメータも調整されているはずですので、ここが何が適切なのかを明確にするには root権限のあるスマホで termux を動かし負荷テストをしながら、各種TCPの状態遷移を見ていくのが正しい姿勢です。という意味では一番難しい部類ですが、今回はそこまで突っ込まないことにします。

難易度F・圧縮転送されているか?

圧縮レベルは1でも十分という意見はありそうです。

http {
::(省略)
    gzip  on;
    gzip_vary       on;
    gzip_proxied    any;
    gzip_comp_level 6;
    gzip_types      text/plain text/css text/xml text/javascript
                    application/json application/javascript application/x-javascript
                    application/xml application/rss+xml application/atom+xml
                    image/svg+xml;
::(省略)

難易度E・イメージの圧縮はどうか?

これは今回は、ジェットパックのプラグインでwordpress のCDN側から画像が出ています。そこで適切に圧縮してくれているので簡単です。ただ、やりだすと奥が深いので、中間くらいの位置付けにしてあります。

難易度D・静的コンテンツがキャッシュされているか?

これは、レスポンスヘッダにNo max-age または expiresをつければ解決します。具体的には、nginxの設定で以下を設定すればOKです。

location ~* \.(jpg|jpeg|gif|png|css|js|swf|ico|pdf|svg|eot|ttf|woff)$ {
    expires 60d;
    add_header Cache-Control "public, no-transform";
    access_log off;
}

難易度C・初期アクセスまでの時間

これは、WordPress側でキャッシュを作るのが一番最速です。各種プラグインがありますが、いろいろ試した結果、今の所はAutoptimizeに落ち着いています。

デフォルト設定でも十分効果はあります。迷ってる設定としては、Google フォントの削除 をするかしないかです。表示の綺麗さを取るか、お客様に快適にアクセスしてもらうのを取るか ですね。あとは、ネットワーク的な速度の部分があります。今は InterLink の回線上にいますが、少し工夫してある部分といえば、常時利用する経路とは分離してあるくらいでしょうか? WiFiの5G接続でもこのくらいは出ますよという参考値になればと思います。WiFiルーターの側にスマホ(サーバ)は置いてあります。距離を離すと応答速度が遅れます。

難易度B・セキュリティ

これが結構難しかったです。まず、WordPress の最新を使ってもjquery 1.12.4でした。これは脆弱性があるので、あげて置きたいところですが WordPressはIE8のことも考えて意図的に落としているようです(たぶん)。なので、以下プラグインで上書きしています。

しかし、これ以外もやることがあって以下のチェックサイトに行ったほうがわかりやすいかもしれません。各種セキュリー関連のhttpヘッダーを付与する必要があります。

https://securityheaders.com/

最初はここ、真っ赤でF判定だったです。

対策としては、NGINXの設定でヘッダに以下をつければA判定となりクリアになりますが、まだiFrameの設定が未完結です。X-Frame-Optionsは、古く Content-Security-Policy の指定で行うのが良さそうです。frame-ancestors を指定し組み込める参照元を制限する方法が良いということはわかっているのですが、まだ設定値が決まりません。A判定は取っていますが、内容がない状態です。

add_header Strict-Transport-Security "max-age=15552000"; 
add_header X-XSS-Protection "1; mode=block";
add_header X-Frame-Options SAMEORIGIN;
add_header X-Frame-Options "ALLOW-FROM https://www.youtube.com";
add_header X-Content-Type-Options nosniff;
add_header Content-Security-Policy "default-src * 'self' data: 'unsafe-inline' 'unsafe-eval' ;";
add_header Referrer-Policy strict-origin always;
add_header Permissions-Policy "fullscreen=() geolocation=()";

難易度A・CDNを使っているか?

ここは、DNSの向け先を変えたり、CDNのキャッシュをコントロールしたりする必要があり、運用とも関わる部分です。一度設定したのですが、うまく動作せずここは今の所一番の課題となっています。そもそも、月間5000ページビューにも行かないこのサイトでCDNを導入する必要があるかどうか? という点もありますが、一度やって見ないとわかりません。あと仕事ではなく、趣味なので無料のものしか使う気はありません。さて、どこがいいんでしょうかね?

あとがき

このサーバは、スマホで動いていてWiFiの無線で繋がっていますが、こんなちっさな筐体でもWordPressが動く、しかもA評価までもらえるなんて! 感動です。Termuxは最高のアプリですね。神アプリ認定です。

 しかも、常時SSL対応ですよ。もちろん、無料のSSL証明書です。なんだか時代は刻々と進化していますね。