画像をロスレス圧縮してサイトスピード高速化 PageSpeed Insights

Googleアナリティクスをあてもなくカチカチしていると面白いものを見つけました。

サイトの表示速度を点数化して採点してくれる機能があるのです。さらに改善点などを教えてくれて指示に従って処理していけばサイトの表示速度向上に役立てることが出来ます。

この機能は「PageSpeed Insights」と呼ばれるようで、Googleアナリティクスの「サイトの速度についての提案」というページにあります。そこに行き着くには「行動」→「サイトの速度」→「サイトの速度の提案」→「PageSpeed の提案」の項目の「合計*個」を押下します。すると次のような画面が表示され、点数で自分のサイトを評価してくれます。

点数化されると高得点をとりたくなりますね、ということで高得点をとるべくGoogleアナリティクスが教えてくれた指示に取り組んでみました。取り組む点は多々あるようですが、今回は画像の圧縮についてのことを記載します。


画像にありますように「ロスレス圧縮」をしてくださいとのこと。「ロスレス圧縮」ってなんだろうと思い、少々調べてみましたが画像を綺麗なままサイズを圧縮することのようですね。そもそも圧縮とはサイズを小さくするだけにとどまらず、そのままの状態でサイズを小さくするという意味合いがあると思うので、頭にロスレスなんて付けなくても良いのではないかと思いますけどもね。

さて実際にロスレス圧縮してみましょう。ロスレス圧縮には色々な方法がありますが、今回は「TinyPNG」というサイトを使用しました。理由としては、「アプリケーションをダウンロードする必要がないこと」、「使いやすそうな画面」を上げます。

使用方法は簡単３ステップです。

１．「Drop your .png or .jpg files here」と書かれた点線ブロックに画像をドロップします。

２．するとダウンロード状況を示した棒がニョキニョキっと伸びるので、ダウンロードが完了したら右横の「download」リンクを押下しましょう。

３．これで完了です。ロスレス圧縮された画面が表示されますので、それを保存してください。

数個のファイルを圧縮してみましたが、元のサイズと比較して３０％～７０％程度圧縮されているようです。見た目もほとんど変化ありませんし、すごいですね。

このロスレス圧縮した画像をブログいアップロードしていた元の画像と差し替えて、「PageSpeed Insights」で高得点を目指しましょう。ひいては、見やすいサイトを作っていきましょう。

それでは今回の記事はこの辺で。