せっかくLuxeritas使ってるならPageSpeed Insights使って速度改善しよう!

ブログ管理EWWW Image Optimizer, Luxeritas, PageSpeed Insights, WordPressプラグイン, ブログ管理, 初心者

ページスピード改善ヘッダー

ぐず夫
ぐず夫
そこのトリさんよ、ワシ、ちと気になってるんやが。

トリ師匠
トリ師匠
藪から棒になんじゃ。
ぐず夫
ぐず夫
前にページの速度見るっちゅう「PageSpeed Insights」でなんや測ったやろ。そん時は嬉しさで我を忘れてたけど、よくよく考えたらおかしい思ってな!
トリ師匠
トリ師匠
ほう、なんや珍しい。何がおかしいんじゃ?
ぐず夫
ぐず夫
何でワシのページの速度が100点なんじゃ! 自分で言うのもなんやけど、ワシ、ホンマになんもしてないで!
トリ師匠
トリ師匠
ふーん。ま、気づいただけマシやの。なら何でそんな点出るか考えてみよか。

ということで、今回はPageSpeed Insightsで点を出すための手段を現状を踏まえ考えてみます。

以前、PageSpeed Insightsを試してみた結果

速いとは言っても

ぐず夫
ぐず夫
確かにLuxeritasが爆速のテーマや言うて、もともと点数が高いのかもしれへん。でもワシかておかしい思うことくらいあるんやで!

トリ師匠
トリ師匠
へ~。ちなみにどのへん?
ぐず夫
ぐず夫
だってそうやろ、ウチの他にもいっぱいLuxeritas使ってるとこはあるはずや。ワシも分からへんなりに調べてみたけど、よそさんが並びに並んで満点なわけとちゃうかったんや。
トリ師匠
トリ師匠
ほ~。で?
ぐず夫
ぐず夫
ワシより前から使ってる賢い人がいっぱいいてるのに、他がみんな100点ちゃうのはおかしいやろがい!
トリ師匠
トリ師匠
……随分と自虐的な観点じゃの。
でもそんな難しい話やないで。それはただ「どんなテーマ使ってても点が高く表示されるように対応してるか、してへんかの違い」だけやし、そもそも「考え方も人それぞれ」やからな。美しさを求めてて速さなんぞ二の次や言う人もそらおるやろ。
ぐず夫
ぐず夫
「対応してるかしてへんか」やと?
なら何もしてへんのに点数高いのは、やっぱりおかしいてことやろがい!
トリ師匠
トリ師匠
(面倒じゃな…)
はいはい、ならしてるしてる。でもしてることはメッチャ普通やで。そもそもLuxeritasのベースが高い上に、PageSpeed Insightsで指摘されたとこ直してるだけやからな。
ぐず夫
ぐず夫
なんやと?
だったら何したか一つずつ説明したらんかい!
トリ師匠
トリ師匠
面倒じゃのう。なら大体のポイントだけ挙げてくで。
師匠が挙げるポイント!  

① 画像は軽くする!
② 画像サイズは表示サイズに合わせる!
③ 画像遅延表示はちゃんと設定する!
④ 無駄なJavaScriptやCSSを排除!
⑤ 無駄なプラグインを入れない!
⑥ テーマの設定や更新をちゃんとする!

トリ師匠
トリ師匠
そんじゃ順々にサックリ説明してくで。

① 画像は軽くする!

ぐず夫
ぐず夫
画像は軽くす…る?
何を言ってるか分からへんわ!
トリ師匠
トリ師匠
ブログにのっける画像のファイルサイズを軽くせえっちゅう意味じゃ。まず前提として、JPEG1つをとっても、画像のサイズは同じでもファイルのサイズは全然違うんや
ぐず夫
ぐず夫
……は?
トリ師匠
トリ師匠
仮に同じ1000×1000の大きさの画像でも、データを圧縮するだけでファイルのサイズは減らせるんじゃ。前まではPageSpeed Insightsで診断すると圧縮した画像ファイルを提供してくれてたけど、今は機能がなくなってしまったで、「画像を最適化し!」と指摘されたら自前で画像をちっちゃしたらなあかんねん。

ファイルサイズ指摘

ぐず夫
ぐず夫
…あかん、なんのこっちゃちんぷんかんぷんやで。
トリ師匠
トリ師匠
なんでやねん、簡単じゃろ。実際にページのスピード測って、「効率的な画像フォーマット」て指摘された画像に対して、画像を最適化するっちゅうだけの話じゃ。
ぐず夫
ぐず夫
だからそれをどうするっちゅうんじゃ!
トリ師匠
トリ師匠
ウチはEWWW Image Optimizer入れてるで元々JPEGのファイルサイズは圧縮されてるけど、指摘された画像に関しては別途圧縮してやらなあかん。今はJPEGの圧縮も色んなサイトで簡単にできるでな。例えばこんなサイトじゃ。

○ Compress JPEG

  • 使い方1:「アップロード」ボタン、もしくは「ファイルをここにドラッグ&ドロップして下さい」から圧縮したい画像ファイル選択する。
  • 使い方2:画像をクリックし、圧縮率を画像を確認しながら決定し「適用」ボタンをクリック。
  • 使い方3:圧縮後のサイズを確認し、個別に「ダウンロード」か「全てダウンロード」を押す。
使い方1
「アップロード」もしくは「ファイルをここにドラッグ&ドロップして下さい」から画像を選択
画像を選択
アップした画像を選択(設定と書かれた部分をクリック)
画像の圧縮
クオリティにて圧縮率の設定を決め「適用」を押し、ダウンロードするだけ
ぐず夫
ぐず夫
うぐぐぐ。簡単や。
トリ師匠
トリ師匠
PageSpeed Insightsで指摘された場所から画像ファイル持ってきて、ファイルを軽くして、元の場所へアップロードするだけや。
ぐず夫
ぐず夫
あ、あっぷろーど やと?
トリ師匠
トリ師匠
ああ、ウチやとMixHost「cPanel」から直接ファイルを触ってやるとええで。ファイルの探し方は下を参考にしたってな。

◆MixHostで指定のファイルを探す方法はコチラ!

トリ師匠
トリ師匠
PageSpeed Insightsで指摘された場所にファイルはあるで、①ダウンロードして、②上のサイトで圧縮して、③元あったフォルダを選択し上に並んでる「アップロード」を押す。最後に④「既存ファイルの上書き」を選択しアップロードじゃ。
ファイルのダウンロードとアップロード
①左側の画面でフォルダを選択し、対象のファイルをダウンロード。圧縮したら①のフォルダを再び選択し「アップロード」を押下(画像は一部修正しています)
上書き保存
最後は上書き保存を選択し、画像をアップロードして完了
ぐず夫
ぐず夫
…メチャメチャ早足やないか。
トリ師匠
トリ師匠
言うたやろサックリいくて。こんな感じで指摘された画像を最適化してくだけやて。基本的にはこんな感じじゃな。
ぐず夫
ぐず夫
……は、はぁ。

 

② 画像サイズは表示サイズに合わせる!

トリ師匠
トリ師匠
こんどは画像のファイルサイズじゃなくて単純な画像のおっきさや。無駄にでっかいサイズ(例えば3000×3000ピクセル)の画像を本文幅が1000ピクセルしかない場所へ縮小表示させてたりすると、「最初っから1000×1000のサイズに小さくしとけ!」と指摘されるわけや。

画像サイズ指摘

ぐず夫
ぐず夫
そ、そーゆーもんなんかいな。
トリ師匠
トリ師匠
せや。だから投稿なんかで画像挿入の際には、画像のおっきさを最初から表示させたい適切なサイズに編集しとくか、表示用に最適なサイズを自動生成するよう設定しとく(Luxeritasのサムネ管理はコチラ)ことが大切じゃ。
ぐず夫
ぐず夫
むむむむむ。
トリ師匠
トリ師匠
PageSpeed Insightsで指摘されたファイルに関しては、「①画像を軽くする」と同様にファイルを小さくしてアップロードし直してやるとええで。

 

③ 画像の遅延表示はちゃんと設定する!

ぐず夫
ぐず夫
これはなんじゃらほい!
トリ師匠
トリ師匠
これはLuxeritas使ってたら簡単に解決できる項目じゃ。外観カスタマイズ機能のLazy Load設定を適切に設定してやれば、なんも知らへんでもどうにかなるで。
ぐず夫
ぐず夫
そ、そんな横暴な答えがあるかいな…
トリ師匠
トリ師匠
でもそうなんじゃから仕方ないやん。Luxeritas使ってないならLazy Load機能を別途導入するしかないで、軽いプラグインとか探してみたらええんちゃうんか。
ぐず夫
ぐず夫
ちゃうんかて、他人事みたいに言うなや…
トリ師匠
トリ師匠
だったらLuxeritas使えばええやん。設定は下にまとめてあるでそっちを見たってな!

◆Lazy Load機能のまとめはコチラ!

④ 無駄なJavaScriptやCSSを排除!

ぐず夫
ぐず夫
無駄なCSS?
トリ師匠
トリ師匠
これもLuxeritas使ってるとそこまで気にする部分やないな。カスタマイズ機能の「圧縮・最適化」「CSS」「JavaScript」の中で適切に設定したれば勝手に減らしてくれるからの。強いてい言えばウィジェット用のCSS読み込みの設定と、自前で付け足してるJSやCSSの中身を見直すくらいじゃないかの。
ぐず夫
ぐず夫
あかん、話が早すぎてついていけへん。
トリ師匠
トリ師匠
自前以外の詳しい説明は下で書いてるで、そっちを確認したってな。

◆LuxeritasのCSS最適化機能の説明はコチラ!

⑤ 無駄なプラグインを入れない!

ぐず夫
ぐず夫
「ぷらぐいん」を入れろ言うたのはトリやないか!
トリ師匠
トリ師匠
じゃから「無駄な」て言うてるじゃろ。テーマの作者さんも言うてるけど、このテーマで重いプラグインは最初から使うことを推奨されてへんねん(詳細はコチラ)。例えば有名で使ってる人も多い「WordPress Popular Posts」なんかは、入れてたら重すぎてせっかくの速さが台無しやで。
ぐず夫
ぐず夫
……よく知らへんけど、ウチはトリの言ったもんしか入れてへんな。
トリ師匠
トリ師匠
使う時には「軽い」てのも一つの要素じゃから覚えとき。あとは重要性と利便性と速度を天秤にかけて導入の検討するんじゃな。
ぐず夫
ぐず夫
よく分からへんけど、むやみやたらに入れればええってもんとちゃうんやな。覚えとくわ。

 

⑥ テーマの設定や更新をちゃんとする!

トリ師匠
トリ師匠
あと1番重要なんがこれな。せっかくテーマを速く作ってくれてるのに、ちゃんと設定してへんかったり、テーマの更新を疎かにしてるのが1番ダメじゃ。意外とやってない人が多いんちゃうか。
ぐず夫
ぐず夫
……そこだけはちゃんとやってるつもりやけどな。
トリ師匠
トリ師匠
それでもブラウザのキャッシュ設定とか細かいとこまで設定しとれば、それだけでそこそこの点数は出るはずやでここまでのたった6項目気にするだけでも、サーバーの調子次第でモバイルもパソコンも両方100点出るんじゃから。
モバイル100点
モバイル100点
パソコン100点
パソコン100点
ぐず夫
ぐず夫
……なぁ、これ、結局テーマが凄いんちゃうか?
トリ師匠
トリ師匠
せやで。最初からそう言ってるやん。Luxeritas様様や。

◆テーマの更新方法はコチラ!

色々考えてみた結果…

トリ師匠
トリ師匠
結果、テーマ選びを間違えへんで、小さなとこに気を使ってたらそこそこの点が出るってことじゃな。その点、Luxeritasは激速じゃから最適解かもしれへんの。
ぐず夫
ぐず夫
画像の圧縮以外、特になんもすることなかったのが驚きやったわ…
トリ師匠
トリ師匠
だから言ったやん、してることは普通て。今後もありがたく使わせていただけばええんちゃうか。
ぐず夫
ぐず夫
…せやな。

ということで今回は速度対策を考えてみました。皆さんもテーマを試してみたくなったのでは?(笑)

よろしければコチラを是非。
ではまた次回。