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

wordpress

WordPressで作ったサイトの表示スピードが劇的にアップした!僕の事例をお話しします。

僕が作ったサイトの特徴

僕はこのサイトの他にも、複数のWebサイトを構築しています。(コウチクとか言うほどのものでは無いですが) 、その一つに旅行系のサイト(下記)があります。

KANSAIVIEW (日本語版)
KANSAIVIEW English (英語版)

将来的に3カ国語の切り替えが出来るサイトにしたかったので、『WordPress国際化テーマ』の中からデザイン性の高いものを探していたところ、スライダーや拡大表示される画像がカッコいい 『Prevalent』 というテーマを見つけました。『Travel Theme(トラベル・テーマ)』というサブタイトルも僕が探しているテーマにぴったりでしたし。

廉価でPrevalent-Pro(有料)という上位版に移行できるとのことだったので、そちらも速攻で購入。

これで僕のように大したプログラミング知識がないオッサンでも、そこそこプロっぽいWebサイトが作れるぞ・・・フフフ。と下心丸出しでサイトのコウチクに取りかかったのでした。

完成に近づいたとき、思わぬ落とし穴が・・・

サイトが完成に近づいたころのことです。どうしても自慢したくなったので、一緒に飲んでいた友人のスマホにURLを打ち込み「こんなサイト作ってん、かっこええやろ~!」と見せようとしたところ、なかなかページが表示されず。 読み込み中の表示(丸いのがクルクル回っているやつね)が出て、なかなかトップページが開かなかったのです。

その時初めて気づきました。

このサイト、表示スピードが遅い!遅すぎる!

いつもパソコンでサイト作りをしていたから気づかなかったのでしょう。スマホで開いてみるとこんなに遅かったとは!

友人も僕に気を遣って「私のスマホの性能が悪いからかな…なかなかページ開かないね…」と言ってくれました。

友人にまで気を遣わせてしまうとは…。プロ失格です。

表示が遅い原因は!?

このサイトはトップ部分にスライダーを、その下にも数々の拡大表示画像やスクロールすると現れる画像が配置されています。

そのほとんどが有料版テーマにデフォルトで設定されていたものなのですが、Javascriptやphpすら満足に扱えないプログラミング素人の僕にとってはスゴく魅力的なものでした。

ですがその動的なイメージ効果こそが表示スピードを遅くしている最大の原因だったのです。

これだけJavaScriptや拡大画像ちりばめていると、そら重くなるよな…

ということは素人でもわかりました。

ページの表示スピードを計測してくれる便利なツール『PageSpeed Insights』

さすがにこのまま世に出すわけにはいかず、ググってみると、PageSpeed Insightsなるものがあることを知りました。(「…って今知ったの?」とツッコまれそうですが)

PageSpeed Insights

サイトのURLを打ち込むだけでスピードを計測でき、ご丁寧改善案まで提案してくれるようです。しかも提供元はGoogle先生!これは使わない手はありません。

でPageSpeed Insightsで調べてみることに。

なんと総合スピード評価100点満点中、15 !

さすがにへこみました。仮にもプロでやっていこうとしている人間が、こんなカメ並のスピードのサイトを作って満足していたとは!

この総合評価ポイント『15』の表記の下に、色々と改善点と改善方法の提案が記載されていました。↓こんな感じ。※すみません、この画像は当時撮影したものではありません。スクショを取り忘れていたので、後から撮り治した後日版です。

で、PageSpeed Insightsの教え通り、改善案を1つずつ当たってみることにしました。特に大きな改善が期待できる順から。

  • 次世代フォーマットでの画像の配信
  • 適正なサイズの画像
  • オフスクリーン画像の遅延読み込み

等が『改善できる項目』の上位に表示されていました。

それではいよいよここから、僕が半プロながら色々試した方法をお伝えしていきます。

・・・が、その前に。

注)今回・次回と色々僕が試したプライグインやコード編集などをご紹介しています。こういったサイトには大体同じ注意書きがあるのですが、Webサイトやデータの編集をされる場合はご自身の責任の下、必ずバックアップを取ってから行ってください。読者様、閲覧者様が行う行為に関し、当サイトでは一切責任は負いかねます。特に今回・次回と『Autoptimize』というプラグインを絶賛お薦めしていますが、ネット上には「Autoptimizeを導入したらレイアウトが崩れた」などの情報もあります。ご注意ください。

『次世代フォーマットでの画像の配信』項目を改善できるか

PageSpeed Insightsの提案には

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

さらには

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

ーWordPress管理画面より引用ー

とありました。上記”プラグイン”のリンクを開くとWordPress推奨の『JPEG 2000、JPEG XR、WebP』などに変換できるプラグインが出てくるものと期待しクリック!

すると期待できそうなプラグインの数々が下記のように表示されました。

上記の中から、ネットでも特に評判のよかった『EWWW image Optimizer』と『imagify』をインストールしたのですが、どうもこれらのプラグイン、画像の圧縮はしてくれるようなのですが、次世代フォーマット(JPEG 2000、JPEG XR、WebP)などに変換してくれるものではなかったようです。

※追記:後に気づいたのですが、EWWWには(もしかするとimagifyにも)時世代フォーマットへの変換機能がありました。

『適正なサイズの画像 』項目を改善できるか

次世代フォーマットへの変換方法が判らなかったので、それならばと『適正サイズの画像』項目を改善すべく、同じく『EWWW image Optimizer』や『imagify』プラグインを使ってみました。

※前述の2つのプラグインは順番に試しています。これら互いに干渉するため同時に有効化すると警告が出ます。

『EWWW image Optimizer』で画像圧縮してみた

まずは Web上でも評価が高く、多くの情報が得られた『EWWW Image Optimizer』を導入することに。

実行後には『縮小された画像データ一覧』などが表示され、プラグインがどのように頑張ってくれたのが視覚的に判る作りになっています。

しかるべき設定を施し、いざ『PageSpeed Insights』へ!

って・・・あれ?

あんまり変わってないやん。

『imagify』で画像圧縮してみた

気を取り直し、次は『imagify』を導入。

しかるべき設定を施し、いざPageSpeed Insightsへ!

 

って・・・あれ?

全然変わってないやん!

今回もスピード表示の下の改善が期待できる項目を見てみると

先ほどまで赤いが7s以上だった “時間短縮が期待できる” という3大項目の一つ『適切なサイズの画像』が、なんと0.15sにまで短縮されていました!明らかにこの項目では効果が出ていた(画像が大幅に圧縮された)と言うことになります。

それでも表示スピードはそれほど変わらないのか・・・

※『imagify』については『EWWW image Optimizer』で圧縮処理をした後だったからかもしれません。ただこちらのプラグイン、『NORMAL』『AGGRESSIVE』『ULTRA』と画像圧縮レベルが3段階あり、『NORMAL』だと『EWWW』とそれほど効果に違いが感じられず、『AGGRESSIVE』にすると画像の劣化が感じ取れました。なので、綺麗で大きな画像を使用したいサイトには向かないと感じ、使用を中止しました。

どうしよう・・・、あまりあれこれプラグインをインストールしたりするのもよくないし。

ファイル圧縮については一旦置いといて、別の項目を改善してみるか・・・。※後に同じ圧縮ファイル系プラグインの『Autoptimize』を試すことになるのですが、それについては後述および後編で紹介させて戴きます。

『オフスクリーン画像の遅延読み込み』の項目を改善できるか

こちら 『オフスクリーン画像の遅延読み込み』の左にある▼を開いたところにまたもやGoogle先生からのありがたいお言葉を戴くことが出来ました。

WordPress の遅延読み込みプラグインをインストールすると、画面外の画像の読み込みを遅らせたり、遅延読み込み機能のあるテーマに切り替えたりできます。AMP プラグインの使用もご検討ください。

ーWordPress管理画面より引用ー

AMPってなんぞや!?

勢いだけでこの道のセミプロになった50歳オヤジには分かるすべも無く…

とりあえずネットでも評判いいし、WordPress様が推奨しているので問題はないだろう

という安易な判断で取り急ぎインストール。

しかしこのような安易な気持ちで導入したものが上手く作用するはずがありません。

『AMPは現在お使いの環境には対応していません(※)』というつれないメッセージの元、あえなく使用を断念しました。※正確な文言は忘れましたが、こんな感じでした。

「まー、そもそもAMPとかよくわからんし、なんかサイトの表示形式も変わるみたいやし、いらんわ!」と自分自身を納得させたのでした。

※まじめな話をすると、AMPについてはしっかり学んでおいた方が良さそうなので、これは後日の課題にしたいと思います。

それならばと、WordPressの遅延読み込みプラグインなるものをインストールしてやろうと、リンクをクリック。

先ほど『次世代フォーマットでの画像配信』の項目でも表示されていたプラグインがあることに気づいたのです。

諦めかけたとき試した『Autoptimize』

上記のリンクを開いたときに気づきました。ファイル圧縮プライイン一覧でも見たことあるプラグインが、オフスクリーン画像遅延読み込みプラグインの一覧にもあることを…!

そう『Autoptimize』です!

一体このプラグイン、次世代フォーマットに変換してくれるのか、画像圧縮しくれるのか、遅延読み込みのプラグインなのか、はたまたキャッシュ削除なのかよくわからなくなったものの、800人以上が使用し、★4つ以上。これはもうインストールしか無いでしょう!と藁(わら)にもすがる思いでインストール。下記のように設定してみたのでした。

Autoptimize設定方法概要

ここから少し(珍しく)設定方法の概要を紹介します。

WordPress管理画面にある『設定』→『Autoptimize』と進みましょう。

右上にある『高度な設定』をクリック→『JS, CSS & HTML』というタブを開きます。

以下、僕がネット上の情報を参考に見よう見まねで行った設定です。

↓キャッシュ情報の部分も基本デフォルトのままです。・・・が、フォルダのディレクトリについてはなんとなく公開しない方が良い気がしたので隠しました 笑

で、最後にページ下部にある『変更を保存してキャッシュを削除』をクリックして設定完了です。

Autoptimizeで明確な改善は見られたのか

ドキドキしながら再度PageSpeed InsightsにURLを打ち込み検証すると・・・

おおっ!15→35に!

初めて明確にUPした瞬間でした。感動・・・

とは言え、まだまだプロとして世間様にお見せできる代物ではありません。

次回(後編)では、ここから→40台→80前後まで上げた方法をご紹介します。

  • Javascriptをhead内からbody内に移動
  • PHPのバージョンアップ
  • 画像の最適化
  • サーバーのプラン変更(バージョンアップ)

等を行っています。

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

Eye-Cache Photo by Jean Gerber on Unsplash

コメント

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