シンクラウド for Freeのブログが遅くなったので高速化してみようと思って
EWWW Image Optimizerでつまずいた話です。
EWWW Image Optimizerを導入する主目的は
jpegなどの画像ファイルを軽いWebPに変換して高速化を目指すものだけど。
うまくいかず画像が表示されなくなりました。
遅い主因はGoogle関係のJavascriptなので、元々画像サイズの小さいものをWebPに変換しても大して速くならないだろうということで導入を断念しました。
現状PageSpeed Insightsで測定してみる
このページhttps://kikuichigebkn1.website/permalink-redirect/をPageSpeed Insightsで測定してみると
メインのブログでやっている設定にしてみました。
プラグインの見直し
ユーザーがサーバーへアクセスしたときサーバーから送られる主なファイルはHtml（骨組み）、CSS（スタイル）、Javascript（動きや機能）、画像です。
遅い原因はJavascriptの動作時間と画像サイズになります。
またプラグインは、ほとんどの場合ユーザーがサーバーへアクセスしたときに動き出すのではなく
記事を編集中や公開するときに動作します。
なのでプラグインが動いて、表示スピードが下がっているわけではありません。
プラグインが表示スピードに影響する原因は、プラグインが作りだすJavascriptにあります。
同じような機能のJavascriptを入れてしまったり、
Google関係のJavascriptのように、Googleのサーバーにデータを送受信しているのが遅くなる原因です。
要するに遅くなる主因はGoogle関係（analytics、search console、AdSense)のJavascriptです。
私の現状プラグイン
デフォルトで入っていたもの（有効化していない）
Akismet Anti-spam: Spam Protection
Hello Dolly
後からインストールしたもの
Contact Form 7（お問い合わせ）
Site Kit by Google（Google関連）
UpdraftPlus （バックアップ/復元）
今回追加するもの
EWWW Image Optimizer（結局無効にした）
Flying Scripts by WP Speed Matters（GoogleAdSenseの結果が来てから有効化する）
Cocoon設定サイト高速化の利用
上記のメインブログの記事に従ってやってみた結果
携帯電話のみ上のようなエラーになりました。うまくいくときもあります。
LCP（Largest Contentful Paint）とは、
ページの主要なコンテンツが表示されるまでの時間を測定するものです。
Cocoon高速設定の縮小化（コード）をすべて外すとエラーにならない傾向がありました。
LCPとコードの縮小化の直接の因果関係は分かりませんが、
やってみてそういう傾向があったので、ここは外しました。
私のメインのブログ（お名前ドットコム）はそんなことはなかったのですが、
シンクラウド for Freeでは影響があるのかもしれません。
デスクトップのほうのパフォーマンスは95でした。
いつも他のサイトでも携帯のほうがかなり悪いです。
Flying Scripts by WP Speed Matters
JavaScriptのコードを遅らせて読み込ませるプラグインです。
GoogleAdSenseの結果が出てから「Include Keywords」にGoogleAdSenseが利用する「adsbygoogle.js」に入れようと思います。
EWWW Image Optimizer
これはうまくいかなかったので無効化しています。
このプラグインではjpegなどの画像ファイルをwebpというファイル容量が削減できる形式に変換しています。
サイズが小さくなるといっても元々のjpeg画像のサイズが100kぐらいだったら小さくしても、その効果はあまり感じられないと思います。
.htaccessという重要なファイルを書き換える作業があるので間違うと危険です。
なので初心者の人にはお勧めしません。
EWWW Image Optimizerをインストールして有効化して以下のように設定
次へをクリックすると「easyIOがないとストレージを消費するけどいいか？」という文章が出ます。
「easyIO」は有料なのでいらないと思います。
よければ次へ
設定を保存
.htaccess
WebPに変換するには.htaccessを書き換える必要があります。
.htaccessについてはシンレンタルサーバー
の.htaccessが参考になります。
シンクラウド for Freeにはシンレンタルサーバー
にあるような「.htaccess編集」機能はなさそうです。
なのでFTPを使います。
初期FTPアカウントは、サーバーに設定をした全ドメインへ接続が可能なので
「FTPアカウントの追加」はやらなくても大丈夫です。
FTPのやり方はFTPソフトの設定にあります。別途FTPソフトが必要になります。
私はFFFTP（無料）を使っています。
FFFTPでサーバーに接続すると以下の場所と接続されます。
ドメインごとにフォルダがあり、それぞれに.htaccessがあります。
.htaccessのある場所は
初期ドメインcf193110.cloudfree.jp/public_html/.htaccess
追加したドメインkikuichigebkn.website/public_html/.htaccess
今回は下段の.htaccessです。
.htaccessをダウンロードして別名で保存しておき戻せるようにしておきましょう。
リトライルールを挿入
WebPに変換するには.htaccessを書き換えるのですが、
EWWW Image Optimizerの「リトライルールを挿入」ボタンをクリックすると
必要なコードが.htaccessに自動で挿入されます。
クリックしたら以下エラーが出て画像が全部でなくなった。
| WebP の配信方法 | このサイトには mod_headers が抜けているようです。この Apache モジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。 This may be a false positive. If so, the warning should go away once you implement the rewrite rules.WebP rules verified, but self-test failed: PNG の応答が MINEタイプ のテストに失敗しました |
|---|
.htaccessをダウンロードして見てみると1番最後にWebP 変換のコードが追加されました。
また実際の記事の画像が表示している部分のHtmlコードを「開発者ツール」で見てみると
画像が表示してないとき（EWWW Image Optimizer有効）
<img decoding="async" width="854" height="676" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAAKkAQAAAAArCpNgAAAAAnRSTlMAAHaTzTgAAABdSURBVHja7cEBAQAAAIIg/69uSEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwK8BHT8AAeDuAjAAAAAASUVORK5CYII=" alt="" class="wp-image-323 lazyload" style="width:419px;height:332px" data-src="https://kikuichigebkn1.website/wp-content/uploads/2023/10/adsence_site.jpeg" data-srcset="https://kikuichigebkn1.website/wp-content/uploads/2023/10/adsence_site.jpeg 854w, https://kikuichigebkn1.website/wp-content/uploads/2023/10/adsence_site-300x237.jpeg 300w, https://kikuichigebkn1.website/wp-content/uploads/2023/10/adsence_site-768x608.jpeg 768w" data-sizes="auto" data-eio-rwidth="854" data-eio-rheight="676">表示しているとき（EWWW Image Optimizer無効）
<img decoding="async" loading="lazy" width="854" height="676" src="https://kikuichigebkn1.website/wp-content/uploads/2023/10/adsence_site.jpeg" alt="" class="wp-image-323" style="width:419px;height:332px" srcset="https://kikuichigebkn1.website/wp-content/uploads/2023/10/adsence_site.jpeg 854w, https://kikuichigebkn1.website/wp-content/uploads/2023/10/adsence_site-300x237.jpeg 300w, https://kikuichigebkn1.website/wp-content/uploads/2023/10/adsence_site-768x608.jpeg 768w" sizes="(max-width: 854px) 100vw, 854px">見てもよく分かりません。
EWWW Image Optimizer無効化して直った。
ということでEWWW Image Optimizerはあきらめました。
元に戻すためにやったこと
.htaccessを戻す。→ダメ
WebP 変換 のチェックをはずした。→ダメ
EWWW Image Optimizer無効化→OK
なのでwebpだけではなく全部無効化している状態です。
原因考察
エラー「mod_headers が抜けて」でGoogle検索すると「XserverはXアクセレーターの影響でうまくいかない」というのが出てきます。
その対策として「Xアクセラレータ」を「OFF」に設定してうまくいったというのがあります。
シンクラウド for FreeはXserverの系列なので、この辺が怪しいです。
でもシンクラウド for Freeには「Xアクセラレータ」の情報がないので関係あるかどうかも分かりません。
シンレンタルサーバー シンレンタルサーバー にも「Xアクセラレータ」が入っているようなので、もしかしたら入っているかも。
ということでシンクラウド for FreeでEWWW Image Optimizerはあきらめました。
まとめ
シンクラウド for FreeではCocoon設定サイト高速化は効果を確認できないし、
EWWW Image Optimizerはうまくいかない。
XserverにあるXアクセレーターがシンクラウド for Freeにもあるのかが気になる。
もしあるのであれば「Xアクセレーター」は高速化ツールなので
他の高速化手段に影響がありそうです。
Flying Scripts by WP Speed Mattersに関してはGoogleアドセンスの結果が出たら試します。
イチゲをOFUSEで応援する(御質問でもOKです）Vプリカでのお支払いがおすすめです。
MENTAやってます（ichige）
