前回の大筋
PageSpeed Insightsでサイトの表示スピードを測ってみた
Googleが提供する『PageSpeed Insight』で、初めて自分のサイト『https://kansaiview.jp』および『https://en.kansaiview.jp』の表示スピードを検索したときのこと。
下記がその画像なのですが・・・
※すみません日本語版のスクリーンショット取り忘れましたが、ほぼ英語版と同じでした（使っている画像やコンテンツもほぼ同じなので当然ですよね）。
画像圧縮プラグイン『EWWW Image Optimizer』『Imagify』を使ったり、ファイルの次世代フォーマットへの変換を試みたりしたのですが、劇的な改善は見られず。
ただ『Autoptimize』の『JS, CSS, HTML』タブを設定するだけで、下記のように数値があがったというところまで紹介しました。
↓下記が前回の投稿
注）前回・今回とAutoptimizeを絶賛お薦めしていますが、ネット上には「Autoptimizeを導入したらレイアウトが崩れた」などの情報もありますので、使用の際はご注意ください。
Webサイトやデータの編集をされる場合はご自身の責任の下、必ずバックアップを取ってから行ってくださいね。読者様、閲覧者様が行う行為に関し、当サイトでは一切責任は負いかねますのでご了承ください。
Autoptimizeは何をしれくれたの？
実は僕、この『Autoptimize』が何をしてくれたのかよくわかっていません。画像圧縮？何やらキャッシュはクリアしてくれるそうなのですが…。何せプラグインはオール英語。
キャッシュ削除プラグインというと『WP Super Cache』や『W3 Total Cache』なども使っていましたが、それらでキャッシュをクリアしてもPageSpeed Insightsの数値に全くといっていいほど変化が無かったのに対し、今回この『Autoptimize』で 『JS, CSS, HTML』 の設定後キャッシュをクリアすると明確に改善が見られましたので、他のキャッシュ削除プラグインは外しました。
まずは前回に引き続き 『EWWW Image Optimizer』 について少し触れておきたいと思います。
このEWWW、前回もお話ししましたが、ネットの高評価に反し僕のサイトのスピードアップには全くといっていいほど効果を発揮しませんでした。
画像の圧縮はしてくれているようなのですが、PageSpeed Insightsのポイントについては効果なし。
僕の他の3年以上運用しているサイト（下記）でも試しましたがスピードアップにはつながらず。
今回試したこと
Java Scriptのコードをhead内からbody内に移してみた
さて、気を取り直して次へ。
Java Scriptのコードをhead内からbody内に移すというもの。
なにやら『トップ画像にスライダーなど大がかりな画像処理がされていると、始めにユーザーがサイトを訪れる際、これが遅延の原因になることがある』ということのようです。
そのトップ画像を司るJava Scriptのコードは、何もヘッド内（ページを初期段階で読み込む場所）にある必要が無いので、少しでも後段階で読み込むようhead内→body内に移動させることで少しでも遅延の原因を減らせるということなのだそうです。
で、早速試してみました。
効果なし。
というかJavaScriptに詳しくないのWEB上に出ているコード編集を見よう見まねで行ったものの果たしてこのコードが遅延の原因になっているコードなのかどうかも不明。
そもそも論で言うと該当の（遅延の原因になっている）コードがテーマのデフォルトで適正な位置にあったのかもしれない。
PHPのバージョンアップ を行ってみた
少し話がそれますが、前述の『EWWW Image Optimizer』をいじっていた時のこと。
設定画面の上の方に何やら英語のエラー表示が・・・。
『 EWWW Image Optimizer requires PHP 5.6 or greater. Newer versions of PHP, like 7.1 and 7.2, are significantly faster and much more secure. 』
「PHPのバージョンを7.1とか7.2とかにアップグレードすると、劇的に早く、安全になる。」と書かれていますね。
劇的に早く・・・
これは期待できるかも！と、早速契約しているレンタルサーバーの管理画面を開きました。
やはりバージョンが最新ではありませんでした。
早速バージョンアップ、いざPageSpeed Insightsへ！
効果なし・・・。
やはりサーバーのプランをアップグレードするしかないのか・・・
サーバーのプランをアップグレード
以前も最低ランクからバージョンアップしたときは早くなった（気がした）し。
現在は販売サイトではないとはいえ、3つのサイトを運用していることを考えるとグレードアップもありかも。
と、500/月→2000/月に変更。
これは、なかなかの出費
いざ！
とPageSpeedInsightsへ
・・・って、全くかわってないやん！！！
手作業でコツコツと画像サイズを修正してみた
打つ手が無いのでしかたなく、 手作業でコツコツと画像サイズを修正することにしました。
すると・・・
おっ！少しレベルアップした！
面倒ではありましたが、やはりNo Pain No Gain。苦労無くして得るものなし、なのかもしれません。
ようやくここまでたどり着きましたが、それでも赤字（0～49『遅い』）レベルを脱せません。
・・・このままでは堂々と他人様にお見せできない。
諦めかけたとき、再度救世主となったのがAutoptimizeだった！
もう僕の知識レベルではこのサイトのスピードを劇的に上げるのはムリなのかも・・・
と、諦めかけたときです。『Autoptimize』の設定を色々見ていると、何やら設定画面上に複数のタブがあることに気づきました。
実はこのプラグイン、多くのサイトで紹介されているのですが、設定方法についてはどこも『JS, CSS & HTML』タグの部分のみ（前回僕も紹介した設定方法ですね）。
これだけでもかなり効果ありだったのですが、PageSpeed Insightsの『改善できる項目』の『遅延読み込みスピード』のレベルには変化なし。
二つ目のタブ『画像』に気になる項目（チェックボックス）がいくつかありました。チェックを入れるべきかどうか・・・。これについてネットで調べるも情報みあたらず。
それでもどうしても気になった為、バックアップを取り、上記のように3ヵ所『画像を最適化』『Load WebP in supported browsers?』『Lazy-load images?』すべてにチェック、最後は「作ったばかりのサイトで投稿もほとんど無いから、もしもおかしくなってもまた作り直せばいい。えいやっ！」とばかりにクリックしてみたところ・・・
特にサイトの見た目や動作に問題なし。あとは恒例のPageSpeed Insightsに問題がないかどうか。
ドキドキしながらURLを打ち込んでみると・・・
おお！劇的に上がってる！
ちなみに↓がkansaiviewの日本語版ページ。数値は時々で多少上下しますが、このように英語ページも日本語ページも大きく数値が伸びたことが判りますね。
【後日追記】
注）ここまでAutoptimizeを激押ししてきましたが、実は手放しでお薦めできる代物ではないと気づきました。メリットはあるけど、デメリットも同じく存在することに気づいたのです。
上記のサイトについては『画像タブ』の3ヵ所にチェックを入れることで、見事劇的にスピードUPしました。しましたが・・・
トップ部分のスライダー画像が不自然な動きをするようになり・・・。一瞬消えて、続いて不自然なほど速いスピードで画像が切り替わるのです。「変すぎる・・・」と、いうことで、結局『画像を最適化する』以外の2ヵ所のチェックを外しました。※2か所を外してもスピードはそれほど鈍化しなかったのでホッとしました。
親サイトについては表面上何の問題も起きなかったのですが、HTMLやCSSを編集しようとすると、style.cssが妙なところに移動してしまい、編集が難しくなりました。その為、CSSオプションはチェックを外しました。結果、Autoptimizeは使っているもののスピードレベルは35に戻りました。AutoptimizeはCSS編集を頻繁に行うサイトには適さないということですね。
注）こちらIT勉強中の50代男の自分のためのログです。サイトのスピード化についても、それぞれのページによって伸びしろや遅延の原因が違います。本稿あくまで『僕のサイトに関してはこうだった』というログに過ぎませんので、広範において同様の効果が見られるとは限りません。参考の１つ程度にお考えいただけましたら幸いです。
Eye-Cache Photo by Jean Gerber on Unsplash
コメント