目的はユーザビリティの向上

今回の目的は、
ユーザビリティ（有効さ、効率、ユーザの満足度の度合い）の向上の為の、
ひとつを実現すること。

方法は画像の軽量化

方法は、
サイトの応答時間を短縮させるに必要な画像の軽量化（最適化）すること

手段は適切なプラグインの導入

画像の最適化前に、どの程度表示速度に影響があるのかを把握しておき、

影響を最小限に抑えるための適切なプラグインの導入と、

プラグインの導入で実現する画像の最適化により削減された応答時間を確認します。

次世代フォーマット変換前では

測定タイミングによっては、上記以上のことも承知しています。

この値は計測したタイミングでの瞬間値ということは理解・承知していることです。

サイトの応答時間を遅くさせる理由（原因）はこれ！

モバイルでは、「次世代フォーマットでの画像の配信」で、3.9秒^※の短縮が見込める様です。

※.3.9秒を侮ることなかれ。「３秒の壁」を乗り越える重要性･･･

最初の「３秒の壁」は、「ファーストビュー」が表れるまでです。ここが３秒以上かかってしまうとキャンセルされてしまう。つまり、あなたのホームページは訪問されない可能性が大きくなってくるのです。いまやネットに訪れる主役はパソコンではなく、スマホ（モバイル端末）です。

スマホの登場以来スマホの性能は飛躍して進歩してきましたが、まだパソコンの能力には及びません。

ネットを閲覧する際の端末の6割超がスマホからです。ですからスマホの性能を意識したサイト作りが大事になってくるのです。

パソコンでもつまり、

パソコンでは0.48秒（ここからもまだ、モバイル端末の非力がお分かり戴けると思います）

次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

WordPressサイトにはプラグインが有効

アップロードした画像を最適なフォーマットに自動変換するプラグインまたはサービスの使用をご検討ください。

Google Search ConsoleのPage Speed Insightsの結果のLINKからWordPressサイトでの表示でのプラグインは以下の様なものがありますが、

使うプラグインはこれ

EWWW Image Optimizer

選択基準は、可用性、信頼性、保守性

• WordPressの最新バージョンでテストされていること（信頼性）
• 使用中のWordPressと互換性があること（有効性）
• 更新頻度がある程度あること（保守性）
• 有効インストール数がある程度あること（信頼性）

このプラグインは、インストール、有効化の他に、プラグイン外でのサーバー設定が必要となります。

インストール・有効化

管理画面（ダッシュボード）サイドバーの「プラグイン」➡

プラグイン「新規追加」

➡　キーワードに「web P」を入れてプラグインの検索

　「インストール」➡「有効化」

設定

プラグインの設定画面からWebPをオンにする

管理画面（ダッシュボード）サイドバーの設定　＞　EWWW Image Optimizerを開き、「設定」クリック

Web Pタブを開きます。

「  」 JPG から WebP への変換は非可逆ですが、品質の損失は最小です。 PNG からWebP への変換はロスレスです。のチェックボックスをON✅し、「変更を保存」します。

「変更を保存」した後に、下部にでてくる「コード」を.htaccessに貼り付ける。

「コード」をコピーし、一度テキストエディタなどに貼り付けます。

.htaccessを編集

.htaccessによる自動振り分け
jpgとpng画像ファイルに対して、同名のWebPファイルが同じ階層にある場合、
WebPをサポートしているブラウザではWebPファイルを、
そうでないブラウザはjpgまたはpngを自動で読み込む。

「EWWW Image Optimizer」がWebP設定時に吐き出すコードを利用します。

「.htaccess」を編集します。以下の例はエックスサーバーの例です。

XSERVERの例では、Web FTPから編集できます。

#BEGIN WordPressの前に、挿入^※貼り付けます。

※．前後のステートメントを削除したり、更新・上書きしない様、細心の注意を払って行ってください。（.htaccessファイルはとても重要なものです）

「保存する」で更新されます。

先ほどのEWWW Image Optimizerの画面を見るとグリーンに変わっています。

これで設定は完了です。

.htaccessを設定する以前は、レッド（未適用で.png）でした。

※. キャッシュプラグイン「WP Fastest Cache」を利用している場合は、WebP用のコードが入っているため、グリーンになっています。

既にアップしている画像のWebP化

管理画面（ダッシュボード）サイドバーのメディアから一括最適化を選び、

右側ボックスのWeb Pのみ、チェックボックスを入れます。

確認表示に応えます。

最適化が開始され、進捗状況が表示されます。

進捗状況

最適化完了

最適化が終わったら

メディアライブラリの一覧で開き確認できます。

見えにくいと思いますので、右端の画像最適化部分のみ切り出します。

筆者の場合、予め「Tiny Ping」で画像圧縮を行い、プラグインの「Regenerate Thumbnails」で調整も行っている為、サイズ圧縮値は、目だつ物がない様ですが、これでも有効なのです。

筆者のブログの様にたくさんの画像を使う場合は（塵も積もれば山となるです。）

Web Pに変換されているか確認する

検証モードに切り替えます。　「Ctrl」＋「Shift」＋　「I」　

または、マウス右クリックで出てきたポップアップの一番下　検証（I）

「Network」表示。

（下の様に、開いた時、何もデータが表示されていないことがあります。

その場合は「ctrl」+「R」で再読み込み（リロード）して下さい。

「Network」表示

青枠で囲んだ部分が、次世代フォーマットWebＰ化された部分です。

Search Consoleで確認

この記事を執筆しながら行った関係で、最初計測してから4時間以上かかってしまいました。

ネットが混んできている時間帯でもあり、想定程のスピードが出ていません

（この検証は、明日、同じ時間帯に試みてみようと思います）15：52

Search Consoleで確認

モバイル

それでも、改善できる項目の「次世代フォーマットでの画像配信」は3.9秒から0.15秒になりました。

パソコンは

「次世代フォーマットでの画像配信」が、0.48秒から、表示がなくなりました。

つまり画像に関してはGoogleの評価では改良の余地はない（改善できる点がない）ということです。

まとめ

目的は、表示スピードのアップを求めるのではない。

ユーザビリティの向上の向上を目指して

「次世代フォーマットでの画像配信」対応のプラグインを使うことで、結果的にスピードアップにつながった･･･ということです。

考慮事項

設定注意事項

WordPressサイトのセキュリティを高める

wp-config.phpファイルを外部からのアクセス不可に設定する方法。.htaccessファイルに記載して外部からのアクセスを禁止にする。具体的な記入例と記載後の検証結果の例をお伝えします。 WordPressサイトをお持ちのあなたにとっても大事なことです。

セキュリティ（Security）を高める（切り出し編）

以前の記事で、「wp-config.php」のファイルのセキュリティについて書いたのですが、

　テーブルのリネーム(wp-プイレイックスの変更)など、色々な設定と織り交ぜて記載している為（分かりにくいかもしてませんので）

今回はこの部分の設定だけ切り出してお伝えします。

「wp-config.php」ファイルを外部からのアクセス不可に設定する

データベースのアカウント情報が記載されている「wp-config.php」のファイルは、WordPressを利用する上で、最も重要で、最もセキュリティレベルを高く設定しなければいけないファイルです。

（これも以前の記事にも書いたことですが、大事なことなので、改めて書いています）

このファイルが、攻撃者の手に渡ってしまったら、データベースが直に操作されてしまう危険性があります。

そのため、外部からのアクセスを不可に設定し、パーミッションも厳しく設定する必要があります。（今回の例では触れませんが、パーミッションは600に設定しています）

「.htaccess」ファイルに追記する

「wp-config.php」と同じ階層の「.htaccess^※」ファイルに、下記を入力してください。
※. 分散設定ファイル：ドット・エイチ・ティ・アクセス ファイルは、Apache（アパッチ）を用いたWebサーバにおいて、ディレクトリ単位でサーバの挙動の決定を設置できる設定ファイル

<files wp-config\.php>

order allow,deny

deny from all

</files>

　⇧￥はサーバ環境ではバックスラッシュ（Unix制御文字として、Linuxも）です。

これで、外部からのアクセスは不可能になります。

「.htaccess」ファイルは、様々な設定をすることができます。
設定の範囲を後から分かりやすくするためには、
前後にコメント(#で始まる)を挟むのもよいかも知れません
（多くのプラグインもセットアップでその様な注釈を自動で入れてくれます）

例えば、

#Begin wp-config.php Security -2020/03/12

#END wp-config.php Security -2020/03/12

の様に

実際のサーバ環境（XSERVER）のWebFTPでメンテナンス

• .htaccessへの追記です。
• 既にある記載の変更・削除は、絶対に行わない様に注意して行ってください

設置後検証

https://イイネ.biz/wp-config.php/ では、

ChromeもFirefoxでも、Edgeでもみんな真っ白な画面

筆者が検証を行ったところ、⇧ 403^※エラーでなく真っ白の何もない画面になります？

403画面になって欲しかったけど

本来、“HTTP 403、またはエラーメッセージ Forbidden（「閲覧禁止」「禁止されています」の意）は、HTTPステータスコードの一つ。
　ページが存在するものの、特定のアクセス者にページを表示する権限が付与されず、アクセスが拒否されたことを示すもの。”

403になって欲しかった（XSERVERの場合）のだけど

なぜ？を調べてみた「403でなく画面が真っ白」で検索しても・・・

403と関係している様な記載はみかけるものの、

「画面が真っ白に」では、どの記載も・どれも当てはまらない。

「意図した内容とはちがったもののこれはこれで良いか！」と居直りぎみ

もちろんちゃんとしたURL入力では、正常に操作もできますので。

あなたが、ご存知なら

あなたが、403でなく真っ白になる理由・原因をご存知ならコメント戴けると嬉しいです。

目的は、データベースに対するセキュリティ対策

目的は、データベース(db)テーブルに対するセキュリティ対策です。

手動でテーブル名を変更するセキュリティ対策

正確にはWordPressが利用するデータベース（MySQL）のテーブルに対するprefix変更です。

導入時がベストですが、導入後でもできます。

一般的にはWordPressセットアップ直後がベストですが、
WordPress
ホームページ公開後でも（対象が増えますので、少し手間が増えますが）できます。

①「wp-config.php」で設定しているプレフィックスを変更

FTPで行う（XSERVERの場合）

Xserverログイン ＞ ファイル監理 ＞ FTP(WebFTP) ＞ ご自分のドメイン名 ＞ public_html ＞

 「✅」wp-config.php➡「編集」ボタン

wp-config.php の「編集」

✅ をつけて、「編集」ボタンを押下すると⇩以下の様な表示になります。

サーバーのFTP上での編集は困難ですので、コピペで「Sublime Text 3」などのテキストエディタに移して、「Sublime Text 3」上で編集後に、編集後の状態をコピペでWebFTP上に移し「保存する」で置き換えましょう。　　wp-config.php

この例では、72 Stepです。

ここを変更します。

⇧例では、72 Stepをコメント化し、新しく73Stepに追記したため、１Step増えました

この状態で、「Ctrl」＋「A」で全体を選択しコピペでWebFTP上のwp-config.php

に移し「保存」します。

パス　/xn--ecka7j.biz/public_html/　　　⇩変更後、⇧変更前

phpMyAdminで行う

②利用している全テーブルのプレフィックスを変更する

XSERVERログイン＞サーバ管理＞データベース＞phpmyadmin(MySQL5.7)

 php-adminログイン

「SQL」タブに移ります。

と言っておいて実際にはミスるのですが（笑）･･･印をつけたもの。この時点ではまだ気付いていない

あなたに、間違い（違い）が分かりますか？

ここで実行

　でエラーが無かったことが判ります。

「F5」キーでリフレッシュ表示すると、

12個のテーブル名のリネーム（プレフィックスの変更）完了が確認できます。

「構造」をクリックすると　⇩

　☝テーブルの並び順がおかしい？（ここでやっと気付く）

　リネームミスですjnl_postmeta　は、jn1_postmeta　に修正です。

（単にこのタイミング(プラグインの導入でテーブルが)14個のになった時のキャプチャを忘れたので、別の環境のものを貼り付けています）

ほかのデータベースのテーブルのキャプチャですm( _ _ )m）

次は③テーブル内の項目を変更です。

③「options」・「usermeta」テーブル内の項目を変更する

「実行」すると、

となります。対象は、 WP_user_rolesです 。

※．ここで、 id：91の wp_page_for_privacy_policy もWP_が付いているじゃあないかとお気づきのあなた、「さすが、注意力があります」。でも安心してください。

「実行」

「実行」

同様に、確認

同様に、更新

「更新」

　⇧2行変更されているハズ？なのに、確認します。 ‘wp_が残っていないか？

「実行」

　　☝2件だけで、先の2件は’wp_’でない結果(抽出されない)となっている。

「再確認：「１行変更しました。」とは？」

実行

2件ともmeta_key更新されている結果OK

２件とも更新されているしOK・・・・メッセージだけphpMyAdminのバグ？

これで、データベース(db)aitc_wp2の全テーブルのプレフィックスの変更は終わりです。

長文にお付き合いいただきありがとうございました。

ちょっと待った～～～～～

　最初に、

と言っていながら、テーブルのプレフックス名も、中身の設定値もマスキングすることなく全て開放して大丈夫かよ？　

　この様な設定方法はネットで他にもみかけるが、みんな肝心な部分はマスクしているぞ！

セキュリティ対策が大事とかいって大丈夫かよ？

大丈夫です。

そして、ここをお見せしても大丈夫と言える根拠が、次にお伝えする

「wp-config.phpをアクセス不可に設定する」と、その次の「パーミッションの変更」です。

「wp-config.php」そのもののセキュリティ対策（外部からのアクセスを不可に設定し、パーミッションも厳しく設定する。）

「wp-config.php」アクセス不可に設定する

WebFTP (XSERVER)で行う

外部からアクセスされないように.htaccessを使って制限を掛ける

.htaccessを使って制限 する

攻撃されやすいファイルのアクセス制限

.htaccessに記載（ wp-config.php  と wp-cron.php  ）

.htaccessの保護

.htaccess 自体の保護

ディレクトリ表示の禁止

.htaccessに記述を追加する

設定方法1

設定方法2（さくらインターネットなどのレンタルサーバでは、Optionsは利用できません）

DirectoryIndex index.html .ht

とか

Point

注意

.htaccessファイルに既に何か書き込まれている場合は、絶対に変更しないでください。書き加えるのみです。

何か書き込まれている場合は、.htaccessファイルの最後尾に以下のように追記するだけです。

注意

https://xn--ecka7j.net/wp-content/uploads/　でアクセスしてみると、

ログイン管理画面（wp-login.php）のアクセス制限

次は、パーミッション設定です。

WebFTPで行う（XSERVER）

wp-config.phpのパーミッション

「パーミッション変更」で可能の様ですが、このまま推奨値「600」で行きます。

　「wp-config.php」以外のパーミッションの設定は、また別の機会に。

.htaccess のパーミッション

まとめ

長文になってしまいました。

ここまで読んでくださってありがとうございます。