PAGE TOP

取り組み

印刷する

『PageSpeed Insights』の分析結果! 速度スコアは、モバイルは「Medium(63ポイント)」、パソコンは「Low(30ポイント)」???

Good(80点以上)を目指す

のりのり
重し

前回の記事で、『Emanon business』は「ファーストビューレイアウト設定」に6種類のパターンを取り揃えており、簡単に設置できるのですが、見栄えのよいデザインを追うと、引き換えにサイトの読み込み速度が遅くなってしまうというお話をしました。

また、作成中のサイトの『PageSpeed Insights』分析結果で、最適化スコアがモバイルは63ポイント、パソコンは30ポイントと、どうにかしなさいよというレベルのようでした。

Good(80点以上)を目指すために、『最適化について提案5項目』を示してくれていますので、一つずつ修正していこうと思います。

PageSpeed Insights』分析結果の画面下、「適用済みの最適化」という項目があります。「▶詳細を表示」をクリックして開いたのが下の画像です。
そこには、「・・・縮小されています。とか、・・・有効になっています。」と、提案に対しすでに対応済みのように読み取れます。

なおもその下には「このページ向けに最適化された画像、JavaScript、CSSリソースをダウンロードできます」と書かれています。

図1
 
画像の上でクリックしてみると「optimized_contents.zip」ファイルがダウンロードされました。そこには既にアップロード済みの5つの画像が、確かにサイズが3分の1くらいに小さくなって保存されていました。

それらの画像を差し替えて、再度、分析してみましたところ、モバイルは63ポイントから66ポイントに、パソコンはなんとLow(30ポイント)からGood(90ポイント)に最適化されました。

なぜモバイルはGoodにならないのか?

図2
図3

再度、『PageSpeed Insights』分析結果の画面下、「このページ向けに最適化された画像、JavaScript、CSSリソース」をダウンロードしてみました。

cssフォルダに2つのcssデータ、jsフォルダに2つのjsデータが保存されていましたが、それらはテーマ『Emanon-pro』『Emanon-business』のstyle.css、scripts.js、custom.min.jsを示しているようで、そこに手を加えるのは、画像を上書きするのとは違ってとても怖い気がしますので、これ以上は止めました。

図4

これからも画像をどんどんアップしていきますが、その都度『PageSpeed Insights』で分析しては画像の最適化をしていてはムダな時間を使うような気がします。最初から最適化(圧縮)した画像をアップすればいいということです。

見つけました!!

高速表示
『Webサイト表示を高速化 Google PageSpeed Insightsを理解しよう』
この記事にリンク ↑
オンラインの画像圧縮ツールを使って画像を最適化できます。ここでは代表的なツールとして「Optimizilla」と「TinyPing」をご紹介します。
両方ともJPEG、PNG両方のフォーマットの圧縮ができるオンラインツールで、「Optimizilla」は手動で圧縮率を調整することもできます。
自分の目でクオリティを確認しながら最適化したい場合は「Optimizilla」、圧縮作業の手間を減らして手軽に最適化したい場合は「TinyPing」を使うなど、状況に応じて使い分けるのが良いでしょう。
Optimizilla」で試してみました。
下の画像をPhotoshopで加工し(226KB)、赤枠内にドラッグ&ドロップしました。

図5

左側の赤枠が元画像、右側が圧縮した画像75KB(-67%)、クオリティ90。クオリティを低く設定すれば、画質は劣りますが、さらに圧縮されます。
これで良ければ、すべてダウンロードをクリックします。「optimizilla.zip」というファイル名でダウンロードされます。

図6
 
さらに、圧縮作業の手間を減らして最適化したい場合は、Photoshopで画質を中程度の圧縮率で保存すればいいのかもしれません。ただし、「Optimizilla」のように、画質を確認しながら圧縮することはできません。

図7

キーワード