【SEO 最適化】CMSウェブサイトのW3Cチェックと高速化の確認

webサイトをワードプレスと連携してCMS化して確認したいのがSEOに最適化されているかと読み込むスピードが高速化できるかだと思います。
そこで作成したサイトがまずHTML5にちゃんと準拠しているか、表示スピードが最適化されているかテストしてみます。
最初にW3CチェックということでW3C Internationalization CheckerとFeed Validatorで私のブログで確認してみます。

W3C Internationalization Checker

まず上記のサイトにアクセスして自分のサイトアドレスをペーストします。
全部英語なので翻訳しながら見ていきます。
チェックボタンを押して結果を見ます。
No issues to report !
という結果が出ました。
どうにか合格しているようです。
Informationで色々結果が出てます。
あとで精査します。

次にFeed Validatorでチェックしてみます。
下記サイトにアドレスをコピペします。

Feed Validator

ここもどうにか、Congratulation!頂きました。

ですがここも英語のレポートでデンジャラスって書いてありますので至急精査します。

W3C関係のテストはどうにかクリアしているようです。
自作しているウェブサイトは是非チェックしてみましょう。

次にGoogleのPageSpeed Insightsにて表示速度のテストをしてみます。
Googleの検索順位を上げる要素として表示速度というのは年々重要視されるようになってきました。
特に直帰率が表示速度によって左右される試算がGoogleから出ています。
例えば1秒だった表示速度が10秒かかるようになると直帰率は123%増加します。
検索順位は直帰率が深く関わっていますのでページランクが下がる要因になっています。
そのためにもスピードテストをして改善することがページランクを上げることに繋がります。

Googleスピードテスト

PageSpeed Insightsはスピードテストと改善点も提示しますので表示速度の最適化ができるようになっています。
それではやってみましょう。

PageSpeed Insights

分析のURLに自身のwebサイトのアドレスを入力します。

分析するとモバイルとパソコンに分けてテスト結果が表示されます。
パソコンはそこそこハイスコアでしたがモバイルが普通でした。
それでは改善策の提示を実践したいと思います。
大きかったのは画像を最新の形式で圧縮するのと余計なスクリプトを外すことのようなので実践してみます。
まずは余計なスクリプト外してみましたAdobeのTYPEfont使ってましたのでやむなく外します。
見た目よりスピードです。
その他諸々の圧縮をプラグインを使ってやってみました。
Autoptimizeというプラグインを使って諸々圧縮してみます。

インストールすると管理画面の設定からAutoptimizeの設定ができるようになります。

JS,CSS & HTMLの設定からJavaSctiptオプションでJavaScriptコードの最適化にチェックを入れます。

次にCSSオプションでCSSコードを最適化にチェックを入れます。

次にHTMLオプションでHTMLコードを最適化にチェックを入れます。

その他オプションも全てにチェックを入れます。

タブを切り替えます。
ImagesのタブでLazy-loadにチェックを入れます。
もし他のLazy-load系のプラグインを使用しているならチェックは入れなくて大丈夫です。
もしチェックを入れる場合は他のLazy-load系プラグインは外します。

追加タブに切り替えてGoogle Fontsのwebfoot.jsで非同期にフォントを結合して読み込む。のラジオボタンをチェックします。
そして絵文字を削除のWordPressコア絵文字のインライン…にチェックを入れます。

設定を保存します。

画像をWebP形式に圧縮

次に画像の圧縮に取り掛かります。

まずプラグイン今回はEWWW Image Optimizerを使って画像をWebP形式にして圧縮します。
プラグインをインストールすると管理画面で設定の中にEWWW Image Optimizerが表示されます。

クリックしてまずはベーシックタブの中のメタデータを削除のEXIF やコメント、カラープロファイル…にチェックを入れます。

変換タブに切り替えて、コンバージョンリンクを非表示のサイトまたはテットワーク…にチェックを入れます。

最後にWebPタブに切り替えてJPG, PNG から WebPのJPG から WebP への変換は非可逆ですが、…にチェックを入れて変更を保存します。
すると下記のコードが表示されますので

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

これをリライトルールを挿入するボタンを押さずにサーバーの.htaccessの中で最後尾ではなく最初の方にコピペします。
ワードプレスに戻って変更を保存します。