ページスピードを改善して表示速度が99にする方法

ブログに画像をいれることでイメージ的なメッセージを伝えられます。文字ばかりのブログだと、読み手が「字圧」のすごさに圧倒されて「なんか難しそう」というイメージをもってしまいます。。そうなると、「よくわからないからこのブログ見るのやめる」と思ってしまい結果ブログのPVが上がらなくなります。

ページ表示速度をあげる方法は簡単です。画像サイズを小さくすることです。私はこれだけでPC99 モバイル70にすることができました。

ページ速度が遅いと次の問題をかかえることになります。

  • 一生懸命書いた記事を読まれることなくすぐに帰られてしまう
  • 作った音源を聞いてもらえないおすすめのDTMアフィリエイトを紹介できない

今日はDTMブログをやっている人の多くが陥りがちな「画像の圧縮」をテーマにしながらページの読み込み速度についてお話してみたいと思います。

サイトのページ表示速度のメリット・デメリット

画像は読み手にイメージを与えるだけではなく一息つくことでリラックス効果もあります。

しかし画像のイメージと同じくらい大切なのが画像サイズです。サイズの大きい画像をのせるとサイト表示遅くなる場合があります。読み手にとってすぐに読み込まれないページはストレスです。4G時代と言われまもなく5Gになりますが、画像はできる限り軽いにこしたことはありません。格安モバイルを使う人や電波の入りが良くない場所で読んでいる人もいるのです。

ブログやHPにアクセスした時に表示される速度のことをサイトページ表示速度といいます。サイトページ表示速度のデメリットは次の通りです。

  • PVが上がらない
  • Goolgeからの評価が上がらない
  • ドメインパワーが上がらない

遅ければいつまでたってもページにアクセスできない状態になります。気になったことを調べたいのにいつまでも表示されないページを待ち続けるのはストレスです。ストレスを感じたページは今後も人が集まりにくいページとして判断されてしまうのでできる限りストレスは軽減しておくのが得策です。

ページ表示速度を改善して得られるメリットは

  • 記事の閲覧数が上がる
  • 滞在時間が増える
  • ドメインパワーが増える

などがあり、どれも自分の書いた記事を多くの人に読んでもらうために必要なことばかりが得られます。

サイトページ表示速度が遅くなる理由

サイトの情報量が多い

ブログは基本的にはテキストによるコンテンツですが、よりそのコンテンツをわかりやすくするために次の2点で補う傾向あります。

  • 画像
  • 動画

これらがサイトの情報量を増やしてしまい結果的にサイトが重くなってしまいます。他にも

  • CSS
  • JavaScript

などのプログラミング情報によってさらにサイトが重くなってしまいます。これらを軽くすることで読みやすいブログになっていくわけですが、しかしCSSやJavaScriptってなんですか?みたいな人は多いと思います(私もそうです)そこで誰でも改善できるポイントとしてまずは画像サイズを小さくするのが一番簡単でわりかし効果があります。

画像サイズを最適にする理由

DTMブログの場合で音源データを扱う場合はそれだけ数MB必要とするケースがあります。もちろんMP3などの圧縮でより小さくなるとはいえ、普通の文章だけのブログよりはるかに容量が大きいブログ構成になってしまいます。だからこそ少しでもブログを軽いものにするためにはダイエットできるところはダイエットするべきなんです。

テキスト+画像系ではそれなりの画質の方がよいかもしれませんが、DTMの場合は画像から得られる情報を基本文章で表すことができます。DTMブログの場合は画像をパッと見て概要がつかめれば十分です。

どれくらい画像サイズを小さくするべきか?

画像サイズを小さくする目安は100KB以上のファイルを小さくするのがページ表示速度において効果があります。とくにアイキャッチなどは記事一覧ページ表示される画像です。たかが100KB程度の画像でも大量に並べば1MBや2MBは超えてくるのでアイキャッチ画像のサイズに注意が必要です。

Pixabayは重い

イメージする画像を簡単に選ぶことができるPixabayは便利ですが、画像サイズとカラーによってかなり画像容量が異なります。

なのでPixaBayを使う時も知らない間に増大する容量に注意が必要です。

ユーザーは3秒あれば帰ってしまう事実

Amazonでは、レスポンスタイムが0.1秒向上したら1%収益がアップすると言われているという話があったり操作開始時間がわずか2秒遅いだけで、直帰率は50%も増加 という話もあります。

閲覧するのに3秒待たされる記事をあなたは読みたいですか?と聴かれたらおそらくNoという人の方が多いのではないでしょうか?情報過多時代とともに最新の情報がアップデートされ続けるネットの世界では記事の内容と同じくらい閲覧される速度が重要になります。

コンテンツが機能しない

作った曲に、Youtubeの動画コンテンツへの案内など様々なコンテンツもサイト表示が遅いとそれだけ見てもらえる確率が減ります。仕事が終わって学校が終わって頑張って作った曲や動画を一人でも多くの人に見てほしいのにサイトの重さが影響してそれが見てもらえないのは辛いですよね…

アフィリエイトを紹介できない

この音源は絶対使った方がいい!このプラグインは今がセールだから絶対おすすめ!などなど、良いものは誰かに紹介したくなるものです。

当然そこには「アフィリエイトによっていくらかの収益を得られる可能性があるので」買った人は良いものが手に入れられた紹介した人は紹介料をいただけた両者がWin-Winの関係になれるのがブログによるアフィリエイトの構造ですが、これもサイト速度が遅かったりするとおすすめの販促にまでこぎつけない可能性があります。

サイト速度の改善

サイト高速化のプラグインなど色々とありますが、正直どれがよいのかわからないものが多かったりもします。それにブログを書くことで精一杯の人はそこまで頭が回らない可能性もあります。そこで出来る範囲からしていくことが重要という考え方をもったときに誰でもできるのが「画像サイトの最適化」です。

DTMブログで画像圧縮?

サイト速度はpagespeed/insightsというサイトの速度を測ることができます。最近Googleのアップデートによって、速度最適化環境が「3G」になったことで多くのブログのサイト速度が悪化しました。なので目安的にはモバイルであれば30〜40PCであれば80〜95くらいの速度が出ていれば「激重で見られない」ということはないと思います。ちなみに私のモバイル環境の速度です。本当は50くらいほしいところです。

PCの環境では94とまずまずの速度です。

スコアが高ければ高いほど「ユーザービリティ」に優れているという話です。SEO的にはpagespeed/insightsスピードの結果は「大きく評価はしない」と言われていますがユーザーが来にくいサイト=Googleの評価は低いとなります。つまりある程度SEOとしての評価はあると見てもよいかもしれないと思っています。

サイト表示はユーザーにとってもブログを作る私達にとっても大事です。DTMブログは画像の他にもYoutubeのリンクや、ツイッターの埋め込みに自分で作った曲や比較音源などがサイトの速度に影響を与えてしまいます。

もちろん大事なのは

「そんなことをつべこべ言う前にコンテンツを量産してサイトをしっかりとしたものにする」ことです。しかし、大量のコンテンツを作ったあとに画像ファイルの圧縮をやり直すとなるとかなり手間です。だから、記事を作るときには画像の圧縮も一緒にやっていったほうがよいわけです。

標準的な画像ファイルを載せ方

DTM検証ブログを書いているときなどは、DAWの画像をスクリーンショットにします。やり方はSHIFT+commandをおしながら3or43の場合はデスクトップ範囲をすべてスクリーンショットとして保存できます。4の場合は選択範囲のみをスクリーンショットとして保存できます。

しかし通常ですと、保存形式がpngファイルになってしまいます。pngでは画像ファイルが大きいのでサイト速度に影響が出やすいです。なので、ターミナルを起動し「defaults write com.apple.screencapture type jpg」

と入力しEnterを押して「killall SystemUIServer」
入力すれば保存形式をJpgに変更できます。

デフォルトに戻すときは「defaults delete com.apple.screencapture type」
と入力しEnterを押して「killall SystemUIServer」これでもとのpngに戻せます。左がpng 右がJpgです。

よく見るとわかりますが、気になって仕方ないレベルではないと思います。

ちなみに下記の画像はpngファイルでの容量125KBの画像をJpegで保存すると46KBになります。

Jpg

これだけでもDTMブログの画像として使うにはそれほど問題はないと思います。

Squooshを使った場合

Squooshは画像圧縮サイトです。サイトにドラッグアンドドロップで画像を圧縮できます。

画像を読み込ませると

このような画面になり、画像サイズのリサイズから、圧縮度合いにフォーマットなど

かなり細かく設定することができます。

ちなみにこれがさきほどの46KBのJpgファイルをsquooshで圧縮した画像です。容量は17.7KBで67%の圧縮に成功しています。もちろん画像にもよりけりなのですべてが意図どおりの画質になるわけではありませんので色々と試してみる必要があります。

Squooshで画像を圧縮し続けた結果

以前は35だったモバイル環境での表示速度が63まで改善されました。他のCSSなどのややこしい部分は何もしていませんそしてこのおかげもあってPV数は一ヶ月に2000〜3000以上のペースで増加しています。

さいごに

サイトの高速化は奥が深くやりすぎると、「目的のための手段」が「手段が目的」ということになってしまうリスクがあります。大事なのは何度も言いますが「良いコンテンツの量産」です。それと同時にしたいのが誰でもできるサイト高速化の方法「画像サイズの最適化」です。

お気に入りのプラグインを紹介したり自分の音源を聞いてもらったりするのもDTMブログを作る楽しみですが、ユーザーのために一手間加えることでより長く楽しく滞在してもらえるならばサイトに適した画像サイズやクオリティにちょっとだけ気を使ってみるのは良いと思います。