WordPressでスマホ表示を速くしたく色々試すも効果出ず。諦めかけた時これをしたらスコアが15→80になった!後編 ~スコアを35から80にした方法~

wordpress

前回の大筋

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年以上運用しているサイト(下記)でも試しましたがスピードアップにはつながらず。

HISSHI.JP
ITを生涯の仕事にしようと誓った筆者が、ITとは全く関係ないことを書き綴っている、ブログを中心としたサイトです。 「人間関係難しい」とか「どうすればモテるのだろう」とか「何とかお金を稼がなくては」など、必死に奮闘している様をブログで投稿しています。 たまにIT系やスキル取得など情報発信的なこともします。

今回試したこと

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の『改善できる項目』の『遅延読み込みスピード』のレベルには変化なし。

二つ目のタグ『Images』に気になる項目(チェックボックス)がいくつかありました。チェックを入れるべきかどうか・・・。これについてネットで調べるも情報みあたらず。

それでもどうしても気になった為、バックアップを取り、最後は「作ったばかりのサイトで投稿もほとんど無いから、もしもおかしくなってもまた作り直せばいい。えいやっ!」とばかりにクリックしてみたところ・・・

特にサイトの見た目や動作に問題なし。あとは恒例のPageSpeed Insightsに問題がないかどうか。

ドキドキしながらURLを打ち込んでみると・・・

おお!劇的に上がってる!

ちなみに↓がkansaiviewの日本語版ページ。数値は時々で多少上下しますが、このように英語ページも日本語ページも大きく数値が伸びたことが判りますね。

注)こちらIT勉強中の50代男の自分のためのログです。サイトのスピード化についても、それぞれのページによって伸びしろや遅延の原因が違います。本稿あくまで『僕のサイトに関してはこうだった』というログに過ぎませんので、広範において同様の効果が見られるとは限りません。参考の1つ程度にお考えいただけましたら幸いです。

Eye-Catch Photo by Mathew Schwartz on Unsplash

コメント

タイトルとURLをコピーしました