はてなブロガーの皆さん、ページの表示速度を気にしたことはありますか？
自分のブログを見る時の表示速度が速いからと言って安心はできません。というのも、一度開いたことがあるページのデータは記録されており、すばやく表示できるようになっているからです。
初めてアクセスする人の表示速度はPageSpeed Insightsで計測できます。皆さんのブログで、画像を多く使っている記事のURLを入力してみてください。
赤色(0~49)は低速、黄色(50~89)は普通、緑色(90~100)は高速です。(厳密には単なる速度のスコアではありませんが、速度のスコアと思っていただいて大丈夫です)
モバイル(スマホ)とパソコンの数値を比較してみると、特にモバイルの数値が低い方が多いと思います。
私のブログだと、画像を40枚以上使っているPowerPoint(パワーポイント)でブログの画像を編集するテクニックのページでは、モバイル12・パソコン38という結果でした。
遅っ
そこで今回ご紹介する高速化テクニックを使ってみた結果、モバイルは33、パソコンは76へと改善されました。
この記事では、はてなブログでページを軽くするテクニックをご紹介します。
- ページ表示速度を上げるメリット
- はてなスターを非表示にする
- 画像をはてなフォトライフからアップロードする
- 透過させたい画像以外はJPEGにする
- テーマをシンプルなものにする
- 画像サイズを指定し、遅延読み込みさせる
ページ表示速度を上げるメリット
ページの表示速度が速いと良いことずくめです。
- 読者のストレス軽減
- ページ読み込み中に離脱する読者を減らせる
- 検索順位が上がる
逆に言えば、ページの表示速度が遅いとさまざまなデメリットがあります。
せっかく良い記事があったとしても、表示速度が遅いと読んでもらいにくいです。何か気になることがあって検索したのに、クリックしたサイトがなかなか表示されない。そんな時は、戻るボタンを押して検索画面に戻ってしまいますよね。
しかも表示速度は検索エンジンでの順位にも影響します。検索順位は「検索した人にとって価値の高い記事か」によって決まるので、表示が遅いサイトは価値が低くなってしまい、順位が下がってしまうのです。
そして悲しいことに、はてなブログの表示速度は全体的に遅いです。
その原因の1つが、はてなブログ全体で使用されているJavaScript(プログラム)なのですが、これは削除・修正できません。
PageSpeed Insightsで速度テストを行うと「使用していない JavaScript の削除」と表示される – はてな Support
つまりはてなブログの表示が遅いのは宿命なのですが、少しでもページを軽くしたいですよね。はてなブログ高速化のためのテクニックを、簡単なものから順にご紹介します。
はてなスターを非表示にする
はてなスターはページ表示が遅れる原因の1つです。スターの横に並ぶたくさんのアイコン画像やプログラムの読み込みに時間がかかります。
「ダッシュボード」→「デザイン」→「記事」からON/OFFを切り替えられます。
「はてなスターが記事を書くモチベーションです」という方以外はスターを消してしまうのがオススメです。
はてなスターはぶっちゃけ「既読」ぐらいの意味で使っている方が多いと思います。本当に良い記事だと思ったら「はてなブックマーク」を使いますよね。
他のブロガーにスターをつけてもらうのは嬉しいことですが、「集客」「収益」を少しでもアップさせたいのであれば、重視すべきは検索エンジンから読みに来てくれる一般の人です。
画像をはてなフォトライフからアップロードする
はてなフォトライフについて
はてなフォトライフとは、オンラインで保存できるアルバムのようなものです。ブログの編集画面で投稿した画像はすべてはてなフォトライフに保存されるので、多くの方が無意識に使っているサービスです。
初期設定のままだと、はてなブログの編集画面で投稿された画像の長い辺は1200ピクセルに調節されます。(ピクセルは大きさの単位)
一方、はてなフォトライフからアップロードされた画像の長い辺は800ピクセルになります。
はてなフォトライフから画像をアップすることで、画像のサイズが小さくなり、データ量を半分ほどにすることができます。すなわち、ページの表示速度を上げることができるのです。
はてなフォトライフから画像をアップロードする方法
はてなフォトライフにアクセスし、右上の「アップロード」をクリック。
画面右側にあるフォルダを「トップ」から「Hatena Blog」に変更してから、左側の点線で囲まれているところをクリックし、画像を選んでアップロードします。
はてなブログの編集画面を開くと、アップロードした画像が貼り付けられるようになっています。
ちなみに、先ほどのアップロード画面で「トップ」のフォルダにアップロードした場合でも、フォルダを切り替えて画像を貼り付けることが可能です。
はてなフォトライフで画像のデータ量をさらに減らす方法
はてなフォトライフの設定を変更し、サイズや画質を落としてデータ量をさらに減らすことができます。
はてなフォトライフにアクセスし、右上の「アップロード」の横にある「設定」をクリック。
「画像サイズ」や「画質」の数値を下げ、「この内容に変更する」をクリックします。
例えば、画像サイズを600ピクセルに落とすとデータ量は3分の2になり、画質を80%に落とすとデータ量は3分の1になります。
そのかわり画像の見ばえが悪くなるので、少しずつ下げて行って自分が許せるラインを探るとよいです。
ちなみに私の場合、サイズは800ピクセルのままで、画質を90%に落としています。
注意：画像の形式がPNGの場合、はてなフォトライフで画質を落としてもデータ量は減りません。
例えばこちらの画像をアップロードした場合、データ量は以下の表のようになります。
| PNG | JPEG | |
|---|---|---|
| 800ピクセル,100% | 146KB | 99KB |
| 800ピクセル,80% | 146KB | 34KB |
| 600ピクセル,100% | 96KB | 67KB |
| 600ピクセル,80% | 96KB | 25KB |
「PNG・JPEGって何…？」という方のために簡単に説明すると、PNGはキレイで重い画像、JPEGはキレイさで劣るものの軽い画像、といった感じです。
PNG形式の画像は圧縮ツールを使ってデータ量を落としてからアップロードしても、アップロードすることで圧縮がもとに戻ってしまう仕様になっています。
画像の形式は拡張子(ファイル名の最後についているアルファベット)を見ればわかります。ファイル名の最後が「.png」ならPNGで、「.jpg」ならJPEGです。
ファイルの拡張子を表示する方法はこちらのページをご覧ください。
Windows10 - ファイルの拡張子を表示/非表示にする - PC設定のカルマ
PNG形式の画像のデータ量を落としたい場合、サイズを800ピクセルより小さくするか、後でご紹介するPNG・JPEG変換ツールをご利用ください。
透過させたい画像以外はJPEGにする
さらに画像のデータ量を落としたい！という方は、画像の形式をPNGではなくJPEGでアップロードするとよいです。
PNGをJPEGに変換してくれるオススメのサイトはこちら。
PNG JPG 変換 – PNGをJPGに変換
オンラインの変換ツールを使いたくない方には、私も使用しているフリーソフト「XnConvert」がオススメです。ダウンロードはこちら。
XnConvert · Batch Image Converter | XnView.com
XnConvertの使用方法はこちらの記事をご覧ください。
一括で画像形式を変換できるXnConvertをダウンロード、インストール | Freeでフル活用
それぞれのツールの使い方がわからない方は、コメントやtwitterのDMをくだされば対応いたします。
| PNG | JPEG | |
|---|---|---|
| 800ピクセル,100% | 146KB | 99KB |
| 800ピクセル,80% | 146KB | 34KB |
| 600ピクセル,100% | 96KB | 67KB |
| 600ピクセル,80% | 96KB | 25KB |
はてなフォトライフの設定が同じでも、ファイルの形式をPNGからJPEGにするだけでずいぶんとデータ量を落とせます。
ただし、イラスト・文字の入った画像をJPEGにすると目に見えて画質が落ちます。また、背景の透過はPNGでしか表現できません。キレイに表示したいイラストや背景を透過させたい画像だけはPNGのままアップロードするとよいです。
はてなフォトライフにJPEGの画像をアップロードすることで、画像を40枚以上使っていた記事の速度スコアもわずかながら上昇しました。
テーマをシンプルなものにする
他にもはてなブログの表示速度を上げる方法として、「テーマをシンプルで軽いものにする」という手があります。
私はCappuccinoがオシャレで気に入っていたのですが、装飾が多くサイトが重くなっていると感じたので、装飾の少ないUnderShirtにテーマを変更しました。
その結果、スコアが15から20にアップ！
今使っているテーマを気に入ってカスタマイズしている方も多いと思います。テーマ変更には勇気と労力が必要ですが、特にこだわりの無い方はMinimalismなどのシンプルなテーマに変えると、表示速度が大きく改善される可能性があります。
画像サイズを指定し、遅延読み込みさせる
画像の遅延読み込みについて
最終兵器「画像の遅延読み込み」は大きな効果を発揮します。
ただ、HTMLの編集をやったことがない方には少し難しいかもしれません。
画像を大量に使う記事でPageSpeed Insightsの「改善できる項目」を見ると、「使用していないJavaScriptの削除」「オフスクリーン画像の遅延読み込み」が特に大きいことがわかります。
「使用していないJavaScriptの削除」については、はてなブログで共通して使われているJavaScriptの影響が大きく、ほぼ改善することができません。
そこで着手すべきが「画像の遅延読み込み」です。
「遅延読み込み」を有効にしていない場合、記事の下の方にある画像も一気に読み込もうとしてしまうので、画面を完全に表示できるまでの時間が長くなってしまいます。
一方「遅延読み込み」を有効にすると、記事の下の方にある画像(オフスクリーン画像)は、その近くまでスクロールされて初めて読み込まれるので、最初に画面を表示できるまでの時間が短くなります。
画像の遅延読み込みを有効にする方法
「遅延読み込み」を有効にするためには、HTMLのimgタグ内に「loading="lazy"」と記述します。加えて、画像サイズ(width/height)を指定してください。画像サイズについては後で解説します。
例えば、はてなブログで普通にアップロードした画像をHTML編集で見るとこんな感じになっていますよね。
imgタグ内に「loading="lazy" width="500" height="400"」などと書き足します。imgタグ内なら場所はどこでも良いです。
これで遅延読み込みが有効になります。
ちなみに、画像サイズを指定しなくても「loading="lazy"」だけで遅延読み込みは有効になりますが、先に読み込まれた文章が後から読み込まれる画像によってずれてしまいます。
ずれを防ぐためには画像サイズを指定して、読み込み中も画像の場所を確保しておく必要があります。
はてなブログのHTML編集画面は少し見にくいので、Atomなどの無料エディタを使うのがオススメです。使い方はこちらの記事をご覧ください。
画像サイズの決め方
先ほどは「width="500" height="400"」などと適当な数字を書きましたが、実際は幅(width)と高さ(height)を画像の縦横比に合わせて記述します。
縦と横の割合が変わると画像がゆがんでしまうためです。
エクスプローラーで画像にカーソルを合わせると、画像の大きさが表示されます。
エクスプローラーの数字の通りwidthとheightを設定してもOKです。
ただし、はてなフォトライフで設定された数値よりも大きい画像は縮小されているので、画質の落ちた画像が元のサイズでアップされてしまいます。
そこで「ブログの編集画面で画像の角をドラッグしてサイズを表示させる」というテクニックがあります。
画像の角をドラッグして大きさを調節する途中で「208×278」などと表示されるので、この場合は「width="208" height="278"」とHTMLのimgタグ内に記述します。
見たまま編集で画像をドラッグするだけだと幅(width)しか指定されないので、遅延読み込みを有効にする際は高さ(height)の指定もお忘れなく。
他の方法として、長い辺をはてなフォトライフの設定に合わせ、短い方の辺を同じ割合で短くするという手もあります。
例えば、サイズが888×485の画像をはてなフォトライフにアップした場合のサイズは以下の通りです。
幅 ：888×(800/888)=800ピクセル
高さ：485×(800/888)=437ピクセル
長い方の辺は800ピクセルと決まっているので、画像が(800/888)の大きさになっています。短い方の辺もそれと同じ(800/888)をかけることで、フォトライフで縮小された後のサイズがわかります。
遅延読み込みの作業は結構時間がかかるので、検索エンジンからのアクセスが多い人気の記事だけやっておくのがオススメです。
操作や説明でわからないところがあったら、お気軽にコメントしてくださいね。
関連記事
